diff --git a/rocky-interface/src/lib/components/Topbar.svelte b/rocky-interface/src/lib/components/Topbar.svelte index ec9741f..ae356b0 100644 --- a/rocky-interface/src/lib/components/Topbar.svelte +++ b/rocky-interface/src/lib/components/Topbar.svelte @@ -12,11 +12,9 @@
diff --git a/rocky-interface/src/lib/styles/components/components.css b/rocky-interface/src/lib/styles/components/components.css index 886caaf..2fdb380 100644 --- a/rocky-interface/src/lib/styles/components/components.css +++ b/rocky-interface/src/lib/styles/components/components.css @@ -4,7 +4,8 @@ /* ========== TOPBAR ========== */ .topbar { - height: var(--size-topbar-height); + position: relative; + height: 80px; background: var(--color-bg-topbar); display: flex; align-items: center; @@ -13,6 +14,8 @@ box-shadow: var(--shadow-topbar); flex-shrink: 0; border-bottom: 3px solid var(--color-highlight-gold); + padding-top: 3px; + box-sizing: content-box; } .brand-logo { @@ -39,9 +42,21 @@ } .ksu-logo { - height: 40px; - width: auto; - margin-left: auto; + height: 40px; + width: auto; + position: absolute; + left: 83%; + transform: translateX(-0%); +} + +@media (max-width: 768px) { + .ksu-logo { + height: 28px; + position: static; + transform: none; + margin-left: auto; + margin-right: var(--space-sm); + } } /* Hamburger menu styles, doesn't show on desktop */ @@ -90,10 +105,10 @@ background: transparent; text-align: left; color: var(--color-text-inverse); - padding: 14px var(--space-lg); + padding: 16px var(--space-lg); width: 100%; cursor: pointer; - font-size: var(--font-size-base); + font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); transition: background-color var(--transition-base); border-left: 4px solid transparent; @@ -108,8 +123,13 @@ border-left-color: var(--color-highlight-gold); } +.nav-link-icon { + width: 22px; + height: 22px; +} + .spacer { - flex: 1; + flex: 0; } @media (max-width: 768px) { @@ -117,22 +137,26 @@ flex: 0; } } + /* Overlay for mobile sidebar */ @media (max-width: 768px) { .sidebar { position: fixed; - top: var(--size-topbar-height); + top: 80px; left: 0; - height: calc(100% - var(--size-topbar-height)); + height: calc(100% - 80px); transform: translateX(-100%); transition: transform 0.25s ease; z-index: 200; + overflow-y: auto; + justify-content: flex-start; } .sidebar.open { transform: translateX(0); } } + .sidebar-backdrop { display: none; } @@ -141,7 +165,7 @@ .sidebar-backdrop { display: block; position: fixed; - inset: var(--size-topbar-height) 0 0 0; + inset: 80px 0 0 0; background: rgba(0, 0, 0, 0.4); z-index: 199; } @@ -256,11 +280,14 @@ /* Mobile View for Courses Sidebar */ @media (max-width: 768px) { .course-popout { - position: static; + position: static !important; + left: auto; + top: auto; + bottom: auto; width: 100%; height: auto; max-height: 400px; - border-radius: 0; + border-radius: 0px; border-left: none; border-right: none; box-shadow: none; @@ -272,7 +299,20 @@ @media (max-width: 768px) { .course-popout-header { - display: none; + display: none ! important; + } +} + +@media (max-width: 768px) { + .course-tab-group { + position: static; + } +} + +@media (max-width: 768px) { + .sidebar .course-popout { + max-width: var(--size-sidebar-width); + overflow-x: hidden; } } @@ -471,6 +511,43 @@ text-decoration: underline; } +/* ========== COURSE COMPOSER ========== */ +.course-composer-layer { + position: fixed; + inset: 0; + background: rgba(0, 0, 0, 0.5); + z-index: 300; + display: flex; + align-items: center; + justify-content: center; + padding: var(--space-lg); +} + +.course-composer-popout { + background: var(--color-bg-primary); + border-radius: var(--radius-md); + box-shadow: var(--shadow-xl); + padding: var(--space-xl); + width: 100%; + max-width: 600px; + max-height: 90vh; + overflow-y: auto; + box-sizing: border-box; +} + +.course-composer-title-row { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: var(--space-lg); +} + +.course-composer-title-row h3 { + margin: 0; + font-size: var(--font-size-lg); + font-weight: var(--font-weight-bold); +} + /* ========== LIST VIEW ========== */ .list-row { display: flex; diff --git a/rocky-interface/src/lib/styles/components/modules/sidebar.css b/rocky-interface/src/lib/styles/components/modules/sidebar.css index 5e043c2..858a7f7 100644 --- a/rocky-interface/src/lib/styles/components/modules/sidebar.css +++ b/rocky-interface/src/lib/styles/components/modules/sidebar.css @@ -19,15 +19,22 @@ gap: var(--space-sm); text-align: left; color: var(--color-text-inverse); - padding: 14px var(--space-lg); + padding: 20px var(--space-lg); width: 100%; cursor: pointer; - font-size: var(--font-size-base); + font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); transition: background-color var(--transition-base); border-left: 4px solid transparent; } +@media (max-width: 768px) { + .nav-link { + padding: 16px var(--space-lg); + font-size: var(--font-size-base); + } +} + .nav-link-icon { width: 18px; height: 18px; diff --git a/rocky-interface/src/lib/styles/foundation/tokens.css b/rocky-interface/src/lib/styles/foundation/tokens.css index c5bdc17..8496f8d 100644 --- a/rocky-interface/src/lib/styles/foundation/tokens.css +++ b/rocky-interface/src/lib/styles/foundation/tokens.css @@ -90,7 +90,7 @@ --transition-slow: 0.2s; /* --------- SIZES --------- */ - --size-topbar-height: 60px; + --size-topbar-height: 80px; --size-sidebar-width: 240px; --size-widget-panel-width: 300px; diff --git a/rocky-interface/src/lib/styles/layout/modules/view-structure.css b/rocky-interface/src/lib/styles/layout/modules/view-structure.css index ca4918a..d162db8 100644 --- a/rocky-interface/src/lib/styles/layout/modules/view-structure.css +++ b/rocky-interface/src/lib/styles/layout/modules/view-structure.css @@ -68,3 +68,24 @@ background: var(--color-gray-300); border-radius: 3px; } + +@media (max-width: 768px) { + .view-header { + flex-wrap: wrap; + gap: var(--space-md); + } + + .view-title h1 { + font-size: var(--font-size-xl); + } + + .view-actions { + flex-shrink: 1; + gap: var(--space-sm); + } + + .view-btn { + padding: 6px var(--space-md); + font-size: var(--font-size-xs); + } +} \ No newline at end of file diff --git a/rocky-interface/src/lib/styles/routes/modules/users-view.css b/rocky-interface/src/lib/styles/routes/modules/users-view.css index dcab61f..af7c37e 100644 --- a/rocky-interface/src/lib/styles/routes/modules/users-view.css +++ b/rocky-interface/src/lib/styles/routes/modules/users-view.css @@ -17,6 +17,8 @@ font-weight: var(--font-weight-semibold); } + + .whitelist-heading { margin: 0 0 12px 0; } @@ -69,7 +71,7 @@ } .users-col-id { - width: 20%; + width: 30%; } .users-col-admin { @@ -104,3 +106,29 @@ grid-template-columns: 1fr; } } + +@media (max-width: 768px) { + .table-container { + overflow-x: auto; + -webkit-overflow-scrolling: touch; + } + + .users-table { + min-width: 740px; + table-layout: fixed; + } + + .users-col-name { width: 130px; } + .users-col-email { width: 200px; } + .users-col-id { width: 210px; } + .users-col-admin { width: 60px; } + .users-col-active { width: 60px; } + .users-col-actions { width: 110px; } + + .users-table td, + .users-table th { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } +} \ No newline at end of file diff --git a/rocky-interface/static/navbar.svg b/rocky-interface/static/navbar.svg new file mode 100644 index 0000000..d2bc1ad --- /dev/null +++ b/rocky-interface/static/navbar.svg @@ -0,0 +1 @@ + \ No newline at end of file