Ajout de l'ouverture du LOL
This commit is contained in:
parent
8a09ede338
commit
c8459c0b3b
GPG Key ID:
C4B28FD2729941CE
27
README.MD
27
README.MD
@ -1,9 +1,28 @@
|
||||
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
|
||||
====
|
||||
## 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 ?
|
||||
|
||||
## Oyverture du local
|
||||
|
||||
La partie `/status/` du site informe sour l'ouverture du local.
|
||||
|
||||
Il suffit de changer le lien symbolique `/status/index.html` vers `/status/index.ouvert.html` ou `/status/index.fermé.html` pour switcher entre le local *Ouvert* ou *Fermé*.
|
||||
|
||||
Les commandes suivantes permettent de mettre à jour l'ouverture du local.
|
||||
Elles doivent être éxécutées à la racine du site.
|
||||
|
||||
Pour passer le local en mode *Ouvert*
|
||||
```
|
||||
ln -s -f index.ouvert.html status/index.html
|
||||
```
|
||||
|
||||
Pour passer le local en mode *Fermé*
|
||||
```
|
||||
ln -s -f index.fermé.html status/index.html
|
||||
```
|
||||
164
css/style.css
164
css/style.css
@ -117,98 +117,128 @@ a:visited {
|
||||
width:50px;
|
||||
}
|
||||
|
||||
/* Tablet */
|
||||
@media screen and (max-width: 1024px) {
|
||||
/* Status */
|
||||
|
||||
#logo {
|
||||
width: 100%;
|
||||
.status-container > * {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#nav {
|
||||
width:100%;
|
||||
margin:10px 0;
|
||||
a.status-container > p {
|
||||
text-align: inherit;
|
||||
}
|
||||
|
||||
.navigation{
|
||||
width: 100%;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding:0;
|
||||
.status-container.opened strong {
|
||||
color: green;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.navigation li{
|
||||
float: left;
|
||||
width:25%;
|
||||
padding:0;
|
||||
.status-container.closed strong {
|
||||
color: red;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.slide{
|
||||
background-attachment: fixed;
|
||||
width:100%;
|
||||
position: relative;
|
||||
padding:140px 0 0 0;
|
||||
img.status-icon {
|
||||
max-width: 125px;
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
#decorative {
|
||||
display:none;
|
||||
}
|
||||
/* Tablet */
|
||||
@media screen and (max-width: 1024px) {
|
||||
|
||||
#content {
|
||||
text-align:center;
|
||||
width:100%;
|
||||
}
|
||||
#logo {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#nav {
|
||||
width:100%;
|
||||
margin:10px 0;
|
||||
}
|
||||
|
||||
.navigation{
|
||||
width: 100%;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding:0;
|
||||
}
|
||||
|
||||
.navigation li{
|
||||
float: left;
|
||||
width:25%;
|
||||
padding:0;
|
||||
}
|
||||
|
||||
.slide{
|
||||
background-attachment: fixed;
|
||||
width:100%;
|
||||
position: relative;
|
||||
padding:140px 0 0 0;
|
||||
}
|
||||
|
||||
#decorative {
|
||||
display:none;
|
||||
}
|
||||
|
||||
#content {
|
||||
text-align:center;
|
||||
width:100%;
|
||||
}
|
||||
|
||||
#slide1 h1 {
|
||||
line-height: 1em;
|
||||
}
|
||||
#slide1 h2 {
|
||||
line-height: 1em;
|
||||
}
|
||||
|
||||
#slide1 h1 {
|
||||
line-height: 1em;
|
||||
}
|
||||
#slide1 h2 {
|
||||
line-height: 1em;
|
||||
}
|
||||
|
||||
/* Mobile */
|
||||
@media screen and (max-width: 480px) {
|
||||
|
||||
#logo {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
#logo {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#nav {
|
||||
width:100%;
|
||||
margin:5px 0;
|
||||
}
|
||||
#nav {
|
||||
width:100%;
|
||||
margin:5px 0;
|
||||
}
|
||||
|
||||
.navigation{
|
||||
width: 100%;
|
||||
float: left;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding:0;
|
||||
}
|
||||
.navigation{
|
||||
width: 100%;
|
||||
float: left;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding:0;
|
||||
}
|
||||
|
||||
.navigation li{
|
||||
float: left;
|
||||
width:25%;
|
||||
}
|
||||
.navigation li{
|
||||
float: left;
|
||||
width:25%;
|
||||
}
|
||||
|
||||
.slide{
|
||||
background-attachment: fixed;
|
||||
width:100%;
|
||||
position: relative;
|
||||
padding:150px 0;
|
||||
}
|
||||
.slide{
|
||||
background-attachment: fixed;
|
||||
width:100%;
|
||||
position: relative;
|
||||
padding:150px 0;
|
||||
}
|
||||
|
||||
#slide1 h1 {
|
||||
line-height: 1em;
|
||||
}
|
||||
#slide1 h2 {
|
||||
line-height: 1em;
|
||||
}
|
||||
|
||||
#slide1 h1 {
|
||||
line-height: 1em;
|
||||
}
|
||||
#slide1 h2 {
|
||||
line-height: 1em;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 767px) {
|
||||
|
||||
#slide1{
|
||||
|
||||
text-align:justify;
|
||||
#slide1 {
|
||||
text-align:justify;
|
||||
}
|
||||
}
|
||||
|
||||
@ -59,7 +59,9 @@
|
||||
<div>
|
||||
<h4>Permanence : mardis à partir de 19h00</h4>
|
||||
<h4>Adresse : 7 Place Louis Chazette 69001 Lyon</h4>
|
||||
</div>
|
||||
<a href="/status/" id="status">Vérifier si le local est ouvert 🠖</a>
|
||||
<script src="/js/status.js"></script>
|
||||
</div>
|
||||
<h3>Canaux</h3>
|
||||
<div>
|
||||
<p>IRC : canal #labolyon sur <a href="http://geeknode.org/">irc.geeknode.org</a> : besoin d'aide sur IRC? <a href=" http://www.irchelp.org">voir IRC Help</a></p>
|
||||
|
||||
26
js/status.js
Normal file
26
js/status.js
Normal file
@ -0,0 +1,26 @@
|
||||
/**
|
||||
* Fetch status content and insert main content into provided container
|
||||
* @param {Element} containerEl Container to insert status into
|
||||
*/
|
||||
async function insertStatus(containerEl){
|
||||
|
||||
const baseUrl = new URL("/status/", containerEl.baseURI)
|
||||
const res = await fetch(baseUrl);
|
||||
|
||||
if(!res.ok){
|
||||
console.info(`Network error requesting status : ${res.status} ${res.statusText}`);
|
||||
return;
|
||||
}
|
||||
|
||||
const dom = new DOMParser().parseFromString(await res.text(), "text/html");
|
||||
|
||||
const main = dom.querySelector("main");
|
||||
|
||||
if(!main)
|
||||
throw new Error("Status page does not contain a <main> element");
|
||||
|
||||
containerEl.innerHTML = main.innerHTML;
|
||||
containerEl.className = main.className;
|
||||
}
|
||||
|
||||
insertStatus(document.getElementById("status"))
|
||||
41
status/index.fermé.html
Normal file
41
status/index.fermé.html
Normal file
@ -0,0 +1,41 @@
|
||||
<!DOCTYPE HTML>
|
||||
<!--[if lt IE 7]><html class="no-js lt-ie9 lt-ie8 lt-ie7"><![endif]-->
|
||||
<!--[if IE 7]><html class="no-js lt-ie9 lt-ie8"><![endif]-->
|
||||
<!--[if IE 8]><html class="no-js lt-ie9"><![endif]-->
|
||||
<!--[if gt IE 8]><!--><html class="no-js"><!--<![endif]-->
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale = 1.0, user-scalable = no">
|
||||
<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/grid.css" type="text/css" media="screen">
|
||||
<link rel="stylesheet" href="/css/style.css" type="text/css" media="screen">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="menu">
|
||||
<div class="container clearfix">
|
||||
<div id="logo" class="grid_3">
|
||||
<img src="/images/logo_picto.svg">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="slide" id="slide1" data-slide="1" data-stellar-background-ratio="0.5">
|
||||
<div class="container clearfix">
|
||||
<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>
|
||||
<p><a href="..">🠔 Retour au site</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
1
status/index.html
Symbolic link
1
status/index.html
Symbolic link
@ -0,0 +1 @@
|
||||
index.fermé.html
|
||||
39
status/index.ouvert.html
Normal file
39
status/index.ouvert.html
Normal file
@ -0,0 +1,39 @@
|
||||
<!DOCTYPE HTML>
|
||||
<!--[if lt IE 7]><html class="no-js lt-ie9 lt-ie8 lt-ie7"><![endif]-->
|
||||
<!--[if IE 7]><html class="no-js lt-ie9 lt-ie8"><![endif]-->
|
||||
<!--[if IE 8]><html class="no-js lt-ie9"><![endif]-->
|
||||
<!--[if gt IE 8]><!--><html class="no-js"><!--<![endif]-->
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale = 1.0, user-scalable = no">
|
||||
<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/grid.css" type="text/css" media="screen">
|
||||
<link rel="stylesheet" href="/css/style.css" type="text/css" media="screen">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="menu">
|
||||
<div class="container clearfix">
|
||||
<div id="logo" class="grid_3">
|
||||
<img src="/images/logo_picto.svg">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="slide" id="slide1" data-slide="1" data-stellar-background-ratio="0.5">
|
||||
<div class="container clearfix">
|
||||
<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>
|
||||
<p><a href="..">🠔 Retour au site</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
BIN
status/status.ouvert.png
Normal file
BIN
status/status.ouvert.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
Loading…
Reference in New Issue
Block a user