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">
<nav class="raplalinkcontainer--nav row" id="raplalinkcontainer--nav">
<div class="raplalinkcontainer--nav__text col-11">
RaPla Middleware Link Generator
<span>RaPla Middleware Link Generator</span>
</div>
<i class="raplalinkcontainer__header--button col-1 far fa-moon" id="colorModeToggleIcon"
onclick="toggleDarkMode()">
@ -45,11 +45,6 @@
guarantee
that this tool works exactly as expected all the time. Please don't only rely on this tool working
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>
<!-- // PREFACE -->
@ -128,16 +123,34 @@
<!-- // PROFILMODUL -->
<!-- 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 -->
</form>
</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">
<p>Here is the link that you can use for importing RaPla into your iCloud etc. calendar (click to copy):</p>
<p id="full-link"></p>
<!-- Modal -->
<div class="modal fade" id="linkModal" tabindex="-1" aria-labelledby="linkModalSuccess" aria-hidden="true">
<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>
</body>
</html>

7
scripts.js
View File

@ -37,7 +37,9 @@ function generateLink() {
raplaUser = url.searchParams.get('user');
raplaFile = url.searchParams.get('file');
} 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;
}
} else {
@ -58,7 +60,10 @@ function generateLink() {
base_url += '&wahl=' + selectedElectiveModule;
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);
$('#raplalinkcontainer--closeButton').text('Thank you for using');
}
let courseLinks = {

9
styles.css
View File

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