From 88eb0ac0c1445d85b6ef71b3d21c282be6b77e55 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?R=C3=A2u=20Cao?= Date: Tue, 17 Mar 2026 13:55:38 +0400 Subject: [PATCH] WIP About section * Add fold-out sections for additional details * Use table for Open Source info, add licenses * Move link styles to CSS variables --- app/components/app-menu/about.gjs | 99 +++++++++++++++++++++++-------- app/components/place-details.gjs | 4 +- app/components/places-sidebar.gjs | 2 +- app/styles/app.css | 66 +++++++++++++++++---- 4 files changed, 130 insertions(+), 41 deletions(-) diff --git a/app/components/app-menu/about.gjs b/app/components/app-menu/about.gjs index 22d057d..4e395d6 100644 --- a/app/components/app-menu/about.gjs +++ b/app/components/app-menu/about.gjs @@ -14,7 +14,7 @@ import Icon from '#components/icon';
-
+

Marco (as in @@ -41,31 +41,78 @@ import Icon from '#components/icon'; Open Source

- + + + + + + + + + + + + + + + + + + + + + +
SourceLicense
+ + Marco App + + + + AGPL + +
+ + Map Data + + + + ODbL + +
+ + Feather Icons + + + + MIT + +
diff --git a/app/components/place-details.gjs b/app/components/place-details.gjs index 732b7b2..82463c7 100644 --- a/app/components/place-details.gjs +++ b/app/components/place-details.gjs @@ -286,7 +286,7 @@ export default class PlaceDetails extends Component { > {{if this.isSaved "Saved" "Save"}} @@ -307,7 +307,7 @@ export default class PlaceDetails extends Component { title="Edit" {{on "click" this.startEditing}} > - + Edit {{/if}} diff --git a/app/components/places-sidebar.gjs b/app/components/places-sidebar.gjs index d356799..fb81bd2 100644 --- a/app/components/places-sidebar.gjs +++ b/app/components/places-sidebar.gjs @@ -226,7 +226,7 @@ export default class PlacesSidebar extends Component { class="btn btn-outline create-place" {{on "click" this.createNewPlace}} > - + Create new place {{/if}} diff --git a/app/styles/app.css b/app/styles/app.css index 9210057..1cc0606 100644 --- a/app/styles/app.css +++ b/app/styles/app.css @@ -4,6 +4,8 @@ --default-list-color: #fc3; --hover-bg: #f8f9fa; --sidebar-width: 360px; + --link-color: #2a7fff; + --link-color-visited: #6a4fbf; } html, @@ -186,7 +188,7 @@ body { } .text-primary { - color: #007bff; + color: var(--link-color); } .text-danger { @@ -333,7 +335,7 @@ body { } .sidebar-content details .details-content { - padding: 1rem 1.4rem; + padding: 0 1.4rem 1rem; animation: details-slide-down 0.2s ease-out; } @@ -395,8 +397,8 @@ body { .form-control:focus { outline: none; - border-color: #007bff; - box-shadow: 0 0 0 2px rgb(0 123 255 / 10%); + border-color: var(--link-color); + box-shadow: 0 0 0 2px rgb(42 127 255 / 10%); } select.form-control { @@ -425,12 +427,21 @@ select.form-control { margin-top: 1rem; } -.settings-section p a { - color: #007bff; +.about-section { + margin-bottom: 2rem; + font-size: 0.95rem; +} + +.about-section a { + color: var(--link-color); text-decoration: none; } -.settings-section p a:hover { +.about-section a:visited { + color: var(--link-color-visited); +} + +.about-section a:hover { text-decoration: underline; } @@ -439,7 +450,7 @@ select.form-control { } .btn-primary { - background: #007bff; + background: var(--link-color); color: white; border: none; padding: 0.75rem; @@ -468,7 +479,7 @@ select.form-control { } .meta-info a { - color: #007bff; + color: var(--link-color); text-decoration: none; } @@ -476,6 +487,37 @@ select.form-control { text-decoration: underline; } +.sidebar-content table { + width: 100%; + border-collapse: collapse; + font-size: 0.9rem; +} + +.sidebar-content table th, +.sidebar-content table td { + padding: 0.5rem 0; + text-align: left; +} + +.sidebar-content table th { + font-size: 0.75rem; + font-weight: bold; + text-transform: uppercase; + color: #898989; +} + +.sidebar-content table td { + border-bottom: 1px solid #f9f9f9; +} + +.sidebar-content table tr:last-child td { + border-bottom: none; +} + +abbr[title] { + text-decoration: underline dotted; +} + .link-list { list-style: none; padding: 0; @@ -487,7 +529,7 @@ select.form-control { } .link-list a { - color: #007bff; + color: var(--link-color); text-decoration: none; font-size: 0.95rem; } @@ -612,7 +654,7 @@ select.form-control { } .btn-blue { - background: #007bff; + background: var(--link-color); color: white; border: none; } @@ -1152,7 +1194,7 @@ button.create-place { } .place-lists-manager input[type='checkbox'] { - accent-color: #007bff; + accent-color: var(--link-color); width: 16px; height: 16px; cursor: pointer;