add: prototipo pagina utenti con barra di ricerca

package.json

@@ -15,6 +15,7 @@
         "@astrojs/check": "^0.5.6",
         "@astrojs/node": "^8.2.1",
         "@astrojs/preact": "^3.1.1",
+        "@fontsource-variable/material-symbols-outlined": "^5.0.23",
         "@fontsource/open-sans": "^5.0.24",
         "@fontsource/source-code-pro": "^5.0.16",
         "@fontsource/source-sans-pro": "^5.0.8",

pnpm-lock.yaml

@@ -14,6 +14,9 @@ dependencies:
   '@astrojs/preact':
     specifier: ^3.1.1
     version: 3.1.1(@babel/core@7.24.0)(preact@10.19.6)(vite@5.1.4)
+  '@fontsource-variable/material-symbols-outlined':
+    specifier: ^5.0.23
+    version: 5.0.23
   '@fontsource/open-sans':
     specifier: ^5.0.24
     version: 5.0.24
@@ -857,6 +860,10 @@ packages:
     requiresBuild: true
     optional: true
 
+  /@fontsource-variable/material-symbols-outlined@5.0.23:
+    resolution: {integrity: sha512-8DhiILwnSkEWmv7XtvaFHYxt9WqWOZo++M/poTe6rPRtAIEq/tPXnQ2qxQ2ZjTnY2tBjOwTsqEuQT98Y+QDesA==}
+    dev: false
+
   /@fontsource/open-sans@5.0.24:
     resolution: {integrity: sha512-bIF+87vxfOPTyvnBKS+rCPmz/m66um3zCk1UdPv8RGBgwu6MMxwED0jpcbvyFSkfy0ApcdjfkDSAhlFTm/pgiw==}
     dev: false

src/layouts/BaseLayout.astro

@@ -21,6 +21,10 @@ const { title, description, thumbnail, pageName } = Astro.props
         {thumbnail && <meta property="og:image" content={thumbnail} />}
 
         <link rel="icon" type="image/png" sizes="512x512" href="/assets/icon.png" />
+        <link
+            rel="stylesheet"
+            href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200"
+        />
 
         <script>
             import renderMathInElement from 'katex/contrib/auto-render'

src/pages/users.astro

@@ -0,0 +1,42 @@
+---
+import PageLayout from '../layouts/PageLayout.astro'
+---
+
+<PageLayout pageName="users">
+    <h1>Utenti</h1>
+
+    <div class="search">
+        <input type="text" />
+        <span class="material-symbols-outlined">search</span>
+    </div>
+
+    <div class="search-results">
+        <div class="search-result">
+            <div class="icon"><span class="material-symbols-outlined">person</span></div>
+            <div class="text">Persona 1</div>
+            <div class="right">
+                <a href="#">
+                    <span class="material-symbols-outlined">globe</span>
+                </a>
+            </div>
+        </div>
+        <div class="search-result">
+            <span class="material-symbols-outlined">person</span>
+            <div class="text">Persona 2</div>
+            <div class="right">
+                <a href="#">
+                    <span class="material-symbols-outlined">globe</span>
+                </a>
+            </div>
+        </div>
+        <div class="search-result">
+            <span class="material-symbols-outlined">person</span>
+            <div class="text">Persona 3</div>
+            <div class="right">
+                <a href="#">
+                    <span class="material-symbols-outlined">globe</span>
+                </a>
+            </div>
+        </div>
+    </div>
+</PageLayout>

src/styles/components.scss

@@ -0,0 +1,94 @@
+//
+// Components - for complex parts of the UI like search bars or compound buttons
+//
+
+.material-symbols-outlined {
+    display: grid;
+    place-content: center;
+
+    font-size: 24px;
+    font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
+}
+
+.search {
+    @extend .input-text;
+
+    padding: 0;
+
+    display: grid;
+    grid-template-columns: 1fr auto;
+    align-items: center;
+
+    cursor: pointer;
+
+    &:hover,
+    &:hover input[type='text'] {
+        background: #f8f8f8;
+    }
+
+    input[type='text'] {
+        border: none;
+        box-shadow: none;
+        outline: none;
+        height: 100%;
+
+        padding: 0;
+        padding-left: 0.35rem;
+    }
+
+    .material-symbols-outlined {
+        padding: 0 0.5rem;
+    }
+}
+
+.flex-column {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+}
+
+.flex-row {
+    display: flex;
+    flex-direction: row;
+    gap: 1rem;
+}
+
+.search-results {
+    width: 100%;
+
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+
+    .search-result {
+        width: 100%;
+
+        display: grid;
+        grid-template-columns: auto auto 1fr auto;
+        grid-template-areas: 'icon text . right';
+
+        align-items: center;
+
+        gap: 0.5rem;
+
+        padding: 0.5rem;
+
+        background: #fff;
+
+        border: 3px solid #222;
+        border-radius: 6px;
+        box-shadow: 4px 4px 0 0 #222;
+
+        & > .icon {
+            grid-area: icon;
+        }
+
+        & > .text {
+            grid-area: text;
+        }
+
+        & > .right {
+            grid-area: right;
+        }
+    }
+}

src/styles/controls.scss

