Fixed card CSS and hint

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,

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,
   },

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>
   );
 }

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;

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!);

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);

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;

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);

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;
+}

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;
+  }
+}

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;