Add admin panel (#9)

Vianpyro · web-flow · commit e99b4f647551 · 2025-05-20T19:31:26.000-04:00
* Refactor styles and layout for header, recipe card, and admin page; update global styles for consistency

* Add tasks for building and deleting old Git branches in VSCode configuration

* Enhance admin panel layout with navigation sections and improve global styles for better alignment and spacing

* Adjust main margin-top for better responsiveness on smaller screens

* Implement navigation selection for admin panel and enhance user interaction

* Add dynamic content display for admin panel sections with show/hide functionality

* Add admin panel icon to header and remove unused submit button styles

* Update glassy background effect with percentage values for improved transparency
diff --git a/.vscode/tasks.json b/.vscode/tasks.json
@@ -15,6 +15,18 @@
                 "showReuseMessage": false
             }
         },
+        {
+            "label": "Astro Build",
+            "type": "shell",
+            "group": "build",
+            "command": "npm run build",
+            "presentation": {
+                "reveal": "always",
+                "focus": true,
+                "panel": "dedicated",
+                "clear": true
+            }
+        },
         {
             "label": "Prettify All Files",
             "type": "shell",
@@ -33,6 +45,14 @@
             "presentation": {
                 "showReuseMessage": false
             }
+        },
+        {
+            "label": "Delete old Git branches",
+            "type": "shell",
+            "command": "git fetch --prune && git fetch -p ; git branch -r | awk '{print $1}' | egrep -v -f /dev/fd/0 <(git branch -vv | grep origin) | awk '{print $1}' | xargs git branch -D",
+            "presentation": {
+                "showReuseMessage": false
+            }
         }
     ]
 }
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/assets/icon/device-desktop-analytics.svg b/src/assets/icon/device-desktop-analytics.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+	<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a1 1 0 0 1 1-1h16a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1zm4 15h10m-8-4v4m6-4v4m-6-8V8m3 4v-1m3 1v-2m-3 2v-1" />
+</svg>
diff --git a/src/components/Header.astro b/src/components/Header.astro
@@ -3,6 +3,7 @@ import '../styles/global.css'
 import SearchBar from '../components/SearchBar.astro'
 import IconHome from '../assets/icon/home.svg'
 import IconUser from '../assets/icon/user-circle.svg'
+import IconAdminPanel from '../assets/icon/device-desktop-analytics.svg'
 
 import { SITE_NAME } from '../config.js'
 const { canSearch = false } = Astro.props || {}
@@ -16,6 +17,9 @@ const { canSearch = false } = Astro.props || {}
     {canSearch && <SearchBar placeholder="Search for recipes..." />}
     <nav>
         <ul>
+            <li title="Admin Panel">
+                <a href="admin.html"><IconAdminPanel /></a>
+            </li>
             <li title="Account">
                 <a href="authentication.html"><IconUser /></a>
             </li>
@@ -24,11 +28,6 @@ const { canSearch = false } = Astro.props || {}
 </header>
 
 <style>
