wiki.erg.be/map
1
0
Fork 0
Code Issues 4 Pull Requests Packages Projects Releases Wiki Activity

creation d'un bouton pour fermer et de reouvrire la carte

Browse Source
This commit is contained in:
Théophile Gervreau-Mercier
2024-02-08 16:46:22 +01:00
parent b50c31044a
commit f5311ad861
2 changed files with 208 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

139
index.html
View File

@@ -1,49 +1,98 @@
<!DOCTYPE html>
<html>
<head>
<title>école de recherche graphique</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="icon" type="image/x-icon" href="/Favicon_V1.png">
</head>
<body>
<div id="vbody">
<div id="page">
<div id="handle"></div>
<svg id="svg"></svg>
<div id="cats">
<div class="body"></div>
<div class="placeholder"></div>
</div>
<div class="zoom-controls">
<div class="leaflet-control-zoom leaflet-bar leaflet-control">
<a class="leaflet-control-zoom-in" href="#" title="Zoom in" role="button" aria-label="Zoom in">+</a>
<a class="leaflet-control-zoom-out" href="#" title="Zoom out" role="button" aria-label="Zoom out">&ndash;</a>
</div>
</div>
<div id="specialclosediv">
<a id="specialclosebutton" href="#" title="Zoom in" role="button" aria-label="Zoom in">&times;</a>
</div>
<div id="specialselectdiv">
<select id="special">
<!--<option value="/m/special/recentnews">news</option>-->
<!--<option value="/m/special/ergtv/">erg tv !</option>-->
<option value="">Carte</option>
<option value="/m/special/recentfiles/">Nouveaux fichiers</option>
<option value="/m/special/recentchanges/">Modifications récentes</option>
<!--<option value="/m/special/jpo2021-live/">JPO 2021</option>-->
</select>
</div>
<div id="specialiframediv"></div>
</div>
<div id="wikiframediv">
<iframe id="wikiframe" name="wikiframe" src="/mw"></iframe>
</div>
<head>
<title>école de recherche graphique</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<!--<meta name="viewport" content="width=device-width, initial-scale=1">-->
<meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1; user-scalable=no;"/>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="custom_delo.css">A
<style type="text/css">
#quit {
position:fixed;
top:15px;
right:15px;
visibility:visible;
}
@media (max-width: 800px) and (-webkit-min-device-pixel-ratio: 1) {
script {
display:none !important;
}
#page {
display:none !important;
}
#wikiframediv {
right:0;
}
}
</div>
</body>
<script type="text/javascript" src="dist/app.js"></script>
<script src="dist/index.js"></script>
</style>
<link rel="icon" type="image/x-icon" href="/Favicon_V1.png">
</head>
<body>
<div id="vbody">
<div id="page">
<div id="handle"></div>
<svg id="svg"></svg>
<div id="cats">
<div class="body"></div>
<div class="placeholder"></div>
</div>
<div class="zoom-controls">
<div class="leaflet-control-zoom leaflet-bar leaflet-control">
<a class="leaflet-control-zoom-in" href="#" title="Zoom in" role="button" aria-label="Zoom in">+</a>
<a class="leaflet-control-zoom-out" href="#" title="Zoom out" role="button" aria-label="Zoom out">&ndash;</a>
</div>
</div>
<div id="specialclosediv">
<a id="specialclosebutton" href="#" title="Zoom in" role="button" aria-label="Zoom in">&times;</a>
</div>
<div id="specialselectdiv">
<select id="special">
<!--<option value="/m/special/recentnews">news</option>-->
<!--<option value="/m/special/ergtv/">erg tv !</option>-->
<option value="">Carte</option>
<option value="/m/special/recentfiles/">Nouveaux fichiers</option>
<option value="/m/special/recentchanges/">Modifications récentes</option>
<!--<option value="/m/special/jpo2021-live/">JPO 2021</option>-->
</select>
<a href="#" id="quit" class="button-style">fermer [x]</a>
</div>
<div id="specialiframediv"></div>
</div>
<div id="wikiframediv">
<iframe id="wikiframe" name="wikiframe" src="/mw"></iframe>
</div>
</div>
</body>
<script type="text/javascript">
var map = document.getElementById("page");
document.getElementById("quit").addEventListener("click", function() {
if(document.getElementById("quit").textContent === "fermer [x]") {
console.log("quit map");
document.getElementById("page").style.visibility = "hidden";
document.getElementById("wikiframediv").style.right = "0";
document.getElementById("quit").textContent = "🌐 carte";
document.getElementById("quit").style.setProperty('top', 'initial');
document.getElementById("quit").style.bottom = "15px";
}
else {
document.getElementById("page").style.visibility = "visible";
document.getElementById("wikiframediv").style.right = "60%";
document.getElementById("page").style.visibility = "visible";
document.getElementById("wikiframediv").style.right = "60%";
document.getElementById("quit").textContent = "fermer [x]";
document.getElementById("quit").style.setProperty('bottom', 'initial');
document.getElementById("quit").style.top = "15px";
}
});
</script>
<script type="text/javascript" src="dist/app.js"></script>
<script src="dist/index.js"></script>
</html>

