From 0529ac760bf2f3db2d8cb0e4dc69c3fae9d22f78 Mon Sep 17 00:00:00 2001 From: Matthew Gray <44288823+mmoomocow@users.noreply.github.com> Date: Wed, 17 May 2023 14:44:38 +1200 Subject: [PATCH 01/10] refactor(static-files): :twisted_rightwards_arrows: Merge nav styles into base css Navigation CSS that was in nav.css has been merge into base.css to reduce document load requests Signed-off-by: Matthew Gray <44288823+mmoomocow@users.noreply.github.com> --- home/static/css/base.css | 73 ++++++++++++++++++++++++++++++++++++ home/static/css/base.min.css | 2 +- home/static/css/nav.css | 70 ---------------------------------- home/static/css/nav.min.css | 1 - home/templates/base.html | 1 - 5 files changed, 74 insertions(+), 73 deletions(-) delete mode 100644 home/static/css/nav.css delete mode 100644 home/static/css/nav.min.css diff --git a/home/static/css/base.css b/home/static/css/base.css index 87471c9..d8dfbe0 100644 --- a/home/static/css/base.css +++ b/home/static/css/base.css @@ -165,4 +165,77 @@ h5 { h6 { font-family: 'Oswald', sans-serif; font-size: 0.8rem; +} + + + +/* Navbar container */ +nav { + overflow: hidden; + background-color: var(--color-green); + font-size: 1.3em; +} + +/* Links inside the navbar */ +nav a, +nav span { + float: left; + background-color: var(--color-green); + color: var(--color-gold); + transition: background-color 0.3s ease-in, color 0.3s ease-in; + text-align: center; + text-decoration: none; + padding: 0.25rem 0.5rem; +} + +/* The dropdown container */ +.dropdown { + float: left; + overflow: hidden; +} + +/* Dropdown button */ +.dropdown .dropbtn { + border: none; + outline: none; + background-color: inherit; + font-family: inherit; + /* Important for vertical align on mobile phones */ + margin: 0; + /* Important for vertical align on mobile phones */ +} + +/* Add a red background color to navbar links on hover */ +nav a:hover, +.dropdown:hover .dropbtn { + background-color: var(--color-gold); + color: var(--color-green); +} + +/* Dropdown content (hidden by default) */ +.dropdown-content { + display: none; + position: absolute; + background-color: var(--color-green); + color: var(--color-gold); + min-width: 160px; + box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); + z-index: 1; +} + +/* Links inside the dropdown */ +.dropdown-content a { + float: none; + text-decoration: none; + display: block; + text-align: left; +} + +/* Show the dropdown menu on hover */ +.dropdown:hover .dropdown-content { + display: block; +} + +.dropbtn::after { + content: " \25bc"; } \ No newline at end of file diff --git a/home/static/css/base.min.css b/home/static/css/base.min.css index 33fb730..8bc4254 100644 --- a/home/static/css/base.min.css +++ b/home/static/css/base.min.css @@ -1 +1 @@ -@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@600&display=swap');@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500&display=swap');:root{--color-gold:#FFD614;--color-green:#005239;--color-grey-light:#cccccc;--color-grey-dark:#393939;}.right{float:right;}.left{float:left;}.textCenter{text-align:center;}.textRight{text-align:right;}.textLeft{text-align:left;}html,body{margin:0;padding:0;font-family:'Comfortaa',sans-serif;font-size:16px;line-height:1.5;background-color:var(--color-grey-light);color:var(--color-grey-dark);min-height:100vh;max-width:100vw;overflow-x:hidden;position:relative;}main{width:80vw;margin-left:10vw;}footer{min-height:14.5vh;box-sizing:border-box;background-color:var(--color-green);padding:1.5vh 1vw;color:var(--color-gold);position:absolute;bottom:0;width:100vw;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));grid-template-rows:1fr;}footer a{color:var(--color-gold);}footer li{list-style:none;}footer div{padding:.5rem;}.requiredField{color:red;text-decoration:none;}.messages{margin:0;display:block;padding:0;}.messages li{list-style:none;margin:0;padding:2px 0 2px 10px;display:block;transition:opacity .3s ease-in-out;}.messages span.closeBTN{padding-right:5px;float:right;cursor:pointer;}.messages .info{background-color:#2ae2e8;font-weight:bold;}.messages .success{background-color:#36dd36;font-weight:bold;}.messages .warning{background-color:#ff9d14;font-weight:bold;}.messages .error{color:white;background-color:#e90000;font-weight:bold;}hr{border:0;height:2px;background-color:var(--color-grey-dark);width:90%;margin:10px 11px;}.justify{text-align:justify;}h1{font-family:'Oswald',sans-serif;font-size:3rem;}h2{font-family:'Oswald',sans-serif;font-size:2rem;}h3{font-family:'Oswald',sans-serif;font-size:1.5rem;}h4{font-size:1.2rem;font-family:'Oswald',sans-serif;}h5{font-family:'Oswald',sans-serif;font-size:1rem;}h6{font-family:'Oswald',sans-serif;font-size:.8rem;} \ No newline at end of file +@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@600&display=swap');@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500&display=swap');:root{--color-gold:#FFD614;--color-green:#005239;--color-grey-light:#cccccc;--color-grey-dark:#393939}.right{float:right}.left{float:left}.textCenter{text-align:center}.textRight{text-align:right}.textLeft{text-align:left}html,body{margin:0;padding:0;font-family:'Comfortaa',sans-serif;font-size:16px;line-height:1.5;background-color:var(--color-grey-light);color:var(--color-grey-dark);min-height:100vh;max-width:100vw;overflow-x:hidden;position:relative}main{width:80vw;margin-left:10vw}footer{min-height:14.5vh;box-sizing:border-box;background-color:var(--color-green);padding:1.5vh 1vw;color:var(--color-gold);position:absolute;bottom:0;width:100vw;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));grid-template-rows:1fr}footer a{color:var(--color-gold)}footer li{list-style:none}footer div{padding:.5rem}.requiredField{color:red;text-decoration:none}.messages{margin:0;display:block;padding:0}.messages li{list-style:none;margin:0;padding:2px 0 2px 10px;display:block;transition:opacity .3s ease-in-out}.messages span.closeBTN{padding-right:5px;float:right;cursor:pointer}.messages .info{background-color:#2ae2e8;font-weight:bold}.messages .success{background-color:#36dd36;font-weight:bold}.messages .warning{background-color:#ff9d14;font-weight:bold}.messages .error{color:white;background-color:#e90000;font-weight:bold}hr{border:0;height:2px;background-color:var(--color-grey-dark);width:90%;margin:10px 11px}.justify{text-align:justify}h1{font-family:'Oswald',sans-serif;font-size:3rem}h2{font-family:'Oswald',sans-serif;font-size:2rem}h3{font-family:'Oswald',sans-serif;font-size:1.5rem}h4{font-size:1.2rem;font-family:'Oswald',sans-serif}h5{font-family:'Oswald',sans-serif;font-size:1rem}h6{font-family:'Oswald',sans-serif;font-size:.8rem}nav{overflow:hidden;background-color:var(--color-green);font-size:1.3em}nav a,nav span{float:left;background-color:var(--color-green);color:var(--color-gold);transition:background-color .3s ease-in,color .3s ease-in;text-align:center;text-decoration:none;padding:.25rem .5rem}.dropdown{float:left;overflow:hidden}.dropdown .dropbtn{border:none;outline:none;background-color:inherit;font-family:inherit;margin:0}nav a:hover,.dropdown:hover .dropbtn{background-color:var(--color-gold);color:var(--color-green)}.dropdown-content{display:none;position:absolute;background-color:var(--color-green);color:var(--color-gold);min-width:160px;box-shadow:0 8px 16px 0 rgba(0,0,0,.2);z-index:1}.dropdown-content a{float:none;text-decoration:none;display:block;text-align:left}.dropdown:hover .dropdown-content{display:block}.dropbtn::after{content:" \25bc"} \ No newline at end of file diff --git a/home/static/css/nav.css b/home/static/css/nav.css deleted file mode 100644 index a8e8f6b..0000000 --- a/home/static/css/nav.css +++ /dev/null @@ -1,70 +0,0 @@ -/* Navbar container */ -nav { - overflow: hidden; - background-color: var(--color-green); - font-size: 1.3em; -} - -/* Links inside the navbar */ -nav a, -nav span { - float: left; - background-color: var(--color-green); - color: var(--color-gold); - transition: background-color 0.3s ease-in, color 0.3s ease-in; - text-align: center; - text-decoration: none; - padding: 0.25rem 0.5rem; -} - -/* The dropdown container */ -.dropdown { - float: left; - overflow: hidden; -} - -/* Dropdown button */ -.dropdown .dropbtn { - border: none; - outline: none; - background-color: inherit; - font-family: inherit; - /* Important for vertical align on mobile phones */ - margin: 0; - /* Important for vertical align on mobile phones */ -} - -/* Add a red background color to navbar links on hover */ -nav a:hover, -.dropdown:hover .dropbtn { - background-color: var(--color-gold); - color: var(--color-green); -} - -/* Dropdown content (hidden by default) */ -.dropdown-content { - display: none; - position: absolute; - background-color: var(--color-green); - color: var(--color-gold); - min-width: 160px; - box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); - z-index: 1; -} - -/* Links inside the dropdown */ -.dropdown-content a { - float: none; - text-decoration: none; - display: block; - text-align: left; -} - -/* Show the dropdown menu on hover */ -.dropdown:hover .dropdown-content { - display: block; -} - -.dropbtn::after { - content: " \25bc"; -} \ No newline at end of file diff --git a/home/static/css/nav.min.css b/home/static/css/nav.min.css deleted file mode 100644 index 997c7d6..0000000 --- a/home/static/css/nav.min.css +++ /dev/null @@ -1 +0,0 @@ -nav{overflow:hidden;background-color:var(--color-green);font-size:1.3em}nav a,nav span{float:left;background-color:var(--color-green);color:var(--color-gold);transition:background-color .3s ease-in,color .3s ease-in;text-align:center;text-decoration:none;padding:.25rem .5rem}.dropdown{float:left;overflow:hidden}.dropdown .dropbtn{border:none;outline:0;background-color:inherit;font-family:inherit;margin:0}.dropdown:hover .dropbtn,nav a:hover{background-color:var(--color-gold);color:var(--color-green)}.dropdown-content{display:none;position:absolute;background-color:var(--color-green);color:var(--color-gold);min-width:160px;box-shadow:0 8px 16px 0 rgba(0,0,0,.2);z-index:1}.dropdown-content a{float:none;text-decoration:none;display:block;text-align:left}.dropdown:hover .dropdown-content{display:block}.dropbtn::after{content:" \25bc"} \ No newline at end of file diff --git a/home/templates/base.html b/home/templates/base.html index e7a130e..1f9ecc9 100644 --- a/home/templates/base.html +++ b/home/templates/base.html @@ -12,7 +12,6 @@ - {% block head %} From d2d20b364446dc713379804752d090ae32f84b35 Mon Sep 17 00:00:00 2001 From: Matthew Gray <44288823+mmoomocow@users.noreply.github.com> Date: Thu, 18 May 2023 19:29:27 +1200 Subject: [PATCH 02/10] fix(static-files): :iphone: Prevent footer covering content Body now acts as flex with main using flex1 Signed-off-by: Matthew Gray <44288823+mmoomocow@users.noreply.github.com> --- home/static/css/base.css | 23 ++++++++++++++++++++--- home/static/css/base.min.css | 2 +- home/static/js/base.js | 17 +---------------- home/static/js/base.min.js | 2 +- 4 files changed, 23 insertions(+), 21 deletions(-) diff --git a/home/static/css/base.css b/home/static/css/base.css index d8dfbe0..e7582d7 100644 --- a/home/static/css/base.css +++ b/home/static/css/base.css @@ -39,15 +39,19 @@ body { line-height: 1.5; background-color: var(--color-grey-light); color: var(--color-grey-dark); - min-height: 100vh; max-width: 100vw; overflow-x: hidden; position: relative; + display: flex; + flex-direction: column; + min-height: 100vh; } main { width: 80vw; margin-left: 10vw; + margin-bottom: 5vh; + flex: 1; } footer { @@ -56,9 +60,9 @@ footer { background-color: var(--color-green); padding: 1.5vh 1vw; color: var(--color-gold); - position: absolute; - bottom: 0; width: 100vw; + text-align: center; + font-size: small; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); @@ -69,6 +73,19 @@ footer a { color: var(--color-gold); } +footer ul { + padding: 0; + margin: 0; + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: center; +} + +footer a { + color: var(--color-gold); +} + footer li { list-style: none; } diff --git a/home/static/css/base.min.css b/home/static/css/base.min.css index 8bc4254..5775b70 100644 --- a/home/static/css/base.min.css +++ b/home/static/css/base.min.css @@ -1 +1 @@ -@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@600&display=swap');@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500&display=swap');:root{--color-gold:#FFD614;--color-green:#005239;--color-grey-light:#cccccc;--color-grey-dark:#393939}.right{float:right}.left{float:left}.textCenter{text-align:center}.textRight{text-align:right}.textLeft{text-align:left}html,body{margin:0;padding:0;font-family:'Comfortaa',sans-serif;font-size:16px;line-height:1.5;background-color:var(--color-grey-light);color:var(--color-grey-dark);min-height:100vh;max-width:100vw;overflow-x:hidden;position:relative}main{width:80vw;margin-left:10vw}footer{min-height:14.5vh;box-sizing:border-box;background-color:var(--color-green);padding:1.5vh 1vw;color:var(--color-gold);position:absolute;bottom:0;width:100vw;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));grid-template-rows:1fr}footer a{color:var(--color-gold)}footer li{list-style:none}footer div{padding:.5rem}.requiredField{color:red;text-decoration:none}.messages{margin:0;display:block;padding:0}.messages li{list-style:none;margin:0;padding:2px 0 2px 10px;display:block;transition:opacity .3s ease-in-out}.messages span.closeBTN{padding-right:5px;float:right;cursor:pointer}.messages .info{background-color:#2ae2e8;font-weight:bold}.messages .success{background-color:#36dd36;font-weight:bold}.messages .warning{background-color:#ff9d14;font-weight:bold}.messages .error{color:white;background-color:#e90000;font-weight:bold}hr{border:0;height:2px;background-color:var(--color-grey-dark);width:90%;margin:10px 11px}.justify{text-align:justify}h1{font-family:'Oswald',sans-serif;font-size:3rem}h2{font-family:'Oswald',sans-serif;font-size:2rem}h3{font-family:'Oswald',sans-serif;font-size:1.5rem}h4{font-size:1.2rem;font-family:'Oswald',sans-serif}h5{font-family:'Oswald',sans-serif;font-size:1rem}h6{font-family:'Oswald',sans-serif;font-size:.8rem}nav{overflow:hidden;background-color:var(--color-green);font-size:1.3em}nav a,nav span{float:left;background-color:var(--color-green);color:var(--color-gold);transition:background-color .3s ease-in,color .3s ease-in;text-align:center;text-decoration:none;padding:.25rem .5rem}.dropdown{float:left;overflow:hidden}.dropdown .dropbtn{border:none;outline:none;background-color:inherit;font-family:inherit;margin:0}nav a:hover,.dropdown:hover .dropbtn{background-color:var(--color-gold);color:var(--color-green)}.dropdown-content{display:none;position:absolute;background-color:var(--color-green);color:var(--color-gold);min-width:160px;box-shadow:0 8px 16px 0 rgba(0,0,0,.2);z-index:1}.dropdown-content a{float:none;text-decoration:none;display:block;text-align:left}.dropdown:hover .dropdown-content{display:block}.dropbtn::after{content:" \25bc"} \ No newline at end of file +@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@600&display=swap');@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500&display=swap');:root{--color-gold:#FFD614;--color-green:#005239;--color-grey-light:#cccccc;--color-grey-dark:#393939}.right{float:right}.left{float:left}.textCenter{text-align:center}.textRight{text-align:right}.textLeft{text-align:left}html,body{margin:0;padding:0;font-family:'Comfortaa',sans-serif;font-size:16px;line-height:1.5;background-color:var(--color-grey-light);color:var(--color-grey-dark);max-width:100vw;overflow-x:hidden;position:relative;display:flex;flex-direction:column;min-height:100vh}main{width:80vw;margin-left:10vw;margin-bottom:5vh;flex:1}footer{min-height:14.5vh;box-sizing:border-box;background-color:var(--color-green);padding:1.5vh 1vw;color:var(--color-gold);width:100vw;text-align:center;font-size:small;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));grid-template-rows:1fr}footer a{color:var(--color-gold)}footer ul{padding:0;margin:0;display:flex;flex-direction:column;justify-content:space-between;align-items:center}footer a{color:var(--color-gold)}footer li{list-style:none}footer div{padding:.5rem}.requiredField{color:red;text-decoration:none}.messages{margin:0;display:block;padding:0}.messages li{list-style:none;margin:0;padding:2px 0 2px 10px;display:block;transition:opacity .3s ease-in-out}.messages span.closeBTN{padding-right:5px;float:right;cursor:pointer}.messages .info{background-color:#2ae2e8;font-weight:bold}.messages .success{background-color:#36dd36;font-weight:bold}.messages .warning{background-color:#ff9d14;font-weight:bold}.messages .error{color:white;background-color:#e90000;font-weight:bold}hr{border:0;height:2px;background-color:var(--color-grey-dark);width:90%;margin:10px 11px}.justify{text-align:justify}h1{font-family:'Oswald',sans-serif;font-size:3rem}h2{font-family:'Oswald',sans-serif;font-size:2rem}h3{font-family:'Oswald',sans-serif;font-size:1.5rem}h4{font-size:1.2rem;font-family:'Oswald',sans-serif}h5{font-family:'Oswald',sans-serif;font-size:1rem}h6{font-family:'Oswald',sans-serif;font-size:.8rem}nav{overflow:hidden;background-color:var(--color-green);font-size:1.3em}nav a,nav span{float:left;background-color:var(--color-green);color:var(--color-gold);transition:background-color .3s ease-in,color .3s ease-in;text-align:center;text-decoration:none;padding:.25rem .5rem}.dropdown{float:left;overflow:hidden}.dropdown .dropbtn{border:none;outline:none;background-color:inherit;font-family:inherit;margin:0}nav a:hover,.dropdown:hover .dropbtn{background-color:var(--color-gold);color:var(--color-green)}.dropdown-content{display:none;position:absolute;background-color:var(--color-green);color:var(--color-gold);min-width:160px;box-shadow:0 8px 16px 0 rgba(0,0,0,.2);z-index:1}.dropdown-content a{float:none;text-decoration:none;display:block;text-align:left}.dropdown:hover .dropdown-content{display:block}.dropbtn::after{content:" \25bc"} \ No newline at end of file diff --git a/home/static/js/base.js b/home/static/js/base.js index 00c1b8c..2d5395f 100644 --- a/home/static/js/base.js +++ b/home/static/js/base.js @@ -12,19 +12,4 @@ setTimeout(() => { for (let i = 0; i < messages.length; i++) { hideSelf(messages[i]); } -}, 15000); - -// Add the correct padding to the bottom of the main content -// so that the content is not hidden behind the footer - -function setMainPadding() { - let footerHeight = document.getElementsByTagName("footer")[0].offsetHeight; - let mainContent = document.getElementsByTagName("main")[0]; - let margin = footerHeight + 50; - mainContent.style.marginBottom = margin + "px"; -} - -// Deferring the execution of the function until the page is loaded -window.onload = function () { - setMainPadding(); -}; +}, 15000); \ No newline at end of file diff --git a/home/static/js/base.min.js b/home/static/js/base.min.js index 7b934a8..c6fd148 100644 --- a/home/static/js/base.min.js +++ b/home/static/js/base.min.js @@ -1 +1 @@ -function hideSelf(element){element.style.opacity="0",setTimeout(()=>{element.style.display="none"},300)}function setMainPadding(){let footerHeight,mainContent,margin=document.getElementsByTagName("footer")[0].offsetHeight+50;document.getElementsByTagName("main")[0].style.marginBottom=margin+"px"}setTimeout(()=>{let messages=document.getElementsByClassName("message");for(let i=0;i{e.style.display="none"}),300)}setTimeout((()=>{let e=document.getElementsByClassName("message");for(let t=0;t Date: Thu, 18 May 2023 21:35:23 +1200 Subject: [PATCH 03/10] feat(static-files): :recycle: Refactor navbar CSS and add mobile friendly nav Adds mobile friendly navbar with a hamburger toggle and includes the the teacher dropdown Signed-off-by: Matthew Gray <44288823+mmoomocow@users.noreply.github.com> --- home/static/css/base.css | 102 +++++++++++++++++++++++++---------- home/static/css/base.min.css | 2 +- 2 files changed, 75 insertions(+), 29 deletions(-) diff --git a/home/static/css/base.css b/home/static/css/base.css index e7582d7..cba7dc2 100644 --- a/home/static/css/base.css +++ b/home/static/css/base.css @@ -185,74 +185,120 @@ h6 { } - -/* Navbar container */ nav { - overflow: hidden; background-color: var(--color-green); - font-size: 1.3em; + overflow: hidden; } -/* Links inside the navbar */ -nav a, -nav span { +nav a { float: left; - background-color: var(--color-green); color: var(--color-gold); - transition: background-color 0.3s ease-in, color 0.3s ease-in; text-align: center; + padding: 5px 10px; text-decoration: none; - padding: 0.25rem 0.5rem; + font-size: 1.2rem; + margin: 0px; +} + +nav .icon { + display: none; } -/* The dropdown container */ .dropdown { float: left; overflow: hidden; } -/* Dropdown button */ .dropdown .dropbtn { + font-size: 1.2rem; border: none; outline: none; + color: var(--color-gold); + padding: 5px 10px; background-color: inherit; font-family: inherit; - /* Important for vertical align on mobile phones */ margin: 0; - /* Important for vertical align on mobile phones */ + + /* Make button same height as the A tags that are slightly larger */ + height: 2.425rem; } -/* Add a red background color to navbar links on hover */ -nav a:hover, -.dropdown:hover .dropbtn { - background-color: var(--color-gold); - color: var(--color-green); +.dropbtn::after { + content: " \25bc"; } -/* Dropdown content (hidden by default) */ .dropdown-content { display: none; position: absolute; - background-color: var(--color-green); - color: var(--color-gold); + background-color: var(--color-grey-dark); min-width: 160px; - box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); z-index: 1; } -/* Links inside the dropdown */ .dropdown-content a { float: none; + color: var(--color-gold); + padding: 12px 16px; text-decoration: none; display: block; - text-align: left; + text-align: center; +} + +nav a:hover, +.dropdown:hover .dropbtn { + background-color: var(--color-grey-dark); } -/* Show the dropdown menu on hover */ .dropdown:hover .dropdown-content { display: block; } -.dropbtn::after { - content: " \25bc"; +@media screen and (max-width: 600px) { + + nav a:not(:first-child), + .dropbtn { + display: none; + } + + nav a.icon { + float: right; + display: block; + } +} + + +@media screen and (max-width: 600px) { + nav.responsive { + position: relative; + } + + nav.responsive a.icon { + position: absolute; + right: 0; + top: 0; + } + + nav.responsive a { + float: none; + display: block; + text-align: left; + } + + nav.responsive .dropdown { + float: none; + } + + nav.responsive .dropdown-content { + position: relative; + } + + nav.responsive .dropdown .dropbtn { + display: block; + width: 100%; + text-align: left; + } + + nav.responsive .right { + float: none; + } } \ No newline at end of file diff --git a/home/static/css/base.min.css b/home/static/css/base.min.css index 5775b70..e4a98e7 100644 --- a/home/static/css/base.min.css +++ b/home/static/css/base.min.css @@ -1 +1 @@ -@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@600&display=swap');@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500&display=swap');:root{--color-gold:#FFD614;--color-green:#005239;--color-grey-light:#cccccc;--color-grey-dark:#393939}.right{float:right}.left{float:left}.textCenter{text-align:center}.textRight{text-align:right}.textLeft{text-align:left}html,body{margin:0;padding:0;font-family:'Comfortaa',sans-serif;font-size:16px;line-height:1.5;background-color:var(--color-grey-light);color:var(--color-grey-dark);max-width:100vw;overflow-x:hidden;position:relative;display:flex;flex-direction:column;min-height:100vh}main{width:80vw;margin-left:10vw;margin-bottom:5vh;flex:1}footer{min-height:14.5vh;box-sizing:border-box;background-color:var(--color-green);padding:1.5vh 1vw;color:var(--color-gold);width:100vw;text-align:center;font-size:small;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));grid-template-rows:1fr}footer a{color:var(--color-gold)}footer ul{padding:0;margin:0;display:flex;flex-direction:column;justify-content:space-between;align-items:center}footer a{color:var(--color-gold)}footer li{list-style:none}footer div{padding:.5rem}.requiredField{color:red;text-decoration:none}.messages{margin:0;display:block;padding:0}.messages li{list-style:none;margin:0;padding:2px 0 2px 10px;display:block;transition:opacity .3s ease-in-out}.messages span.closeBTN{padding-right:5px;float:right;cursor:pointer}.messages .info{background-color:#2ae2e8;font-weight:bold}.messages .success{background-color:#36dd36;font-weight:bold}.messages .warning{background-color:#ff9d14;font-weight:bold}.messages .error{color:white;background-color:#e90000;font-weight:bold}hr{border:0;height:2px;background-color:var(--color-grey-dark);width:90%;margin:10px 11px}.justify{text-align:justify}h1{font-family:'Oswald',sans-serif;font-size:3rem}h2{font-family:'Oswald',sans-serif;font-size:2rem}h3{font-family:'Oswald',sans-serif;font-size:1.5rem}h4{font-size:1.2rem;font-family:'Oswald',sans-serif}h5{font-family:'Oswald',sans-serif;font-size:1rem}h6{font-family:'Oswald',sans-serif;font-size:.8rem}nav{overflow:hidden;background-color:var(--color-green);font-size:1.3em}nav a,nav span{float:left;background-color:var(--color-green);color:var(--color-gold);transition:background-color .3s ease-in,color .3s ease-in;text-align:center;text-decoration:none;padding:.25rem .5rem}.dropdown{float:left;overflow:hidden}.dropdown .dropbtn{border:none;outline:none;background-color:inherit;font-family:inherit;margin:0}nav a:hover,.dropdown:hover .dropbtn{background-color:var(--color-gold);color:var(--color-green)}.dropdown-content{display:none;position:absolute;background-color:var(--color-green);color:var(--color-gold);min-width:160px;box-shadow:0 8px 16px 0 rgba(0,0,0,.2);z-index:1}.dropdown-content a{float:none;text-decoration:none;display:block;text-align:left}.dropdown:hover .dropdown-content{display:block}.dropbtn::after{content:" \25bc"} \ No newline at end of file +@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@600&display=swap');@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500&display=swap');:root{--color-gold:#FFD614;--color-green:#005239;--color-grey-light:#cccccc;--color-grey-dark:#393939}.right{float:right}.left{float:left}.textCenter{text-align:center}.textRight{text-align:right}.textLeft{text-align:left}html,body{margin:0;padding:0;font-family:'Comfortaa',sans-serif;font-size:16px;line-height:1.5;background-color:var(--color-grey-light);color:var(--color-grey-dark);max-width:100vw;overflow-x:hidden;position:relative;display:flex;flex-direction:column;min-height:100vh}main{width:80vw;margin-left:10vw;margin-bottom:5vh;flex:1}footer{min-height:14.5vh;box-sizing:border-box;background-color:var(--color-green);padding:1.5vh 1vw;color:var(--color-gold);width:100vw;text-align:center;font-size:small;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));grid-template-rows:1fr}footer a{color:var(--color-gold)}footer ul{padding:0;margin:0;display:flex;flex-direction:column;justify-content:space-between;align-items:center}footer a{color:var(--color-gold)}footer li{list-style:none}footer div{padding:.5rem}.requiredField{color:red;text-decoration:none}.messages{margin:0;display:block;padding:0}.messages li{list-style:none;margin:0;padding:2px 0 2px 10px;display:block;transition:opacity .3s ease-in-out}.messages span.closeBTN{padding-right:5px;float:right;cursor:pointer}.messages .info{background-color:#2ae2e8;font-weight:bold}.messages .success{background-color:#36dd36;font-weight:bold}.messages .warning{background-color:#ff9d14;font-weight:bold}.messages .error{color:white;background-color:#e90000;font-weight:bold}hr{border:0;height:2px;background-color:var(--color-grey-dark);width:90%;margin:10px 11px}.justify{text-align:justify}h1{font-family:'Oswald',sans-serif;font-size:3rem}h2{font-family:'Oswald',sans-serif;font-size:2rem}h3{font-family:'Oswald',sans-serif;font-size:1.5rem}h4{font-size:1.2rem;font-family:'Oswald',sans-serif}h5{font-family:'Oswald',sans-serif;font-size:1rem}h6{font-family:'Oswald',sans-serif;font-size:.8rem}nav{background-color:var(--color-green);overflow:hidden}nav a{float:left;color:var(--color-gold);text-align:center;padding:5px 10px;text-decoration:none;font-size:1.2rem;margin:0}nav .icon{display:none}.dropdown{float:left;overflow:hidden}.dropdown .dropbtn{font-size:1.2rem;border:none;outline:none;color:var(--color-gold);padding:5px 10px;background-color:inherit;font-family:inherit;margin:0;height:2.425rem}.dropbtn::after{content:" \25bc"}.dropdown-content{display:none;position:absolute;background-color:var(--color-grey-dark);min-width:160px;z-index:1}.dropdown-content a{float:none;color:var(--color-gold);padding:12px 16px;text-decoration:none;display:block;text-align:center}nav a:hover,.dropdown:hover .dropbtn{background-color:var(--color-grey-dark)}.dropdown:hover .dropdown-content{display:block}@media screen and (max-width:600px){nav a:not(:first-child),.dropbtn{display:none}nav a.icon{float:right;display:block}}@media screen and (max-width:600px){nav.responsive{position:relative}nav.responsive a.icon{position:absolute;right:0;top:0}nav.responsive a{float:none;display:block;text-align:left}nav.responsive .dropdown{float:none}nav.responsive .dropdown-content{position:relative}nav.responsive .dropdown .dropbtn{display:block;width:100%;text-align:left}nav.responsive .right{float:none}} \ No newline at end of file From 2178771fa6215972459b511fea9c0bc4ae0cddae Mon Sep 17 00:00:00 2001 From: Matthew Gray <44288823+mmoomocow@users.noreply.github.com> Date: Thu, 18 May 2023 21:36:22 +1200 Subject: [PATCH 04/10] feat(static-files): :wheelchair: Add supporting responsive toggle in JS Signed-off-by: Matthew Gray <44288823+mmoomocow@users.noreply.github.com> --- home/static/js/base.js | 11 +++++++++++ home/static/js/base.min.js | 2 +- 2 files changed, 12 insertions(+), 1 deletion(-) diff --git a/home/static/js/base.js b/home/static/js/base.js index 2d5395f..649c9ad 100644 --- a/home/static/js/base.js +++ b/home/static/js/base.js @@ -6,6 +6,17 @@ function hideSelf(element) { }, 300); } +function toggleNavResponsive() { + // Toggle the responsive navigation bar + // Get nav tag + let nav = document.getElementsByTagName("nav")[0]; + if (nav.className === "responsive") { + nav.className = ""; + } else { + nav.className = "responsive"; + } +} + // hide all messages after 15 seconds setTimeout(() => { let messages = document.getElementsByClassName("message"); diff --git a/home/static/js/base.min.js b/home/static/js/base.min.js index c6fd148..03bd0f4 100644 --- a/home/static/js/base.min.js +++ b/home/static/js/base.min.js @@ -1 +1 @@ -function hideSelf(e){e.style.opacity="0",setTimeout((()=>{e.style.display="none"}),300)}setTimeout((()=>{let e=document.getElementsByClassName("message");for(let t=0;t{e.style.display="none"}),300)}function toggleNavResponsive(){let e=document.getElementsByTagName("nav")[0];"responsive"===e.className?e.className="":e.className="responsive"}setTimeout((()=>{let e=document.getElementsByClassName("message");for(let s=0;s Date: Thu, 18 May 2023 21:37:40 +1200 Subject: [PATCH 05/10] refactor(templates): :recycle: Refactor HTML nav for mobile compatability Refactors navbar to use the improved mobile navbar added in the prevous commits Signed-off-by: Matthew Gray <44288823+mmoomocow@users.noreply.github.com> --- home/templates/base.html | 33 +++++++++++++++++++-------------- 1 file changed, 19 insertions(+), 14 deletions(-) diff --git a/home/templates/base.html b/home/templates/base.html index 1f9ecc9..a3a62dc 100644 --- a/home/templates/base.html +++ b/home/templates/base.html @@ -36,27 +36,32 @@
From c1ef596fb63ea26ed0e2f4d844f64cf6c6a5dbf6 Mon Sep 17 00:00:00 2001 From: Matthew Gray <44288823+mmoomocow@users.noreply.github.com> Date: Thu, 18 May 2023 21:46:41 +1200 Subject: [PATCH 06/10] style(static-files): :lipstick: Better colors and spacing on nav elements Tweeks background colors and padding of nav elements for style reasons Signed-off-by: Matthew Gray <44288823+mmoomocow@users.noreply.github.com> --- home/static/css/base.css | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/home/static/css/base.css b/home/static/css/base.css index cba7dc2..f5fc285 100644 --- a/home/static/css/base.css +++ b/home/static/css/base.css @@ -187,6 +187,7 @@ h6 { nav { background-color: var(--color-green); + color: var(--color-gold); overflow: hidden; } @@ -230,7 +231,7 @@ nav .icon { .dropdown-content { display: none; position: absolute; - background-color: var(--color-grey-dark); + background-color: var(--color-green); min-width: 160px; z-index: 1; } @@ -238,15 +239,16 @@ nav .icon { .dropdown-content a { float: none; color: var(--color-gold); - padding: 12px 16px; + padding: 5px 10px; text-decoration: none; display: block; - text-align: center; + text-align: left; } nav a:hover, .dropdown:hover .dropbtn { - background-color: var(--color-grey-dark); + background-color: var(--color-gold); + color: var(--color-green); } .dropdown:hover .dropdown-content { From 26eb2534069224346e80cdcc5aa3702de2b223d6 Mon Sep 17 00:00:00 2001 From: Matthew Gray <44288823+mmoomocow@users.noreply.github.com> Date: Thu, 18 May 2023 21:47:18 +1200 Subject: [PATCH 07/10] style(static-files): :lipstick: Indent dropdown items in responsive navbar Seperates them from the normal items Signed-off-by: Matthew Gray <44288823+mmoomocow@users.noreply.github.com> --- home/static/css/base.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/home/static/css/base.css b/home/static/css/base.css index f5fc285..523a35b 100644 --- a/home/static/css/base.css +++ b/home/static/css/base.css @@ -294,6 +294,10 @@ nav a:hover, position: relative; } + nav.responsive .dropdown-content a { + margin-left: 25px; + } + nav.responsive .dropdown .dropbtn { display: block; width: 100%; From 13dd95267f7062b249bd8aeb184035bdc6371182 Mon Sep 17 00:00:00 2001 From: Matthew Gray <44288823+mmoomocow@users.noreply.github.com> Date: Thu, 18 May 2023 21:49:25 +1200 Subject: [PATCH 08/10] chore(minify): :zap: Minify style changes Signed-off-by: Matthew Gray <44288823+mmoomocow@users.noreply.github.com> --- home/static/css/base.min.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/home/static/css/base.min.css b/home/static/css/base.min.css index e4a98e7..84b3065 100644 --- a/home/static/css/base.min.css +++ b/home/static/css/base.min.css @@ -1 +1 @@ -@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@600&display=swap');@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500&display=swap');:root{--color-gold:#FFD614;--color-green:#005239;--color-grey-light:#cccccc;--color-grey-dark:#393939}.right{float:right}.left{float:left}.textCenter{text-align:center}.textRight{text-align:right}.textLeft{text-align:left}html,body{margin:0;padding:0;font-family:'Comfortaa',sans-serif;font-size:16px;line-height:1.5;background-color:var(--color-grey-light);color:var(--color-grey-dark);max-width:100vw;overflow-x:hidden;position:relative;display:flex;flex-direction:column;min-height:100vh}main{width:80vw;margin-left:10vw;margin-bottom:5vh;flex:1}footer{min-height:14.5vh;box-sizing:border-box;background-color:var(--color-green);padding:1.5vh 1vw;color:var(--color-gold);width:100vw;text-align:center;font-size:small;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));grid-template-rows:1fr}footer a{color:var(--color-gold)}footer ul{padding:0;margin:0;display:flex;flex-direction:column;justify-content:space-between;align-items:center}footer a{color:var(--color-gold)}footer li{list-style:none}footer div{padding:.5rem}.requiredField{color:red;text-decoration:none}.messages{margin:0;display:block;padding:0}.messages li{list-style:none;margin:0;padding:2px 0 2px 10px;display:block;transition:opacity .3s ease-in-out}.messages span.closeBTN{padding-right:5px;float:right;cursor:pointer}.messages .info{background-color:#2ae2e8;font-weight:bold}.messages .success{background-color:#36dd36;font-weight:bold}.messages .warning{background-color:#ff9d14;font-weight:bold}.messages .error{color:white;background-color:#e90000;font-weight:bold}hr{border:0;height:2px;background-color:var(--color-grey-dark);width:90%;margin:10px 11px}.justify{text-align:justify}h1{font-family:'Oswald',sans-serif;font-size:3rem}h2{font-family:'Oswald',sans-serif;font-size:2rem}h3{font-family:'Oswald',sans-serif;font-size:1.5rem}h4{font-size:1.2rem;font-family:'Oswald',sans-serif}h5{font-family:'Oswald',sans-serif;font-size:1rem}h6{font-family:'Oswald',sans-serif;font-size:.8rem}nav{background-color:var(--color-green);overflow:hidden}nav a{float:left;color:var(--color-gold);text-align:center;padding:5px 10px;text-decoration:none;font-size:1.2rem;margin:0}nav .icon{display:none}.dropdown{float:left;overflow:hidden}.dropdown .dropbtn{font-size:1.2rem;border:none;outline:none;color:var(--color-gold);padding:5px 10px;background-color:inherit;font-family:inherit;margin:0;height:2.425rem}.dropbtn::after{content:" \25bc"}.dropdown-content{display:none;position:absolute;background-color:var(--color-grey-dark);min-width:160px;z-index:1}.dropdown-content a{float:none;color:var(--color-gold);padding:12px 16px;text-decoration:none;display:block;text-align:center}nav a:hover,.dropdown:hover .dropbtn{background-color:var(--color-grey-dark)}.dropdown:hover .dropdown-content{display:block}@media screen and (max-width:600px){nav a:not(:first-child),.dropbtn{display:none}nav a.icon{float:right;display:block}}@media screen and (max-width:600px){nav.responsive{position:relative}nav.responsive a.icon{position:absolute;right:0;top:0}nav.responsive a{float:none;display:block;text-align:left}nav.responsive .dropdown{float:none}nav.responsive .dropdown-content{position:relative}nav.responsive .dropdown .dropbtn{display:block;width:100%;text-align:left}nav.responsive .right{float:none}} \ No newline at end of file +@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@600&display=swap');@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500&display=swap');:root{--color-gold:#FFD614;--color-green:#005239;--color-grey-light:#cccccc;--color-grey-dark:#393939}.right{float:right}.left{float:left}.textCenter{text-align:center}.textRight{text-align:right}.textLeft{text-align:left}html,body{margin:0;padding:0;font-family:'Comfortaa',sans-serif;font-size:16px;line-height:1.5;background-color:var(--color-grey-light);color:var(--color-grey-dark);max-width:100vw;overflow-x:hidden;position:relative;display:flex;flex-direction:column;min-height:100vh}main{width:80vw;margin-left:10vw;margin-bottom:5vh;flex:1}footer{min-height:14.5vh;box-sizing:border-box;background-color:var(--color-green);padding:1.5vh 1vw;color:var(--color-gold);width:100vw;text-align:center;font-size:small;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));grid-template-rows:1fr}footer a{color:var(--color-gold)}footer ul{padding:0;margin:0;display:flex;flex-direction:column;justify-content:space-between;align-items:center}footer a{color:var(--color-gold)}footer li{list-style:none}footer div{padding:.5rem}.requiredField{color:red;text-decoration:none}.messages{margin:0;display:block;padding:0}.messages li{list-style:none;margin:0;padding:2px 0 2px 10px;display:block;transition:opacity .3s ease-in-out}.messages span.closeBTN{padding-right:5px;float:right;cursor:pointer}.messages .info{background-color:#2ae2e8;font-weight:bold}.messages .success{background-color:#36dd36;font-weight:bold}.messages .warning{background-color:#ff9d14;font-weight:bold}.messages .error{color:white;background-color:#e90000;font-weight:bold}hr{border:0;height:2px;background-color:var(--color-grey-dark);width:90%;margin:10px 11px}.justify{text-align:justify}h1{font-family:'Oswald',sans-serif;font-size:3rem}h2{font-family:'Oswald',sans-serif;font-size:2rem}h3{font-family:'Oswald',sans-serif;font-size:1.5rem}h4{font-size:1.2rem;font-family:'Oswald',sans-serif}h5{font-family:'Oswald',sans-serif;font-size:1rem}h6{font-family:'Oswald',sans-serif;font-size:.8rem}nav{background-color:var(--color-green);color:var(--color-gold);overflow:hidden}nav a{float:left;color:var(--color-gold);text-align:center;padding:5px 10px;text-decoration:none;font-size:1.2rem;margin:0}nav .icon{display:none}.dropdown{float:left;overflow:hidden}.dropdown .dropbtn{font-size:1.2rem;border:none;outline:none;color:var(--color-gold);padding:5px 10px;background-color:inherit;font-family:inherit;margin:0;height:2.425rem}.dropbtn::after{content:" \25bc"}.dropdown-content{display:none;position:absolute;background-color:var(--color-green);min-width:160px;z-index:1}.dropdown-content a{float:none;color:var(--color-gold);padding:5px 10px;text-decoration:none;display:block;text-align:left}nav a:hover,.dropdown:hover .dropbtn{background-color:var(--color-gold);color:var(--color-green)}.dropdown:hover .dropdown-content{display:block}@media screen and (max-width:600px){nav a:not(:first-child),.dropbtn{display:none}nav a.icon{float:right;display:block}}@media screen and (max-width:600px){nav.responsive{position:relative}nav.responsive a.icon{position:absolute;right:0;top:0}nav.responsive a{float:none;display:block;text-align:left}nav.responsive .dropdown{float:none}nav.responsive .dropdown-content{position:relative}nav.responsive .dropdown-content a{margin-left:25px}nav.responsive .dropdown .dropbtn{display:block;width:100%;text-align:left}nav.responsive .right{float:none}} \ No newline at end of file From a35205d4bba1e5167612c630c83836ff34b07ea7 Mon Sep 17 00:00:00 2001 From: Matthew Gray <44288823+mmoomocow@users.noreply.github.com> Date: Thu, 18 May 2023 22:07:14 +1200 Subject: [PATCH 09/10] style(frontend): :truck: Reorder student list fields Move student ID out of heading tag and place below Signed-off-by: Matthew Gray <44288823+mmoomocow@users.noreply.github.com> --- students/templates/students/list_students.html | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/students/templates/students/list_students.html b/students/templates/students/list_students.html index 1b1c3c2..192db09 100644 --- a/students/templates/students/list_students.html +++ b/students/templates/students/list_students.html @@ -31,7 +31,8 @@
{% for student in students %}
-

{{ student.user.first_name }} {{ student.user.last_name }} ({{ student.id }})

 +

{{ student.user.first_name }} {{ student.user.last_name }}

 + ID: {{ student.id }}
Email: {{ student.user.email }} {% if student.commendations_set.count == "1" %}

1 commendation

From 01f9adab8d6aeab0894777514d808735844539f0 Mon Sep 17 00:00:00 2001 From: Matthew Gray <44288823+mmoomocow@users.noreply.github.com> Date: Thu, 18 May 2023 22:08:02 +1200 Subject: [PATCH 10/10] fix(static-files): :iphone: Stop student list going off edge of screen Reduce the minimun grid size in the student list Signed-off-by: Matthew Gray <44288823+mmoomocow@users.noreply.github.com> --- students/static/students/students.css | 2 +- students/static/students/students.min.css | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/students/static/students/students.css b/students/static/students/students.css index 93ac884..4159327 100644 --- a/students/static/students/students.css +++ b/students/static/students/students.css @@ -1,6 +1,6 @@ .allStudents { display: grid; - grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); + grid-template-columns: repeat(auto-fill, minmax(250px, 2fr)); } .student { diff --git a/students/static/students/students.min.css b/students/static/students/students.min.css index c93b9c4..93f5125 100644 --- a/students/static/students/students.min.css +++ b/students/static/students/students.min.css @@ -1 +1 @@ -.allStudents{display:grid;grid-template-columns:repeat(auto-fill,minmax(400px,1fr))}.student{box-sizing:border-box;padding:1rem;margin:1rem;box-shadow:0 0 10px rgba(67,67,67,.5);border-radius:10px;border:1px solid #ccc;overflow:hidden}.student a{color:#000;text-decoration:underline}form input{box-sizing:border-box;display:block;margin:1rem;padding:.5em;border:1px solid var(--color-grey-dark);border-radius:.25rem;box-shadow:0 .5rem 1rem rgba(0,0,0,.2);width:calc(100% - 2rem)}#SubmitButtons{display:grid;grid-template-columns:repeat(2,1fr)}form #submit{background-color:var(--color-gold);color:var(--color-grey-dark);font-weight:700;cursor:pointer} \ No newline at end of file +.allStudents{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,2fr))}.student{box-sizing:border-box;padding:1rem;margin:1rem;box-shadow:0 0 10px rgba(67,67,67,.5);border-radius:10px;border:1px solid #ccc;overflow:hidden}.student a{color:#000000;text-decoration:underline}form input{box-sizing:border-box;display:block;margin:1rem;padding:.5em;border:1px solid var(--color-grey-dark);border-radius:.25rem;box-shadow:0 .5rem 1rem rgba(0,0,0,.2);width:calc(100% - 2rem)}#SubmitButtons{display:grid;grid-template-columns:repeat(2,1fr)}form #submit{background-color:var(--color-gold);color:var(--color-grey-dark);font-weight:bold;cursor:pointer} \ No newline at end of file