From 46e8fedacaa57079801cfd2dd230d4061458aab1 Mon Sep 17 00:00:00 2001 From: Lukas Jans Date: Sat, 11 Nov 2023 22:39:30 +0100 Subject: [PATCH] Improve course selection --- scripts/client/courses.js | 15 ++++++++++++++- styles/main.css | 2 +- styles/main.scss | 19 ++++++++++++++++--- templates/_courses.html | 11 +++++++++-- 4 files changed, 40 insertions(+), 7 deletions(-) diff --git a/scripts/client/courses.js b/scripts/client/courses.js index c1d53aa..e4e3db9 100644 --- a/scripts/client/courses.js +++ b/scripts/client/courses.js @@ -35,6 +35,15 @@ $('.subjects .item').map(item => { $('.header a', item).on('click', () => item.classList.toggle('active')); }); +// Set reset button state depending on total number of checked inputs +const updateResetButtonVisiblity = function() { + let count = 0; + $('.subjects input').map(test => test.checked ? count++ : null); + document.querySelector('nav a.reset').classList.toggle('active', count > 0); +}; +updateResetButtonVisiblity(); +$('.subjects input').on('change', updateResetButtonVisiblity); + // Save course selection $('nav .save').on('click', function(){ this.classList.add('active'); @@ -43,5 +52,9 @@ $('nav .save').on('click', function(){ // Clear course selection $('nav .reset').on('click', e => { - $('.subjects input').map(input => input.checked = false); + $('.subjects input').map(input => { + input.checked = false; + input.indeterminate = false; + }); + updateResetButtonVisiblity(); }); diff --git a/styles/main.css b/styles/main.css index 79c0efe..ae3bbb7 100644 --- a/styles/main.css +++ b/styles/main.css @@ -1 +1 @@ -*{box-sizing:border-box}body{min-height:100svh;max-height:100lvh;height:100svh;margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;display:flex;flex-direction:column;font-size:16px;color:#1d2129;overscroll-behavior-y:contain;overflow:hidden;background-color:#fafbfc;-moz-user-select:none;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-touch-callout:none}p{margin:0;line-height:1.4}p+p{margin-top:6px}a{text-decoration:none;color:inherit}.red{background-color:#d41a17}.container{margin:0 auto;width:100%;padding:0 15px;max-width:1024px}.wrapper{flex-grow:1;overflow:auto;-webkit-overflow-scrolling:touch;display:flex;overscroll-behavior:contain;align-items:flex-start}.wrapper::before{width:0;height:calc(100% + 1px);content:"";display:block}iframe{border:0;height:100%;flex-grow:1}header{background:linear-gradient(#D41A17, #c61816);color:#fff;z-index:10;box-shadow:0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);font-size:22px;padding:13px 0;padding-top:max(13px,env(safe-area-inset-top));flex-shrink:0;overflow:hidden}header .container{display:flex;justify-content:space-between;align-items:center}header a{padding:6px;line-height:1}header .title{padding:0 8px;font-weight:300}footer{background:#fff;border-top:1px solid #dddfe2;padding:9px 0;padding-bottom:max(9px,env(safe-area-inset-bottom));flex-shrink:0}footer .container{display:flex;justify-content:space-between;align-items:center}footer a{display:flex;flex-direction:column;align-items:center;width:20%}footer a .icon{font-size:1.6em;padding-bottom:2px;color:#d6d6d6;text-shadow:1px 1px 1px #fff}footer a .title{font-weight:300;font-size:.8em;color:#949596}footer a.active span{color:#d41a17}.article{background-color:#fff;border-radius:4px;border:1px solid #dddfe2;overflow:hidden;display:none;margin-bottom:12px}.article.display-always,.article.display-browser{display:flex}@media(display-mode: standalone){.article.display-browser{display:none}.article.display-standalone{display:flex}}.article .title{font-weight:500;font-size:17px;margin-bottom:4px}.article .strip{padding:.5em 0;color:#fff;font-size:1.6em;width:2.5em;display:flex;align-items:center;justify-content:center;flex-shrink:0}.article .text{flex-grow:1;padding:12px 16px}.article .description{font-size:14px;color:#949596}.article .arrow{display:flex;align-items:center;justify-content:center;padding-right:.8em;color:#d6d6d6;flex-shrink:0;font-size:1.4em}.list{padding:20px 0;margin:0 auto}.screen{color:#949596;text-align:center;margin:auto;padding:30px 0}.screen .icon{font-size:64px;text-shadow:1px 1px 1px #fff;color:#d6d6d6;margin-bottom:24px}.screen .title{font-size:24px;font-weight:300}.screen .line{height:1px;margin:16px 40px 14px;background:linear-gradient(to right, rgba(221, 223, 226, 0) 0%, #DDDFE2 20%, #DDDFE2 80%, rgba(221, 223, 226, 0) 100%);box-shadow:1px 1px 1px #fff}.screen .button{color:#fff;background-color:#d41a17;padding:12px 36px;box-shadow:0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);font-weight:600;margin-top:60px;border-radius:40px;display:inline-block}.dashboard{padding:30px 0;flex-grow:1}.dashboard .widget{margin-bottom:12px}.dashboard h5{margin:0 0 12px;color:#949596;font-weight:500}nav{background-color:#fff;border-bottom:1px solid #dddfe2;color:#949596;z-index:9}nav .container{height:50px;display:flex;align-items:center;justify-content:space-between}nav a{padding:8px 0;color:#d41a17}nav a.save::after{content:attr(data-idle)}nav a.save.active{color:#949596}nav a.save.active::after{content:attr(data-active)}.note{text-align:center;padding-top:8px;color:#949596;font-size:.7em;font-weight:300}.note a{font-weight:500}.timetable{display:flex;margin:0 auto}.timetable .col{white-space:normal;flex-shrink:0;height:622px;display:flex;flex-direction:column;min-width:120px}.timetable .col .head{height:54px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background-color:rgba(252,252,252,.85);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 20px;position:sticky;top:0;z-index:1}.timetable .col .head .day{font-size:14px;font-weight:500}.timetable .col .head .date{font-size:12px;color:#949596}.timetable .col table{table-layout:fixed;border-collapse:collapse}.timetable .col table tr{height:13px}.timetable .col table tr.block{background-color:#f4f6f8}.timetable .col table tr td.occupied{position:relative;min-width:120px}.timetable .col table tr td.occupied[colspan="12"]{min-width:140px}.timetable .lecture{position:absolute;top:1px;left:1px;right:1px;bottom:1px;color:#fff;display:flex;flex-direction:column;border-radius:3px}.timetable .lecture .title{font-size:12px;padding:5px 6px 0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;word-wrap:break-word;font-weight:500}.timetable .lecture .time{font-size:10px;padding:2px 6px 0}.timetable .lecture .info{font-size:10px;display:flex;justify-content:space-between;padding:0 6px 5px;position:absolute;bottom:0;right:0;left:0}.timetable .lecture .lecturer{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.timetable .lecture .room{flex-shrink:0}.timetable .lecture .icon{padding-right:2px}.timetable .lecture .data+.data{padding-left:1em}.timetable .lecture .data:only-child{margin-left:auto}.subjects{border-width:1px 0;border-style:solid;border-color:#dddfe2;background-color:#fff}.subjects .item{padding:8px 6px}.subjects .item.active .courses{display:block}.subjects .item.active .header .arrow::before{content:""}.subjects .item+.item{border-top:1px solid #f1f2f3}.subjects .header{display:flex}.subjects .header label{padding:8px 0;display:flex;align-items:center}.subjects .header .checkbox{padding-right:8px}.subjects .header .name{font-weight:500}.subjects .header .amount{font-weight:300;color:#949596;padding-left:6px}.subjects .header .arrow{flex-grow:1;display:flex;align-items:center;justify-content:flex-end;color:#d6d6d6;font-size:22px}.subjects .header .arrow::before{content:""}.subjects .courses{display:none;padding-left:24px}.subjects .courses label{display:flex;align-items:center;padding:8px 0}.subjects .courses .checkbox{padding-right:8px}.subjects input[type=checkbox]{display:none}.subjects input[type=checkbox]~.checkbox::before{content:"";color:#949596}.subjects input[type=checkbox]:checked~.checkbox::before{content:"";color:#d41a17;font-weight:900}.subjects input[type=checkbox]:indeterminate~.checkbox::before{content:"";color:#d41a17;font-weight:900} \ No newline at end of file +*{box-sizing:border-box}body{min-height:100svh;max-height:100lvh;height:100svh;margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;display:flex;flex-direction:column;font-size:16px;color:#1d2129;overscroll-behavior-y:contain;overflow:hidden;background-color:#fafbfc;-moz-user-select:none;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-touch-callout:none}p{margin:0;line-height:1.4}p+p{margin-top:6px}a{text-decoration:none;color:inherit}.red{background-color:#d41a17}.container{margin:0 auto;width:100%;padding:0 15px;max-width:1024px}.wrapper{flex-grow:1;overflow:auto;-webkit-overflow-scrolling:touch;display:flex;overscroll-behavior:contain;align-items:flex-start}.wrapper::before{width:0;height:calc(100% + 1px);content:"";display:block}iframe{border:0;height:100%;flex-grow:1}header{background:linear-gradient(#D41A17, #c61816);color:#fff;z-index:10;box-shadow:0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);font-size:22px;padding:13px 0;padding-top:max(13px,env(safe-area-inset-top));flex-shrink:0;overflow:hidden}header .container{display:flex;justify-content:space-between;align-items:center}header a{padding:6px;line-height:1}header .title{padding:0 8px;font-weight:300}footer{background:#fff;border-top:1px solid #dddfe2;padding:9px 0;padding-bottom:max(9px,env(safe-area-inset-bottom));flex-shrink:0}footer .container{display:flex;justify-content:space-between;align-items:center}footer a{display:flex;flex-direction:column;align-items:center;width:20%}footer a .icon{font-size:1.6em;padding-bottom:2px;color:#d6d6d6;text-shadow:1px 1px 1px #fff}footer a .title{font-weight:300;font-size:.8em;color:#949596}footer a.active span{color:#d41a17}.article{background-color:#fff;border-radius:4px;border:1px solid #dddfe2;overflow:hidden;display:none;margin-bottom:12px}.article.display-always,.article.display-browser{display:flex}@media(display-mode: standalone){.article.display-browser{display:none}.article.display-standalone{display:flex}}.article .title{font-weight:500;font-size:17px;margin-bottom:4px}.article .strip{padding:.5em 0;color:#fff;font-size:1.6em;width:2.5em;display:flex;align-items:center;justify-content:center;flex-shrink:0}.article .text{flex-grow:1;padding:12px 16px}.article .description{font-size:14px;color:#949596}.article .arrow{display:flex;align-items:center;justify-content:center;padding-right:.8em;color:#d6d6d6;flex-shrink:0;font-size:1.4em}.list{padding:20px 0;margin:0 auto}.screen{color:#949596;text-align:center;margin:auto;padding:30px 0}.screen .icon{font-size:64px;text-shadow:1px 1px 1px #fff;color:#d6d6d6;margin-bottom:24px}.screen .title{font-size:24px;font-weight:300}.screen .line{height:1px;margin:16px 40px 14px;background:linear-gradient(to right, rgba(221, 223, 226, 0) 0%, #DDDFE2 20%, #DDDFE2 80%, rgba(221, 223, 226, 0) 100%);box-shadow:1px 1px 1px #fff}.screen .button{color:#fff;background-color:#d41a17;padding:12px 36px;box-shadow:0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);font-weight:600;margin-top:60px;border-radius:40px;display:inline-block}.dashboard{padding:30px 0;flex-grow:1}.dashboard .widget{margin-bottom:12px}.dashboard h5{margin:0 0 12px;color:#949596;font-weight:500}nav{background-color:#fff;border-bottom:1px solid #dddfe2;color:#949596;z-index:9}nav .container{height:50px;display:flex;align-items:center;justify-content:space-between}nav a{padding:8px 0;color:#d41a17}nav a .icon{margin-right:3px}nav a.save .status-active{display:none}nav a.save.active{color:#949596}nav a.save.active .status-idle{display:none}nav a.save.active .status-active{display:inline-block}nav a.reset{color:#949596}nav a.reset.active{color:#d41a17}.note{text-align:center;padding-top:8px;color:#949596;font-size:.7em;font-weight:300}.note a{font-weight:500}.timetable{display:flex;margin:0 auto}.timetable .col{white-space:normal;flex-shrink:0;height:622px;display:flex;flex-direction:column;min-width:120px}.timetable .col .head{height:54px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background-color:rgba(252,252,252,.85);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 20px;position:sticky;top:0;z-index:1}.timetable .col .head .day{font-size:14px;font-weight:500}.timetable .col .head .date{font-size:12px;color:#949596}.timetable .col table{table-layout:fixed;border-collapse:collapse}.timetable .col table tr{height:13px}.timetable .col table tr.block{background-color:#f4f6f8}.timetable .col table tr td.occupied{position:relative;min-width:120px}.timetable .col table tr td.occupied[colspan="12"]{min-width:140px}.timetable .lecture{position:absolute;top:1px;left:1px;right:1px;bottom:1px;color:#fff;display:flex;flex-direction:column;border-radius:3px}.timetable .lecture .title{font-size:12px;padding:5px 6px 0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;word-wrap:break-word;font-weight:500}.timetable .lecture .time{font-size:10px;padding:2px 6px 0}.timetable .lecture .info{font-size:10px;display:flex;justify-content:space-between;padding:0 6px 5px;position:absolute;bottom:0;right:0;left:0}.timetable .lecture .lecturer{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.timetable .lecture .room{flex-shrink:0}.timetable .lecture .icon{padding-right:2px}.timetable .lecture .data+.data{padding-left:1em}.timetable .lecture .data:only-child{margin-left:auto}.subjects{border-width:1px 0;border-style:solid;border-color:#dddfe2;background-color:#fff}.subjects .item{padding:8px 6px}.subjects .item.active .courses{display:block}.subjects .item.active .header .arrow::before{content:""}.subjects .item+.item{border-top:1px solid #f1f2f3}.subjects .header{display:flex}.subjects .header label{padding:8px 0;display:flex;align-items:center}.subjects .header .checkbox{padding-right:8px}.subjects .header .name{font-weight:500}.subjects .header .amount{font-weight:300;color:#949596;padding-left:6px}.subjects .header .arrow{flex-grow:1;display:flex;align-items:center;justify-content:flex-end;color:#d6d6d6;font-size:22px}.subjects .header .arrow::before{content:""}.subjects .courses{display:none;padding-left:24px}.subjects .courses label{display:flex;align-items:center;padding:8px 0}.subjects .courses .checkbox{padding-right:8px}.subjects input[type=checkbox]{display:none}.subjects input[type=checkbox]~.checkbox::before{content:"";color:#949596}.subjects input[type=checkbox]:checked~.checkbox::before{content:"";color:#d41a17;font-weight:900}.subjects input[type=checkbox]:indeterminate~.checkbox::before{content:"";color:#d41a17;font-weight:900} \ No newline at end of file diff --git a/styles/main.scss b/styles/main.scss index 19bebc2..621a640 100644 --- a/styles/main.scss +++ b/styles/main.scss @@ -269,14 +269,27 @@ nav { a { padding: 8px 0; color: $primary; - + + .icon { + margin-right: 3px; + } + &.save { - &::after { content: attr(data-idle); } + .status-active { display: none; } &.active { color: $secondary; - &::after { content: attr(data-active); } + .status-idle { display: none; } + .status-active { display: inline-block; } + } + } + + &.reset { + color: $secondary; + + &.active { + color: $primary; } } } diff --git a/templates/_courses.html b/templates/_courses.html index 4034617..1b0bd81 100644 --- a/templates/_courses.html +++ b/templates/_courses.html @@ -18,8 +18,15 @@