Correction affichage calendrier

Correction de l'affichage incorrect pour Chateau Dormant et
Poisson Acrobate

Nettoyage du css

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 + "<br>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")) {

styles/simple.css

@@ -1564,213 +1564,176 @@ table.table-nombres-astraux tr:hover {
 	position: absolute;
   display: block;
 }
+
 .calendar {
-  min-width: 150px;
+  min-width: 250px;
-  grid-row: 1;
-  grid-column: 1;
   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%;
+  border-radius: 0.3rem;
-  background: rgba(0, 0, 0, 0.5);
+  background: hsla(0, 0%, 0%, 0.5);
   font-family: "GoudyAcc";
   z-index: 100;
 }
-.calendar-hdr{
+
-  display: grid;
+.calendar-title {
-	font-size: 1rem;
+  grid-column: 1 / span 7;
-	margin: 0.1rem;
+  grid-row: 1;
-	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";
   color: #CCC;
   opacity: 90;
 	font-size: 0.9rem;
 	text-align: center;
-	padding: 0;
+}
+.calendar-options {
+  grid-column: 8 / span 2;
+}
+.calendar-title,.calendar-options{
+  border-bottom: 1px solid hsla(0, 0%, 80%, 0.5);
+}
+
+.calendar-avance-heure {
+  grid-column: 1 / span 3;
+}
+
+.calendar-change-heure {
+  grid-column: 9 / span 1;
+}
+
+.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-avance-heure .calendar-avance-heure-grid {
+	display: grid;
+  grid-column: 3;
+  grid-row: 2;
+
+	margin: 2px;
+  grid-row-gap: 3px;
+	color: hsla(0, 0%, 80%, 0.5);
+}
+
+.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;
+  max-width: 100px;
+	float: left;
+	padding-top: 0px;
+	padding-bottom: 0px;
+  margin: 0 0.3rem 0 0.3rem;
+	color: #CCC;
+  text-align: center; 
+}
+
+.calendar-affiche-heure .calendar-horloge .calendar-heure-texte {
+  font-size: 1.1rem;
+}
+.calendar-affiche-heure .calendar-horloge .calendar-minute-texte {
 	margin: 0;
-	border: none;
-	flex: 1;
 }
-.calendar-date{
+
-	grid-row: 1;
+.calendar-affiche-heure .calendar-horloge .calendar-heure-img{
-	grid-column: 2;
+  width: 2rem;
+  height: 2rem;
   float: left;
-	text-align: center;
-	padding-top: 0px;
-	padding-bottom: 0px;
-	margin-bottom: 5px;
-	color: #CCC;
-	cursor: pointer;
-}
-.calendar-date,
-.calendar-date-num {
-	transition: 0.2s;
-}
-.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-heure-img{
-  width: 24px;
-  height: 24px;
   flex-grow: 0;
-  border-width: 0;
+  padding: 0.1rem;
-  opacity: 90;
+  border: 0;
-  color: rgba(255, 255, 255, 0.5);
+  opacity: 0.9;
+  color: hsla(0, 0%, 100%, 0.5);
 }
-.calendar-hdr:hover .calendar-date {
+
-	opacity: 0;
+.calendar :is(.calendar-astrologie,.calendar-set-datetime) {
-}
-.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%;
-	display: grid;
-	float: left;
-	margin: 2px;
-  grid-row-gap: 3px;
-	color: rgba(0, 0, 0, 0.5);  
-}
-.calendar-btn-container-right{
-	width: 15%;
-	display: grid;
-	float: right;
-	margin: 2px;
-	grid-row-gap: 3px;
-}
-.astrologie-btn-edit,
-.calendar-btn-edit{
 	grid-row: 1;
 	grid-column: 1;
 }
-:is(.astrologie-btn-edit,.calendar-btn-edit,.calendar-btn){
+.calendar :is(.calendar-astrologie,.calendar-set-datetime,.calendar-btn) {
-  margin: auto;
+	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 {
+.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-avance-heure .calendar-30min {
-.calendar-30min{
   grid-row: 2;
 	grid-column: 1;
-  margin-left: 0.2rem;
 }
-
+.calendar-avance-heure .calendar-60min {
-.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 {
   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{ 
+div.calendar-timestamp-edit select.calendar-signe-heure {
-	color: #FFF;
+  width: max-content;
-	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;
 }
 
 /* Tooltip container */

templates/calendar-template.html

@@ -1,47 +1,47 @@
 <div id="calendar-time-container">
 	<div class="calendar">
-		<div>
+		<div class="calendar-title" title="Deplacer">{{jourDuMois}} {{mois.label}} ({{mois.saison}})</div>
-			<div class="calendar-hdr">
+		<div class="calendar-options">
-				<p id="calendar-move-handle" class="calendar-date-rdd" title="Deplacer">{{jourDuMois}} {{mois.label}} ({{mois.saison}})</p>
-			</div>
 			{{#if isGM}}
-			<i class="calendar-btn-edit fa-solid fa-calendar-pen" title="Editer"></i>
+			<i class="calendar-set-datetime fa-solid fa-calendar-pen" title="Editer"></i>
-			<i class="astrologie-btn-edit fa-solid fa-moon-over-sun" title="Astrologie"></i>
+			<i class="calendar-astrologie fa-solid fa-moon-over-sun" title="Astrologie"></i>
 			{{/if}}
 		</div>
-		<div class="calendar-container">
+		<div class="calendar-avance-heure">
+			<div class="calendar-avance-heure-grid">
 				{{#if isGM}}
-			<div class="calendar-btn-container-left">
 				<i class="calendar-btn calendar-1min" data-calendar-avance="1" title="Avancer de 1 minute">+1</i>
 				<i class="calendar-btn calendar-5min" data-calendar-avance="5" title="Avancer de 5 minutes">+5</i>
 				<i class="calendar-btn calendar-15min" data-calendar-avance="15" title="Avancer de 15 minutes">+15</i>
 				<i class="calendar-btn calendar-30min" data-calendar-avance="30" title="Avancer de 30 minutes">+30</i>
 				<i class="calendar-btn calendar-60min" data-calendar-avance="60" title="Avancer de 60 minutes" >+60</i>
 				<i class="calendar-btn calendar-1heure" data-calendar-avance="120" title="Avancer d'1 heure" >+1h</i>
-			</div>
 				{{else}}
-      <div class="calendar-btn-container-left">
-			</div>
 				{{/if}}
-			<div class="calendar-weekday-time">
+			</div>
-				<a class="ajout-chronologie calendar-weekday">
+		</div>
-					<img class="calendar-heure-img" src="{{heure.icon}}" alt="{{nomHeure}}"/>&nbsp;
+		<div class="calendar-affiche-heure">
+			<div class="calendar-horloge">
+				<a class="ajout-chronologie">
+					<img class="calendar-heure-img" src="{{heure.icon}}" alt="{{nomHeure}}"/>
 					<span class="calendar-heure-texte">{{heure.label}}</span>
 				</a>
 				{{#if isGM}}
-				<p class="calendar-time-disp calendar-time isGM">{{minute}} minutes</p>
+				<p class="calendar-minute-texte">{{minute}} minutes</p>
 				{{/if}}
 			</div>
+		</div>
+		<div class="calendar-change-heure">
+			<div class="calendar-change-heure-grid">
 					{{#if isGM}}
-			<div class="calendar-btn-container-right">
 					<i class="calendar-btn calendar-lyre fas fa-forward" data-calendar-set="6" title="Avancer à Lyre">
-					<img class="img-calendar-forward" src="systems/foundryvtt-reve-de-dragon/icons/heures/hd07.svg" alt="Avancer à Lyre"/>
+						<img src="systems/foundryvtt-reve-de-dragon/icons/heures/hd07.svg" alt="Avancer à Lyre"/>
 					</i>
 					<i class="calendar-btn calendar-vaisseau fas fa-forward" data-calendar-set="0" title="Avancer au Vaisseau">
-					<img class="img-calendar-forward" src="systems/foundryvtt-reve-de-dragon/icons/heures/hd01.svg" alt="Avancer au Vaisseau"/>
+						<img src="systems/foundryvtt-reve-de-dragon/icons/heures/hd01.svg" alt="Avancer au Vaisseau"/>
 					</i>
-			</div>
 					{{/if}}
 			</div>
 		</div>
 	</div>
+</div>

templates/common/timestamp.hbs

@@ -1,11 +1,11 @@
-<div class="flexcol">
+<div class="flexcol calendar-timestamp-edit">
   <div class="flexrow">
     <label>{{label}}</label>
     <input {{#if disabled}}{{disabled}}{{/if}} 
         class="flex-shrink number-x2"
         type="number" data-dtype="Number" min="1" max="28"
         name="{{path}}.jourDuMois" value="{{jourDuMois}}" />
-    <select {{#if disabled}}{{disabled}}{{/if}} name="{{path}}.mois" class="flex-shrink" data-dtype="String">
+    <select {{#if disabled}}{{disabled}}{{/if}} name="{{path}}.mois" class="calendar-signe-heure" data-dtype="String">
       {{#select mois.key}}
       {{>"systems/foundryvtt-reve-de-dragon/templates/enum-heures.html"}}
       {{/select}}
@@ -16,7 +16,7 @@
   <div class="flexrow">
     <label></label>
     <label>heure</label>
-    <select {{#if disabled}}{{disabled}}{{/if}} name="{{path}}.heure" class="flex-shrink" data-dtype="String">
+    <select {{#if disabled}}{{disabled}}{{/if}} name="{{path}}.heure" class="calendar-signe-heure" data-dtype="String">
       {{#select heure.key}}
       {{>"systems/foundryvtt-reve-de-dragon/templates/enum-heures.html"}}
       {{/select}}