diff --git a/module/rdd-calendrier.js b/module/rdd-calendrier.js index a54f9e9a..8730f7ee 100644 --- a/module/rdd-calendrier.js +++ b/module/rdd-calendrier.js @@ -69,17 +69,17 @@ export class RdDCalendrier extends Application { this.html.find('.calendar-btn').click(ev => this.onCalendarButton(ev)); - this.html.find('.calendar-btn-edit').click(ev => { + this.html.find('.calendar-set-datetime').click(ev => { ev.preventDefault(); this.showCalendarEditor(); }); - this.html.find('.astrologie-btn-edit').click(ev => { + this.html.find('.calendar-astrologie').click(ev => { ev.preventDefault(); this.showAstrologieEditor(); }); - this.html.find('#calendar-move-handle').mousedown(ev => { + this.html.find('.calendar-title').mousedown(ev => { ev.preventDefault(); ev = ev || window.event; let isRightMB = false; @@ -432,13 +432,13 @@ export class RdDCalendrier extends Application { if (game.user.isGM) { dateHTML = dateHTML + "
Nombre Astral: " + (this.getNombreAstral() ?? "?"); } - for (let handle of document.getElementsByClassName("calendar-date-rdd")) { + for (let handle of document.getElementsByClassName("calendar-title")) { handle.innerHTML = dateHTML; } for (let heure of document.getElementsByClassName("calendar-heure-texte")) { heure.innerHTML = calendrier.heure.label; } - for (const minute of document.getElementsByClassName("calendar-time-disp")) { + for (const minute of document.getElementsByClassName("calendar-minute-texte")) { minute.innerHTML = `${calendrier.minute} minutes`; } for (const heureImg of document.getElementsByClassName("calendar-heure-img")) { diff --git a/styles/simple.css b/styles/simple.css index c7207408..9b8eb556 100644 --- a/styles/simple.css +++ b/styles/simple.css @@ -1564,213 +1564,176 @@ table.table-nombres-astraux tr:hover { position: absolute; display: block; } -.calendar{ - min-width: 150px; - grid-row: 1; - grid-column: 1; + +.calendar { + min-width: 250px; width: fit-content; - height: 6rem; + + display: grid; + grid-row: 2; + grid-column: 9; + + min-height: 5rem; + height: fit-content; margin: 0; padding: 0; border: 1px solid #000; - border-radius: 3%; - background: rgba(0, 0, 0, 0.5); + border-radius: 0.3rem; + background: hsla(0, 0%, 0%, 0.5); font-family: "GoudyAcc"; z-index: 100; } -.calendar-hdr{ - display: grid; - font-size: 1rem; - margin: 0.1rem; - padding: 0.2rem; - height: fit-content; - width: fit-content; - min-width: 200px; - border-bottom: 1px solid #111; - color: #CCC; - float: left; -} -.calendar-date-rdd { - font-family: "GoudyAcc"; + +.calendar-title { + grid-column: 1 / span 7; + grid-row: 1; + color: #CCC; opacity: 90; font-size: 0.9rem; text-align: center; - padding: 0; - margin: 0; - border: none; - flex: 1; } -.calendar-date{ - grid-row: 1; - grid-column: 2; - float: left; - text-align: center; - padding-top: 0px; - padding-bottom: 0px; - margin-bottom: 5px; - color: #CCC; - cursor: pointer; +.calendar-options { + grid-column: 8 / span 2; } -.calendar-date, -.calendar-date-num { - transition: 0.2s; +.calendar-title,.calendar-options{ + border-bottom: 1px solid hsla(0, 0%, 80%, 0.5); } -.calendar-date-num { - grid-row: 1; - grid-column: 2; - float: left; - text-align: center; - padding-top: 0px; - padding-bottom: 0px; - margin-bottom: 5px; - color: #CCC; - opacity: 0; - cursor: pointer; + +.calendar-avance-heure { + grid-column: 1 / span 3; } -.calendar-heure-img{ - width: 24px; - height: 24px; - flex-grow: 0; - border-width: 0; - opacity: 90; - color: rgba(255, 255, 255, 0.5); + +.calendar-change-heure { + grid-column: 9 / span 1; } -.calendar-hdr:hover .calendar-date { - opacity: 0; + +.calendar-change-heure .calendar-change-heure-grid { + display: grid; + grid-column: 1; + grid-row: 2; + + margin: 2px; + grid-row-gap: 3px; + color: hsla(0, 0%, 80%, 0.5); } -.calendar-hdr:hover .calendar-date-num{ - opacity: 1; -} -.calendar-container{ - min-width: 250px; - padding-top: 3px; - padding-bottom: 20px; -} -.calendar-btn-container-left{ - width: 25%; + +.calendar-avance-heure .calendar-avance-heure-grid { display: grid; - float: left; + grid-column: 3; + grid-row: 2; + margin: 2px; grid-row-gap: 3px; - color: rgba(0, 0, 0, 0.5); + color: hsla(0, 0%, 80%, 0.5); } -.calendar-btn-container-right{ - width: 15%; + +.calendar-avance-heure .calendar-avance-heure-grid:hover { + color: #FFF; + cursor: pointer; +} + +.calendar-affiche-heure { + grid-column: 4 / span 4; + grid-row: 2; +} + +.calendar-affiche-heure .calendar-horloge { display: grid; - float: right; - margin: 2px; - grid-row-gap: 3px; + max-width: 100px; + float: left; + padding-top: 0px; + padding-bottom: 0px; + margin: 0 0.3rem 0 0.3rem; + color: #CCC; + text-align: center; } -.astrologie-btn-edit, -.calendar-btn-edit{ + +.calendar-affiche-heure .calendar-horloge .calendar-heure-texte { + font-size: 1.1rem; +} +.calendar-affiche-heure .calendar-horloge .calendar-minute-texte { + margin: 0; +} + +.calendar-affiche-heure .calendar-horloge .calendar-heure-img{ + width: 2rem; + height: 2rem; + float: left; + flex-grow: 0; + padding: 0.1rem; + border: 0; + opacity: 0.9; + color: hsla(0, 0%, 100%, 0.5); +} + +.calendar :is(.calendar-astrologie,.calendar-set-datetime) { grid-row: 1; grid-column: 1; } -:is(.astrologie-btn-edit,.calendar-btn-edit,.calendar-btn){ - margin: auto; +.calendar :is(.calendar-astrologie,.calendar-set-datetime,.calendar-btn) { + color: hsla(0, 0%, 100%, 0.5); border: 1px solid rgba(0, 0, 0, 0); - color: rgba(255, 255, 255, 0.5); } -:is(.astrologie-btn-edit,.calendar-btn-edit,.calendar-btn):hover { - color: var(--color-controls-hover); +.calendar :is(.calendar-astrologie,.calendar-set-datetime,.calendar-btn):hover { + color: var(--color-controls-hover); border: 1px solid var(--color-control-border-hover); cursor: pointer; } +.calendar .calendar-affiche-heure .calendar-horloge a { + border: 1px solid rgba(0, 0, 0, 0); +} +.calendar .calendar-affiche-heure .calendar-horloge a:hover { + color: var(--color-controls-hover); + border: 1px solid var(--color-control-border-hover); + cursor: pointer; +} -.calendar-1min{ +.calendar-avance-heure .calendar-1min { grid-row: 1; grid-column: 1; - margin-left: 0.2rem; } -.calendar-5min{ +.calendar-avance-heure .calendar-5min { grid-row: 1; grid-column: 2; } -.calendar-15min{ +.calendar-avance-heure .calendar-15min { grid-row: 1; grid-column: 3; - margin-right: 0.2rem; } - -.calendar-30min{ +.calendar-avance-heure .calendar-30min { grid-row: 2; grid-column: 1; - margin-left: 0.2rem; } - -.calendar-60min{ +.calendar-avance-heure .calendar-60min { grid-row: 2; grid-column: 2; } -.calendar-1heure{ +.calendar-avance-heure .calendar-1heure { grid-row: 2; grid-column: 3; - margin-right: 0.2rem; } .calendar-lyre{ grid-row: 1; grid-column: 1; - margin-left: 0.2rem; - margin-right: 0.2rem; } -.calendar-vaisseau{ +.calendar-vaisseau { grid-row: 2; grid-column: 1; - margin-left: 0.2rem; - margin-right: 0.2rem; } -.img-calendar-forward{ - color: rgba(255, 255, 255, 0.5); + +.calendar-change-heure .calendar-btn:is(.calendar-lyre,.calendar-vaisseau) img { + color: hsla(0, 0%, 100%, 0.5); vertical-align: bottom; max-width: 1.2em; max-height: 1.2em; border-width: 0; } -.calendar-btn-container-left:hover{ - color: #FFF; - border: 0px solid #000; - cursor: pointer; -} -.calendar-weekday-time{ - display: grid; - float: left; - width: 55%; - padding-top: 0px; - padding-bottom: 0px; - margin: auto; - color: #CCC; -} -.calendar-weekday { - grid-column: 1; - grid-row: 1; - text-align: center; - font-size: 1.1rem; - margin: auto; -} -.calendar-time{ - grid-column: 1; - grid-row: 2; - text-align: center; - margin: auto; - cursor: pointer; - display: inline-flex; -} -.calendar-nombre-astral{ -grid-column: 2; -grid-row: 2; -font-size: 1.1rem; -text-align: right; -margin: auto; -cursor: pointer; -display: inline-flex; -} -.calendar-time-disp{ - position: relative; - bottom: 6px; +div.calendar-timestamp-edit select.calendar-signe-heure { + width: max-content; } /* Tooltip container */ diff --git a/templates/calendar-template.html b/templates/calendar-template.html index d08c4750..4c77d5e8 100644 --- a/templates/calendar-template.html +++ b/templates/calendar-template.html @@ -1,47 +1,47 @@
-
-
-

{{jourDuMois}} {{mois.label}} ({{mois.saison}})

-
+
{{jourDuMois}} {{mois.label}} ({{mois.saison}})
+
{{#if isGM}} - - + + {{/if}}
-
- {{#if isGM}} -
+
+
+ {{#if isGM}} +1 +5 +15 +30 +60 +1h + {{else}} + {{/if}}
- {{else}} -
-
- {{/if}} -
- - {{nomHeure}}  +
+
+
+ + {{nomHeure}} {{heure.label}} {{#if isGM}} -

{{minute}} minutes

+

{{minute}} minutes

{{/if}}
- {{#if isGM}} -
- - Avancer à Lyre - - - Avancer au Vaisseau - +
+
+
+ {{#if isGM}} + + Avancer à Lyre + + + Avancer au Vaisseau + + {{/if}}
- {{/if}}
diff --git a/templates/common/timestamp.hbs b/templates/common/timestamp.hbs index 3295e4c3..0b2e2dfd 100644 --- a/templates/common/timestamp.hbs +++ b/templates/common/timestamp.hbs @@ -1,11 +1,11 @@ -
+
- {{#select mois.key}} {{>"systems/foundryvtt-reve-de-dragon/templates/enum-heures.html"}} {{/select}} @@ -16,7 +16,7 @@
- {{#select heure.key}} {{>"systems/foundryvtt-reve-de-dragon/templates/enum-heures.html"}} {{/select}}