From ce944c8d927e122d7fac39a4a49fd602d4a04b22 Mon Sep 17 00:00:00 2001
From: fedyna-k <fedyna.kevin@gmail.com>
Date: Wed, 15 Jan 2025 23:51:54 +0100
Subject: [PATCH] Fixed card CSS and hint

---
 defaults/makePartials.tsx                 |  2 +-
 fresh.gen.ts                              |  5 +--
 routes/(_components)/AppCard.tsx          |  3 ++
 routes/(apps)/mobility/(_props)/props.ts  |  4 ++-
 routes/(apps)/mobility/index.tsx          | 13 ++------
 routes/(apps)/mobility/partials/index.tsx | 14 +++++++++
 routes/(apps)/notes/(_props)/props.ts     |  2 +-
 routes/(apps)/notes/partials/index.tsx    |  7 +++--
 static/styles/app-cards.css               | 38 +++++++++++++++++++++++
 static/styles/app.css                     |  7 +++++
 static/styles/main.css                    | 12 +++----
 11 files changed, 82 insertions(+), 25 deletions(-)
 create mode 100644 routes/(apps)/mobility/partials/index.tsx

diff --git a/defaults/makePartials.tsx b/defaults/makePartials.tsx
index 786ae68..783c20e 100644
--- a/defaults/makePartials.tsx
+++ b/defaults/makePartials.tsx
@@ -2,7 +2,7 @@ import { JSX } from "preact";
 import { Partial } from "$fresh/runtime.ts";
 import { RouteConfig } from "$fresh/server.ts";
 
