From 00f362695d1e10802d0e4c401dc1768e5e1d5207 Mon Sep 17 00:00:00 2001 From: Vianpyro Date: Fri, 16 May 2025 15:43:10 +0000 Subject: [PATCH 1/8] Refactor styles and layout for header, recipe card, and admin page; update global styles for consistency --- src/components/Header.astro | 5 ----- src/components/RecipeCard.astro | 5 ----- src/pages/admin.astro | 28 ++++++++++++++++++++++++++++ src/pages/authentication.astro | 1 - src/pages/index.astro | 1 + src/styles/global.css | 14 ++++++++++++-- src/styles/markdown.css | 1 - 7 files changed, 41 insertions(+), 14 deletions(-) create mode 100644 src/pages/admin.astro diff --git a/src/components/Header.astro b/src/components/Header.astro index 95149a5..97dda69 100644 --- a/src/components/Header.astro +++ b/src/components/Header.astro @@ -24,11 +24,6 @@ const { canSearch = false } = Astro.props || {} diff --git a/src/pages/authentication.astro b/src/pages/authentication.astro index d25f2e0..1a0baa4 100644 --- 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 index 7570cf0..bddfbc8 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -35,6 +35,7 @@ import recipes from '../assets/recipes.json' diff --git a/src/pages/admin.astro b/src/pages/admin.astro index 007079d..5746885 100644 --- a/src/pages/admin.astro +++ b/src/pages/admin.astro @@ -7,22 +7,104 @@ import Main from '../layouts/Main.astro'

Content

+
+

Users

+
+

Activity

-
-
-

Settings

+
diff --git a/src/styles/global.css b/src/styles/global.css index 359dc8a..7fdc85a 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -66,6 +66,14 @@ a { color: var(--color-secondary); } +body, +main { + align-items: center; + display: flex; + flex-direction: column; + gap: var(--spacing-large); +} + h1 { font-size: var(--font-size-heading); white-space: nowrap; @@ -80,6 +88,13 @@ svg { height: 100%; } +@media screen and (width <= 1000px) { + body, + main { + gap: var(--spacing-small); + } +} + @media screen and (width <=320px) { :root { --polaroid-width: 100svw; From 8a6c073efc2e07d599712a69bc3b9b1b674a1b1b Mon Sep 17 00:00:00 2001 From: Vianpyro Date: Fri, 16 May 2025 16:38:18 +0000 Subject: [PATCH 4/8] Adjust main margin-top for better responsiveness on smaller screens --- src/layouts/Main.astro | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/layouts/Main.astro b/src/layouts/Main.astro index cf4f96d..2902abc 100644 --- a/src/layouts/Main.astro +++ b/src/layouts/Main.astro @@ -72,11 +72,13 @@ const { canSearch = false } = Astro.props || {} @media screen and (width <=1000px) { main { - margin-top: calc(var(--spacing-large) + 2rem); + margin-top: calc(var(--spacing-large) + var(--font-size-title) + var(--spacing-medium)); } main.with-search { - margin-top: calc(var(--spacing-large) + 5rem); + margin-top: calc( + var(--spacing-large) + 3 * var(--font-size-title) + var(--spacing-medium) + ); } } From 8040e8bf04bd2ce2a938dcc83dc4a7ff3db9a556 Mon Sep 17 00:00:00 2001 From: Vianpyro Date: Fri, 16 May 2025 16:45:12 +0000 Subject: [PATCH 5/8] Implement navigation selection for admin panel and enhance user interaction --- src/pages/admin.astro | 16 +++++++++++++++- 1 file changed, 15 insertions(+), 1 deletion(-) diff --git a/src/pages/admin.astro b/src/pages/admin.astro index 5746885..d65226d 100644 --- a/src/pages/admin.astro +++ b/src/pages/admin.astro @@ -8,7 +8,7 @@ import Main from '../layouts/Main.astro'

Content

+
+
Showing recipes
+
Showing comments
+
Showing media
+
@@ -25,6 +30,11 @@ import Main from '../layouts/Main.astro'
  • Flags
    • +
    +
    Showing user list
    +
    Showing reports
    +
    Showing flags
    +
    @@ -36,6 +46,11 @@ import Main from '../layouts/Main.astro'
  • Audit logs
    • +
    +
    Showing site stats
    +
    Showing trending
    +
    Showing audit logs
    +
    @@ -53,10 +68,41 @@ import Main from '../layouts/Main.astro' 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; } @@ -69,7 +115,8 @@ import Main from '../layouts/Main.astro' } nav > ul > li { - border-radius: var(--border-radius-medium); + border-top-left-radius: var(--border-radius-small); + border-top-right-radius: var(--border-radius-small); cursor: pointer; padding: var(--spacing-small); } @@ -79,6 +126,10 @@ import Main from '../layouts/Main.astro' padding: var(--spacing-medium); } + section#activity { + grid-area: activity; + } + section#content { grid-area: content; } @@ -87,18 +138,10 @@ import Main from '../layouts/Main.astro' grid-area: users; } - section#activity { - grid-area: activity; - } - section#settings { grid-area: settings; } - .admin-panel-selected { - background-color: var(--background-glassy); - } - @media screen and (width<=1000px) { div#admin-panel { grid-template: @@ -115,9 +158,17 @@ import Main from '../layouts/Main.astro' 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) + }) } }) }) From 379c380bfd84c8a9efcb4b60ea772773a5e1b04f Mon Sep 17 00:00:00 2001 From: Vianpyro Date: Mon, 19 May 2025 17:54:36 +0000 Subject: [PATCH 7/8] Add admin panel icon to header and remove unused submit button styles --- src/assets/icon/device-desktop-analytics.svg | 3 +++ src/components/Header.astro | 4 ++++ src/styles/form_field.css | 10 ---------- 3 files changed, 7 insertions(+), 10 deletions(-) create mode 100644 src/assets/icon/device-desktop-analytics.svg diff --git a/src/assets/icon/device-desktop-analytics.svg b/src/assets/icon/device-desktop-analytics.svg new file mode 100644 index 0000000..4233c38 --- /dev/null +++ b/src/assets/icon/device-desktop-analytics.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/components/Header.astro b/src/components/Header.astro index f5ba3e3..b58b530 100644 --- 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 && }