Styling and CSS
Relevant source files
The following files were used as context for generating this wiki page:The styling of the Campuspal Room Finder application is handled by a single comprehensive stylesheet, styles.css. The design philosophy aims for a "sleek, modern, and unforgettable" user experience, drawing inspiration from minimalist applications. It employs a modern CSS architecture using custom properties for theming, a responsive layout built with Flexbox, and a component-based approach to styling UI elements.
This system ensures a consistent and visually appealing interface across the application, from the main search page to the data upload forms. Interactive elements are enhanced with subtle animations and transitions, and a dark mode theme is available to suit user preferences. The styling is directly linked from the Django templates and is configured within the project's settings.
Sources: README.md, finder/static/finder/css/styles.css
CSS Architecture
The project's styling is centralized in finder/static/finder/css/styles.css. It follows modern practices, including the extensive use of CSS Custom Properties (variables) for a maintainable and themeable design. The structure is organized into global styles, layout rules, and individual component styles.
Sources: finder/static/finder/css/styles.css
Static File Configuration
The Django project is configured to serve the stylesheet from the finder/static directory.
STATIC_URLis set to"static/".STATICFILES_DIRSis configured to include thefinder/staticdirectory.- The stylesheet is loaded in HTML templates using the
{% static %}template tag:<link rel="stylesheet" href="{% static 'finder/css/styles.css' %}">.
Sources: roomfinder/settings.py:133-134, finder/templates/finder/search.html:10
Theming and Color Palette
The application features a robust theming system built on CSS Custom Properties defined in the :root selector. This allows for easy adjustments to the color scheme and other global style values. A dark theme is implemented by overriding these variables within a .theme-dark class selector.
Color and Style Variables
The core color palette is defined using HSL values, which makes modifying hues and saturation straightforward.
| Property | Default Value | Description |
|---|---|---|
--primary-color | hsl(265, 88%, 55%) | Main brand and accent color. |
--text-primary | #0f172a | Primary text color. |
--text-secondary | #64748b | Secondary text color for labels and subtitles. |
--surface-color | #ffffff | Background color for primary surfaces like cards. |
--background-color | #f6f7fb | Main body background color. |
--border-color | #e2e8f0 | Default border color for components. |
--success-color | #10b981 | Color for success states and "free" timeline blocks. |
--danger-color | #ef4444 | Color for error states and "booked" timeline blocks. |
--font-family | 'Inter', ui-sans-serif, ... | The primary font stack for the application. |
--border-radius | 0.875rem | The standard border radius for card components. |
Sources: finder/static/finder/css/styles.css:1-33
Dark Theme
A dark theme is available and can be toggled by the user. The finder/static/finder/js/scripts.js file handles the logic for applying the .theme-dark class to the root <html> element and persisting the user's choice in localStorage.
The CSS for the dark theme overrides the default variables:
/* finder/static/finder/css/styles.css:63-74 */
.theme-dark {
--primary-contrast: #0b1020;
--surface-color: #0b1220;
--surface-elevated: rgba(15, 23, 42, 0.65);
--background-color: #0a0f1c;
--text-primary: #e2e8f0;
--text-secondary: #94a3b8;
--border-color: #1e293b;
}
The diagram below illustrates the theme toggling flow.
Layout and Responsiveness
The application uses a responsive, two-column layout for the main search page, which adapts to a single column on smaller screens.
.app-container: The root flex container, set toflex-direction: column..main-content: A flex container that holds the sidebar and results section, arranged side-by-side with a2remgap..sidebar: A fixed-width container (320px) for the search form..results-section: A flexible container that takes the remaining space.
Responsive Behavior
A media query handles the layout shift on screens narrower than 768px. The .main-content flex-direction is changed to column, stacking the sidebar on top of the results.
/* finder/static/finder/css/styles.css:608-615 */
@media (max-width: 768px) {
.main-content {
flex-direction: column;
padding: 1rem;
}
.sidebar {
width: 100%;
}
}
Sources: finder/static/finder/css/styles.css:82-90, 142-152, 608-623, finder/templates/finder/search.html:24-58
Styled Components
The UI is built from a set of consistently styled components.
Cards (.card)
The .card class is a fundamental building block used for the search form, modal windows, and initial empty state message. It features a subtle gradient, backdrop-filter for a frosted glass effect, a border, and a box shadow.
Sources: finder/static/finder/css/styles.css:154-162, finder/templates/finder/search.html:27, 60
Timeline View
The visual timeline is a key feature and has dedicated styling to clearly distinguish between free and booked time slots.
| Class | Description |
|---|---|
.timeline-row | Container for a single room's timeline. Becomes clickable to open the details modal. |
.timeline | The main bar representing the full day. It has a faint vertical grid created with a linear-gradient background on its ::before pseudo-element. |
.timeline-block | An absolutely positioned block representing a time segment. Its left and width are set via inline styles calculated in the backend. |
.timeline-block.free | Styled with a green gradient and a subtle, animated stripe pattern to indicate availability. |
.timeline-block.booked | Styled with a red gradient and a static dark stripe pattern. |
The animation for the "free" blocks provides a dynamic feel:
/* finder/static/finder/css/styles.css:391-394 */
@keyframes stripe-animate {
from { background-position: 0 0; }
to { background-position: 20px 0; }
}
Sources: finder/static/finder/css/styles.css:322-404, README.md
Modal (.modal)
The room details modal is implemented with CSS and controlled by JavaScript.
- The
.modalcontainer is aposition: fixedoverlay with abackdrop-filterto blur the background. - Visibility is controlled by adding/removing the
.showclass, which changesdisplayfromnonetoflex. - A fade-in and scale-up animation (
modal-fade-in) is applied when the modal appears. - The
.modal-contentis a.cardthat holds the dynamically populated room details.
The following diagram shows the sequence of events when a user opens the modal.
Tabs
Search results are organized into "Available" and "Unavailable" tabs.
.tab-link: The clickable tab button..tab-link.active: The active tab is styled with the primary color and a bottom border..tab-content: The container for the tab's content..tab-content.active: The active content panel is set todisplay: block.
JavaScript manages toggling the .active class on both the links and content panels based on user clicks.
Sources: finder/static/finder/css/styles.css:268-295, finder/static/finder/js/scripts.js:81-95
Upload Page
The file upload page (upload_excel.html) features a drag-and-drop component with distinct visual states.
.upload-drop-zone: The main drop area, styled with a dashed border.:hover/.drag-over: The border color changes to the primary color to provide feedback during a drag operation..file-selected: After a file is selected, the border and icon change to the success color.
These state changes are managed by JavaScript event listeners.
Sources: finder/static/finder/css/styles.css:503-558, finder/templates/finder/upload_excel.html:41-59, finder/static/finder/js/scripts.js:136-181
Conclusion
The CSS and styling architecture of the Campuspal Room Finder is modern, maintainable, and focused on providing a high-quality user experience. By leveraging CSS Custom Properties, a component-based approach, and thoughtful responsive design, the application achieves a clean and intuitive interface. The integration of JavaScript for dynamic class manipulation enables interactive features like theming, modals, and tabs, contributing to the project's goal of a polished and "unforgettable" design.
Sources: README.md, finder/static/finder/css/styles.css