144
style.css
View File

@@ -1,12 +1,11 @@
/* F O N T E S */
/* ------- F O N T E S ------- */
@font-face {
font-family: "Combined";
src: url('/mw/skins/foreground/assets/fonts/combined.otf');
font-style: normal;
font-weight: normal;
}
@font-face {
font-family: "Vega";
src: url('/mw/skins/foreground/assets/fonts/Vega-Regular.otf');
@@ -25,6 +24,7 @@ src: url("/mw/skins/foreground/assets/fonts/LUCETTE/font/ttf/Lucette-Regular.ttf
src: url("/mw/skins/foreground/assets/fonts/LUCETTE/font/woff/Lucette-Regular.woff");
src: url("/mw/skins/foreground/assets/fonts/LUCETTE/font/woff2/Lucette-Regular.woff2");
}
@font-face {
font-family: Lucette;
src: url("/mw/skins/foreground/assets/fonts/LUCETTE/font/otf/Lucette-Regularitalic.otf");
@@ -42,22 +42,64 @@ font-style: italic;
font-style:normal
}
:root {
--bg:#fff;
--color-a: #A700FF;
--color-a-shadow: rgba(167, 0, 255, 0.44);
--color-b: #00AB6B;
/* Global variables. */
:root,
::backdrop {
/* Set sans-serif & mono fonts */
--sans-font: -apple-system, BlinkMacSystemFont, "Avenir Next", Avenir,
"Nimbus Sans L", Roboto, "Noto Sans", "Segoe UI", Arial, Helvetica,
"Helvetica Neue", sans-serif;
--mono-font: Consolas, Menlo, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
--standard-border-radius: 5px;
/* Default (light) theme */
--bg: #fff;
--accent-bg: #f5f7ff;
--text: #212121;
--text-light: #585858;
--border: #898EA4;
--accent: #0d47a1;
--accent-hover: #1266e2;
--accent-text: var(--bg);
--code: #d81b60;
--preformatted: #444;
--marked: #ffdd33;
--disabled: #efefef;
--font-title: Giskith;
--font-body: Lucette;
--color-a: #a700ff; /* purple */
--color-b: #00ab6b; /* green */
--font-size: 23px;
--line-height: 1.3em;
--color-a-shadow: rgba(166, 0, 255, 0.44);
}
/* Dark theme */
@media (prefers-color-scheme: dark) {
:root {
--bg:#222;
--fg:
}
:root,
::backdrop {
color-scheme: dark;
--bg: #222;
--accent-bg: #2b2b2b;
--text: #dcdcdc;
--text-light: #ababab;
--accent: #ffb300;
--accent-hover: #ffe099;
--accent-text: var(--bg);
--code: #f06292;
--preformatted: #ccc;
--disabled: #111;
--font-title: Giskith;
--font-body: Lucette;
--color-a: #9557b5; /* washed-off purple */
--color-b: #3c856b; /* washed-off green */
--font-size: 23px;
--line-height: 1.3em;
}
}
body {
margin: 0;
padding: 0;
@@ -74,6 +116,18 @@ div#handle {
background-color: transparent;
left: 5em;
}
/* change la taille des cercle dans le svg */
/*circle {
transform: scale(0.8);
}
path {
transform: scale(0.8);
} */
circle.active{
transform: scale(0.5);
}
.links line {
stroke: #aaa;
@@ -112,13 +166,14 @@ div#handle {
fill: aqua;
}
/* ------- param<61>tre de la carte ------- */
svg {
position: absolute;
left: 0; top: 0; right: 0; bottom: 0;
font: 10px sans-serif;
transform: scale(3);
/* C'est bon j'ai trouve, c'est ce tranform qui change la taille de l'affichage de la carte*/
transform: scale(1.5);
}
@media only screen and (max-width: 320px) {
@@ -133,10 +188,12 @@ svg g.page {
cursor: pointer;
}
/* texte des noeud */
svg g.page text {
visibility: hidden;
fill: var(--color-a);
font: 13px Combined;
font: 10px Combined;
max-width: 20%;
}
svg g.active text {
@@ -190,7 +247,7 @@ use {
}
.active text {
stroke: white;
stroke: var(--bg);
stroke-width: 1px;
paint-order: stroke;
fill: var(--color-b) !important;
@@ -205,7 +262,7 @@ use {
/* Categories */
/* --------- Categories ------- */
@media only screen and (max-width: 600px) {
#page {
@@ -256,7 +313,8 @@ use {
position: absolute;
left: 10px;
bottom: 10px;
background: #FFFFFFFF;
background: white;
color: black;
border-radius: 24px;
padding: 10px;
font-size: 12px;
@@ -323,7 +381,8 @@ use {
border: none;
}
/* MEDIAWIKI PAGE */
/* ------- MEDIAWIKI PAGE ------- */
.header-container {
display: none !important;
}
@@ -340,7 +399,7 @@ a.talk {
}
/* control positioning */
/* ------- control positioning ------- */
.leaflet-control {
position: relative;
@@ -354,7 +413,7 @@ a.talk {
clear: both;
}
/* general toolbar styles */
/* ------- general toolbar styles ------- */
.leaflet-bar {
box-shadow: 0 1px 5px rgba(0,0,0,0.65);
@@ -395,18 +454,19 @@ a.talk {
}
/* zoom controls */
/* ------- zoom controls -------- */
.zoom-controls {
position: absolute;
left: 10px;
top: 10px;
/* changed from left top to bottom right */
right: 10px;
bottom: 10px;
z-index: 10;
}
#specialclosediv {
position: absolute;
left: 10px;
left: 25px;
top: 10px;
z-index: 10000;
box-shadow: 0 3px 3px 3px var(--color-a-shadow);
@@ -471,12 +531,35 @@ svg {
}
/* ------- Menu d<>pliant ------- */
.button-style {
box-shadow: 0 3px 3px 3px var(--color-a-shadow);
background-color: white;
font-family: Vega;
font-size: 12px;
padding: 6px 2px;
cursor: pointer;
color: black;
border-radius: 24px;
}
a.button-style {
padding:8px;
text-decoration:none;
}
#specialselectdiv {
position: absolute;
bottom: 10px;
right: 20px;
/* changement des valeur sde bottom right a top left*/
top: 8px;
left: 25px;
z-index: 10000;
}
background: white;
}
#specialselectdiv select {
box-shadow: 0 3px 3px 3px var(--color-a-shadow);
background-color: white;
@@ -485,6 +568,7 @@ svg {
padding: 6px 2px;
text-transform: uppercase;
cursor: pointer;
color: black;
}