-export function getConfig(): RouteConfig {
+export function getPartialsConfig(): RouteConfig {
   return {
     skipAppWrapper: true,
     skipInheritedLayouts: true,
diff --git a/fresh.gen.ts b/fresh.gen.ts
index dad4883..62756f9 100644
--- a/fresh.gen.ts
+++ b/fresh.gen.ts
@@ -4,6 +4,7 @@
 
 import * as $_apps_layout from "./routes/(apps)/_layout.tsx";
 import * as $_apps_mobility_index from "./routes/(apps)/mobility/index.tsx";
+import * as $_apps_mobility_partials_index from "./routes/(apps)/mobility/partials/index.tsx";
 import * as $_apps_notes_index from "./routes/(apps)/notes/index.tsx";
 import * as $_apps_notes_partials_admin_courses from "./routes/(apps)/notes/partials/(admin)/courses.tsx";
 import * as $_apps_notes_partials_admin_students from "./routes/(apps)/notes/partials/(admin)/students.tsx";
@@ -17,7 +18,6 @@ import * as $apps from "./routes/apps.tsx";
 import * as $index from "./routes/index.tsx";
 import * as $login from "./routes/login.tsx";
 import * as $logout from "./routes/logout.tsx";
-import * as $Counter from "./islands/Counter.tsx";
 import * as $_islands_AppNavigator from "./routes/(_islands)/AppNavigator.tsx";
 import * as $_islands_Navbar from "./routes/(_islands)/Navbar.tsx";
 import type { Manifest } from "$fresh/server.ts";
@@ -26,6 +26,8 @@ const manifest = {
   routes: {
     "./routes/(apps)/_layout.tsx": $_apps_layout,
     "./routes/(apps)/mobility/index.tsx": $_apps_mobility_index,
+    "./routes/(apps)/mobility/partials/index.tsx":
+      $_apps_mobility_partials_index,
     "./routes/(apps)/notes/index.tsx": $_apps_notes_index,
     "./routes/(apps)/notes/partials/(admin)/courses.tsx":
       $_apps_notes_partials_admin_courses,
@@ -43,7 +45,6 @@ const manifest = {
     "./routes/logout.tsx": $logout,
   },
   islands: {
-    "./islands/Counter.tsx": $Counter,
     "./routes/(_islands)/AppNavigator.tsx": $_islands_AppNavigator,
     "./routes/(_islands)/Navbar.tsx": $_islands_Navbar,
   },
diff --git a/routes/(_components)/AppCard.tsx b/routes/(_components)/AppCard.tsx
index 189543f..2c91fbb 100644
--- a/routes/(_components)/AppCard.tsx
+++ b/routes/(_components)/AppCard.tsx
@@ -10,6 +10,9 @@ export default function AppCard(props: AppCardProps) {
     <a class="app-card" href={`/${props.href}`} f-client-nav={false}>
       <span class="material-symbols-outlined">{props.app.icon}</span>
       <p>{props.app.name}</p>
+      <span class="material-symbols-outlined info" data-hint={props.app.hint}>
+        info
+      </span>
     </a>
   );
 }
diff --git a/routes/(apps)/mobility/(_props)/props.ts b/routes/(apps)/mobility/(_props)/props.ts
index 3a89c13..f9c0b54 100644
--- a/routes/(apps)/mobility/(_props)/props.ts
+++ b/routes/(apps)/mobility/(_props)/props.ts
@@ -1,9 +1,11 @@
-import { AppProperties } from "../../../(_islands)/AppNavigator.tsx";
+import { AppProperties } from "$root/defaults/interfaces.ts";
 
 const properties: AppProperties = {
   name: "PolyMobility",
   icon: "flight_takeoff",
   hint: "Gestionnaire de mobilité",
+  pages: {},
+  adminOnly: [],
 };
 
 export default properties;
diff --git a/routes/(apps)/mobility/index.tsx b/routes/(apps)/mobility/index.tsx
index dd79f2b..1d82f7f 100644
--- a/routes/(apps)/mobility/index.tsx
+++ b/routes/(apps)/mobility/index.tsx
@@ -1,11 +1,2 @@
-type ModulesProps = Record<string | number | symbol, never>;
-
-export default function Modules(_props: ModulesProps) {
-  return (
-    <>
-      <h2>All PolyMPR modules</h2>
-      <nav>
-      </nav>
-    </>
-  );
-}
+import makeIndex from "$root/defaults/makeIndex.ts";
+export default makeIndex(import.meta.dirname!);
diff --git a/routes/(apps)/mobility/partials/index.tsx b/routes/(apps)/mobility/partials/index.tsx
new file mode 100644
index 0000000..a5cffdb
--- /dev/null
+++ b/routes/(apps)/mobility/partials/index.tsx
@@ -0,0 +1,14 @@
+import {
+  getPartialsConfig,
+  makePartials,
+} from "$root/defaults/makePartials.tsx";
+import { EmptyObject } from "$root/defaults/interfaces.ts";
+
+type MobilityIndexProps = EmptyObject;
+
+export function Index(_props: MobilityIndexProps) {
+  return <p>Nothing to see here...</p>;
+}
+
+export const config = getPartialsConfig();
+export default makePartials(Index);
diff --git a/routes/(apps)/notes/(_props)/props.ts b/routes/(apps)/notes/(_props)/props.ts
index c433973..c3d9f0f 100644
--- a/routes/(apps)/notes/(_props)/props.ts
+++ b/routes/(apps)/notes/(_props)/props.ts
@@ -10,7 +10,7 @@ const properties: AppProperties = {
     students: "Students management",
   },
   adminOnly: ["courses", "students"],
-  hint: "Gestionnaire de note",
+  hint: "Student grading management",
 };
 
 export default properties;
diff --git a/routes/(apps)/notes/partials/index.tsx b/routes/(apps)/notes/partials/index.tsx
index cd6763c..85fcd2b 100644
--- a/routes/(apps)/notes/partials/index.tsx
+++ b/routes/(apps)/notes/partials/index.tsx
@@ -1,4 +1,7 @@
-import { getConfig, makePartials } from "$root/defaults/makePartials.tsx";
+import {
+  getPartialsConfig,
+  makePartials,
+} from "$root/defaults/makePartials.tsx";
 
 type NotesIndexProps = Record<string | number | symbol, never>;
 
@@ -6,5 +9,5 @@ export function Index(_props: NotesIndexProps) {
   return <a href="notes" f-partial={"notes/partials"}>bip boup</a>;
 }
 
-export const config = getConfig();
+export const config = getPartialsConfig();
 export default makePartials(Index);
diff --git a/static/styles/app-cards.css b/static/styles/app-cards.css
index e40bbea..c8fe50f 100644
--- a/static/styles/app-cards.css
+++ b/static/styles/app-cards.css
@@ -10,6 +10,7 @@
   padding: 1em;
   border-radius: 0.5em;
   font-weight: 700;
+  position: relative;
 
   border: 1px solid
     light-dark(
@@ -48,3 +49,40 @@
 .app-card > span {
   font-size: 4em;
 }
+
+.app-card > span.info {
+  position: absolute;
+  top: 0.25em;
+  right: 0.25em;
+  font-size: 1.5em;
+}
+
+.app-card > span.info::before {
+  font-family: var(--font-family-text);
+  content: attr(data-hint);
+  position: absolute;
+  bottom: 1.5rem;
+  left: 0;
+  z-index: 99999;
+  font-size: 1rem;
+  padding: 1em;
+  color: light-dark(
+    var(--light-foreground),
+    var(--dark-foreground)
+  );
+  background-color: light-dark(
+    var(--light-background-color),
+    var(--dark-background-color)
+  );
+  border: 1px solid
+    light-dark(
+      var(--light-foreground-dimmer),
+      var(--dark-foreground-dimmer)
+    );
+  border-radius: 0.5em;
+  display: none;
+}
+
+.app-card > span.info:hover::before {
+  display: block;
+}
diff --git a/static/styles/app.css b/static/styles/app.css
index cd59267..6dbd54c 100644
--- a/static/styles/app.css
+++ b/static/styles/app.css
@@ -48,3 +48,10 @@
   transform: scaleY(1);
   transform-origin: top;
 }
+
+@media screen and (max-width: 1024px) {
+  #app {
+    grid-template-rows: auto 1fr;
+    grid-template-columns: none;
+  }
+}
diff --git a/static/styles/main.css b/static/styles/main.css
index 2ac72b3..a36f5c4 100644
--- a/static/styles/main.css
+++ b/static/styles/main.css
@@ -4,10 +4,12 @@
   --dark-background-color: hsl(250, 50%, 8%);
   --dark-foreground: hsl(250, 10%, 90%);
   --dark-foreground-dim: hsl(250, 10%, 70%);
+  --dark-foreground-dimmer: hsl(250, 10%, 25%);
 
   --light-background-color: hsl(250, 50%, 92%);
   --light-foreground: hsl(250, 10%, 10%);
   --light-foreground-dim: hsl(250, 10%, 30%);
+  --light-foreground-dimmer: hsl(250, 10%, 75%);
 
   --dark-accent-color: hsl(150, 70%, 50%);
   --dark-strong-color: hsl(50, 70%, 50%);
@@ -48,13 +50,9 @@ header {
   justify-content: space-between;
   align-items: center;
   border-bottom: 1px solid
-    color-mix(
-      in srgb,
-      light-dark(
-        var(--light-foreground-dim),
-        var(--dark-foreground-dim)
-      ) 30%,
-      transparent
+    light-dark(
+      var(--light-foreground-dimmer),
+      var(--dark-foreground-dimmer)
     );
 
   font-weight: 700;