Skip to content
This repository was archived by the owner on May 7, 2026. It is now read-only.

Hide widget panel, add course dropdown, and burger easter egg for mobile view #214

Merged
IanRohrbacher merged 6 commits into from
Apr 22, 2026
Merged

Hide widget panel, add course dropdown, and burger easter egg for mobile view #214

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
a4575ad
Hide widget panel on mobile view
moonshadow2 Apr 19, 2026
d1fa06f
Visible Help View on Mobile #213
moonshadow2 Apr 19, 2026
5d7157c
Added a Dropdown for Courses for Mobile #212
moonshadow2 Apr 19, 2026
115cdab
🍔 #204
moonshadow2 Apr 19, 2026
0f20072
Update .gitignore
moonshadow2 Apr 20, 2026
e27ae19
Simplify hamburger behavior
moonshadow2 Apr 20, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,4 +6,5 @@ __pycache__/
.env.*
!.env.example
!.env.test
.venv/
.venv/
.DS_Store
11 changes: 8 additions & 3 deletions rocky-interface/src/lib/components/Topbar.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,13 +6,18 @@
let { user = null }: { user: User | null } = $props();

let showAdministration = $derived(Boolean(user?.isAdmin));
const isHamburgerDay = Math.random() < 0.05; // x% chance to show the hamburger icon
</script>

<header class="topbar">
<button class="hamburger" aria-label="Toggle menu" onclick={() => sidebarOpen.update(open => !open)}>
<span class="hamburger-line"></span>
<span class="hamburger-line"></span>
<span class="hamburger-line"></span>
{#if isHamburgerDay}
<img src="/hamburger.svg" alt="Menu" class="hamburger-icon" />
{:else}
<span class="hamburger-line"></span>
<span class="hamburger-line"></span>
<span class="hamburger-line"></span>
{/if}
</button>

<img src="/rocky.svg" alt="Rocky" class="brand-logo" />
Expand Down
33 changes: 29 additions & 4 deletions rocky-interface/src/lib/styles/components/components.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -112,6 +112,11 @@
flex: 1;
}

@media (max-width: 768px) {
.spacer {
flex: 0;
}
}
/* Overlay for mobile sidebar */
@media (max-width: 768px) {
.sidebar {
Expand Down Expand Up @@ -248,6 +253,29 @@
color: var(--color-text-secondary);
}

/* Mobile View for Courses Sidebar */
@media (max-width: 768px) {
.course-popout {
position: static;
width: 100%;
height: auto;
max-height: 400px;
border-radius: 0;
border-left: none;
border-right: none;
box-shadow: none;
border-top: 1px solid var(--color-gray-200);
border-bottom: 1px solid var(--color-gray-200);
overflow-y: auto;
}
}
Comment on lines +256 to +271

@coderabbitai coderabbitai Bot Apr 20, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

Make the mobile sidebar scroll when the static course dropdown opens.

Line 259 moves the dropdown into normal sidebar flow, but the mobile sidebar has a fixed viewport-height container and no overflow-y. On short phones/landscape, the 400px dropdown plus nav items can become unreachable.

Proposed CSS adjustment 
 `@media` (max-width: 768px) {
+	.sidebar {
+		overflow-y: auto;
+	}
+
 	.course-popout {
 		position: static;
 		width: 100%;
 		height: auto;
-		max-height: 400px;
+		max-height: min(400px, calc(100dvh - var(--size-topbar-height) - var(--space-xl)));
 		border-radius: 0;
 		border-left: none;
 		border-right: none;
 		box-shadow: none;
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
/* Mobile View for Courses Sidebar */
@media (max-width: 768px) {
.course-popout {
position: static;
width: 100%;
height: auto;
max-height: 400px;
border-radius: 0;
border-left: none;
border-right: none;
box-shadow: none;
border-top: 1px solid var(--color-gray-200);
border-bottom: 1px solid var(--color-gray-200);
overflow-y: auto;
}
}
/* Mobile View for Courses Sidebar */
`@media` (max-width: 768px) {
.sidebar {
overflow-y: auto;
}
.course-popout {
position: static;
width: 100%;
height: auto;
max-height: min(400px, calc(100dvh - var(--size-topbar-height) - var(--space-xl)));
border-radius: 0;
border-left: none;
border-right: none;
box-shadow: none;
border-top: 1px solid var(--color-gray-200);
border-bottom: 1px solid var(--color-gray-200);
overflow-y: auto;
}
}
🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@rocky-interface/src/lib/styles/components/components.css` around lines 256 -
271, The .course-popout rule for mobile sets position: static and max-height:
400px but the surrounding mobile sidebar container lacks overflow, causing
content to become unreachable on small screens; update the mobile CSS so that
the parent mobile sidebar (the element that contains .course-popout, e.g., the
mobile nav/sidebar container) is allowed to scroll and/or make .course-popout
able to expand within a scrollable container—specifically add overflow-y: auto
(or overflow: auto) to the mobile sidebar/container selector and ensure
.course-popout can use max-height with overflow-y: auto so the dropdown and
other nav items remain reachable on short viewports.


@media (max-width: 768px) {
.course-popout-header {
display: none;
}
}
Comment on lines +273 to +277

@coderabbitai coderabbitai Bot Apr 20, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
# Verify where the course popout header and create button are rendered.
# Expectation: if .course-popout-create-btn is inside .course-popout-header,
# there should be another mobile-visible way to trigger the same action.
rg -n -C5 'course-popout-header|course-popout-create-btn' --iglob '*.svelte' --iglob '*.css'

Repository: Spring-2026-Software-Engineering/Rocky

Length of output: 5377

Mobile users without canCreateCourse permissions lose access to the create course button.

The .course-popout-create-btn is only rendered inside .course-popout-header (Sidebar.svelte line 190). Hiding the entire header at ≤768px viewport removes this action from mobile users who have permission to create courses, with no visible alternative UI to trigger the same functionality.

🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@rocky-interface/src/lib/styles/components/components.css` around lines 273 -
277, The media query hides the entire .course-popout-header which also removes
the .course-popout-create-btn used by Sidebar.svelte (rendered at the create
button in line ~190), so update the CSS so mobile still exposes the create
button: instead of display:none on .course-popout-header, either hide only
non-action parts (e.g., title/metadata) or add an override for
.course-popout-header .course-popout-create-btn to keep it visible on
max-width:768px (ensure layout and spacing still work and consider using
!important if specificity requires it), or move the .course-popout-create-btn
out of .course-popout-header in the component and style it for mobile.


/* ========== WIDGET PANEL ========== */
.widget-panel {
width: var(--size-widget-panel-width);
Expand All @@ -265,10 +293,7 @@

@media (max-width: 768px) {
.widget-panel {
width: 100%;
min-width: 0;
height: auto;
border-top: 1px solid var(--color-gray-300);
display:none;
}
}

Expand Down
60 changes: 60 additions & 0 deletions rocky-interface/static/hamburger.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading