From 5f8183028ffddf94d10c642aca54da6b0f5e57aa Mon Sep 17 00:00:00 2001 From: Ryan Turner <100864486+Turnlings@users.noreply.github.com> Date: Wed, 6 Aug 2025 11:25:57 +0100 Subject: [PATCH 1/3] refactor: move existing files into proper file structure --- .../{ => abstracts}/_variables.scss | 0 app/assets/stylesheets/application.scss | 39 ++++++++----------- .../_buttons.scss} | 2 - .../{form.scss => components/_form.scss} | 2 - .../_pagination.scss} | 2 - .../_progress_bar.scss} | 2 - .../{footer.scss => layout/_footer.scss} | 2 - .../{header.scss => layout/_header.scss} | 2 - .../{home.scss => pages/_home.scss} | 2 - 9 files changed, 16 insertions(+), 37 deletions(-) rename app/assets/stylesheets/{ => abstracts}/_variables.scss (100%) rename app/assets/stylesheets/{buttons.scss => components/_buttons.scss} (98%) rename app/assets/stylesheets/{form.scss => components/_form.scss} (97%) rename app/assets/stylesheets/{pagination.scss => components/_pagination.scss} (89%) rename app/assets/stylesheets/{progress_bar.scss => components/_progress_bar.scss} (95%) rename app/assets/stylesheets/{footer.scss => layout/_footer.scss} (93%) rename app/assets/stylesheets/{header.scss => layout/_header.scss} (97%) rename app/assets/stylesheets/{home.scss => pages/_home.scss} (99%) diff --git a/app/assets/stylesheets/_variables.scss b/app/assets/stylesheets/abstracts/_variables.scss similarity index 100% rename from app/assets/stylesheets/_variables.scss rename to app/assets/stylesheets/abstracts/_variables.scss diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss index c4acf7a..0759f55 100644 --- a/app/assets/stylesheets/application.scss +++ b/app/assets/stylesheets/application.scss @@ -1,24 +1,17 @@ -/* - * This is a manifest file that'll be compiled into application.css, which will include all the files - * listed below. - * - * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's - * vendor/assets/stylesheets directory can be referenced here using a relative path. - * - * You're free to add application-wide styles to this file and they'll appear at the bottom of the - * compiled file so the styles you add here take precedence over styles defined in any other CSS - * files in this directory. Styles in this file should be added after the last require_* statement. - * It is generally better to create a new file per style scope. - * - *= require_tree . - *= require_self - */ +@import "bootstrap"; - @import "bootstrap"; - @import "variables"; - @import "home"; - @import "header"; - @import "pagination"; - @import "buttons"; - @import "form"; - @import "progress_bar"; +// Abstracts +@import "abstracts/variables"; + +// Components +@import "components/buttons"; +@import "components/form"; +@import "components/pagination"; +@import "components/progress_bar"; + +// Layout +@import "layout/header"; +@import "layout/footer"; + +// Pages +@import "pages/home"; diff --git a/app/assets/stylesheets/buttons.scss b/app/assets/stylesheets/components/_buttons.scss similarity index 98% rename from app/assets/stylesheets/buttons.scss rename to app/assets/stylesheets/components/_buttons.scss index 578d382..5196f21 100644 --- a/app/assets/stylesheets/buttons.scss +++ b/app/assets/stylesheets/components/_buttons.scss @@ -1,5 +1,3 @@ -@import "variables"; - .link-button { color: $font-color; text-decoration: none; diff --git a/app/assets/stylesheets/form.scss b/app/assets/stylesheets/components/_form.scss similarity index 97% rename from app/assets/stylesheets/form.scss rename to app/assets/stylesheets/components/_form.scss index fb42bf1..0807b12 100644 --- a/app/assets/stylesheets/form.scss +++ b/app/assets/stylesheets/components/_form.scss @@ -1,5 +1,3 @@ -@import "variables"; - .form-heading { display: flex; align-items: center; diff --git a/app/assets/stylesheets/pagination.scss b/app/assets/stylesheets/components/_pagination.scss similarity index 89% rename from app/assets/stylesheets/pagination.scss rename to app/assets/stylesheets/components/_pagination.scss index 0443069..b9349db 100644 --- a/app/assets/stylesheets/pagination.scss +++ b/app/assets/stylesheets/components/_pagination.scss @@ -1,5 +1,3 @@ -@import "variables"; - .pagination-box { border: 1px solid $background-color; border-radius: 5px; diff --git a/app/assets/stylesheets/progress_bar.scss b/app/assets/stylesheets/components/_progress_bar.scss similarity index 95% rename from app/assets/stylesheets/progress_bar.scss rename to app/assets/stylesheets/components/_progress_bar.scss index fd41103..0b79dfd 100644 --- a/app/assets/stylesheets/progress_bar.scss +++ b/app/assets/stylesheets/components/_progress_bar.scss @@ -1,5 +1,3 @@ -@import "variables"; - .progress-bar { margin: 0; padding: 0; diff --git a/app/assets/stylesheets/footer.scss b/app/assets/stylesheets/layout/_footer.scss similarity index 93% rename from app/assets/stylesheets/footer.scss rename to app/assets/stylesheets/layout/_footer.scss index 4e34e96..b6b9643 100644 --- a/app/assets/stylesheets/footer.scss +++ b/app/assets/stylesheets/layout/_footer.scss @@ -1,5 +1,3 @@ -@import "variables"; - footer { background-color: $line-color; padding: 10px; diff --git a/app/assets/stylesheets/header.scss b/app/assets/stylesheets/layout/_header.scss similarity index 97% rename from app/assets/stylesheets/header.scss rename to app/assets/stylesheets/layout/_header.scss index b5cabd3..e699ead 100644 --- a/app/assets/stylesheets/header.scss +++ b/app/assets/stylesheets/layout/_header.scss @@ -1,5 +1,3 @@ -@import "variables"; - header { background-color: $bg-dark; width: 400px; diff --git a/app/assets/stylesheets/home.scss b/app/assets/stylesheets/pages/_home.scss similarity index 99% rename from app/assets/stylesheets/home.scss rename to app/assets/stylesheets/pages/_home.scss index 0d0b556..4f4d209 100644 --- a/app/assets/stylesheets/home.scss +++ b/app/assets/stylesheets/pages/_home.scss @@ -1,5 +1,3 @@ -@import "variables"; - html, body { height: 100%; margin: 0; From a33235ac4d33c8321a8b9ef2cf95a60e1dc38352 Mon Sep 17 00:00:00 2001 From: Ryan Turner <100864486+Turnlings@users.noreply.github.com> Date: Wed, 6 Aug 2025 12:06:50 +0100 Subject: [PATCH 2/3] refactor: split up the main scss file into components --- app/assets/stylesheets/application.scss | 8 + app/assets/stylesheets/base/_base.scss | 75 +++ app/assets/stylesheets/base/_typography.scss | 24 + .../stylesheets/components/_alerts.scss | 22 + .../stylesheets/components/_buttons.scss | 22 +- app/assets/stylesheets/components/_card.scss | 33 ++ app/assets/stylesheets/components/_form.scss | 60 +-- .../stylesheets/components/_pagination.scss | 14 +- .../stylesheets/components/_progress_bar.scss | 33 +- app/assets/stylesheets/components/_stats.scss | 27 ++ app/assets/stylesheets/layout/_footer.scss | 30 +- app/assets/stylesheets/layout/_header.scss | 152 ++++-- app/assets/stylesheets/pages/_home.scss | 459 +++--------------- app/assets/stylesheets/pages/_login.scss | 49 ++ 14 files changed, 503 insertions(+), 505 deletions(-) create mode 100644 app/assets/stylesheets/base/_base.scss create mode 100644 app/assets/stylesheets/base/_typography.scss create mode 100644 app/assets/stylesheets/components/_alerts.scss create mode 100644 app/assets/stylesheets/components/_card.scss create mode 100644 app/assets/stylesheets/components/_stats.scss create mode 100644 app/assets/stylesheets/pages/_login.scss diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss index 0759f55..a53a323 100644 --- a/app/assets/stylesheets/application.scss +++ b/app/assets/stylesheets/application.scss @@ -3,11 +3,18 @@ // Abstracts @import "abstracts/variables"; +// Base +@import "base/base"; +@import "base/typography"; + // Components +@import "components/alerts"; @import "components/buttons"; +@import "components/card"; @import "components/form"; @import "components/pagination"; @import "components/progress_bar"; +@import "components/stats"; // Layout @import "layout/header"; @@ -15,3 +22,4 @@ // Pages @import "pages/home"; +@import "pages/login"; diff --git a/app/assets/stylesheets/base/_base.scss b/app/assets/stylesheets/base/_base.scss new file mode 100644 index 0000000..73d049f --- /dev/null +++ b/app/assets/stylesheets/base/_base.scss @@ -0,0 +1,75 @@ +html, body { + height: 100%; + margin: 0; + color: $text; + font-family: Roboto, sans-serif; + font-size: $font-size; +} + +body { + background-color: $bg; + display: flex; + flex-direction: row; + + @media (max-width: $breakpoint-lg) { + flex-direction: column; + } +} + +main { + flex: 1; + display: flex; + flex-direction: column; + flex-grow: 1; + + @media (max-width: $breakpoint-lg) { + flex-direction: column; + } +} + +h1, h2, h3 { + color: $text-bold; +} + +h1 { + font-size: 2rem; +} + +h2 { + font-size: 1.5rem; +} + +// To support having the sidebar and no proper header +.not-header { + width: calc(100% - 400px); + margin-left: 400px; + display: flex; + flex-direction: column; + min-height: 100vh; + + @media (max-width: $breakpoint-lg) { + width: 100%; + margin: 0; + } +} + +.not-header-login { + width: 100%; + display: flex; + flex-direction: column; + min-height: 100vh; +} + +.main-content { + display: flex; + flex-direction: column; + flex-grow: 1; + padding: 1rem; + width: 100%; + max-width: $max-page-width; + margin: 0 auto; + + @media (max-width: $breakpoint-md) { + padding: 0.5rem; + } +} \ No newline at end of file diff --git a/app/assets/stylesheets/base/_typography.scss b/app/assets/stylesheets/base/_typography.scss new file mode 100644 index 0000000..2404787 --- /dev/null +++ b/app/assets/stylesheets/base/_typography.scss @@ -0,0 +1,24 @@ +.font-secondary { + color: $font-secondary-color; + font-size: 0.8em; +} + +.text-brand-light { + color: $brand-light +} + +.unstyle-link { + text-decoration: none; + + &:hover { + text-decoration: underline; + } +} + +.icon { + display: inline-block; + background: none; + border: none; + color: $font-color; + padding: 0; +} \ No newline at end of file diff --git a/app/assets/stylesheets/components/_alerts.scss b/app/assets/stylesheets/components/_alerts.scss new file mode 100644 index 0000000..0b00041 --- /dev/null +++ b/app/assets/stylesheets/components/_alerts.scss @@ -0,0 +1,22 @@ +.alert-bar { + width: 100%; + padding: 0.5rem; + text-align: center; + margin: 0; +} + +.ab-notice { + background-color: $success; +} + +.ab-danger { + background-color: $danger; +} + +.ab-warning { + background-color: $warning; +} + +.text-danger { + color: $danger; +} \ No newline at end of file diff --git a/app/assets/stylesheets/components/_buttons.scss b/app/assets/stylesheets/components/_buttons.scss index 5196f21..791e130 100644 --- a/app/assets/stylesheets/components/_buttons.scss +++ b/app/assets/stylesheets/components/_buttons.scss @@ -1,18 +1,18 @@ .link-button { - color: $font-color; - text-decoration: none; - background-color: $highlight-color; - padding: 2px 10px; - border-radius: 5px; - border: none; + color: $font-color; + text-decoration: none; + background-color: $highlight-color; + padding: 2px 10px; + border-radius: 5px; + border: none; - &:hover { - box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); - } + &:hover { + box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); + } } .icon-button { - background: none; + background: none !important; border: none; color: $font-color; cursor: pointer; @@ -21,7 +21,7 @@ a { color: inherit; text-decoration: none; - background: none; + background: none !important; padding: 0; border-radius: 0; } diff --git a/app/assets/stylesheets/components/_card.scss b/app/assets/stylesheets/components/_card.scss new file mode 100644 index 0000000..8bcbe15 --- /dev/null +++ b/app/assets/stylesheets/components/_card.scss @@ -0,0 +1,33 @@ +.gt-card { + padding: $roundness; + border-radius: $roundness; + border: 1px solid $line-color; + margin: 0 0 0.5rem; + max-width: 100%; +} + +.card-heading { + color: $font-color; + display: flex; + align-items: center; + justify-content: space-between; + h1 { + margin: 0; + } + + h2 { + margin: 0; + } + + a { + color: $font-color; + text-decoration: none; + background-color: $highlight-color; + padding: 2px 10px; + border-radius: 5px; + } + + a:hover{ + box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); + } +} \ No newline at end of file diff --git a/app/assets/stylesheets/components/_form.scss b/app/assets/stylesheets/components/_form.scss index 0807b12..892c24e 100644 --- a/app/assets/stylesheets/components/_form.scss +++ b/app/assets/stylesheets/components/_form.scss @@ -1,43 +1,43 @@ .form-heading { - display: flex; - align-items: center; - gap: 0.5rem; + display: flex; + align-items: center; + gap: 0.5rem; - margin-bottom: 0.5rem; + margin-bottom: 0.5rem; - h1, h2, h3 { - margin: 0; - } + h1, h2, h3 { + margin: 0; + } } .gt-form { - input, select { - height: 34px; - width: 100%; - padding: 0 0.5rem; - outline: none; - border-radius: 5px; - background-color: $line-color; - color: $font-color; - border: none; - margin-bottom: 4px; - } + input, select { + height: 34px; + width: 100%; + padding: 0 0.5rem; + outline: none; + border-radius: 5px; + background-color: $line-color; + color: $font-color; + border: none; + margin-bottom: 4px; + } - input[type="submit"] { - background-color: $highlight-color; - border: none; - padding: 2px 10px; - border-radius: 5px; - margin-top: 4px; + input[type="submit"] { + background-color: $highlight-color; + border: none; + padding: 2px 10px; + border-radius: 5px; + margin-top: 4px; - &:hover{ - box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); - } + &:hover{ + box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); } + } } .form-card-container { - width: 100%; - max-width: 600px; - margin: 0 auto; + width: 100%; + max-width: 600px; + margin: 0 auto; } \ No newline at end of file diff --git a/app/assets/stylesheets/components/_pagination.scss b/app/assets/stylesheets/components/_pagination.scss index b9349db..a88ee17 100644 --- a/app/assets/stylesheets/components/_pagination.scss +++ b/app/assets/stylesheets/components/_pagination.scss @@ -1,9 +1,9 @@ .pagination-box { - border: 1px solid $background-color; - border-radius: 5px; - text-align: center; - line-height: 30px; - width: 30px; - height: 30px; - margin: 0 5px; + border: 1px solid $background-color; + border-radius: 5px; + text-align: center; + line-height: 30px; + width: 30px; + height: 30px; + margin: 0 5px; } \ No newline at end of file diff --git a/app/assets/stylesheets/components/_progress_bar.scss b/app/assets/stylesheets/components/_progress_bar.scss index 0b79dfd..3320111 100644 --- a/app/assets/stylesheets/components/_progress_bar.scss +++ b/app/assets/stylesheets/components/_progress_bar.scss @@ -1,25 +1,26 @@ .progress-bar { - margin: 0; - padding: 0; - border-radius: 1px; - background-color: $line-color; - height: 3px; + margin: 0; + padding: 0; + border-radius: 1px; + background-color: $line-color; + height: 3px; - .progress { - padding: 0; - height: 100%; - width: 0; - background-color: $highlight-color; - transition: width 0.3s ease-in-out; - } + .progress { + padding: 0; + height: 100%; + width: 0; + background-color: $highlight-color; + transition: width 0.3s ease-in-out; + } } +// Awkward fix for padding issues in grids .px-12px { - padding-left: 12px; - padding-right: 12px; + padding-left: 12px; + padding-right: 12px; } .mx-12px { - margin-left: 12px; - margin-right: 12px; + margin-left: 12px; + margin-right: 12px; } \ No newline at end of file diff --git a/app/assets/stylesheets/components/_stats.scss b/app/assets/stylesheets/components/_stats.scss new file mode 100644 index 0000000..b697e12 --- /dev/null +++ b/app/assets/stylesheets/components/_stats.scss @@ -0,0 +1,27 @@ +.stats-container { + display: grid; + grid-template-columns: 1fr 1fr 1fr; + text-align: center; + margin-bottom: 0.5rem; + + .stat-header { + color: $text; + font-size: 1rem; + } + + .stat-content { + color: $brand-light; + font-size: 2rem; + text-decoration: none; + + a { + color: inherit; + text-decoration: inherit; + } + } + + + @media (max-width: $breakpoint-sm) { + grid-template-columns: 1fr; + } +} \ No newline at end of file diff --git a/app/assets/stylesheets/layout/_footer.scss b/app/assets/stylesheets/layout/_footer.scss index b6b9643..208da77 100644 --- a/app/assets/stylesheets/layout/_footer.scss +++ b/app/assets/stylesheets/layout/_footer.scss @@ -1,19 +1,19 @@ footer { - background-color: $line-color; - padding: 10px; - display: flex; - gap: 1rem; - justify-content: center; - align-items: center; + background-color: $line-color; + padding: 10px; + display: flex; + gap: 1rem; + justify-content: center; + align-items: center; - a { - margin: 0 0.5rem; - text-decoration: none; - color: inherit; - } + a { + margin: 0 0.5rem; + text-decoration: none; + color: inherit; + } - @media (max-width: $breakpoint-lg) { - width: 100%; - margin: 0; - } + @media (max-width: $breakpoint-lg) { + width: 100%; + margin: 0; + } } \ No newline at end of file diff --git a/app/assets/stylesheets/layout/_header.scss b/app/assets/stylesheets/layout/_header.scss index e699ead..2e305eb 100644 --- a/app/assets/stylesheets/layout/_header.scss +++ b/app/assets/stylesheets/layout/_header.scss @@ -1,54 +1,120 @@ header { - background-color: $bg-dark; - width: 400px; - border-right: 1px solid $bg-light; - flex-shrink: 0; - padding: 1rem; - height: 100vh; - overflow-y: auto; - position: fixed; - top: 0; - flex-shrink: 0; - - .side-heading { - .title { - font-size: 2.5rem; - line-height: 2.5rem; - } - - .account { - margin-bottom: 0.5rem; - } - - border-bottom: 1px solid $bg-light; - } + background-color: $bg-dark; + width: 400px; + border-right: 1px solid $bg-light; + flex-shrink: 0; + padding: 1rem; + height: 100vh; + overflow-y: auto; + position: fixed; + top: 0; + flex-shrink: 0; - .side-content { - margin-top: 0.5rem; - @media (max-width: $breakpoint-lg) { - display: none; - } + .side-heading { + .title { + font-size: 2.5rem; + line-height: 2.5rem; } - a { - color: $font-color; - text-decoration: none; + .account { + margin-bottom: 0.5rem; } - .due-date { - color: $font-secondary-color; - font-style: italic; - } + border-bottom: 1px solid $bg-light; + } + .side-content { + margin-top: 0.5rem; @media (max-width: $breakpoint-lg) { - width: 100%; - max-width: 100%; - border-right: none; - position: relative; - height: fit-content; + display: none; } + } - @media (max-width: $breakpoint-md) { - padding: 0.5rem; - } + a { + color: $font-color; + text-decoration: none; + } + + .due-date { + color: $font-secondary-color; + font-style: italic; + } + + @media (max-width: $breakpoint-lg) { + width: 100%; + max-width: 100%; + border-right: none; + position: relative; + height: fit-content; + } + + @media (max-width: $breakpoint-md) { + padding: 0.5rem; + } +} + +.quicklog { /*Can probably switch to gt-form once polished (TODO)*/ + //width: 400px; + margin-top: 0; + + input { + width: 100%; + height: 30px; + outline: none; + border-radius: 5px; + background-color: $line-color; + color: $font-color; + border: none; + } + + .split-row { + display: flex; + flex-direction: row; + justify-content: space-between; + gap: 0.5rem; + } + + #module_code, #minutes { + margin: 0; + padding: 0 0.5rem; + } + + input[type="submit"] { + margin-top: 0.5rem; + background-color: $highlight-color; + border: none; + width: 100% + } +} + +.module-list { + width: 100%; + a { + color: $font-color; + text-decoration: none; + } + + .card-heading { + margin-bottom: 0; + } + + .name-row { + margin-top: 0.5rem; + display: flex; + } + + .mod-code { + flex: 0 0 100px; + } + + .mod-name { + flex: 1; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + + .module-selected { + color: $text-muted; + } } \ No newline at end of file diff --git a/app/assets/stylesheets/pages/_home.scss b/app/assets/stylesheets/pages/_home.scss index 4f4d209..8ca6816 100644 --- a/app/assets/stylesheets/pages/_home.scss +++ b/app/assets/stylesheets/pages/_home.scss @@ -1,249 +1,68 @@ -html, body { - height: 100%; +.page-heading { + display: flex; + justify-content: space-between; + align-items: center; + border-bottom: 2px solid $line-color; + margin-bottom: 10px; + + .left-button, + .right-button { + flex: 1 1 0; + display: flex; + + } + + .right-button { + justify-content: flex-end; + } + + h1 { + flex: 1 1 auto; margin: 0; - color: $font-color; - font-family: Roboto, sans-serif; - font-size: $font-size; -} - -body { - background-color: $background-color; - display: flex; - flex-direction: row; - - @media (max-width: $breakpoint-lg) { - flex-direction: column; - } -} - -main { - flex: 1; - display: flex; - flex-direction: column; - flex-grow: 1; - - @media (max-width: $breakpoint-lg) { - flex-direction: column; - } -} - -.not-header { - width: calc(100% - 400px); - margin-left: 400px; - display: flex; - flex-direction: column; - min-height: 100vh; - - @media (max-width: $breakpoint-lg) { - width: 100%; - margin: 0; - } -} - -.not-header-login { - width: 100%; - display: flex; - flex-direction: column; - min-height: 100vh; -} - -h1, h2, h3 { - color: $text-bold; -} - -h1 { - font-size: 2rem; -} - -h2 { - font-size: 1.5rem; -} - -.main-content { - display: flex; - flex-direction: column; - flex-grow: 1; - padding: 1rem; - width: 100%; - max-width: $max-page-width; - margin: 0 auto; - - @media (max-width: $breakpoint-md) { - padding: 0.5rem; - } + text-align: center; + } } -.module-list { - width: 100%; - a { - color: $font-color; - text-decoration: none; - } - - .card-heading { - margin-bottom: 0; - } - - .name-row { - margin-top: 0.5rem; - display: flex; - } - - .mod-code { - flex: 0 0 100px; - } - - .mod-name { - flex: 1; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - } - - .module-selected { - color: $text-muted; - } -} +.section-heading { + border-bottom: 2px solid $line-color; + display: flex; + justify-content: space-between; + margin-bottom: 10px; -.gt-card { - padding: $roundness; - border-radius: $roundness; - //background-color: $line-color; - border: 1px solid $line-color; - margin: 0 0 0.5rem; - max-width: 100%; - //box-shadow: 4px 4px 5px rgba(0, 0, 0, 0.2); + h1 { + margin: 0; + } } .chart-container { - display: flex; - flex: 1 1; - width: 100%; - min-height: 300px; - min-width: 0; - max-width: 100%; - box-sizing: border-box; - - canvas { - position: absolute; - } -} - -.quicklog { /*Can probably switch to gt-form once polished (TODO)*/ - //width: 400px; - margin-top: 0; - - input { - width: 100%; - height: 30px; - outline: none; - border-radius: 5px; - background-color: $line-color; - color: $font-color; - border: none; - } - - .split-row { - display: flex; - flex-direction: row; - justify-content: space-between; - gap: 0.5rem; - } - - #module_code, #minutes { - margin: 0; - padding: 0 0.5rem; - } + display: flex; + flex: 1 1; + width: 100%; + min-height: 300px; + min-width: 0; + max-width: 100%; + box-sizing: border-box; - input[type="submit"] { - margin-top: 0.5rem; - background-color: $highlight-color; - border: none; - width: 100% - } + canvas { + position: absolute; + } } .exam-row { - border-top: 1px solid $background-color; - background-color: $background-color; -} - -.page-heading { - display: flex; - justify-content: space-between; - align-items: center; - border-bottom: 2px solid $line-color; - margin-bottom: 10px; - - .left-button, - .right-button { - flex: 1 1 0; - display: flex; - - } - - .right-button { - justify-content: flex-end; - } - - h1 { - flex: 1 1 auto; - margin: 0; - text-align: center; - } -} - -.section-heading { - border-bottom: 2px solid $line-color; - display: flex; - justify-content: space-between; - margin-bottom: 10px; - - h1 { - margin: 0; - } -} - -.card-heading { - color: $font-color; - display: flex; - align-items: center; - justify-content: space-between; - h1 { - margin: 0; - } - - h2 { - margin: 0; - } - - a { - color: $font-color; - text-decoration: none; - background-color: $highlight-color; - padding: 2px 10px; - border-radius: 5px; - } - - a:hover{ - box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); - } + border-top: 1px solid $background-color; + background-color: $background-color; } .gt-table { - width: 100%; - border-collapse: collapse; - margin: 10px 0; + width: 100%; + border-collapse: collapse; + margin: 10px 0; - th, td { - padding: 10px; - text-align: left; - border-bottom: 1px solid $background-color; - } - - // tr:nth-child(even) { - // background-color: $line-color; - // } + th, td { + padding: 10px; + text-align: left; + border-bottom: 1px solid $background-color; + } } .th-content { @@ -252,162 +71,36 @@ h2 { } .stat { - font-size: 40px; -} - -.unstyle-link { - text-decoration: none; - - &:hover { - text-decoration: underline; - } -} - -.font-secondary { - color: $font-secondary-color; - font-size: 0.8em; -} - -.login-container { - flex: 1; - display: flex; - justify-content: center; - align-items: center; -} - -.login { - width: fit-content; - .gt-card { - padding: 1rem; - } - - h1 { - margin-bottom: 1rem; - } - .omniauth { - width: 100%; - color: $font-color; - background: none; - border: 1px solid $line-color; - border-radius: $roundness; - font-size: 1.5rem; - margin: 10px auto; - i { - margin-right: 0.5rem; - } - } - - .field { - border-radius: $roundness; - margin-bottom: 10px; - } - - #user_remember_me { - width: 20px; - margin: 0; - } - - .checkbox-container { - display: flex; - align-items: center; - gap: 0.5rem; - } - - input[type="submit"] { - margin: 0.5rem 0 !important; - } + font-size: 40px; } .center { - text-align: center; - a { - display: inline-block; - } -} - -.divider { - display: flex; - align-items: center; - text-align: center; - color: $font-secondary-color; - font-size: 0.9rem; - margin: 0.5rem 0; - - &::before, - &::after { - content: ""; - flex: 1; - border-bottom: 1px solid $line-color; - } - - &::before { - margin-right: 10px; - } - - &::after { - margin-left: 10px; - } -} - -.alert-bar { - width: 100%; - padding: 0.5rem; - text-align: center; - margin: 0; -} - -.ab-notice { - background-color: $success; -} - -.ab-danger { - background-color: $danger; -} - -.ab-warning { - background-color: $warning; -} - -.text-danger { - color: $danger; -} - -.icon { + text-align: center; + a { display: inline-block; - background: none; - border: none; - color: $font-color; - padding: 0; -} - -.text-brand-light { - color: $brand-light + } } -.stats-container { - display: grid; - grid-template-columns: 1fr 1fr 1fr; - text-align: center; - margin-bottom: 0.5rem; - - .stat-header { - color: $text; - font-size: 1rem; - } - - .stat-content { - color: $brand-light; - font-size: 2rem; - text-decoration: none; - - a { - color: inherit; - text-decoration: inherit; - } - } - - - @media (max-width: $breakpoint-sm) { - grid-template-columns: 1fr; - } +.divider { + display: flex; + align-items: center; + text-align: center; + color: $font-secondary-color; + font-size: 0.9rem; + margin: 0.5rem 0; + + &::before, + &::after { + content: ""; + flex: 1; + border-bottom: 1px solid $line-color; + } + + &::before { + margin-right: 10px; + } + + &::after { + margin-left: 10px; + } } \ No newline at end of file diff --git a/app/assets/stylesheets/pages/_login.scss b/app/assets/stylesheets/pages/_login.scss new file mode 100644 index 0000000..a370930 --- /dev/null +++ b/app/assets/stylesheets/pages/_login.scss @@ -0,0 +1,49 @@ +.login-container { + flex: 1; + display: flex; + justify-content: center; + align-items: center; +} + +.login { + width: fit-content; + .gt-card { + padding: 1rem; + } + + h1 { + margin-bottom: 1rem; + } + .omniauth { + width: 100%; + color: $font-color; + background: none; + border: 1px solid $line-color; + border-radius: $roundness; + font-size: 1.5rem; + margin: 10px auto; + i { + margin-right: 0.5rem; + } + } + + .field { + border-radius: $roundness; + margin-bottom: 10px; + } + + #user_remember_me { + width: 20px; + margin: 0; + } + + .checkbox-container { + display: flex; + align-items: center; + gap: 0.5rem; + } + + input[type="submit"] { + margin: 0.5rem 0 !important; + } +} \ No newline at end of file From 38a1b4ffb4d5efad908ff5f528d628da7dbb76ec Mon Sep 17 00:00:00 2001 From: Ryan Turner <100864486+Turnlings@users.noreply.github.com> Date: Wed, 6 Aug 2025 16:33:27 +0100 Subject: [PATCH 3/3] style: cleanup upcoming assessments --- app/assets/stylesheets/layout/_header.scss | 14 +++++++------- app/views/layouts/_sidebar.html.haml | 19 +++++++------------ 2 files changed, 14 insertions(+), 19 deletions(-) diff --git a/app/assets/stylesheets/layout/_header.scss b/app/assets/stylesheets/layout/_header.scss index 2e305eb..9a30b53 100644 --- a/app/assets/stylesheets/layout/_header.scss +++ b/app/assets/stylesheets/layout/_header.scss @@ -98,10 +98,14 @@ header { margin-bottom: 0; } - .name-row { - margin-top: 0.5rem; - display: flex; + .module-selected { + color: $text-muted; } +} + +.name-row { + margin-top: 0.5rem; + display: flex; .mod-code { flex: 0 0 100px; @@ -113,8 +117,4 @@ header { overflow: hidden; text-overflow: ellipsis; } - - .module-selected { - color: $text-muted; - } } \ No newline at end of file diff --git a/app/views/layouts/_sidebar.html.haml b/app/views/layouts/_sidebar.html.haml index 83521ca..39451e1 100644 --- a/app/views/layouts/_sidebar.html.haml +++ b/app/views/layouts/_sidebar.html.haml @@ -36,21 +36,16 @@ .progress-bar .progress{style: "width: #{m.completion_percentage(current_user)}%"} - .gt-card + .gt-card.upcoming-assessments %h2 Upcoming Assessments - if @next_exams - @next_exams.each do |exam| = link_to uni_module_exam_path(exam.uni_module, exam) do - .row - .col-12 - .row - .col.mod-code= exam.uni_module.code - .col.text-truncate= exam.name - .col-1.text-end.icon-button.pe-3 - %i.fa-solid.fa-arrow-right - .row - .col.due-date.font-secondary - Due: - = exam.due.strftime("%d %b %Y, %H:%M") + .name-row + .mod-code= exam.uni_module.code + .text-truncate= exam.name + .due-date.font-secondary + Due: + = exam.due.strftime("%d %b %Y, %H:%M") - else %span No upcoming assessments. \ No newline at end of file