From 9349e815802ed449b5d58efa282776ee86bfbd95 Mon Sep 17 00:00:00 2001
From: Vincent Vandemeulebrouck <vincent.vandeme@gmail.com>
Date: Sun, 8 Jan 2023 23:21:14 +0100
Subject: [PATCH] Reformatage du calendrier

---
 styles/simple.css                | 79 ++++++++++++++++----------------
 templates/calendar-template.html | 24 ++++++----
 2 files changed, 54 insertions(+), 49 deletions(-)

diff --git a/styles/simple.css b/styles/simple.css
index cc7f9a5c..d3f97b21 100644
--- a/styles/simple.css
+++ b/styles/simple.css
@@ -1596,7 +1596,7 @@ div.competence-column div.categorie-competence{
 	padding-bottom: 20px;
 }
 .calendar-btn-container-left{
-	width: 20%;
+	width: 25%;
 	display: grid;
 	float: left;
 	margin: 2px;
@@ -1604,7 +1604,7 @@ div.competence-column div.categorie-competence{
 	color: rgba(0, 0, 0, 0.5);  
 }
 .calendar-btn-container-right{
-	width: 20%;
+	width: 15%;
 	display: grid;
 	float: right;
 	margin: 2px;
@@ -1627,54 +1627,55 @@ div.competence-column div.categorie-competence{
 }
 
 .calendar-1min{
-	grid-row: 1;
+  grid-row: 1;
 	grid-column: 1;
+  margin-left: 0.2rem;
 }
 .calendar-5min{
-	grid-row: 1;
+  grid-row: 1;
 	grid-column: 2;
 }
-.calendar-10min{
-	grid-row: 2;
-	grid-column: 1;
-	margin-left: 10px;
-}
-
-.calendar-20min{
-	grid-row: 2;
-	grid-column: 2;
-	margin-left: 10px;
-}
-
-.calendar-lyre{
-	grid-row: 1;
-	grid-column: 1;
-	height: fit-content;
-	text-align: center; 
-	vertical-align: center;
-}
-
-.calendar-vaisseau{
-	grid-row: 1;
-	grid-column: 2;
-	height: fit-content;
-	text-align: center; 
-	vertical-align: center;
+.calendar-15min{
+  grid-row: 1;
+	grid-column: 3;
+  margin-right: 0.2rem;
 }
 
 .calendar-30min{
-	grid-row: 2;
+  grid-row: 2;
 	grid-column: 1;
-	height: fit-content;
-	text-align: center; 
-	vertical-align: center;
+  margin-left: 0.2rem;
+}
+
+.calendar-60min{
+  grid-row: 2;
+  grid-column: 2;
 }
 .calendar-1heure{
-	grid-row: 2;
-	grid-column: 2;
-	height: fit-content;
-	text-align: center; 
-	vertical-align: center;
+  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);
+  vertical-align: bottom;
+  max-width: 1.2em;
+  max-height: 1.2em;
+  border-width: 0;
 }
 
 .calendar-btn-container-left:hover{ 
diff --git a/templates/calendar-template.html b/templates/calendar-template.html
index 8a72183f..00c21972 100644
--- a/templates/calendar-template.html
+++ b/templates/calendar-template.html
@@ -1,8 +1,8 @@
 <div id="calendar-time-container">
 	<div class="calendar">
     {{#if isGM}}
-    <i class="calendar-btn-edit fas fa-cog" title="Editer"></i>
-    <i class="astrologie-btn-edit fas fa-cog" title="Astrologie"></i>
+    <i class="calendar-btn-edit fa-solid fa-calendar-pen" title="Editer"></i>
+    <i class="astrologie-btn-edit fa-solid fa-moon-over-sun" title="Astrologie"></i>
     {{/if}}
 		<div class="calendar-hdr">
 			<p id="calendar-move-handle" class="calendar-date-rdd" title="Deplacer">{{jourDuMois}} {{mois.label}} ({{mois.saison}})</p>
@@ -10,10 +10,12 @@
 		<div class="calendar-container">
       {{#if isGM}}
 			<div class="calendar-btn-container-left">
-				<i class="calendar-btn calendar-1min fas fa-angle-right" data-calendar-avance="1" title="Avancer de 1 minute"></i>
-				<i class="calendar-btn calendar-5min fas fa-angle-double-right" data-calendar-avance="5" title="Avancer de 5 minutes"></i>
-				<i class="calendar-btn calendar-10min fas fa-play" data-calendar-avance="10" title="Avancer de 10 minutes"></i>
-				<i class="calendar-btn calendar-20min fas fa-step-forward" data-calendar-avance="20" title="Avancer de 20 minutes"></i>
+				<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">
@@ -30,10 +32,12 @@
 			</div>
       {{#if isGM}}
 			<div class="calendar-btn-container-right">
-				<i class="calendar-btn calendar-30min fas fa-forward" data-calendar-avance="30" title="Avancer de 30 minutes" ></i>
-				<i class="calendar-btn calendar-1heure fas fa-fast-forward" data-calendar-avance="120" title="Avancer d'1 heure" ></i>
-				<i class="calendar-btn calendar-vaisseau fas fa-sun" data-calendar-set="0" title="Avancer au Vaisseau"></i>
-				<i class="calendar-btn calendar-lyre fas fa-moon" data-calendar-set="6" title="Avancer à Lyre"></i>
+				<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"/>
+				</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"/>
+				</i>
 			</div>
       {{/if}}
 		</div>