Compare commits

..

10 Commits

10 changed files with 188 additions and 15 deletions

View File

@ -1,11 +1,9 @@
La dérniere version est sur la branche V2
# Laboratoire Ouvert Lyonnais
Laboratoire Ouvert Lyonnais
===========================
Vous retrouverez la version en ligne du site du lol, il n'y a pas de bootstrap sur cette version.
Il a été codé le plus simplement possible.
TODO
====
Pouvoir mettre en quelques lignes les activités ou ateliers à venir avec une date.
## TODO
Pouvoir mettre en quelques lignes les activités ou ateliers à venir avec une date.
Est-ce le git pourrait nous permettre de faire ça ?

View File

@ -32,7 +32,6 @@ a:link {
a:hover, a:focus {
color: white;
background-color:black;
text-decoration: underline;
}
@ -102,7 +101,7 @@ hr {
/* main area */
main {
#homepage {
display: grid;
grid-template-columns: 1fr 400px;
grid-auto-rows: min-content;
@ -128,13 +127,13 @@ main #description {
grid-row: 1 / 5;
}
main .toolbar {
#homepage .toolbar {
grid-column: 1 / 3;
text-align: right;
}
@media screen and (max-width: 889px){
main {
#homepage {
grid-template-columns: 1fr;
row-gap: 50px;
}
@ -160,9 +159,52 @@ main .toolbar {
}
}
/* status page */
.status-page main {
width: 90%;
max-width: 300px;
margin-left: auto;
margin-right: auto;
margin-top: 15vh;
margin-bottom: 15vh;
}
/* status block */
.status-container {
text-align: left;
display: grid;
grid-template-columns: minmax(min-content, 75px) 1fr;
align-items: center;
column-gap: 5px;
border: solid 1px white;
background: black;
padding: 15px;
}
.status-container > * {
grid-column: span 2;
text-align: center;
font-size: 0.8em;
}
.status-container > *:first-child:not(img) {
grid-column: 2;
text-align: left;
font-size: inherit;
}
.status-container .status-icon {
grid-column: 1;
grid-row: 1;
align-self: center;
}
/* toolbar */
main .toolbar button {
#homepage .toolbar button {
border: none;
background: none;
color: white;
@ -170,12 +212,12 @@ main .toolbar button {
cursor: pointer;
}
main .toolbar button img {
#homepage .toolbar button img {
height: 1em;
display: inline-block;
}
main .toolbar button img[hidden] {
#homepage .toolbar button img[hidden] {
display: none;
}

View File

@ -42,7 +42,7 @@
</nav>
</header>
<main>
<main id="homepage">
<section id="description">
@ -72,11 +72,18 @@
</section>
<aside id="main-info">
<address><a href="geo:45.7732495,4.8372366">
7 Place Louis Chazette 69001 Lyon<br/>
45° 46' 23.698" N 4° 50' 14.052" E
</a></address>
<p> Ouvert tous les mardis à partir de 19h</p>
<p> Ouvert tous les mardis à partir de 19h</p>
<section class="status-section">
<a href="/status/" id="status">Vérifier si le local est ouvert 🠖</a>
<script src="/js/status.js"></script>
</section>
</aside>
<section id="events">

42
js/status.js Normal file
View File

@ -0,0 +1,42 @@
/**
* Fetch status content and insert main content into provided container
* @param {Element} containerEl Container to insert status into
*/
async function insertStatus(containerEl){
const baseUrl = containerEl.href;
const res = await fetch(baseUrl, {cache:"no-cache"});
if(!res.ok){
console.info(`Network error requesting status : ${res.status} ${res.statusText}`);
return;
}
const dom = new DOMParser().parseFromString(await res.text(), "text/html");
let base = dom.createElement("base");
base.href = containerEl.href;
dom.head.append(base);
const main = dom.querySelector("main");
if(!main)
throw new Error("Status page does not contain a <main> element");
for(let it of main.querySelectorAll("[href],[src]")){
if(it.hasAttribute("href")){
it.href = it.href
} else {
it.src = it.src
}
}
containerEl.innerHTML = "";
for(let node of main.childNodes){
containerEl.append(document.importNode(node, true));
}
containerEl.className = main.className;
}
insertStatus(document.getElementById("status"))

33
status/index.fermé.html Normal file
View File

@ -0,0 +1,33 @@
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ouverture du local • Laboratoire Ouvert Lyonnais</title>
<link rel="stylesheet" href="/css/normalize.css" type="text/css" media="screen">
<link rel="stylesheet" href="/css/style.css" type="text/css" media="screen">
</head>
<body class="status-page">
<header id="main-header">
<img class="logo" src="/images/logo_picto.svg" alt="Laboratoire Ouvert Lyonnais" />
</header>
<main id="content" class="status-container closed">
<p>Le local du LOL est actuellement <strong>Fermé</strong></p>
<img class="status-icon" src="/status/status.fermé.png" alt="Cercle rouge indiquant que le local est fermé"
title="Le local est fermé" />
<p>Venez pendant les horaires de permanence ou envoyez nous un petit message ;)</p>
</main>
<nav>
<a href="..">🠔 Retour au site</a>
</nav>
</body>
</html>

1
status/index.html Symbolic link
View File

@ -0,0 +1 @@
index.fermé.html

31
status/index.ouvert.html Normal file
View File

@ -0,0 +1,31 @@
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ouverture du local • Laboratoire Ouvert Lyonnais</title>
<link rel="stylesheet" href="/css/normalize.css" type="text/css" media="screen">
<link rel="stylesheet" href="/css/style.css" type="text/css" media="screen">
</head>
<body class="status-page">
<header id="main-header">
<img class="logo" src="/images/logo_picto.svg" alt="Laboratoire Ouvert Lyonnais" />
</header>
<main id="content" class="status-container opened">
<p>Le local du LOL est actuellement <strong>Ouvert</strong> !</p>
<img class="status-icon" src="/status/status.ouvert.png" alt="Cercle vert indiquant que le local est ouvert"
title="Le local est ouvert" />
</main>
<nav>
<a href="..">🠔 Retour au site</a>
</nav>
</body>
</html>

19
status/set-status.sh Executable file
View File

@ -0,0 +1,19 @@
#!/bin/bash
SCRIPTPATH="$( cd "$(dirname "$0")" >/dev/null 2>&1 ; pwd -P )"
if [ "$#" = "0" ]; then
echo "Usage set-status.sh [new-status]"
echo ""
echo "[new-status] can be \"opened\" or \"closed\""
echo ""
exit 1
fi
if [ "$1" = "opened" ]; then
ln -sf "index.ouvert.html" "$SCRIPTPATH/index.html"
fi
if [ "$1" = "closed" ]; then
ln -sf "index.fermé.html" "$SCRIPTPATH/index.html"
fi

BIN
status/status.fermé.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.2 KiB

BIN
status/status.ouvert.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.6 KiB