Coding gym sessions integration

coding_gym/index.html

@@ -3,58 +3,138 @@ layout: default
 title: Coding Gym
 ---
 
+<script>
+    (() => {
+        "use strict";
+        document.addEventListener("DOMContentLoaded", () => {
+            document.querySelectorAll('.session').forEach(x => {
+                if (Date.now() < new Date(x.getAttribute("data-date")))
+                    x.classList.add("new");
+            });
+        });
+    })();
+</script>
+
 <style>
-    #page {
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        align-items: center;
-    }
-
-    #coding_gym_logo {
-        max-height: 200px;
-        margin-bottom: 50px;
-    }
-
-    #sessions {
-        width: 100%;
-        display: flex;
-        flex-wrap: wrap;
-        justify-content: space-between;
-    }
-
-    .session {
-        position: relative;
-        width: 200px;
-        height: 200px;
-        flex-shrink: 0;
-    }
-
-    .session.past {
-
-    }
+	#page {
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+	}
+
+	#coding_gym_logo {
+		max-height: 200px;
+		margin-bottom: 50px;
+	}
+
+	#sessions {
+		width: 100%;
+		display: grid;
+		grid-template-columns: repeat(auto-fill, 200px);
+		grid-gap: 20px;
+		justify-content: center;
+	}
+
+	.session {
+		box-sizing: border-box;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: space-between;
+		width: 200px;
+		height: 200px;
+		flex-shrink: 0;
+		overflow: hidden;
+		font-size: 1em;
+		padding: 20px;
+		line-height: 1;
+		font-family: sans-serif;
+		text-align: center;
+
+	}
+
+	.session > div {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+	}
+
+	.session > div > div {
+		margin: 0;
+	}
+
+	.session > hr {
+		width: 70%;
+		height: 2px;
+		border: 0;
+		margin: 0;
+		color: #fff;
+		background-color: #fff;
+	}
+
+	.session a {
+		font-size: 0.8em;
+		text-transform: uppercase;
+		color: inherit;
+		text-decoration: none;
+	}
+
+	.session .year {
+		font-size: 0.8em;
+	}
+
+	.session .room_caption {
+		font-size: 0.7em;
+	}
+
+	.session.new {
+		background: #47c1c7;
+	}
+
+	.session .time, .session .room, .session .registration_url {
+		display: none;
+	}
+
+	.session.new .contest_url, .session.new .coding_gym_url {
+		display: none;
+	}
+
+	.session.new .time, .session.new .room, .session.new .registration_url {
+		display: flex;
+	}
 </style>
 
 <div id="page">
-    <img id="coding_gym_logo" src="{{ page.dir }}coding_gym_logo.svg" alt="Coding Gym logo"/>
-
-    <p id="coding_gym_about">Coding Gym is a non-competitive programming lab format open to any language and developed
-        for self-led improvement in technical and communication skills.Our manifesto:We help others practice
-        programming, software development and communication skills by making coding laboratories open to any programming
-        language where cooperation is valued over competition, doing and sharing are valued over teaching, and where
-        competing solutions come with discussing and understanding tradeoffs.</p>
-
-
-    <P>To partecipate to a session</P>
-
-    <h3>Sessions</h3>
-    <div id="sessions">
-        {% for session_hash in site.data.coding_gym %}
-        {% assign session = session_hash[1] %}
-        <div class="session{% if session.date %} old{% endif %}">
-            {{ session.date }}<br/>
-            {{ session.date | date: "%Y-%m-%d %H:%M" }}
-        </div>
-        {% endfor %}
-    </div>
+	<img id="coding_gym_logo" src="{{ "/coding_gym/coding_gym_logo.svg" | relative_url }}" alt="Coding Gym logo"/>
+
+	<p id="coding_gym_about">Coding Gym is a non-competitive programming lab format open to any language and developed
+		for self-led improvement in technical and communication skills.Our manifesto:We help others practice
+		programming, software development and communication skills by making coding laboratories open to any programming
+		language where cooperation is valued over competition, doing and sharing are valued over teaching, and where
+		competing solutions come with discussing and understanding tradeoffs.</p>
+
+	<P>To partecipate to a session</P>
+
+	<h3>Sessions</h3>
+	<div id="sessions">
+		{% assign sessions = site.data.coding_gym | values %}
+		{% for session in sessions %}
+		<div class="session bg-darker" data-date="{{ session.date }}">
+			<div class="date">
+				<div>{{ session.date | date: "%b %d" | upcase }}</div>
+				<div class="year">{{ session.date | date: "%Y" }}</div>
+			</div>
+			<div class="time">{{ session.date | date: "%H:%M" }}</div>
+			<div class="room">
+				<div class="room_caption">Room</div>
+				<div>{{ session.room }}</div>
+			</div>
+			<hr/>
+			<a class="registration_url" href="{{ session.registration_url }}">registration</a>
+			<a class="contest_url" href="{{ session.contest_url }}">HackerRank contest</a>
+			<a class="coding_gym_url" href="{{ session.coding_gym_url }}">Coding Gym site</a>
+		</div>
+		{% endfor %}
+	</div>
 </div>
\ No newline at end of file