chore: smaller star button and invert author and dates (#2488)

Also make created/modified lower case on caption.


![image](https://github.com/user-attachments/assets/72117435-d4ba-439d-a9c6-862bdee439a9)

cf #2424
cf #2442

cc @Aurelie-Jallut
This commit is contained in:
Yohan Boniface 2025-02-10 17:16:04 +01:00 committed by GitHub
commit 46c319e5cf
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 8 additions and 4 deletions

View file

@ -137,6 +137,9 @@ button.round {
border-radius: 20px;
border: 0.5px solid rgba(153, 153, 153, 0.40);
}
button.round.small {
padding: var(--button-padding-small);
}
.help-text, .helptext {
display: block;
padding: 7px 7px;

View file

@ -8,9 +8,9 @@ const TEMPLATE = `
<i class="icon icon-16 icon-caption icon-block"></i>
<hgroup>
<h3><span class="map-name" data-ref="name"></span></h3>
<p class="dates" data-ref="dates"></p>
<p data-ref="author"></p>
<p><button type="button" class="round" data-ref="star" title="${translate('Star this map')}"><i class="icon icon-16 icon-star map-star"></i><span class="map-stars"></span></button></p>
<p class="dates" data-ref="dates"></p>
<p><button type="button" class="round small" data-ref="star" title="${translate('Star this map')}"><i class="icon icon-16 icon-star map-star"></i><span class="map-stars"></span></button></p>
</hgroup>
</div>
<div class="umap-map-description text" data-ref="description"></div>
@ -73,10 +73,10 @@ export default class Caption extends Utils.WithTemplate {
)
this.addCredits()
if (this._umap.properties.created_at) {
const created_at = translate('Created at {date}', {
const created_at = translate('created at {date}', {
date: new Date(this._umap.properties.created_at).toLocaleDateString(),
})
const modified_at = translate('Modified at {date}', {
const modified_at = translate('modified at {date}', {
date: new Date(this._umap.properties.modified_at).toLocaleDateString(),
})
this.elements.dates.innerHTML = `${created_at} - ${modified_at}`

View file

@ -25,6 +25,7 @@
--button-neutral-background: var(--color-lightGray);
--button-neutral-color: var(--color-darkGray);
--button-padding: 8px 16px;
--button-padding-small: 2px 8px;
/* Sizes and spaces */
--gutter: 8px;