From 322bb5bdecc26330d5b22cb9c9ad38b48b3a3f6e Mon Sep 17 00:00:00 2001
From: raida <raida@crans.org>
Date: Sat, 1 Jun 2019 07:24:25 +0200
Subject: [PATCH] Generation du frontend pour les evenements

---
 static/css/perso.css                          | 123 +++++++++++++++++-
 .../images/baseline_arrow_back_white_24dp.png | Bin 0 -> 170 bytes
 templates/events.html                         |   5 +
 3 files changed, 121 insertions(+), 7 deletions(-)
 create mode 100644 static/images/baseline_arrow_back_white_24dp.png

diff --git a/static/css/perso.css b/static/css/perso.css
index a2419ed..42b9c85 100644
--- a/static/css/perso.css
+++ b/static/css/perso.css
@@ -1,4 +1,6 @@
-/* Sous-menu */
+/***********************************************/
+/*                  Sous-menu                  */
+/***********************************************/
 
 #header nav ul.left {
 	position: absolute;
@@ -20,9 +22,10 @@
 	#header nav ul li {
 		display: block;
 		position: relative;
-		width: intrinsic;
+		width: max-content;
 		width: -moz-max-content;
 		width: -webkit-max-content;
+		width: -ms-max-content;
 	}
 
 		#header nav ul li ul {
@@ -77,8 +80,9 @@
 
 
 
-
-/* Couleur non transparentes */
+/***********************************************/
+/*          Couleur non transparentes          */
+/***********************************************/
 
 #header nav ul {
 	background-color: rgba(27, 31, 34, 0.85);
@@ -90,8 +94,9 @@
 
 
 
-
-/* Soutien */
+/***********************************************/
+/*                   Soutien                   */
+/***********************************************/
 
 #header .soutien {
 	background-color: rgba(27, 31, 34, 0.85);
@@ -164,7 +169,111 @@
 }
 
 
-/* Ajustement vertical */
+
+
+/***********************************************/
+/*             Ajustement vertical             */
+/***********************************************/
+
 body:not(.is-article-visible) #wrapper {
 	padding: 0;
 }
+
+
+
+
+/***********************************************/
+/*                   Events                    */
+/***********************************************/
+
+.event {
+	margin: 2rem;
+	position: relative;
+	border: 1px solid #ffffff;
+	border-radius: 4px;
+	display: block;
+}
+
+	.event:hover {
+		background-color: rgba(255, 255, 255, 0.075);
+		border-bottom-color: #ffffff;
+	}
+
+	.event::before {
+		content: '';
+		display: block;
+		position: absolute;
+		top: calc(-2rem - 1px);
+		left: calc(50% - 1px);
+		width: 1px;
+		height: calc(2rem + 1px);
+		background: #ffffff;
+	}
+
+	.event .date, .event .title {
+		position: absolute;
+		top: 0.5rem;
+		font-size: 1.1rem;
+		color: #ffffff;
+		font-weight: 600;
+		letter-spacing: 0.1rem;
+	}
+
+		.event .date {
+			right: 1rem;
+		}
+
+		.event .title {
+			left: 1rem;
+		}
+
+	.event .description {
+		max-height: 20rem;
+		overflow: hidden;
+		border-top: 1px solid #ffffff;
+		margin-top: 3rem;
+		padding: 15px;
+	}
+
+#main article .major .date {
+	position: absolute;
+	right: 2rem;
+	top: 4.5rem;
+}
+
+#main article .previous {
+	display: block;
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 4rem;
+	height: 4rem;
+	cursor: pointer;
+	text-indent: 4rem;
+	overflow: hidden;
+	white-space: nowrap;
+	border: 0;
+}
+
+	#main article .previous::before {
+		-moz-transition: background-color 0.2s ease-in-out;
+		-webkit-transition: background-color 0.2s ease-in-out;
+		-ms-transition: background-color 0.2s ease-in-out;
+		transition: background-color 0.2s ease-in-out;
+		content: '';
+		display: block;
+		position: absolute;
+		top: 0.75rem;
+		left: 0.75rem;
+		width: 2.5rem;
+		height: 2.5rem;
+		border-radius: 100%;
+		background-position: center;
+		background-image: url("../images/baseline_arrow_back_white_24dp.png");
+		background-size: 20px 20px;
+		background-repeat: no-repeat;
+	}
+
+		#main article .previous:hover::before {
+			background-color: rgba(255, 255, 255, 0.075);
+		}
\ No newline at end of file
diff --git a/static/images/baseline_arrow_back_white_24dp.png b/static/images/baseline_arrow_back_white_24dp.png
new file mode 100644
index 0000000000000000000000000000000000000000..04b039174c2aca431c949e7511ae150513a01826
GIT binary patch
literal 170
zcmeAS@N?(olHy`uVBq!ia0vp^1|ZDA1|-9oezpUtLQfaRkP61PHyGI(3>aD;_6f7h
zH4wev>%540%>w3@nakfNGyLgKxptL_Vd<2Ymf1yrvc3E2&z}7FyZG0YAIi3MKLYnu
zd`z$Uqw!DrW4K?9GUG=!mKvv@^$N;81v881njPwHF;`Sh>)+k$rW32mP{91)*VGtB
T(=88xmNR&|`njxgN@xNALTNy_

literal 0
HcmV?d00001

diff --git a/templates/events.html b/templates/events.html
index 7efff5a..c838489 100644
--- a/templates/events.html
+++ b/templates/events.html
@@ -17,6 +17,11 @@
 {% if mds %}
     {% for md in mds %}
         <article id="event-{{ md[0].strftime('%d-%m-%Y') }}-{{ md[1] }}">
+            <a class="previous" href="#events">Previous</a>
+            <h2 class="major">
+                {{ md[1] }}
+                <div class="date">{{ md[0].strftime('%a %d %b %Y') }}</div>
+            </h2>
             {{ md[3] | safe }}
         </article>
     {% endfor %}