-    h1 {
-        font-size: var(--font-size-title);
-        text-wrap: nowrap;
-    }
-
     header {
         background-color: var(--color-primary);
         display: flex;
diff --git a/src/components/RecipeCard.astro b/src/components/RecipeCard.astro
@@ -29,10 +29,6 @@ function randint(min: number, max: number) {
 </Fragment>
 
 <style>
-    h1 {
-        font-size: var(--font-size-title);
-    }
-
     .recipe-polaroid {
         align-items: center;
         background-color: var(--polaroid-color);
@@ -57,7 +53,6 @@ function randint(min: number, max: number) {
         overflow: hidden;
         text-align: center;
         text-overflow: ellipsis;
-        white-space: nowrap;
         width: calc(var(--polaroid-width) - var(--spacing-small));
     }
 
diff --git a/src/layouts/Main.astro b/src/layouts/Main.astro
@@ -37,10 +37,6 @@ const { canSearch = false } = Astro.props || {}
     }
 
     body {
-        align-items: center;
-        display: flex;
-        flex-direction: column;
-        gap: var(--spacing-large);
         background-color: light-dark(rgb(255 255 255 / 0.5), rgb(0 0 0 / 0.5));
         background-image:
             radial-gradient(rgb(128 128 128 / 0.05) 1px, transparent 1px),
@@ -76,11 +72,13 @@ const { canSearch = false } = Astro.props || {}
 
     @media screen and (width <=1000px) {
         main {
-            margin-top: calc(2 * var(--spacing-large) + 2rem);
+            margin-top: calc(var(--spacing-large) + var(--font-size-title) + var(--spacing-medium));
         }
 
         main.with-search {
-            margin-top: calc(2 * var(--spacing-large) + 4rem);
+            margin-top: calc(
+                var(--spacing-large) + 3 * var(--font-size-title) + var(--spacing-medium)
+            );
         }
     }
 </style>
diff --git a/src/pages/admin.astro b/src/pages/admin.astro
@@ -0,0 +1,175 @@
+---
+import '../styles/global.css'
+import Main from '../layouts/Main.astro'
+---
+
+<Main title="Admin Panel">
+    <div id="admin-panel">
+        <section id="content">
+            <h1>Content</h1>
+            <nav>
+                <ul>
+                    <li class="admin-panel-selected">Recipes</li>
+                    <li>Comments</li>
+                    <li>Media</li>
+                </ul>
+            </nav>
+            <div class="admin-panel-data">
+                <div class="show">Showing recipes</div>
+                <div class="hide">Showing comments</div>
+                <div class="hide">Showing media</div>
+            </div>
+        </section>
+
+        <section id="users">
+            <h1>Users</h1>
+            <nav>
+                <ul>
+                    <li class="admin-panel-selected">User list</li>
+                    <li>Reports</li>
+                    <li>Flags</li>
+                </ul>
+            </nav>
+            <div class="admin-panel-data">
+                <div class="show">Showing user list</div>
+                <div class="hide">Showing reports</div>
+                <div class="hide">Showing flags</div>
+            </div>
+        </section>
+
+        <section id="activity">
+            <h1>Activity</h1>
+            <nav>
+                <ul>
+                    <li class="admin-panel-selected">Site stats</li>
+                    <li>Trending</li>
+                    <li>Audit logs</li>
+                </ul>
+            </nav>
+            <div class="admin-panel-data">
+                <div class="show">Showing site stats</div>
+                <div class="hide">Showing trending</div>
+                <div class="hide">Showing audit logs</div>
+            </div>
+        </section>
+    </div>
+</Main>
+
+<style>
+    div#admin-panel {
+        display: grid;
+        width: 100%;
+        grid-template:
+            'content users'
+            'content activity' / 1fr 1fr;
+        gap: var(--spacing-medium);
+        height: 100%;
+        justify-content: center;
+        width: 90%;
+    }
+
+    div.hide {
+        opacity: 0;
+        transform: translateY(-100%);
+    }
+
+    div.show {
+        opacity: 1;
+        transform: translateY(0);
+    }
+
+    div.admin-panel-data {
+        overflow: hidden;
+        min-height: calc(100% - var(--spacing-large) - var(--spacing-medium));
+    }
+
+    div.admin-panel-data {
+        overflow: hidden;
+        position: relative;
+    }
+
+    div.admin-panel-data > div {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+    }
+
+    h1 {
+        text-align: center;
+    }
+
+    li.admin-panel-selected {
+        background-color: var(--background-glassy);
+    }
+
+    nav {
+        border-bottom: 1px solid #888;
+    }
+
+    nav > ul {
+        list-style: none;
+        display: flex;
+        width: 100%;
+        justify-content: space-around;
+    }
+
+    nav > ul > li {
+        border-top-left-radius: var(--border-radius-small);
+        border-top-right-radius: var(--border-radius-small);
+        cursor: pointer;
+        padding: var(--spacing-small);
+    }
+
+    section {
+        border-radius: var(--border-radius-large);
+        padding: var(--spacing-medium);
+    }
+
+    section#activity {
+        grid-area: activity;
+    }
+
+    section#content {
+        grid-area: content;
+    }
+
+    section#users {
+        grid-area: users;
+    }
+
+    section#settings {
+        grid-area: settings;
+    }
+
+    @media screen and (width<=1000px) {
+        div#admin-panel {
+            grid-template:
+                'content'
+                'users'
+                'activity' / 1fr;
+            width: 95%;
+        }
+    }
+</style>
+
+<script type="module" is:inline>
+    document.querySelectorAll('nav > ul').forEach((menu) => {
+        menu.addEventListener('click', (event) => {
+            if (event.target.tagName === 'LI') {
+                const current = menu.querySelector('.admin-panel-selected')
+                const index = Array.from(menu.children).indexOf(event.target)
+                const data = menu.closest('section').querySelector('.admin-panel-data')
+                const items = data.children
+
+                if (current) current.classList.remove('admin-panel-selected')
+                event.target.classList.add('admin-panel-selected')
+
+                Array.from(items).forEach((item, i) => {
+                    item.classList.toggle('show', i === index)
+                    item.classList.toggle('hide', i !== index)
+                })
+            }
+        })
+    })
+</script>
diff --git a/src/pages/authentication.astro b/src/pages/authentication.astro
@@ -66,7 +66,6 @@ import PasswordRequirements from '../components/PasswordRequirements.astro'
     }
 
     section {
-        background-color: light-dark(rgb(0 0 0 / 0.2), rgb(255 255 255 / 0.1));
         border-radius: var(--border-radius-large);
         display: flex;
         flex-direction: column;
diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -35,6 +35,7 @@ import recipes from '../assets/recipes.json'
 
     <style>
         #recipes-list {
+            background-color: transparent;
             display: flex;
             flex-wrap: wrap;
             gap: var(--spacing-medium);
diff --git a/src/styles/form_field.css b/src/styles/form_field.css
@@ -1,13 +1,3 @@
-button[type='submit'] {
-    color: white;
-    cursor: pointer;
-    background-color: var(--color-secondary);
-    border: none;
-    border-radius: var(--border-radius-large);
-    font-size: 1rem;
-    padding: 1rem 2rem;
-}
-
 .form-field {
     position: relative;
     width: 100%;
diff --git a/src/styles/global.css b/src/styles/global.css
diff --git a/src/styles/markdown.css b/src/styles/markdown.css

Original file line number	Diff line number	Diff line change
`@@ -15,6 +15,18 @@`
`15`	`15`	`"showReuseMessage": false`
`16`	`16`	`}`
`17`	`17`	`},`
	`18`	`+ {`
	`19`	`+ "label": "Astro Build",`
	`20`	`+ "type": "shell",`
	`21`	`+ "group": "build",`
	`22`	`+ "command": "npm run build",`
	`23`	`+ "presentation": {`
	`24`	`+ "reveal": "always",`
	`25`	`+ "focus": true,`
	`26`	`+ "panel": "dedicated",`
	`27`	`+ "clear": true`
	`28`	`+ }`
	`29`	`+ },`
`18`	`30`	`{`
`19`	`31`	`"label": "Prettify All Files",`
`20`	`32`	`"type": "shell",`
`@@ -33,6 +45,14 @@`
`33`	`45`	`"presentation": {`
`34`	`46`	`"showReuseMessage": false`
`35`	`47`	`}`
	`48`	`+ },`
	`49`	`+ {`
	`50`	`+ "label": "Delete old Git branches",`
	`51`	`+ "type": "shell",`
	`52`	`+ "command": "git fetch --prune && git fetch -p ; git branch -r \| awk '{print $1}' \| egrep -v -f /dev/fd/0 <(git branch -vv \| grep origin) \| awk '{print $1}' \| xargs git branch -D",`
	`53`	`+ "presentation": {`
	`54`	`+ "showReuseMessage": false`
	`55`	`+ }`
`36`	`56`	`}`
`37`	`57`	`]`
`38`	`58`	`}`
Original file line number	Diff line number	Diff line change
`@@ -37,10 +37,6 @@ const { canSearch = false } = Astro.props \|\| {}`
`37`	`37`	`}`
`38`	`38`
`39`	`39`	`body {`
`40`		`- align-items: center;`
`41`		`- display: flex;`
`42`		`- flex-direction: column;`
`43`		`- gap: var(--spacing-large);`
`44`	`40`	`background-color: light-dark(rgb(255 255 255 / 0.5), rgb(0 0 0 / 0.5));`
`45`	`41`	`background-image:`
`46`	`42`	`radial-gradient(rgb(128 128 128 / 0.05) 1px, transparent 1px),`
`@@ -76,11 +72,13 @@ const { canSearch = false } = Astro.props \|\| {}`
`76`	`72`
`77`	`73`	`@media screen and (width <=1000px) {`
`78`	`74`	`main {`
`79`		`- margin-top: calc(2 * var(--spacing-large) + 2rem);`
	`75`	`+ margin-top: calc(var(--spacing-large) + var(--font-size-title) + var(--spacing-medium));`
`80`	`76`	`}`
`81`	`77`
`82`	`78`	`main.with-search {`
`83`		`- margin-top: calc(2 * var(--spacing-large) + 4rem);`
	`79`	`+ margin-top: calc(`
	`80`	`+ var(--spacing-large) + 3 * var(--font-size-title) + var(--spacing-medium)`
	`81`	`+ );`
`84`	`82`	`}`
`85`	`83`	`}`
`86`	`84`	`</style>`
Original file line number	Diff line number	Diff line change
`@@ -66,7 +66,6 @@ import PasswordRequirements from '../components/PasswordRequirements.astro'`
`66`	`66`	`}`
`67`	`67`
`68`	`68`	`section {`
`69`		`- background-color: light-dark(rgb(0 0 0 / 0.2), rgb(255 255 255 / 0.1));`
`70`	`69`	`border-radius: var(--border-radius-large);`
`71`	`70`	`display: flex;`
`72`	`71`	`flex-direction: column;`