From 13f2a60267e2aa7e4c899843df3c754b3959406f Mon Sep 17 00:00:00 2001 From: Leo Huang Date: Thu, 29 Feb 2024 18:31:38 -0800 Subject: [PATCH 1/4] rewrite in progress: currently storing release information in log.json folder, importing and passing each release to format the log list, styling stil need a bit of work and ideally moving each release into a component instead --- .../app/Releases/Release/Release.module.scss | 83 +++++++++++++++++++ frontend/src/app/Releases/Release/index.tsx | 33 ++++++++ .../src/app/Releases/Releases.module.scss | 67 +++++++++++++++ frontend/src/app/Releases/index.tsx | 39 +++++++++ frontend/src/app/Releases/log.json | 79 ++++++++++++++++++ 5 files changed, 301 insertions(+) create mode 100644 frontend/src/app/Releases/Release/Release.module.scss create mode 100644 frontend/src/app/Releases/Release/index.tsx create mode 100644 frontend/src/app/Releases/Releases.module.scss create mode 100644 frontend/src/app/Releases/index.tsx create mode 100644 frontend/src/app/Releases/log.json diff --git a/frontend/src/app/Releases/Release/Release.module.scss b/frontend/src/app/Releases/Release/Release.module.scss new file mode 100644 index 000000000..275dc0858 --- /dev/null +++ b/frontend/src/app/Releases/Release/Release.module.scss @@ -0,0 +1,83 @@ +.root { + padding: 96px 0; + + .row { + display: flex; + justify-content: flex-end; + align-items: center; + gap: 96px; + + &:not(:last-child) { + margin-bottom: 96px; + } + + .gallery { + display: flex; + flex-direction: column; + flex-grow: 1; + position: relative; + + .calendar { + width: calc(100% - 128px); + } + + .schedule { + width: 256px; + margin-left: auto; + margin-top: -128px; + } + } + + .text { + width: 512px; + flex-shrink: 0; + + .link { + display: flex; + align-items: center; + gap: 8px; + color: var(--blue-500); + font-size: 16px; + font-weight: 500; + line-height: 1; + transition: all 100ms ease-in-out; + + &:hover { + color: var(--blue-600); + } + } + + .description { + font-size: 16px; + line-height: 1.5; + margin-bottom: 32px; + color: var(--slate-500); + } + + .heading { + font-size: 32px; + font-weight: 660; + font-feature-settings: 'cv05' on, 'cv13' on, 'ss07' on, 'cv12' on, 'cv06' on; + line-height: 1.25; + letter-spacing: -1%; + margin-bottom: 16px; + color: var(--slate-900); + } + + .badge { + height: 24px; + border-radius: 4px; + padding: 0 8px; + display: flex; + align-items: center; + background-color: var(--orange-500); + width: max-content; + color: white; + font-size: 14px; + font-weight: 500; + line-height: 1; + margin-bottom: 16px; + } + } + } +} diff --git a/frontend/src/app/Releases/Release/index.tsx b/frontend/src/app/Releases/Release/index.tsx new file mode 100644 index 000000000..cf325767b --- /dev/null +++ b/frontend/src/app/Releases/Release/index.tsx @@ -0,0 +1,33 @@ +import { ArrowRight } from "iconoir-react"; +import { Link } from "react-router-dom"; + +import Container from "@/components/Container"; + +import styles from "./Release.module.scss"; + +interface ReleaseProps { + date: string; + updates: Array; + fixes: Array; +} + +export default function Release(props: { release?: ReleaseProps }) { + console.log(release); + return ( +
+

{release.date}

+

🤩 What's New

+
    + {release.updates.map(item => { + return
  • {item}
    • + })} +
+

🐛 Bug Fixes

+
    + {release.fixes.map(item => { + return
  • {item}
    • + })} +
+
+ ); +} diff --git a/frontend/src/app/Releases/Releases.module.scss b/frontend/src/app/Releases/Releases.module.scss new file mode 100644 index 000000000..e58bb830b --- /dev/null +++ b/frontend/src/app/Releases/Releases.module.scss @@ -0,0 +1,67 @@ +.root { + display: flex; + flex-direction: column; + gap: 32px; + background-color: var(--slate-50); + + margin: 0 auto 30px; + padding-top: 58px; + align-items: center; + background-color: inherit; + font-family: Inter, sans-serif; + font-style: normal; + font-weight: 400; + color: #383838; +} + +.log { + flex: 0 0 50%; + max-width: 50%; + margin-bottom: 48px; + box-sizing: border-box; + display: block; +} + +.log h2 { + font-size: 16px; + margin-bottom: 12px; + line-height: 150%; +} + +.log h3 { + font-weight: 700; + font-size: 18px; + line-height: 150%; + margin-bottom: 18px; +} + +.log ul { + font-size: 16px; + line-height: 150%; + color: #535353; + padding-left: 0; + margin-bottom: 16px; + list-style-position: outside; + margin-left: 28px; +} + +.log li { + margin: 8pt 0; +} + +.heading h2 { + font-weight: 700; + font-size: 24px; + margin-top: 50px; + text-align: center; + color: #383838; +} + +.heading h3 { + font-weight: 400; + font-size: 16px; + line-height: 150%; + text-align: center; + color: #8a8a8a; + margin-top: 18px; +} diff --git a/frontend/src/app/Releases/index.tsx b/frontend/src/app/Releases/index.tsx new file mode 100644 index 000000000..c3ba03f7e --- /dev/null +++ b/frontend/src/app/Releases/index.tsx @@ -0,0 +1,39 @@ +import Release from "./Release"; +import styles from "./Releases.module.scss"; +import log from "./log.json" + +const Releases = () => { + + const releases = log.releases; + console.log(releases) + + return ( +
+
+

Berkeleytime Releases

+

Keep up-to-date with our releases and bug fixes.

+
+ {releases.map(rel => { + return ( +
+

{rel.date}

+

🤩 What's New

+
    + {rel.updates.map(item => { + return
  • {item}
    • + })} +
+

🐛 Bug Fixes

+
    + {rel.fixes.map(item => { + return
  • {item}
    • + })} +
+
+ ); + })} +
+ ); +}; + +export default Releases; diff --git a/frontend/src/app/Releases/log.json b/frontend/src/app/Releases/log.json new file mode 100644 index 000000000..385a875b0 --- /dev/null +++ b/frontend/src/app/Releases/log.json @@ -0,0 +1,79 @@ +{ "releases": [ + { + "date": "Jan 24, 2021", + "updates": [ + "We released user profiles! Click on the bookmark icon in catalog to save a class, then click on the class in your user home to see it in the catalog. Also be sure to opt in to notifications for when we update the catalog, grades, and the site.", + "We updated the site with Summer 2020 grade distributions." + ], + "fixes": [ + "Updated GEOG 20 in the catalog, which no longer satisfies the L&S International Studies, Social and Behavioral Sciences Breadths." + ] + }, + { + "date": "Dec 6, 2020", + "updates": [ + "We wrote new backend APIs using GraphQL (our previous APIs use the REST framework). Although the APIs listed on our API Docs are currently supported, they may change in the future.", + "We are now primarily hosted on the OCF's servers.", + "We have added a Privacy Policy and Terms of Service to the site." + ], + "fixes": [ + "Modified prerequisites for PB HLTH 126 in Spring 2021 as requested by the instructor.", + "Added support for opening a course by url in catalog on mobile.", + "Added easter eggs back into the catalog.", + "Changed the semester dropdown in catalog to be single select rather than multi-select." + ] + }, + { + "date": "Nov 15, 2020", + "updates": [ + "We have released mobile views! You can now browse our site on your phone and tablet.", + "We've added improved search to our catalog. You can now search for courses by their names. We've added a Sort By - Relevance query to give you courses that are most similar to your query (try searching \"Economics\" in catalog).", + "We've revamped our backend so that we now display more complete grades and enrollment data." + ], + "fixes": [ + "Modified enrollment search to display all courses we have data for. Previously, we were only displaying courses that would be offered in the coming semester.", + "Fixed L&S requirement filters, which were temporarily broken due to a SIS API issue." + ] + }, + { + "date": "Oct 11, 2020", + "updates": [ + "We released Spring 2021 course information! You can now search for courses on our catalog." + ], + "fixes": [ + "Fixed a bug in our enrollment scraper so that all courses we have enrollment data for are listed.", + "Fixed a bug where certain catalog pages like COMPSCI 61B caused the screen to go completely white.", + "Fixed scrolling behavior on catalog so it's friendly for smaller screen sizes and more intuitive for users." + ] + }, + { + "date": "Aug 23, 2020", + "updates": [ + "We are opening our Fall 2020 applications! Come see what roles we have open and join the OCTO team on the apply page.", + "Our backend API can now be accessed from mobile devices, and the *_json queries now have a long option." + ], + "fixes": [ + "Fixed a bug where many courses for which we have enrollment data do not show up.", + "Fixed a bug where enrollment and some course data were not updating.", + "Fixed a bug where typing in the course search bar caused the screen to go completely white.", + "Added visible scrollbars to some scrollable elements. (You can still turn them off using your OS settings.)" + ] + }, + { + "date": "May 3, 2020", + "updates": [ + "We're rolling out an updated UI, which is now available on both web (and soon on mobile)!", + "Our backend API is officially open-sourced in version v0.1! Head over to our API Documentation to check it out.", + "This releases page will be updated with notes of new features, bug fixes, and class enrollment/grades updates.", + "Our new FAQ page answers some common questions we've gotten over the past few semesters. Feel free to send us more questions if you've got them!", + "Support for our old legacy site is now officially deprecated. You can still visit it at old.berkeleytime.com, but some features may be broken and we won't be maintaining it moving forward." + ], + "fixes": [ + "Adding courses to Grades and Enrollment pages now accurately generate unique URLs, which you can share with friends to reproduce your search.", + "Fixed an issue where the course average in Grades was not being calculated correctly.", + "Enrollment statistics are now updated every 15 minutes.", + "Course search is improved with better support for abbreviations for class names." + ] + } +] +} From 4a2bc0907bff039dfc816afad5c655c756d2417c Mon Sep 17 00:00:00 2001 From: Leo Huang Date: Thu, 29 Feb 2024 19:35:06 -0800 Subject: [PATCH 2/4] some work on styling, looking at the index.tsx, maybe not worth to componentize each release, already pretty short code-wise; will continue working on styling and thinking about storing methods (json seems ok so far, maybe just make an input method or something) --- frontend/src/App.tsx | 10 +++ .../app/Releases/Release/Release.module.scss | 83 ------------------- frontend/src/app/Releases/Release/index.tsx | 33 -------- .../src/app/Releases/Releases.module.scss | 7 ++ frontend/src/app/Releases/index.tsx | 41 ++++----- 5 files changed, 39 insertions(+), 135 deletions(-) delete mode 100644 frontend/src/app/Releases/Release/Release.module.scss delete mode 100644 frontend/src/app/Releases/Release/index.tsx diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 2b10f6dfd..684b2bf0a 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -9,6 +9,7 @@ import About from "@/app/About"; import Catalog from "@/app/Catalog"; import Landing from "@/app/Landing"; import Layout from "@/app/Layout"; +import Releases from "@/app/Releases"; const router = createBrowserRouter([ { @@ -52,6 +53,15 @@ const router = createBrowserRouter([ }, ], }, + { + element: , + children: [ + { + element: , + path: "/releases", + }, + ], + }, ]); export default function App() { diff --git a/frontend/src/app/Releases/Release/Release.module.scss b/frontend/src/app/Releases/Release/Release.module.scss deleted file mode 100644 index 275dc0858..000000000 --- a/frontend/src/app/Releases/Release/Release.module.scss +++ /dev/null @@ -1,83 +0,0 @@ -.root { - padding: 96px 0; - - .row { - display: flex; - justify-content: flex-end; - align-items: center; - gap: 96px; - - &:not(:last-child) { - margin-bottom: 96px; - } - - .gallery { - display: flex; - flex-direction: column; - flex-grow: 1; - position: relative; - - .calendar { - width: calc(100% - 128px); - } - - .schedule { - width: 256px; - margin-left: auto; - margin-top: -128px; - } - } - - .text { - width: 512px; - flex-shrink: 0; - - .link { - display: flex; - align-items: center; - gap: 8px; - color: var(--blue-500); - font-size: 16px; - font-weight: 500; - line-height: 1; - transition: all 100ms ease-in-out; - - &:hover { - color: var(--blue-600); - } - } - - .description { - font-size: 16px; - line-height: 1.5; - margin-bottom: 32px; - color: var(--slate-500); - } - - .heading { - font-size: 32px; - font-weight: 660; - font-feature-settings: 'cv05' on, 'cv13' on, 'ss07' on, 'cv12' on, 'cv06' on; - line-height: 1.25; - letter-spacing: -1%; - margin-bottom: 16px; - color: var(--slate-900); - } - - .badge { - height: 24px; - border-radius: 4px; - padding: 0 8px; - display: flex; - align-items: center; - background-color: var(--orange-500); - width: max-content; - color: white; - font-size: 14px; - font-weight: 500; - line-height: 1; - margin-bottom: 16px; - } - } - } -} diff --git a/frontend/src/app/Releases/Release/index.tsx b/frontend/src/app/Releases/Release/index.tsx deleted file mode 100644 index cf325767b..000000000 --- a/frontend/src/app/Releases/Release/index.tsx +++ /dev/null @@ -1,33 +0,0 @@ -import { ArrowRight } from "iconoir-react"; -import { Link } from "react-router-dom"; - -import Container from "@/components/Container"; - -import styles from "./Release.module.scss"; - -interface ReleaseProps { - date: string; - updates: Array; - fixes: Array; -} - -export default function Release(props: { release?: ReleaseProps }) { - console.log(release); - return ( -
-

{release.date}

-

🤩 What's New

-
    - {release.updates.map(item => { - return
  • {item}
    • - })} -
-

🐛 Bug Fixes

-
    - {release.fixes.map(item => { - return
  • {item}
    • - })} -
-
- ); -} diff --git a/frontend/src/app/Releases/Releases.module.scss b/frontend/src/app/Releases/Releases.module.scss index e58bb830b..54ba02e72 100644 --- a/frontend/src/app/Releases/Releases.module.scss +++ b/frontend/src/app/Releases/Releases.module.scss @@ -14,6 +14,13 @@ color: #383838; } +.log_col { + display: flex; + flex-direction: column; + width: 100%; + align-items: center; +} + .log { flex: 0 0 50%; max-width: 50%; diff --git a/frontend/src/app/Releases/index.tsx b/frontend/src/app/Releases/index.tsx index c3ba03f7e..bbf322f70 100644 --- a/frontend/src/app/Releases/index.tsx +++ b/frontend/src/app/Releases/index.tsx @@ -13,25 +13,28 @@ const Releases = () => {

Berkeleytime Releases

Keep up-to-date with our releases and bug fixes.

- {releases.map(rel => { - return ( -
-

{rel.date}

-

🤩 What's New

-
    - {rel.updates.map(item => { - return
  • {item}
    • - })} -
-

🐛 Bug Fixes

-
    - {rel.fixes.map(item => { - return
  • {item}
    • - })} -
-
- ); - })} +
+ {releases.map(rel => { + console.log(rel); + return ( +
+

{rel.date}

+

🤩 What's New

+
    + {rel.updates.map(item => { + return
  • {item}
    • + })} +
+

🐛 Bug Fixes

+
    + {rel.fixes.map(item => { + return
  • {item}
    • + })} +
+
+ ); + })} +
); }; From fd48146611dddb23c4647b4099cc98f051857da5 Mon Sep 17 00:00:00 2001 From: Leo Huang Date: Tue, 12 Mar 2024 19:35:10 -0700 Subject: [PATCH 3/4] PR changes --- frontend/src/App.tsx | 13 ++++--------- frontend/src/app/Releases/index.tsx | 2 +- 2 files changed, 5 insertions(+), 10 deletions(-) diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 684b2bf0a..1f74abe61 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -42,6 +42,10 @@ const router = createBrowserRouter([ element: , path: "/about", }, + { + element: , + path: "/releases", + }, ], }, { @@ -53,15 +57,6 @@ const router = createBrowserRouter([ }, ], }, - { - element: , - children: [ - { - element: , - path: "/releases", - }, - ], - }, ]); export default function App() { diff --git a/frontend/src/app/Releases/index.tsx b/frontend/src/app/Releases/index.tsx index bbf322f70..d54d26e3a 100644 --- a/frontend/src/app/Releases/index.tsx +++ b/frontend/src/app/Releases/index.tsx @@ -5,7 +5,7 @@ import log from "./log.json" const Releases = () => { const releases = log.releases; - console.log(releases) + // console.log(releases) return (
From 0f709c6e002d3e2f7ff01ce87199604ee4dfbf50 Mon Sep 17 00:00:00 2001 From: Leo Huang Date: Tue, 12 Mar 2024 19:44:26 -0700 Subject: [PATCH 4/4] remove dead import --- frontend/src/app/Releases/index.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/frontend/src/app/Releases/index.tsx b/frontend/src/app/Releases/index.tsx index d54d26e3a..f5367d67d 100644 --- a/frontend/src/app/Releases/index.tsx +++ b/frontend/src/app/Releases/index.tsx @@ -1,4 +1,3 @@ -import Release from "./Release"; import styles from "./Releases.module.scss"; import log from "./log.json"