Paddy/RaPla-Middleware-LinkGen
1
0
Fork 0
Code Issues 6 Pull Requests Projects Releases Wiki Activity

💄 added Modal for better UX
All checks were successful
Jenkins Production Deployment
Details

Browse Source
This commit is contained in:
liza-kl 2021-10-11 09:01:09 +02:00
parent 926a2d80b2
commit e573e56fcb
3 changed files with 35 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
index.html
View File

@ -26,7 +26,7 @@
<div class="content"> <div class="content">
<nav class="raplalinkcontainer--nav row" id="raplalinkcontainer--nav"> <nav class="raplalinkcontainer--nav row" id="raplalinkcontainer--nav">
<div class="raplalinkcontainer--nav__text col-11"> <div class="raplalinkcontainer--nav__text col-11">
RaPla Middleware Link Generator <span>RaPla Middleware Link Generator</span>
</div> </div>
<i class="raplalinkcontainer__header--button col-1 far fa-moon" id="colorModeToggleIcon" <i class="raplalinkcontainer__header--button col-1 far fa-moon" id="colorModeToggleIcon"
onclick="toggleDarkMode()"> onclick="toggleDarkMode()">
@ -45,11 +45,6 @@
guarantee guarantee
that this tool works exactly as expected all the time. Please don't only rely on this tool working that this tool works exactly as expected all the time. Please don't only rely on this tool working
perfectly.</p> perfectly.</p>
<p>If you have any questions or bugs, contact me via one of the options on <a
href="https://www.p4ddy.com" target="_blank">p4ddy.com</a>.
Also huge thanks to <a href="https://www.li54.dev" target="_blank">Lisa</a> for the styling of this
page :)
</p>
</div> </div>
</div> </div>
<!-- // PREFACE --> <!-- // PREFACE -->
@ -128,16 +123,34 @@
<!-- // PROFILMODUL --> <!-- // PROFILMODUL -->
<!-- GENERATE LINK BUTTON --> <!-- GENERATE LINK BUTTON -->
<input type="button" class="btn btn-outline-secondary" id="submitBtn" value="Generate Link"> <input type="button" class="btn btn-outline-secondary" id="submitBtn" value="Generate Link" data-bs-toggle="modal" data-bs-target="#linkModal">
<!-- // GENERATE LINK BUTTON --> <!-- // GENERATE LINK BUTTON -->
</form> </form>
</div> </div>
<div class="raplalinkcontainer--nav__subtext">Made with <img height="10" src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/microsoft/309/red-heart_2764-fe0f.png"/> by <a href="https://www.p4ddy.com">Paddy</a> & <a href="https://www.li54.dev">Lisa</a></div>
<div class="raplalinkcontainer--link"> <!-- Modal -->
<p>Here is the link that you can use for importing RaPla into your iCloud etc. calendar (click to copy):</p> <div class="modal fade" id="linkModal" tabindex="-1" aria-labelledby="linkModalSuccess" aria-hidden="true">
<p id="full-link"></p> <div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="linkModalTitle"></h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="raplalinkcontainer--link">
<p id="raplalinkcontainer--link"></p>
</div>
<p id="full-link"></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" id="raplalinkcontainer--closeButton" data-bs-dismiss="modal"></button>
</div>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
</body> </body>
</html> </html>

7
scripts.js
View File

@ -37,7 +37,9 @@ function generateLink() {
raplaUser = url.searchParams.get('user'); raplaUser = url.searchParams.get('user');
raplaFile = url.searchParams.get('file'); raplaFile = url.searchParams.get('file');
} else { } else {
$('#full-link').text('Please provide either a course or a RaPla Link!'); $('#linkModalTitle').text('Oh No!');
$('#raplalinkcontainer--link').text('Please provide either a course or a RaPla Link!');
$('#raplalinkcontainer--closeButton').text('Gonna Do that!');
return; return;
} }
} else { } else {
@ -58,7 +60,10 @@ function generateLink() {
base_url += '&wahl=' + selectedElectiveModule; base_url += '&wahl=' + selectedElectiveModule;
base_url += '&pflicht=' + selectedProfileModule; base_url += '&pflicht=' + selectedProfileModule;
$('#linkModalTitle').text('Your RaPla Link 🥳 ');
$('#raplalinkcontainer--link').text('Here is the link that you can use for importing RaPla into your iCloud etc. calendar (click to copy)');
$('#full-link').text(base_url); $('#full-link').text(base_url);
$('#raplalinkcontainer--closeButton').text('Thank you for using');
} }
let courseLinks = { let courseLinks = {

9
styles.css
View File

@ -13,6 +13,7 @@ body {
height: 100vh; height: 100vh;
font-family: Nunito, sans-serif; font-family: Nunito, sans-serif;
display: flex; display: flex;
flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
@ -25,6 +26,11 @@ body {
height: 10%; height: 10%;
} }
.raplalinkcontainer--nav__subtext {
font-weight: 100;
font-size: 0.75em;
text-align: center;
}
@ -88,8 +94,5 @@ body {
color: #222222; color: #222222;
} }
.raplalinkcontainer--link {
padding: 1.3em;
}