From 8f4f21a9edf7a2ca43b40883120af13b86b54202 Mon Sep 17 00:00:00 2001 From: Alec Li Date: Fri, 11 Aug 2023 17:21:20 -0700 Subject: [PATCH] Modal/form style changes, consolidate other styles --- csm_web/frontend/src/components/App.tsx | 42 +- csm_web/frontend/src/components/Modal.tsx | 6 +- .../components/course/CreateSectionModal.tsx | 50 +- .../src/components/course/SettingsModal.tsx | 4 +- .../resource_aggregation/ResourceEdit.tsx | 163 +++--- .../resource_aggregation/ResourceLinkEdit.tsx | 2 + .../ResourceWorksheetEdit.tsx | 1 + .../section/CoordinatorAddStudentModal.tsx | 6 +- .../section/MentorSectionAttendance.tsx | 13 +- .../components/section/MentorSectionInfo.tsx | 134 ++--- .../section/MentorSectionRoster.tsx | 18 +- .../src/components/section/MetaEditModal.tsx | 27 +- .../src/components/section/Section.tsx | 18 +- .../section/SpacetimeDeleteModal.tsx | 14 +- .../components/section/SpacetimeEditModal.tsx | 244 +++++---- .../src/components/section/StudentDropper.tsx | 61 ++- .../src/components/section/StudentSection.tsx | 34 +- csm_web/frontend/src/index.tsx | 2 +- .../static/frontend/css/base/_variables.scss | 31 +- .../static/frontend/css/base/base.scss | 33 +- .../static/frontend/css/base/button.scss | 11 + .../css/base/colors-export.module.scss | 6 +- .../static/frontend/css/base/errors.scss | 34 ++ .../static/frontend/css/base/form.scss | 144 ++++++ .../static/frontend/css/base/modal.scss | 71 +-- .../static/frontend/css/base/styles.scss | 13 +- .../static/frontend/css/base/table.scss | 30 ++ .../static/frontend/css/calendar.scss | 34 +- .../frontend/css/coordinator-add-student.scss | 14 +- .../static/frontend/css/course-menu.scss | 2 +- .../static/frontend/css/course-settings.scss | 7 +- .../frontend/static/frontend/css/course.scss | 21 +- .../frontend/static/frontend/css/header.scss | 53 +- .../frontend/static/frontend/css/home.scss | 25 +- .../frontend/static/frontend/css/login.css | 75 +++ .../frontend/css/resource_aggregation.scss | 72 ++- .../frontend/static/frontend/css/section.scss | 180 +++++-- .../static/frontend/css/spacetime-edit.scss | 11 + .../static/frontend/css/spacetime_delete.scss | 17 +- .../static/frontend/css/student_dropper.scss | 55 +- .../frontend/static/frontend/css/style.scss | 486 ------------------ .../static/frontend/css/word-of-the-day.scss | 4 +- .../frontend/static/frontend/img/pencil.svg | 2 +- csm_web/frontend/static/frontend/img/x.svg | 2 +- .../frontend/templates/frontend/login.html | 19 +- 45 files changed, 1198 insertions(+), 1093 deletions(-) create mode 100644 csm_web/frontend/static/frontend/css/base/errors.scss create mode 100644 csm_web/frontend/static/frontend/css/base/form.scss create mode 100644 csm_web/frontend/static/frontend/css/base/table.scss create mode 100644 csm_web/frontend/static/frontend/css/login.css create mode 100644 csm_web/frontend/static/frontend/css/spacetime-edit.scss delete mode 100644 csm_web/frontend/static/frontend/css/style.scss diff --git a/csm_web/frontend/src/components/App.tsx b/csm_web/frontend/src/components/App.tsx index f5b49a97..be050dd6 100644 --- a/csm_web/frontend/src/components/App.tsx +++ b/csm_web/frontend/src/components/App.tsx @@ -118,26 +118,30 @@ function Header(): React.ReactElement { return (
- -
); } diff --git a/csm_web/frontend/src/components/Modal.tsx b/csm_web/frontend/src/components/Modal.tsx index 1bb16161..1957a328 100644 --- a/csm_web/frontend/src/components/Modal.tsx +++ b/csm_web/frontend/src/components/Modal.tsx @@ -19,13 +19,13 @@ export default function Modal({ children, closeModal, className = "" }: ModalPro return (
-
+
-
-
{children}
+
{children}
); diff --git a/csm_web/frontend/src/components/course/CreateSectionModal.tsx b/csm_web/frontend/src/components/course/CreateSectionModal.tsx index 00f40746..ef35c43b 100644 --- a/csm_web/frontend/src/components/course/CreateSectionModal.tsx +++ b/csm_web/frontend/src/components/course/CreateSectionModal.tsx @@ -108,13 +108,14 @@ export const CreateSectionModal = ({ courseId, closeModal, reloadSections }: Cre }; return ( - +
-
{spacetimes.map(({ dayOfWeek, startTime, location }, index) => (

Weekly occurence {index + 1}

-
))} -
- - -
+
+ + +
); }; diff --git a/csm_web/frontend/src/components/course/SettingsModal.tsx b/csm_web/frontend/src/components/course/SettingsModal.tsx index 196c0d34..baafde7a 100644 --- a/csm_web/frontend/src/components/course/SettingsModal.tsx +++ b/csm_web/frontend/src/components/course/SettingsModal.tsx @@ -78,7 +78,7 @@ export const SettingsModal = ({ courseId, closeModal }: SettingsModalProps) => { if (coursesLoaded) { modalContent = (
-

Settings

+

Settings

@@ -95,7 +95,7 @@ export const SettingsModal = ({ courseId, closeModal }: SettingsModalProps) => {
-
-
-
-
-
Week Number
- onChange(e, "weekNum")} - onBlur={() => handleBlur("weekNum")} - /> -
- {formErrors.weekNum && } - {formErrors.weekNum} -
-
-
-
Date
- onChange(e, "date")} - onBlur={() => handleBlur("date")} - /> -
- {formErrors.date && } - {formErrors.date} -
-
-
-
Topics
-
- onChange(e, "topics")} - onBlur={() => handleBlur("topics")} - /> - } - > - Topics should be delimited by semicolons - -
-
- {formErrors.topics && } - {formErrors.topics} -
-
+
+
+ +
+ {formErrors.weekNum && } + {formErrors.weekNum}
-
- - +
+
+ +
+ {formErrors.date && } + {formErrors.date}
+
+
+ +
+ {formErrors.topics && } + {formErrors.topics} +
+
+
+
+ + +
+
+
{!isEditingLinks && (
{hasWorksheets && ( @@ -774,12 +783,14 @@ export const ResourceEdit = ({ resource, onChange, onSubmit, onCancel }: Resourc )}
- - {!(!isEditingLinks && formErrors["existingLinks"].size == 0 && formErrors["newLinks"].size == 0) && - !(isEditingLinks && formErrors["existingWorksheets"].size == 0 && formErrors["newWorksheets"].size == 0) && - tabErrorDisplay} +
+ + {!(!isEditingLinks && formErrors["existingLinks"].size == 0 && formErrors["newLinks"].size == 0) && + !(isEditingLinks && formErrors["existingWorksheets"].size == 0 && formErrors["newWorksheets"].size == 0) && + tabErrorDisplay} +
); diff --git a/csm_web/frontend/src/components/resource_aggregation/ResourceLinkEdit.tsx b/csm_web/frontend/src/components/resource_aggregation/ResourceLinkEdit.tsx index dfcd460a..43457962 100644 --- a/csm_web/frontend/src/components/resource_aggregation/ResourceLinkEdit.tsx +++ b/csm_web/frontend/src/components/resource_aggregation/ResourceLinkEdit.tsx @@ -26,6 +26,7 @@ const ResourceLinkEdit = ({
onBlur()} />
-

Add new students

+

Add new students

{emailsToAdd.map((email, index) => ( @@ -231,7 +231,7 @@ export function CoordinatorAddStudentModal({ const loading_component = ( -

Add new students

+

Add new students

{/* empty element to align the content */} @@ -270,7 +270,7 @@ export function CoordinatorAddStudentModal({ const warning_component = ( -

Add new students

+

Add new students

{conflict_arr.length > 0 && ( diff --git a/csm_web/frontend/src/components/section/MentorSectionAttendance.tsx b/csm_web/frontend/src/components/section/MentorSectionAttendance.tsx index af250bd8..f25c073c 100644 --- a/csm_web/frontend/src/components/section/MentorSectionAttendance.tsx +++ b/csm_web/frontend/src/components/section/MentorSectionAttendance.tsx @@ -265,21 +265,22 @@ const MentorSectionAttendance = ({ sectionId }: MentorSectionAttendanceProps): R
))}
- +
{selectedOccurrence && stagedAttendances.map(({ id, student, presence }) => { const cssSuffix = ATTENDANCE_LABELS[presence][1].toLowerCase(); const attendanceColor = scssColors[`attendance-${cssSuffix}`]; + const attendanceFgColor = scssColors[`attendance-${cssSuffix}-fg`]; return ( - - - + +
{student.name} +
{student.name} - - - +
Name
+ + + {(students.length === 0 ? [{ name: "No students enrolled", email: "", id: -1 }] : students).map( ({ name, email, id: studentId }: Student) => ( - - + - +
Name
+
{isCoordinator && studentId !== -1 && ( -
+
@@ -122,6 +128,58 @@ export default function MentorSectionInfo({ key={spacetime.id} spacetime={spacetime} override={override} + spacetimeActions={ +
+ {spacetimes.length > 1 && isCoordinator ? ( + + ) : ( +
{/* empty div for positioning */}
+ )} + +
+ } + overrideActions={ +
+ + +
+ } > {showModal === ModalStates.SPACETIME_EDIT && focusedSpacetimeID === spacetime.id && ( )} - {spacetimes.length > 1 && isCoordinator && ( - - )} - {override && ( - - )} - - {override && ( - - )} ))} {isCoordinator && ( - +
+
{/* empty div for positioning */}
+ +
{showModal === ModalStates.META_EDIT && (

Roster

{studentsLoaded ? ( - - - - - -
NameEmail + + + + + + @@ -37,9 +37,9 @@ export default function MentorSectionRoster({ id }: MentorSectionRosterProps) { {students.map(({ name, email, id }) => ( - - - + + + ))} diff --git a/csm_web/frontend/src/components/section/MetaEditModal.tsx b/csm_web/frontend/src/components/section/MetaEditModal.tsx index e3bf76d7..d7eb2869 100644 --- a/csm_web/frontend/src/components/section/MetaEditModal.tsx +++ b/csm_web/frontend/src/components/section/MetaEditModal.tsx @@ -24,7 +24,7 @@ export default function MetaEditModal({ setFormState(prevFormState => ({ ...prevFormState, [name]: value })); } - function handleSubmit(event: React.ChangeEvent) { + function handleSubmit(event: React.MouseEvent) { event.preventDefault(); //TODO: Handle API Failure sectionUpdateMutation.mutate(formState); @@ -33,11 +33,12 @@ export default function MetaEditModal({ return ( -
-

Change Section Metadata

- ); } diff --git a/csm_web/frontend/src/components/section/Section.tsx b/csm_web/frontend/src/components/section/Section.tsx index d832fc6c..196a8e9a 100644 --- a/csm_web/frontend/src/components/section/Section.tsx +++ b/csm_web/frontend/src/components/section/Section.tsx @@ -92,6 +92,8 @@ interface SectionSpacetimeProps { children?: React.ReactNode; spacetime: Spacetime; override?: Override; + spacetimeActions?: React.ReactNode; + overrideActions?: React.ReactNode; } export function SectionSpacetime({ @@ -99,16 +101,20 @@ export function SectionSpacetime({ index, spacetime: { location, time }, override, + spacetimeActions, + overrideActions, children }: SectionSpacetimeProps) { return ( + {spacetimeActions} {children}
{time}
{override && (
+ {overrideActions}
Adjusted for {override.date}
{override.spacetime.time}
@@ -122,14 +128,17 @@ interface InfoCardProps { title: string; children?: React.ReactNode; showTitle?: boolean; + extraPadding?: boolean; } -export function InfoCard({ title, children, showTitle = true }: InfoCardProps) { +export function InfoCard({ title, children, showTitle = true, extraPadding = true }: InfoCardProps) { const cssClass = title.toLowerCase().replace(/ /g, "-"); return (
- {showTitle &&

{title}

} -
{children}
+ {showTitle &&

{title}

} +
+ {children} +
); } @@ -141,7 +150,6 @@ interface SectionDetailProps { links: string[][]; children?: React.ReactNode; } - export function SectionDetail({ course, courseTitle, userRole, links, children }: SectionDetailProps) { return (
@@ -156,8 +164,8 @@ export function SectionDetail({ course, courseTitle, userRole, links, children } // Values are [label, css class suffix] export const ATTENDANCE_LABELS: Readonly<{ [label: string]: string[] }> = Object.freeze({ - UN: ["Unexcused Absence", "unexcused"], EX: ["Excused Absence", "excused"], PR: ["Present", "present"], + UN: ["Unexcused Absence", "unexcused"], "": ["", ""] }); diff --git a/csm_web/frontend/src/components/section/SpacetimeDeleteModal.tsx b/csm_web/frontend/src/components/section/SpacetimeDeleteModal.tsx index 0b4c4b4e..d982f07d 100644 --- a/csm_web/frontend/src/components/section/SpacetimeDeleteModal.tsx +++ b/csm_web/frontend/src/components/section/SpacetimeDeleteModal.tsx @@ -35,17 +35,15 @@ export default function SpacetimeDeleteModal({ return (
+

Delete {overrideDelete ? "Override" : "Spacetime"}

-

Delete {overrideDelete ? "Override" : "Spacetime"}

-
- setDrop(e.target.checked)} /> - -
+ setDrop(e.target.checked)} /> +
-
diff --git a/csm_web/frontend/src/components/section/SpacetimeEditModal.tsx b/csm_web/frontend/src/components/section/SpacetimeEditModal.tsx index b28c50c1..c1491bf3 100644 --- a/csm_web/frontend/src/components/section/SpacetimeEditModal.tsx +++ b/csm_web/frontend/src/components/section/SpacetimeEditModal.tsx @@ -6,6 +6,9 @@ import Modal from "../Modal"; import TimeInput from "../TimeInput"; import { DAYS_OF_WEEK, zeroPadTwoDigit } from "./utils"; +// Styles +import "../../../static/frontend/css/spacetime-edit.scss"; + interface SpacetimeEditModalProps { sectionId: number; closeModal: () => void; @@ -31,7 +34,7 @@ const SpaceTimeEditModal = ({ const spacetimeModifyMutation = useSpacetimeModifyMutation(sectionId, spacetimeId); const spacetimeOverrideMutation = useSpacetimeOverrideMutation(sectionId, spacetimeId); - const handleSubmit = (e: React.ChangeEvent) => { + const handleSubmit = (e: React.MouseEvent) => { e.preventDefault(); //TODO: Handle API failure setShowSaveSpinner(true); @@ -54,121 +57,146 @@ const SpaceTimeEditModal = ({ return ( -
-

Change Time and Location

-
- -
- - -
-
- - {/* Would use a fieldset to be semantic, but Chrome has a bug where flexbox doesn't work for fieldset */} -
- - -
-
- - {!editingOverride && ( - +
+

Change Time and Location

+
+
+ +
+ - setIsPermanent(!e.target.checked)} +
+
+ + {/* Would use a fieldset to be semantic, but Chrome has a bug where flexbox doesn't work for fieldset */} +
+ + +
+
+ + {!editingOverride && ( +
+ + +
+ )} + {editingOverride && ( +
+ setDate(e.target.value)} + required={!isPermanent} + type="date" + min={today} + name="changeDate" + disabled={!!isPermanent} + value={isPermanent ? "" : date} + /> +
+ )} +
+
+ {showSaveSpinner ? ( + + ) : ( + + )} +
-
{showSaveSpinner ? : }
- +
); }; diff --git a/csm_web/frontend/src/components/section/StudentDropper.tsx b/csm_web/frontend/src/components/section/StudentDropper.tsx index 13de7f41..6ab16e10 100644 --- a/csm_web/frontend/src/components/section/StudentDropper.tsx +++ b/csm_web/frontend/src/components/section/StudentDropper.tsx @@ -31,23 +31,36 @@ export default function StudentDropper({ id, sectionId, name, courseRestricted } setShowDropPrompt(false); } + const dropDiv = ( +
+

DROP Student

+
+ setDrop(e.target.checked)} /> + +

+
+
+ ); + const banDiv = ( - -
BAN Student
-
+
+

BAN Student

+
setBan(e.target.checked)} disabled={!drop} /> -
- +
); const blacklistDiv = ( - -
BLACKLIST Student
-
+
+

BLACKLIST Student

+
setBlacklist(e.target.checked)} disabled={!drop} /> -
- +
); return ( @@ -71,27 +84,13 @@ export default function StudentDropper({ id, sectionId, name, courseRestricted } onClick={() => setShowDropPrompt(true)} /> {showDropPrompt && ( - setShowDropPrompt(false)}> -
-
DROP Student
-
- setDrop(e.target.checked)} /> - -

-
- {courseRestricted ? blacklistDiv : banDiv} -
- -
+ setShowDropPrompt(false)}> + {dropDiv} + {courseRestricted ? blacklistDiv : banDiv} +
+
)} diff --git a/csm_web/frontend/src/components/section/StudentSection.tsx b/csm_web/frontend/src/components/section/StudentSection.tsx index 3913a234..8454bb68 100644 --- a/csm_web/frontend/src/components/section/StudentSection.tsx +++ b/csm_web/frontend/src/components/section/StudentSection.tsx @@ -131,7 +131,7 @@ function DropSection({ profileId }: DropSectionProps) {
Drop Section
 @@ -293,11 +293,7 @@ function StudentSectionAttendance({ associatedProfileId, id }: StudentSectionAtt

Submit Word of the Day

- {attendances // only allow choosing from dates with blank attendances .filter(attendance => attendance.presence === "") @@ -311,7 +307,7 @@ function StudentSectionAttendance({ associatedProfileId, id }: StudentSectionAtt ))} {responseText}
-
NameEmail {emailsCopied && }
{name}{email}
{name}{email}
- - - - +
DateStatus
+ + + + @@ -367,11 +363,17 @@ function StudentSectionAttendance({ associatedProfileId, id }: StudentSectionAtt .map(({ presence, date }) => { const [label, cssSuffix] = ATTENDANCE_LABELS[presence]; const attendanceColor = scssColors[`attendance-${cssSuffix}`]; + const attendanceFgColor = scssColors[`attendance-${cssSuffix}-fg`]; return ( - - - + + ); diff --git a/csm_web/frontend/src/index.tsx b/csm_web/frontend/src/index.tsx index f2285ad8..fac50184 100644 --- a/csm_web/frontend/src/index.tsx +++ b/csm_web/frontend/src/index.tsx @@ -7,7 +7,7 @@ import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; import { ReactQueryDevtools } from "@tanstack/react-query-devtools"; // Global styles -import "../static/frontend/css/style.scss"; +import "../static/frontend/css/base/styles.scss"; import "../static/frontend/css/fontawesome-styles.scss"; // react-query setup diff --git a/csm_web/frontend/static/frontend/css/base/_variables.scss b/csm_web/frontend/static/frontend/css/base/_variables.scss index 1e2b2607..d2fc669b 100644 --- a/csm_web/frontend/static/frontend/css/base/_variables.scss +++ b/csm_web/frontend/static/frontend/css/base/_variables.scss @@ -1,4 +1,4 @@ -// Colors +/// Colors // --csm-green: rgb(124, 233, 162); $csm-green: #9ae0b3; @@ -28,8 +28,28 @@ $csm-link-hover: rgba(196, 196, 196, 0.28); $csm-attendance-present: $csm-green; $csm-attendance-excused: #797979; $csm-attendance-unexcused: $csm-danger; +$csm-attendance-present-fg: black; +$csm-attendance-excused-fg: white; +$csm-attendance-unexcused-fg: black; -// Fonts +$csm-content-title-color: #646464; + +/// calendar colors +$calendar-header-bg: #f5f5f5; +$calendar-header-border: #e5e5e5; +$calendar-border: #ddd; +$calendar-fg: #333; + +$calendar-label-fg: #666; +$calendar-day-bg: white; + +$calendar-dragging-event: #ffd6dd; +$calendar-creating-event: lightpink; +$calendar-hover-event: #d2ffd2; +$calendar-hover-shadow: #ccc; +$calendar-select-event: #90ee90; + +/// Fonts $default-font: "Montserrat", sans-serif; // Lengths @@ -38,5 +58,10 @@ $day-btn-size: 70px; $arrow-size: 8px; $button-icon-gap: 4px; -/** Height of the top close bar. */ +/// Height of the top close bar. $modal-close-height: 2em; +/// Total padding in the modal contents. +$modal-padding-y: 40px; + +/// Table padding amount +$table-padding: 15px; diff --git a/csm_web/frontend/static/frontend/css/base/base.scss b/csm_web/frontend/static/frontend/css/base/base.scss index 6a207c0d..b5392eec 100644 --- a/csm_web/frontend/static/frontend/css/base/base.scss +++ b/csm_web/frontend/static/frontend/css/base/base.scss @@ -16,6 +16,11 @@ body { overflow-x: hidden; } +main { + padding: 2rem; + margin-left: -8px; +} + button { // use parent font instead of default button font font-family: inherit; @@ -27,9 +32,18 @@ button { } } -/** - * Styling for inline + or x signs, mostly used for add or close buttons. - */ +h1, +h2, +h3, +h4, +h5, +h6 { + // remove top margin for all headers; + // especially for the modal windows + margin-top: 0; +} + +/// Styling for inline + or x signs, mostly used for add or close buttons. .inline-plus-sign { font-weight: 600; font-size: 1.5rem; @@ -47,3 +61,16 @@ button { fill: currentColor; stroke: currentColor; } + +/// Styling for relation label; used across multiple pages +.relation-label { + text-transform: capitalize; + padding: 8px 16px; + color: white; + min-width: 60px; + max-width: fit-content; + max-width: -moz-fit-content; + text-align: center; + border-radius: 20px; + margin-top: auto; +} diff --git a/csm_web/frontend/static/frontend/css/base/button.scss b/csm_web/frontend/static/frontend/css/base/button.scss index 67141ce7..4c46ad4f 100644 --- a/csm_web/frontend/static/frontend/css/base/button.scss +++ b/csm_web/frontend/static/frontend/css/base/button.scss @@ -79,6 +79,17 @@ } } +.secondary-link-btn { + @extend %button; + + background-color: inherit; + color: $csm-neutral; + + &:not(:disabled):hover { + color: $csm-neutral-darkened; + } +} + .primary-outline-btn { @extend %button; diff --git a/csm_web/frontend/static/frontend/css/base/colors-export.module.scss b/csm_web/frontend/static/frontend/css/base/colors-export.module.scss index e85a9a41..c3ded4c3 100644 --- a/csm_web/frontend/static/frontend/css/base/colors-export.module.scss +++ b/csm_web/frontend/static/frontend/css/base/colors-export.module.scss @@ -1,4 +1,4 @@ -/* Variables to be exported for use in React components */ +/// Variables to be exported for use in React components @use "variables" as *; :export { @@ -17,4 +17,8 @@ attendance-present: $csm-attendance-present; attendance-excused: $csm-attendance-excused; attendance-unexcused: $csm-attendance-unexcused; + + attendance-present-fg: $csm-attendance-present-fg; + attendance-excused-fg: $csm-attendance-excused-fg; + attendance-unexcused-fg: $csm-attendance-unexcused-fg; } diff --git a/csm_web/frontend/static/frontend/css/base/errors.scss b/csm_web/frontend/static/frontend/css/base/errors.scss new file mode 100644 index 00000000..e9a3a828 --- /dev/null +++ b/csm_web/frontend/static/frontend/css/base/errors.scss @@ -0,0 +1,34 @@ +/// Error page styles + +@use "variables" as *; + +#fatal-error-page { + max-width: 38rem; + padding: 2rem; + margin: auto; +} + +#fatal-error-page > h1 { + text-align: center; + color: $csm-danger; +} + +#stack-trace { + overflow: auto; +} + +#stack-trace > pre { + width: fit-content; + width: -moz-fit-content; + margin: auto; +} + +.internal-error-title { + color: $csm-danger !important; +} + +.internal-error-body { + font-size: 1.5rem; + text-align: center; + width: 80%; +} diff --git a/csm_web/frontend/static/frontend/css/base/form.scss b/csm_web/frontend/static/frontend/css/base/form.scss new file mode 100644 index 00000000..7ae666da --- /dev/null +++ b/csm_web/frontend/static/frontend/css/base/form.scss @@ -0,0 +1,144 @@ +/// Form styles + +@use "variables" as *; + +.csm-form { + display: flex; + flex-direction: column; + gap: 20px; + + padding: 0 40px; +} + +// .csm-form > * { +// margin-bottom: 20px; +// } +// +// .csm-form label { +// display: block; +// color: #646464; +// font-weight: 600; +// } + +.form-select, +.form-input, +.form-date { + display: block; + + background-color: #f5f5f5; + border: none; + border-radius: 6px; + + box-sizing: content-box; +} + +.form-select:disabled, +.form-input:disabled { + cursor: not-allowed; + background-color: #fafafa; +} + +.form-label { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 5px; + + font-weight: bold; +} + +// height/padding differences +.form-input, +.form-select { + height: 16px; + padding: 8px; +} +.form-date { + height: 20px; + padding: 6px 8px; +} + +/// Select element + +.form-select { + max-width: 200px; + width: 200px; + border: none; + background-image: url('data:image/svg+xml;utf8,'); + background-repeat: no-repeat, repeat; + background-position: right 0.7em top 50%, 0 0; + background-size: 1em auto, 100%; + appearance: none; + -webkit-appearance: none; + -moz-appearance: none; +} + +/* Neccessary for options to be legible on Windows */ +.form-select > option { + background-color: white; + color: black; +} + +/// Radio element + +.form-radio { + margin: 0 10px 0 0; + appearance: none; + -webkit-appearance: none; + -moz-appearance: none; + padding: 0; + width: 16px; + height: 16px; + display: inline-block; + border: 2px solid $csm-green; + border-radius: 8px; + vertical-align: middle; + + &[value="true"] { + position: relative; + bottom: 1px; + } + + &:checked { + background-color: $csm-green; + } +} + +/// Radio input item (box and label) +.form-radio-item { + display: flex; + flex-direction: row; + align-items: center; + justify-content: flex-start; +} + +.form-radio-group { + /// default should be column + &, + &-col { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 5px; + + margin: 5px; + } + + &-row { + display: flex; + flex-direction: row; + align-items: center; + justify-content: flex-start; + gap: 40px; + + margin: 5px; + } +} + +/// Action buttons at bottom of form +.form-actions { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; +} diff --git a/csm_web/frontend/static/frontend/css/base/modal.scss b/csm_web/frontend/static/frontend/css/base/modal.scss index 0be64b98..41ca2bfd 100644 --- a/csm_web/frontend/static/frontend/css/base/modal.scss +++ b/csm_web/frontend/static/frontend/css/base/modal.scss @@ -1,11 +1,10 @@ /* Modal styling */ +@use "sass:math" as math; @use "variables" as *; @use "button"; -/** - * Overlay for the modal window; grays out the screen behind the modal. - */ +/// Overlay for the modal window; grays out the screen behind the modal. .modal-overlay { position: fixed; top: 0; @@ -17,9 +16,7 @@ background: rgba(0, 0, 0, 0.6); } -/** - * Modal container; controls the positioning within the screen. - */ +/// Modal container; controls the positioning within the screen. .modal { position: fixed; top: 50%; @@ -34,42 +31,19 @@ border-radius: 20px; } -/** - * Contents of the modal; all children are put into this container. - */ +/// Contents of the modal; all children are put into this container. .modal-contents { - width: calc(100% - 40px); - height: calc(100% - 40px); - padding: 20px; + padding: math.div($modal-padding-y, 2); overflow: auto; } -// .modal-contents svg { -// display: block; -// margin: auto; -// } -// -// .modal-contents h3 { -// text-align: center; -// color: #808080; -// font-size: 2em; -// } -// -// .modal-contents h4 { -// text-align: center; -// margin: auto; -// max-width: 75%; -// } - -/** - * Top bar in the modal that contains the close button. - */ +/// Top bar in the modal that contains the close button. .modal-close-container { position: sticky; display: flex; - align-items: center; + align-items: flex-end; justify-content: flex-end; - margin-right: 6px; + margin-right: 1em; height: $modal-close-height; } @@ -81,28 +55,19 @@ user-select: none; background-color: inherit; color: black; + padding: 0; + + // center the x icon vertically and horizontally + display: flex; + align-items: center; + justify-content: center; &:hover { color: gray; } -} -.modal-btn { - position: absolute; - display: block; - color: white; - margin: auto; - width: 80px; - font-size: 1.25em; - padding: 10px 20px; - background-color: #007bff; - border-radius: 10px; - cursor: pointer; - left: 0; - right: 0; - bottom: 20px; -} - -.modal-btn:hover { - background-color: #0069d9; + .icon { + width: 1.1rem; + height: 1.1rem; + } } diff --git a/csm_web/frontend/static/frontend/css/base/styles.scss b/csm_web/frontend/static/frontend/css/base/styles.scss index 6f018241..1fab79e6 100644 --- a/csm_web/frontend/static/frontend/css/base/styles.scss +++ b/csm_web/frontend/static/frontend/css/base/styles.scss @@ -1,13 +1,16 @@ -/* Base styling for the entire site */ +/// Base styling for the entire site @use "variables"; -// generic styling +/// generic styling @use "base"; -// other styling for generic components +/// other styling for generic components @use "button"; -@use "searchbar"; -@use "tooltip"; +@use "errors"; +@use "form"; @use "modal"; +@use "searchbar"; @use "spinner"; +@use "table"; +@use "tooltip"; diff --git a/csm_web/frontend/static/frontend/css/base/table.scss b/csm_web/frontend/static/frontend/css/base/table.scss new file mode 100644 index 00000000..a40c0038 --- /dev/null +++ b/csm_web/frontend/static/frontend/css/base/table.scss @@ -0,0 +1,30 @@ +/// Table styles + +@use "variables" as *; + +.csm-table { + max-width: 90vw; + padding: 20px; + border-spacing: 0; + + /// additional styling if the table is standalone + &.standalone { + border: 2px solid #e7e7e7; + box-shadow: 0px 4px 4px rgba(198, 198, 198, 0.25); + border-radius: 20px; + } +} + +.csm-table-head { + text-align: left; +} + +.csm-table-head-row { + font-size: 1.5rem; + color: $csm-content-title-color; + padding: 0 $table-padding; +} + +.csm-table-item { + padding: $table-padding; +} diff --git a/csm_web/frontend/static/frontend/css/calendar.scss b/csm_web/frontend/static/frontend/css/calendar.scss index abcf8e62..4b0977d4 100644 --- a/csm_web/frontend/static/frontend/css/calendar.scss +++ b/csm_web/frontend/static/frontend/css/calendar.scss @@ -26,15 +26,15 @@ Hierarchy: display: flex; justify-content: stretch; align-items: center; - border-bottom: 1px solid #e5e5e5; + border-bottom: 1px solid $calendar-header-border; box-sizing: border-box; } .calendar-day-header { - background-color: #f5f5f5; - border-left: 1px solid #ddd; - border-right: 1px solid #ddd; - color: #333; + background-color: $calendar-header-bg; + border-left: 1px solid $calendar-border; + border-right: 1px solid $calendar-border; + color: $calendar-fg; font-weight: bold; padding: 5px 0; text-align: center; @@ -58,9 +58,9 @@ Hierarchy: } .calendar-day { - background-color: #fff; - border: 1px solid #ddd; - color: #333; + background-color: $calendar-day-bg; + border: 1px solid $calendar-border; + color: $calendar-fg; font-size: 14px; text-align: center; @@ -73,9 +73,9 @@ Hierarchy: .calendar-day-interval { box-sizing: border-box; - border-top: 1px solid #ddd; - border-bottom: 1px solid #ddd; - color: #333; + border-top: 1px solid $calendar-border; + border-bottom: 1px solid $calendar-border; + color: $calendar-fg; font-size: 14px; font-weight: bold; text-align: center; @@ -102,7 +102,7 @@ Hierarchy: top: -5px; height: $calendar-interval-height; font-size: 75%; - color: #666; + color: $calendar-label-fg; text-align: right; } @@ -157,20 +157,20 @@ Hierarchy: } .calendar-transparent-event .calendar-event-detail { - background-color: #ffd6dd; + background-color: $calendar-dragging-event; } .calendar-creating-event .calendar-event-detail { - background-color: lightpink; + background-color: $calendar-creating-event; } .calendar-event-hover .calendar-event-detail { - background-color: #d2ffd2; - box-shadow: 2px 2px 2px #ccc; + background-color: $calendar-hover-event; + box-shadow: 2px 2px 2px $calendar-hover-shadow; } .calendar-event-select .calendar-event-detail { - background-color: #90ee90; + background-color: $calendar-select-event; } .calendar-event-linked .calendar-event-detail { diff --git a/csm_web/frontend/static/frontend/css/coordinator-add-student.scss b/csm_web/frontend/static/frontend/css/coordinator-add-student.scss index a4eb1fd6..bdfe1078 100644 --- a/csm_web/frontend/static/frontend/css/coordinator-add-student.scss +++ b/csm_web/frontend/static/frontend/css/coordinator-add-student.scss @@ -2,18 +2,18 @@ @use "base/variables" as *; -.coordinator-add-student-modal { - overflow: hidden; - height: 75vh; - width: 65vw; -} +$modal-width: 65vw; +$modal-height: 75vh; +$modal-effective-height: calc($modal-height - $modal-padding-y); -.coordinator-add-student-modal .modal-contents { +.coordinator-add-student-modal { overflow: hidden; + height: $modal-height; + width: $modal-width; } .coordinator-add-student-modal-contents { - height: calc(75vh - 89px); + height: $modal-effective-height; display: flex; flex-direction: column; justify-content: space-between; diff --git a/csm_web/frontend/static/frontend/css/course-menu.scss b/csm_web/frontend/static/frontend/css/course-menu.scss index 97b0bf1b..5be1a0ce 100644 --- a/csm_web/frontend/static/frontend/css/course-menu.scss +++ b/csm_web/frontend/static/frontend/css/course-menu.scss @@ -7,7 +7,7 @@ grid-template-columns: repeat(auto-fill, 10em); max-width: calc((2 * 10em) + 10px); grid-gap: 10px; - margin: auto; + margin: 20px auto; text-align: center; justify-content: center; font-size: 2em; diff --git a/csm_web/frontend/static/frontend/css/course-settings.scss b/csm_web/frontend/static/frontend/css/course-settings.scss index 6ac885cf..ea51c716 100644 --- a/csm_web/frontend/static/frontend/css/course-settings.scss +++ b/csm_web/frontend/static/frontend/css/course-settings.scss @@ -8,6 +8,10 @@ display: block; } +.course-settings-title { + text-align: center; +} + .course-settings-content { display: flex; flex-direction: column; @@ -18,7 +22,6 @@ flex: 1; display: flex; flex-direction: column; - margin-top: 10px; padding: 0 25px; } @@ -72,4 +75,6 @@ flex-direction: row; justify-content: center; align-items: center; + + margin-top: 25px; } diff --git a/csm_web/frontend/static/frontend/css/course.scss b/csm_web/frontend/static/frontend/css/course.scss index a507fcf4..5f3362a1 100644 --- a/csm_web/frontend/static/frontend/css/course.scss +++ b/csm_web/frontend/static/frontend/css/course.scss @@ -139,6 +139,7 @@ min-width: 50%; top: 0; align-self: flex-start; + margin-top: 40px; } #course-section-controls > * { @@ -208,7 +209,7 @@ #course-section-list { width: 75vw; - margin: 0 auto; + margin: 40px auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); grid-gap: 10px; @@ -219,16 +220,20 @@ text-align: center; } -#course-section-selector .modal h3 { - margin: 0.5em auto; -} +$create-section-modal-height: 65vh; -#course-section-selector > div { - padding-top: 40px; +.create-section-modal { + height: $create-section-modal-height; + + display: flex; + flex-direction: column; + align-items: center; } #create-section-form { - padding: unset; + // form should take up all of the space + flex: 1; + overflow: auto; } #create-section-form #non-spacetime-fields, @@ -274,4 +279,6 @@ align-items: center; justify-content: center; gap: 4px; + + margin-top: 20px; } diff --git a/csm_web/frontend/static/frontend/css/header.scss b/csm_web/frontend/static/frontend/css/header.scss index 8d5ce9af..2f872c16 100644 --- a/csm_web/frontend/static/frontend/css/header.scss +++ b/csm_web/frontend/static/frontend/css/header.scss @@ -2,42 +2,51 @@ @use "base/variables" as *; +/// container separating left and right groups of header items header { box-shadow: 0px 4px 4px rgba(188, 188, 188, 0.25); padding: 30px 2rem; display: flex; - margin: -8px -8px 0 -8px; + align-items: center; + justify-content: space-between; + margin: 8px -8px 0 -8px; +} + +/// individual groups of site title items +.site-title-group { + display: flex; + align-items: center; + gap: 20px; } #logo { height: 3em; - margin-right: 20px; + margin-top: -14px; } .site-title { font-weight: 600; font-size: 23px; line-height: 18px; + margin-bottom: 0; + user-select: none; } -.site-title-link { - text-decoration: none; - margin-right: 25px; - color: #bbbbbb; -} - -.site-title-link.is-active { - color: #808080; +.site-subtitle { + font-weight: 600; + font-size: 18px; + margin-bottom: 0; + user-select: none; } +.site-title-link, .site-subtitle-link { - color: #bbbbbb; text-decoration: none; - margin: auto 0 auto auto; -} + color: #bbbbbb; -.site-subtitle-link.is-active { - color: #808080; + &.is-active { + color: #808080; + } } #user-profile-pic { @@ -88,3 +97,17 @@ header { margin: 0px auto auto auto; } } + +.page-title { + font-style: normal; + font-weight: bold; + font-size: 24px; + color: #646464; + + // remove bottom margin; top margin removed by base style + margin-bottom: 0; +} + +.center-title { + text-align: center; +} diff --git a/csm_web/frontend/static/frontend/css/home.scss b/csm_web/frontend/static/frontend/css/home.scss index 85e006f2..99f32c4b 100644 --- a/csm_web/frontend/static/frontend/css/home.scss +++ b/csm_web/frontend/static/frontend/css/home.scss @@ -13,6 +13,16 @@ border-top-color: $csm-theme-default; } +.course-card-link { + color: unset; + text-decoration: none; + cursor: pointer; +} + +.course-card-link:hover > .course-card { + background-color: $csm-link-hover; +} + .course-cards-container > .course-card, .course-card-link { margin: 0 75px 50px 0; @@ -63,5 +73,18 @@ justify-content: space-between; flex-wrap: wrap; max-width: 300px; - margin-bottom: 20px; + margin-bottom: 40px; +} + +.section-link { + color: unset; + text-decoration: none; + cursor: pointer; + padding: 10px; + font-size: 14px; + border-radius: 9px; +} + +.section-link:hover { + background-color: $csm-link-hover; } diff --git a/csm_web/frontend/static/frontend/css/login.css b/csm_web/frontend/static/frontend/css/login.css new file mode 100644 index 00000000..738a41a1 --- /dev/null +++ b/csm_web/frontend/static/frontend/css/login.css @@ -0,0 +1,75 @@ +/* +Login styles. + +Defined in CSS, since the login page is standalone. +*/ + +#login-container { + font-family: "Montserrat", sans-serif; + + width: 100%; + height: 100%; + margin: auto; + text-align: center; +} + +#login-card { + font-size: 16px; + font-weight: 400; + line-height: 1.5; + text-align: center; + position: relative; + box-sizing: border-box; + transition: box-shadow 0.1s ease-in-out; + background: #fff; + color: #666; + box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08); + display: inline-block; + width: 80%; + max-width: 25em; + height: 24em; + margin-top: 10%; + padding: 3em 1em 3em 1em; +} + +#login-btn { + overflow: visible; + font: inherit; + display: inline-block; + box-sizing: border-box; + padding: 0 30px; + vertical-align: middle; + font-size: 0.875rem; + line-height: 38px; + text-align: center; + text-decoration: none; + text-transform: uppercase; + transition: 0.1s ease-in-out; + transition-property: color, background-color, border-color; + background-color: #1e87f0; + color: #fff; + border: 1px solid transparent; + cursor: pointer; + width: 35%; + min-width: 10em; + margin: auto; + margin-top: 4em; + box-shadow: 0px 4px 4px #0002; +} + +#login-subtitle { + display: block; + margin: auto; + margin-top: 0.5em; + font-weight: 400; + font-size: 0.75em; + text-align: center; + opacity: 0.5; +} + +#login-logo { + display: block; + width: 20em; + max-width: 75%; + margin: auto; +} diff --git a/csm_web/frontend/static/frontend/css/resource_aggregation.scss b/csm_web/frontend/static/frontend/css/resource_aggregation.scss index 76b0d5dd..6b93ff2f 100644 --- a/csm_web/frontend/static/frontend/css/resource_aggregation.scss +++ b/csm_web/frontend/static/frontend/css/resource_aggregation.scss @@ -1,5 +1,8 @@ @use "base/variables" as *; +$modal-width: 80vw; +$modal-height: 75vh; + .resourceWrapperContainer { margin: 20px auto; max-width: 1064px; @@ -13,8 +16,7 @@ overflow-x: auto; } -.resourceContainer, -.resourceEditContainer { +.resourceContainer { background-color: $csm-resources; border-radius: 8px; box-shadow: 0 4px 6px -1px rgb(0 0 0 / 10%), 0 2px 0 -1px rgb(0 0 0 / 6%); @@ -34,7 +36,7 @@ } .resourceEditContainer { - height: calc(75vh - 146px); + height: $modal-height; display: flex; flex-direction: column; justify-content: center; @@ -42,6 +44,8 @@ .resourceEditContentWrapper { overflow: auto; + // expand container of worksheets/links as much as possible + flex: 1; } .resourceEditContent { @@ -49,8 +53,8 @@ } .resourceEditModal { - width: 80vw !important; - height: 75vh !important; + width: $modal-width !important; + height: $modal-height !important; } .resourceEditModal .modal-contents { @@ -201,17 +205,14 @@ } .resourceInfoEdit input { - padding: 6px; width: 144px; - height: 1.1rem; } -.resourceInfoEdit .resourceEditHeadItem { - margin: 4px 2px 10px; +.resourceEditHeadItem { + align-items: center; } .resourceWorksheetEditItem > input { - padding: 2px; width: 100%; max-width: 180px; min-width: 100px; @@ -219,6 +220,7 @@ .topicsTooltipWrapper { position: relative; + font-weight: initial; } .resourceWorksheetContainer { @@ -226,7 +228,7 @@ gap: 10px; width: 70%; - margin: auto; + margin: 20px auto; } @media screen and (max-width: 1200px) { @@ -380,39 +382,16 @@ button.clearFile:hover { color: $csm-danger-darkened; } -#resourceButtonSubmit { - background-color: $csm-green; - border: none; - border-radius: 8px; - color: white; +.resourceTabErrorText { display: flex; flex-direction: row; - font-size: 16px; - font-weight: 600; - justify-content: space-evenly; - margin: 40px auto 20px; - padding: 16px; - width: 120px; -} - -#resourceButtonSubmit:disabled, -#resourceButtonSubmit[disabled="disabled"], -#resourceButtonSubmit:disabled:hover, -#resourceButtonSubmit[disabled="disabled"]:hover { - background-color: #cdf3db; - cursor: not-allowed; -} + align-items: center; + gap: 4px; -.resourceTabErrorText { text-align: center; color: red; } -.resourceTabErrorText .icon { - display: inline-block; - padding: 0 3px; -} - #saveIcon { margin: 0 !important; } @@ -421,12 +400,12 @@ button.clearFile:hover { background-color: $csm-green-darkened; } -.resourceValidationError .exclamationIcon { - display: inline-block; - padding: 0 3px; -} - .resourceValidationError { + display: flex; + flex-direction: row; + align-items: center; + gap: 4px; + color: red; font-size: 80%; margin: 3px 2px 4px; @@ -470,10 +449,17 @@ button.clearFile:hover { } .resourceDeleteConfirmation .resourceDeleteText { - margin-top: 15px; + margin-bottom: 15px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; } + +.resourceEditFooter { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; +} diff --git a/csm_web/frontend/static/frontend/css/section.scss b/csm_web/frontend/static/frontend/css/section.scss index a5e4dfd6..19d9115f 100644 --- a/csm_web/frontend/static/frontend/css/section.scss +++ b/csm_web/frontend/static/frontend/css/section.scss @@ -1,7 +1,5 @@ -/** - * Styles for the section view. - * These styles are for both coordinators and students. - */ +/// Styles for the section view. +/// These styles are for both coordinators and students. @use "base/variables" as *; @@ -22,11 +20,16 @@ } .section-detail-info-card-contents, -.standalone-table, #mentor-attendance { border: 2px solid #e7e7e7; box-shadow: 0px 4px 4px rgba(198, 198, 198, 0.25); border-radius: 20px; +} + +/// only add padding if specified, +/// or if it's the mentor attendance table +.section-detail-info-card-contents.padded-card, +#mentor-attendance { padding: 40px; } @@ -110,16 +113,14 @@ position: relative; } -.student-dropper { - display: contents; - // display: inline-block; - // position: relative; - // top: 1px; -} +#students-table .csm-table-item { + padding: 20px 30px; -.student-dropper.ban-prompt-visible + .student-info { - color: #cecece; - text-decoration: line-through; + display: flex; + flex-direction: row; + align-items: center; + justify-content: flex-start; + gap: $button-icon-gap; } .should-ban-prompt { @@ -222,16 +223,6 @@ color: $csm-danger-darkened; } -#students-table tbody td { - padding: 20px 30px; - - display: flex; - flex-direction: row; - align-items: center; - justify-content: flex-start; - gap: $button-icon-gap; -} - #copy-student-emails { cursor: pointer; } @@ -273,7 +264,7 @@ } .section-detail-page-title { - color: #646464; + // color: #646464; font-size: 30px; font-weight: bold; margin: 0 0 45px; @@ -292,15 +283,27 @@ .section-detail-info-card { margin: 0 50px 50px 0; -} -.section-detail-info-card h4 { - color: #646464; - font-size: 25px; - font-weight: bold; - margin: 0 0 20px; + /// only direct children + > { + h1, + h2, + h3, + h4, + h5, + h6 { + color: $csm-content-title-color; + } + } } +// .section-detail-info-card h4 { +// color: #646464; +// font-size: 25px; +// font-weight: bold; +// margin: 0 0 20px; +// } + .section-detail-info-card.drop-section { flex-basis: 100%; display: flex; @@ -319,3 +322,118 @@ border-color: #ffadad; } + +%info-card-action { + font-size: 14px; + // position: absolute; +} + +.info-card-actions { + margin: -30px -30px 10px -30px; + + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; +} + +.info-card-edit-btn { + @extend %info-card-action; + top: 10px; + right: 10px; +} + +.override-info-card-edit-btn { + @extend %info-card-action; + top: 170px; + right: 10px; +} + +.delete-spacetime-btn { + @extend %info-card-action; + top: 10px; + left: 10px; +} + +.delete-override-btn { + position: absolute; + top: 170px; + left: 10px; +} + +.meta-field { + font-weight: 600; + color: #727070; +} + +.spacetime-edit-modal { + height: 60vh; + padding: 0 20px; +} + +/// Attendance table + +.mentor-attendance-page { + display: flex; + align-items: center; + flex-wrap: wrap; +} + +#mentor-attendance { + max-width: 500px; + padding-top: 0; + padding-bottom: 30px; + overflow: hidden; + border-top: none; +} + +#attendance-date-tabs-container { + display: flex; + margin: 0 -40px; + overflow-x: scroll; + overflow-y: hidden; +} + +#attendance-date-tabs-container > div { + background-color: #f0f0f0; + border: 1px solid #e9e9e9; + border-radius: 10px 10px 0px 0px; + padding: 15px 30px; + color: #5e5e5e; + font-size: 15px; + cursor: pointer; +} +#attendance-date-tabs-container > div:hover { + background-color: #dedede; +} + +#attendance-date-tabs-container > div.active { + background-color: white; + border-bottom-color: white; +} + +#mentor-attendance-table { + width: 100%; +} + +#mentor-attendance-controls { + margin-top: 25px; + max-width: 780px; + display: flex; + flex-direction: row; + justify-content: flex-end; + gap: 15px; +} + +.mentor-attendance-input { + text-align-last: center; +} + +/// student attendance table status +.attendance-status { + text-align: center; + color: white; + padding: 5px 10px; + max-width: 200px; + border-radius: 6px; +} diff --git a/csm_web/frontend/static/frontend/css/spacetime-edit.scss b/csm_web/frontend/static/frontend/css/spacetime-edit.scss new file mode 100644 index 00000000..f2f63167 --- /dev/null +++ b/csm_web/frontend/static/frontend/css/spacetime-edit.scss @@ -0,0 +1,11 @@ +.spacetime-edit-form-title { + text-align: center; +} + +#day-time-fields { + display: flex; + flex-direction: row; + align-items: flex-start; + justify-content: space-between; + gap: 20px; +} diff --git a/csm_web/frontend/static/frontend/css/spacetime_delete.scss b/csm_web/frontend/static/frontend/css/spacetime_delete.scss index c0bc2456..64932dd2 100644 --- a/csm_web/frontend/static/frontend/css/spacetime_delete.scss +++ b/csm_web/frontend/static/frontend/css/spacetime_delete.scss @@ -6,7 +6,9 @@ height: 90%; display: flex; flex-direction: column; + align-items: center; justify-content: space-evenly; + gap: 10px; } .spacetimeCheckboxLabel { @@ -15,15 +17,10 @@ margin-left: 8px; } -.spacetimeDeleteSubmit { - background-color: $csm-danger; - border: none; - color: white; - border-radius: 8px; - margin: 10px; - padding: 12px 16px; -} +.spacetimeDeleteDropper { + display: flex; + flex-direction: column; + align-items: center; -.spacetimeDeleteSubmit:disabled { - background-color: $csm-neutral; + margin-top: 10px; } diff --git a/csm_web/frontend/static/frontend/css/student_dropper.scss b/csm_web/frontend/static/frontend/css/student_dropper.scss index 5b00caec..b61ff536 100644 --- a/csm_web/frontend/static/frontend/css/student_dropper.scss +++ b/csm_web/frontend/static/frontend/css/student_dropper.scss @@ -1,47 +1,48 @@ @use "base/variables" as *; -.studentDropper { +.student-dropper { + /// center x icon + display: flex; + align-items: center; + justify-content: center; + + /// strikethrough name if the modal is visible + &.ban-prompt-visible + .student-info { + color: #cecece; + text-decoration: line-through; + } +} + +.student-dropper-modal { margin: auto 0; - /* align-items: center; */ height: 90%; display: flex; flex-direction: column; justify-content: space-evenly; + align-items: center; + gap: 40px; } -.studentDropperHeadItem { - color: #646464; - font-weight: 600; - font-size: 30px; +.student-dropper-head-item { text-align: center; } -.studentDropperCheckboxLabel { - color: #646464; - font-size: 18px; - padding-top: 20px; - margin-left: 8px; -} - -.studentDropperSubmitWrapper { +.student-dropper-checkbox-container { display: flex; flex-direction: row; + align-items: center; justify-content: center; } -.studentDropperSubmit { - background-color: $csm-danger; - border: none; - color: white; - border-radius: 8px; - margin: 10px; - padding: 12px 16px; -} - -.studentDropperSubmit:hover { - background-color: $csm-danger-darkened; +.student-dropper-checkbox-label { + // color: #646464; + font-size: 16px; + // padding-top: 20px; + margin-left: 8px; } -.studentDropperSubmit:disabled { - background-color: $csm-neutral; +.student-dropper-submit-wrapper { + display: flex; + flex-direction: row; + justify-content: center; } diff --git a/csm_web/frontend/static/frontend/css/style.scss b/csm_web/frontend/static/frontend/css/style.scss deleted file mode 100644 index 28402805..00000000 --- a/csm_web/frontend/static/frontend/css/style.scss +++ /dev/null @@ -1,486 +0,0 @@ -// settings -@use "base/variables" as *; - -// TODO: remove everything from this file and use base instead - -// base styles -@import "base/styles"; - -/* Home page */ - -.relation-label { - text-transform: capitalize; - padding: 8px 16px; - color: white; - min-width: 60px; - max-width: fit-content; - max-width: -moz-fit-content; - text-align: center; - border-radius: 20px; - margin-top: auto; -} - -.course-card-link { - color: unset; - text-decoration: none; - cursor: pointer; -} - -.course-card-link:hover > .course-card { - background-color: $csm-link-hover; -} - -.section-link { - color: unset; - text-decoration: none; - cursor: pointer; - padding: 10px; - font-size: 14px; - border-radius: 9px; -} - -.section-link:hover { - background-color: $csm-link-hover; -} - -/* login */ - -#login-container { - width: 100%; - height: 100%; - margin: auto; - text-align: center; -} - -#login-card { - font-size: 16px; - font-weight: 400; - line-height: 1.5; - text-align: center; - position: relative; - box-sizing: border-box; - transition: box-shadow 0.1s ease-in-out; - background: #fff; - color: #666; - box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08); - display: inline-block; - width: 80%; - max-width: 25em; - height: 24em; - margin-top: 10%; - padding: 3em 1em 3em 1em; -} - -#login-btn { - overflow: visible; - font: inherit; - display: inline-block; - box-sizing: border-box; - padding: 0 30px; - vertical-align: middle; - font-size: 0.875rem; - line-height: 38px; - text-align: center; - text-decoration: none; - text-transform: uppercase; - transition: 0.1s ease-in-out; - transition-property: color, background-color, border-color; - background-color: #1e87f0; - color: #fff; - border: 1px solid transparent; - cursor: pointer; - width: 35%; - min-width: 10em; - margin: auto; - margin-top: 4em; - box-shadow: 0px 4px 4px #0002; -} - -#login-subtitle { - display: block; - margin: auto; - margin-top: 0.5em; - font-weight: 400; - font-size: 0.75em; - text-align: center; - opacity: 0.5; -} - -#login-logo { - display: block; - width: 20em; - max-width: 75%; - margin: auto; -} - -.page-title { - font-style: normal; - font-weight: bold; - font-size: 24px; - color: #646464; -} - -.center-title { - text-align: center; -} - -main { - padding: 2rem; - margin-left: -8px; -} - -.internal-error-title { - color: $csm-danger !important; -} - -.internal-error-body { - font-size: 1.5rem; - text-align: center; - width: 80%; -} - -.standalone-table { - width: 700px; - max-width: 90vw; - padding: 20px; - border-spacing: 0; -} - -table thead { - text-align: left; -} - -table th { - color: #aeaeae; - font-size: 20px; - padding: 0 30px; -} - -table tbody tr > td { - border-bottom: 1px solid #e7e7e7; - padding: 30px; -} - -table tbody tr:last-child > td { - border-bottom: none; -} - -#attendance-table td.status > div { - text-align: center; - color: white; - padding: 5px; - max-width: 200px; - border-radius: 6px; -} - -.mentor-attendance-page > div { - margin-bottom: 40px; -} - -.info-card-edit-btn { - background-color: inherit; - color: #b3b3b3; - font-size: 13px; - position: absolute; - top: 10px; - right: 10px; - border: none; - cursor: pointer; -} - -.override-info-card-edit-btn { - background-color: inherit; - color: #b3b3b3; - font-size: 13px; - position: absolute; - top: 170px; - right: 10px; - border: none; - cursor: pointer; -} - -.delete-spacetime-btn { - background-color: inherit; - color: #b3b3b3; - font-size: 13px; - position: absolute; - top: 10px; - left: 10px; - border: none; - cursor: pointer; -} - -.delete-override-btn { - background-color: inherit; - color: #b3b3b3; - font-size: 13px; - position: absolute; - top: 170px; - left: 10px; - border: none; - cursor: pointer; -} - -.info-card-edit-btn:hover { - color: #a1a1a1; -} - -.override-info-card-edit-btn:hover { - color: #a1a1a1; -} - -.delete-spacetime-btn:hover { - color: #a1a1a1; -} - -.delete-override-btn:hover { - color: #a1a1a1; -} - -.meta-field { - font-weight: 600; - color: #727070; -} - -.spacetime-edit-modal { - height: 450px; -} - -.csm-form { - padding-left: 40px; -} - -.csm-form #submit-and-status > * { - display: block; - margin: auto; -} - -.csm-form h4 { - text-align: left; -} - -.csm-form input, -.csm-form select { - background-color: #f5f5f5; - padding: 10px 20px; - border: none; - border-radius: 4px; - display: block; - margin-top: 7px; -} - -#spacetime-edit-form .mode-selection .mode-selection-options { - display: flex; - margin-top: 7px; -} - -#spacetime-edit-form .mode-selection .mode-selection-options label:first-child { - margin-right: 1.5em; -} - -#spacetime-edit-form .mode-selection .mode-selection-options label { - color: black; - font-weight: normal; - font-size: small; -} - -#spacetime-edit-form #date-of-change-fields input:not([type="radio"]) { - display: inline; -} - -#spacetime-edit-form input[type="radio"] { - margin: 0 10px 0 0; - -webkit-appearance: none; - -moz-appearance: none; - padding: 0; - width: 16px; - height: 16px; - display: inline-block; - border: 2px solid $csm-green; - border-radius: 8px; - vertical-align: middle; -} - -#spacetime-edit-form input[type="radio"][value="true"] { - position: relative; - bottom: 1px; -} - -#spacetime-edit-form input[type="radio"]:checked { - background-color: $csm-green; -} - -.csm-form > * { - margin-bottom: 20px; -} - -.csm-form label { - display: block; - color: #646464; - font-weight: 600; -} - -#spacetime-edit-form #day-time-fields { - display: flex; -} - -#spacetime-edit-form #day-time-fields > * { - margin-right: 10px; -} - -#spacetime-edit-form #day-time-fields > *:last-child { - margin-right: 0; -} - -#spacetime-edit-form #date-of-change-fields label:not(:first-child) { - color: black; - font-weight: normal; - font-size: small; - margin-top: 7px; -} - -.csm-form select { - background-image: url('data:image/svg+xml;utf8,'); - background-repeat: no-repeat, repeat; - background-position: right 0.7em top 50%, 0 0; - background-size: 1em auto, 100%; - -webkit-appearance: none; - -moz-appearance: none; - width: 150px; - font-size: small; -} - -.csm-form select:disabled, -.csm-form input:disabled { - cursor: not-allowed; - background-color: #fafafa; -} - -.csm-form input[type="submit"] { - margin: auto; - background-color: $csm-green; - color: white; - cursor: pointer; - padding: 10px 40px; -} - -.csm-form input[type="submit"]:hover { - background-color: $csm-green-darkened; -} - -#mentor-attendance { - max-width: 500px; - padding-top: 0; - padding-bottom: 30px; - overflow: hidden; - border-top: none; -} - -#attendance-date-tabs-container { - display: flex; - margin: 0 -40px; - overflow-x: scroll; - overflow-y: hidden; -} - -#attendance-date-tabs-container > div { - background-color: #f0f0f0; - border: 1px solid #e9e9e9; - border-radius: 10px 10px 0px 0px; - padding: 15px 30px; - color: #5e5e5e; - font-size: 15px; - cursor: pointer; -} -#attendance-date-tabs-container > div:hover { - background-color: #dedede; -} - -#attendance-date-tabs-container > div.active { - background-color: white; - border-bottom-color: white; -} - -#mentor-attendance-table { - width: 100%; - --csm-attendance-: #f4f4f4; -} - -#mentor-attendance-table select { - max-width: 200px; - width: 200px; - text-align-last: center; - color: white; - padding: 6px; - border-radius: 6px; - border: none; - background-image: url('data:image/svg+xml;utf8,'); - background-repeat: no-repeat, repeat; - background-position: right 0.7em top 50%, 0 0; - background-size: 1em auto, 100%; - appearance: none; - -webkit-appearance: none; - -moz-appearance: none; -} - -/* Neccessary for options to be legible on Windows */ -#mentor-attendance-table select > option { - background-color: white; - color: black; -} - -#mentor-attendance-controls { - margin-top: 35px; - max-width: 780px; - display: flex; - flex-direction: row; - justify-content: flex-end; -} - -#mentor-attendance-controls > * { - margin: auto 0 auto 15px; -} - -#mentor-attendance-controls > *:first-child { - margin-right: 0; -} - -.mentor-attendance-page { - display: flex; - align-items: center; - flex-wrap: wrap; -} - -#fatal-error-page { - max-width: 38rem; - padding: 2rem; - margin: auto; -} - -#fatal-error-page > h1 { - text-align: center; - color: $csm-danger; -} - -#stack-trace { - overflow: auto; -} - -#stack-trace > pre { - width: fit-content; - width: -moz-fit-content; - margin: auto; -} - -.spacetimeDropperSubmit { - background-color: $csm-danger; - border: none; - color: white; - border-radius: 8px; - margin: 10px; - padding: 12px 16px; -} - -.spacetimeDeleteDropper { - text-align: center; -} diff --git a/csm_web/frontend/static/frontend/css/word-of-the-day.scss b/csm_web/frontend/static/frontend/css/word-of-the-day.scss index 69dad551..2844f74f 100644 --- a/csm_web/frontend/static/frontend/css/word-of-the-day.scss +++ b/csm_web/frontend/static/frontend/css/word-of-the-day.scss @@ -10,7 +10,7 @@ border: 2px solid #e7e7e7; box-shadow: 0px 4px 4px rgba(198, 198, 198, 0.25); border-radius: 20px; - padding: 5px 30px 15px; + padding: 30px 30px 15px; margin-bottom: 30px; } @@ -19,6 +19,7 @@ flex-direction: row; justify-content: space-between; align-items: center; + gap: 8px; } .word-of-the-day-input-container { @@ -26,6 +27,7 @@ flex-direction: row; justify-content: space-between; align-items: center; + gap: 8px; } .word-of-the-day-input { diff --git a/csm_web/frontend/static/frontend/img/pencil.svg b/csm_web/frontend/static/frontend/img/pencil.svg index 2309471b..79421853 100644 --- a/csm_web/frontend/static/frontend/img/pencil.svg +++ b/csm_web/frontend/static/frontend/img/pencil.svg @@ -1 +1 @@ - + diff --git a/csm_web/frontend/static/frontend/img/x.svg b/csm_web/frontend/static/frontend/img/x.svg index b9b6befa..09986ebf 100644 --- a/csm_web/frontend/static/frontend/img/x.svg +++ b/csm_web/frontend/static/frontend/img/x.svg @@ -1 +1 @@ - + diff --git a/csm_web/frontend/templates/frontend/login.html b/csm_web/frontend/templates/frontend/login.html index f8cc32bd..65fa737a 100644 --- a/csm_web/frontend/templates/frontend/login.html +++ b/csm_web/frontend/templates/frontend/login.html @@ -1,10 +1,11 @@ -{% extends "./base.html" %} -{% block body %} -
-
- {% include "./LogoWithText.svg" %} - Login -

with your Berkeley email

-
-
+{% extends "./base.html" %} {% block extra_head %} {% load static %} + +{% endblock %} {% block body %} +
+
+ {% include "./LogoWithText.svg" %} + Login +

with your Berkeley email

+
+
{% endblock %}
DateStatus
{date} -
{label}
+
{date} +
+ {label} +