fix study module page overflow-x; module navi item grid adjustments

rage · Jul 11, 2023 · 014240c · 014240c
1 parent 15dcb05
commit 014240c
Show file tree

Hide file tree

Showing 5 changed files with 87 additions and 13 deletions.
diff --git a/backend/package.json b/backend/package.json
@@ -45,7 +45,7 @@
     "expire-user-organization-join-confirmations": "node ./dist/bin/expireUserOrganizationJoinConfirmations.js",
     "prune-old-stored-data": "node ./dist/bin/pruneOldStoredData.js",
     "download-env": "node ./bin/downloadEnv.js",
-    "dev": "npm run download-env && nodemon --watch ts,json --exec 'node -r ts-node/register/transpile-only ./app.ts'",
+    "dev": "npm run download-env && nodemon --watch './**/*' --ignore 'test/**/*' --ext 'ts,json' --exec 'node -r ts-node/register/transpile-only ./app.ts'",
     "dev:typecheck": "tsc --noEmit --watch",
     "build": "npm run download-env && npm run createExports && tsc --noEmit false && cp -R types dist",
     "start": "node dist/app.js",

diff --git a/backend/util/db-functions.ts b/backend/util/db-functions.ts
@@ -87,6 +87,62 @@ export const buildUserSearch = (
   return userSearchQuery
 }
 
+const wrapQueryString = (query: string) => `%${query}%`
+
+export const buildUserSearchRaw = (
+  search?: string | null,
+  fields: Array<keyof Prisma.UserWhereInput | "full_name"> = defaultFields,
+): Prisma.Sql | undefined => {
+  if (!isDefined(search)) {
+    return
+  }
+
+  if (fields && fields.length === 0) {
+    fields = defaultFields
+  }
+
+  const conditions: Array<Prisma.Sql> = []
+
+  for (const field of fields) {
+    if (field === "full_name") {
+      const possibleNameCombinations = getNameCombinations(search)
+
+      if (possibleNameCombinations.length) {
+        const nameQueries = possibleNameCombinations.map(
+          ({ first_name, last_name }) =>
+            Prisma.sql`(first_name ILIKE ${wrapQueryString(
+              first_name,
+            )} AND last_name ILIKE ${wrapQueryString(last_name)})`,
+        )
+        conditions.push(Prisma.sql`(${Prisma.join(nameQueries, " OR ")})`)
+      }
+    } else if (field === "upstream_id") {
+      const searchAsNumber = parseInt(search)
+
+      if (!isNaN(searchAsNumber)) {
+        conditions.push(Prisma.sql`(upstream_id = ${searchAsNumber})`)
+      }
+    } else if (["student_number", "real_student_number"].includes(field)) {
+      conditions.push(
+        Prisma.sql`(${Prisma.raw(field)} LIKE ${wrapQueryString(search)})`,
+      )
+    } else {
+      conditions.push(
+        Prisma.sql`(${Prisma.raw(field)} ILIKE ${wrapQueryString(search)})`,
+      )
+    }
+  }
+
+  if (conditions.length === 0) {
+    return
+  }
+
+  return Prisma.sql`
+    SELECT * from "user"
+    WHERE ${Prisma.join(conditions, " OR ")};
+  `
+}
+
 interface ConvertPaginationInput {
   first?: number | null
   last?: number | null

diff --git a/frontend/components/NewLayout/Frontpage/Modules/ModuleNaviList.tsx b/frontend/components/NewLayout/Frontpage/Modules/ModuleNaviList.tsx
@@ -17,18 +17,25 @@ const ModulesGrid = styled("ul")(
   ({ theme }) => `
   list-style: none;
   list-style-position: inside;
-  padding: 0;
   display: grid;
   grid-gap: 1rem;
-  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(15vw, 1fr));
   padding: 2rem;
   justify-content: center;
   width: 80%;
 
-  ${theme.breakpoints.down("sm")}}} {
-    padding: 0;
+  ${theme.breakpoints.down("lg")} {
+    grid-template-columns: repeat(auto-fit, minmax(30vw, 1fr));
+  }
+  ${theme.breakpoints.down("sm")} {
+    padding: 1rem;
+    width: 100%;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  }
+
+  ${theme.breakpoints.down("xxs")} {
     width: 100%;
-    grid-template-columns: 1fr;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
   }
 `,
 )

diff --git a/frontend/components/NewLayout/Modules/StudyModuleHero.tsx b/frontend/components/NewLayout/Modules/StudyModuleHero.tsx
@@ -8,17 +8,28 @@ const Header = styled(Typography)`
   display: flex;
   justify-content: center;
   text-align: center;
+` as typeof Typography
+
+const Container = styled("div")`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  width: 100%;
+  padding: 0 2rem;
 `
 
 export function StudyModuleHero() {
   const t = useTranslator(StudyModulesTranslations)
 
   return (
-    <Header
-      variant="h1"
-      dangerouslySetInnerHTML={{
-        __html: t("modulesTitle"),
-      }}
-    />
+    <Container>
+      <Header
+        component="h1"
+        variant="h2"
+        dangerouslySetInnerHTML={{
+          __html: t("modulesTitle"),
+        }}
+      />
+    </Container>
   )
 }
diff --git a/frontend/components/NewLayout/Modules/StudyModuleListItem.tsx b/frontend/components/NewLayout/Modules/StudyModuleListItem.tsx
@@ -190,7 +190,7 @@ export function ListItem({
     )
     if (description.clientHeight > cardHeight && currentSpan < 2) {
       const span = Math.ceil(description.scrollHeight / cardHeight) // the max size of row should be in a var
-      description.style.cssText = `--hero-span: ${span};`
+      description.style.setProperty("--hero-span", `${span}`)
     }
   }, [descriptionRef.current, moduleCardRef.current])