@@ -0,0 +1,68 @@
+//
+// Controls - for things like buttons, input, select
+//
+
+button,
+.button,
+[role='button'] {
+    appearance: none;
+
+    background: #fff;
+
+    border: 3px solid #222;
+    border-radius: 6px;
+    box-shadow: 4px 4px 0 0 #222;
+
+    transition: all 64ms linear;
+
+    &:hover {
+        transform: translate(-1px, -1px);
+        box-shadow: 5px 5px 0 0 #222;
+    }
+
+    &:active {
+        transform: translate(2px, 2px);
+        box-shadow: 2px 2px 0 0 #222;
+    }
+
+    padding: 0.25rem 1.5rem;
+
+    text-decoration: none;
+    color: #222;
+
+    font-family: 'Source Sans Pro', sans-serif;
+    font-weight: 600;
+
+    cursor: pointer;
+
+    &.primary {
+        background: #1e6733;
+        color: #f4fef7;
+
+        &:hover {
+            background: #2b8b47;
+        }
+    }
+
+    &.icon {
+        padding: 0.25rem;
+        margin-right: 0.25rem;
+        margin-bottom: 0.25rem;
+    }
+}
+
+.input-text,
+input[type='text'] {
+    width: 100%;
+    height: 2.5rem;
+
+    border: 3px solid #222;
+    border-radius: 6px;
+    box-shadow: 4px 4px 0 0 #222;
+
+    padding: 0 0.25rem;
+
+    &:hover {
+        background: #f8f8f8;
+    }
+}

src/styles/main.scss

@@ -47,108 +47,76 @@ a {
     }
 }
 
-//
+@import './controls.scss';
-// Controls
-//
 
-button,
+@import './components.scss';
-.button,
-[role='button'] {
-    appearance: none;
 
-    background: #fff;
+//
-
+// Custom Page Styles
-    border: 3px solid #222;
+//
-    border-radius: 6px;
-    box-shadow: 4px 4px 0 0 #222;
 
-    transition: all 64ms linear;
+body {
+    // for the header spacing
+    padding-top: 6rem;
 
-    &:hover {
+    display: grid;
-        background: #f0f0f0;
+    grid-template-rows: 1fr auto;
-    }
 
-    &:active {
+    header {
-        transform: translate(2px, 2px);
+        z-index: 10;
-        box-shadow: 2px 2px 0 0 #222;
-    }
 
-    padding: 0.25rem 1.5rem;
+        height: 6rem;
+        border-bottom: 4px solid #222;
+        background: #fff;
 
-    text-decoration: none;
+        top: 0;
-    color: #222;
+        position: fixed;
+        width: 100%;
 
-    font-family: 'Source Sans Pro', sans-serif;
+        display: flex;
-    font-weight: 600;
+        align-items: center;
+        justify-content: space-between;
 
-    &.primary {
+        .logo {
-        background: #1e6733;
+            padding-left: 0.5rem;
-        color: #f4fef7;
 
-        &:hover {
+            img {
-            background: #2b8b47;
+                height: 4rem;
+            }
         }
-    }
-}
-
-//
-// Pages
-//
-
-header {
-    z-index: 10;
-
-    height: 6rem;
-    border-bottom: 4px solid #222;
-    background: #fff;
 
-    top: 0;
+        .links {
-    position: fixed;
+            display: flex;
-    width: 100%;
+            align-items: center;
-
+            gap: 1.5rem;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
 
-    .logo {
+            padding: 0 1.5rem;
-        padding-left: 0.5rem;
 
-        img {
+            a {
-            height: 4rem;
+                font-size: 22px;
+                font-weight: 600;
+            }
         }
     }
 
-    .links {
+    main {
-        display: flex;
+        width: 100%;
-        align-items: center;
-        gap: 1.5rem;
-
-        padding: 0 1.5rem;
-
-        a {
-            font-size: 22px;
-            font-weight: 600;
-        }
     }
-}
 
-footer {
+    footer {
-    min-height: 6rem;
+        min-height: 6rem;
-    border-top: 4px solid #222;
+        border-top: 4px solid #222;
-    background: #444;
+        background: #444;
-    color: #fdfdfd;
+        color: #fdfdfd;
 
-    display: grid;
+        display: grid;
-    place-content: center;
+        place-content: center;
 
-    font-family: 'Source Sans Pro', sans-serif;
+        font-family: 'Source Sans Pro', sans-serif;
-    font-size: 20px;
+        font-size: 20px;
+    }
 }
 
-//
-// Custom Page Styles
-//
-
 .homepage {
     header .logo {
         visibility: hidden;
@@ -197,14 +165,14 @@ footer {
     section.principal {
         z-index: -2;
 
-        min-height: calc(100vh - 2rem);
+        min-height: calc(100vh - 7rem);
 
         flex-direction: row;
         align-items: center;
         justify-content: center;
-        gap: 6rem;
+        gap: 4rem;
 
-        padding: 6rem 0;
+        padding: 3rem 0 6rem;
 
         background: #ecffe3;
         // circuit color
@@ -222,8 +190,6 @@ footer {
             width: 100%;
             height: 100%;
 
-            padding-top: 6rem;
-
             canvas {
                 width: 100%;
                 height: 100%;
@@ -443,6 +409,25 @@ footer {
     }
 }
 
+.users {
+    main {
+        justify-self: center;
+
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        max-width: 80ch;
+        padding: 5rem 0;
+
+        gap: 5rem;
+
+        h1 {
+            font-size: 42px;
+        }
+    }
+}
+
 //
 // Misc
 //