raucao/marco
1
0
Fork 0
Code Issues 15 Pull Requests Actions Releases 1 Activity

WIP About section

Browse Source 
* Add fold-out sections for additional details
* Use table for Open Source info, add licenses
* Move link styles to CSS variables
This commit is contained in:
Râu Cao
2026-03-17 13:55:38 +04:00
parent 6da004e199
commit 88eb0ac0c1
4 changed files with 130 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

99
app/components/app-menu/about.gjs
View File

@@ -14,7 +14,7 @@ import Icon from '#components/icon';
</div>
<div class="sidebar-content">
<section class="settings-section">
<section class="about-section">
<p>
<strong>Marco</strong>
(as in
@@ -41,31 +41,78 @@ import Icon from '#components/icon';
<span>Open Source</span>
</summary>
<div class="details-content">
<ul class="link-list">
<li>
<a
href="https://gitea.kosmos.org/raucao/marco"
target="_blank"
rel="noopener"
>
Source Code
</a>
(<a
href="https://en.wikipedia.org/wiki/GNU_Affero_General_Public_License"
target="_blank"
rel="noopener"
>AGPL</a>)
</li>
<li>
<a
href="https://openstreetmap.org/copyright"
target="_blank"
rel="noopener"
>
Map Data © OpenStreetMap
</a>
</li>
</ul>
<table>
<thead>
<tr>
<th>Source</th>
<th>License</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<a
href="https://gitea.kosmos.org/raucao/marco"
target="_blank"
rel="noopener"
>
Marco App
</a>
</td>
<td>
<a
href="https://en.wikipedia.org/wiki/GNU_Affero_General_Public_License"
target="_blank"
rel="noopener"
>
<abbr title="GNU Affero General Public License">AGPL</abbr>
</a>
</td>
</tr>
<tr>
<td>
<a
href="https://openstreetmap.org/copyright"
target="_blank"
rel="noopener"
>
Map Data
</a>
</td>
<td>
<a
href="https://opendatacommons.org/licenses/odbl/"
target="_blank"
rel="noopener"
>
<abbr
title="Open Data Commons Open Database License"
>ODbL</abbr>
</a>
</td>
</tr>
<tr>
<td>
<a
href="https://github.com/feathericons/feather"
target="_blank"
rel="noopener"
>
Feather Icons
</a>
</td>
<td>
<a
href="https://en.wikipedia.org/wiki/MIT_License"
target="_blank"
rel="noopener"
>
<abbr title="MIT License">MIT</abbr>
</a>
</td>
</tr>
</tbody>
</table>
</div>
</details>
<details>

4
app/components/place-details.gjs
View File

@@ -286,7 +286,7 @@ export default class PlaceDetails extends Component {
>
<Icon
@name="bookmark"
@color={{if this.isSaved "currentColor" "#007bff"}}
@color={{if this.isSaved "currentColor" "var(--link-color)"}}
/>
{{if this.isSaved "Saved" "Save"}}
</button>
@@ -307,7 +307,7 @@ export default class PlaceDetails extends Component {
title="Edit"
{{on "click" this.startEditing}}
>
<Icon @name="edit" @color="#007bff" />
<Icon @name="edit" @color="var(--link-color)" />
Edit
</button>
{{/if}}

2
app/components/places-sidebar.gjs
View File

@@ -226,7 +226,7 @@ export default class PlacesSidebar extends Component {
class="btn btn-outline create-place"
{{on "click" this.createNewPlace}}
>
<Icon @name="plus" @size={{18}} @color="#007bff" />
<Icon @name="plus" @size={{18}} @color="var(--link-color)" />
Create new place
</button>
{{/if}}

66
app/styles/app.css
View File

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