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.
|
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.
|
Il a été codé le plus simplement possible.
|
||||||
|
|
||||||
TODO
|
## TODO
|
||||||
====
|
|
||||||
Pouvoir mettre en quelques lignes les activités ou ateliers à venir avec une date.
|
Pouvoir mettre en quelques lignes les activités ou ateliers à venir avec une date.
|
||||||
Est-ce le git pourrait nous permettre de faire ça ?
|
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;
|
width:50px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Tablet */
|
/* Status */
|
||||||
@media screen and (max-width: 1024px) {
|
|
||||||
|
|
||||||
#logo {
|
.status-container > * {
|
||||||
width: 100%;
|
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
#nav {
|
a.status-container > p {
|
||||||
width:100%;
|
text-align: inherit;
|
||||||
margin:10px 0;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.navigation{
|
.status-container.opened strong {
|
||||||
width: 100%;
|
color: green;
|
||||||
list-style: none;
|
font-weight: bold;
|
||||||
margin: 0;
|
|
||||||
padding:0;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.navigation li{
|
.status-container.closed strong {
|
||||||
float: left;
|
color: red;
|
||||||
width:25%;
|
font-weight: bold;
|
||||||
padding:0;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.slide{
|
img.status-icon {
|
||||||
background-attachment: fixed;
|
max-width: 125px;
|
||||||
width:100%;
|
display: block;
|
||||||
position: relative;
|
margin-left: auto;
|
||||||
padding:140px 0 0 0;
|
margin-right: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
#decorative {
|
/* Tablet */
|
||||||
display:none;
|
@media screen and (max-width: 1024px) {
|
||||||
}
|
|
||||||
|
|
||||||
#content {
|
#logo {
|
||||||
text-align:center;
|
width: 100%;
|
||||||
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 */
|
/* Mobile */
|
||||||
@media screen and (max-width: 480px) {
|
@media screen and (max-width: 480px) {
|
||||||
|
|
||||||
#logo {
|
#logo {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
#nav {
|
#nav {
|
||||||
width:100%;
|
width:100%;
|
||||||
margin:5px 0;
|
margin:5px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.navigation{
|
.navigation{
|
||||||
width: 100%;
|
width: 100%;
|
||||||
float: left;
|
float: left;
|
||||||
list-style: none;
|
list-style: none;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding:0;
|
padding:0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.navigation li{
|
.navigation li{
|
||||||
float: left;
|
float: left;
|
||||||
width:25%;
|
width:25%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.slide{
|
.slide{
|
||||||
background-attachment: fixed;
|
background-attachment: fixed;
|
||||||
width:100%;
|
width:100%;
|
||||||
position: relative;
|
position: relative;
|
||||||
padding:150px 0;
|
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) {
|
@media only screen and (max-width: 767px) {
|
||||||
|
#slide1 {
|
||||||
#slide1{
|
text-align:justify;
|
||||||
|
}
|
||||||
text-align:justify;
|
|
||||||
}
|
}
|
||||||
|
|||||||
@ -59,7 +59,9 @@
|
|||||||
<div>
|
<div>
|
||||||
<h4>Permanence : mardis à partir de 19h00</h4>
|
<h4>Permanence : mardis à partir de 19h00</h4>
|
||||||
<h4>Adresse : 7 Place Louis Chazette 69001 Lyon</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>
|
<h3>Canaux</h3>
|
||||||
<div>
|
<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>
|
<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