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

67
index.html
View File

@@ -1,15 +1,37 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<title>école de recherche graphique</title> <title>école de recherche graphique</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <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">-->
<meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1; user-scalable=no;"/>
<meta charset="utf-8"> <meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css"> <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;
}
}
</style>
<link rel="icon" type="image/x-icon" href="/Favicon_V1.png"> <link rel="icon" type="image/x-icon" href="/Favicon_V1.png">
</head> </head>
<body> <body>
<div id="vbody"> <div id="vbody">
<div id="page"> <div id="page">
<div id="handle"></div> <div id="handle"></div>
<svg id="svg"></svg> <svg id="svg"></svg>
@@ -35,6 +57,7 @@
<option value="/m/special/recentchanges/">Modifications récentes</option> <option value="/m/special/recentchanges/">Modifications récentes</option>
<!--<option value="/m/special/jpo2021-live/">JPO 2021</option>--> <!--<option value="/m/special/jpo2021-live/">JPO 2021</option>-->
</select> </select>
<a href="#" id="quit" class="button-style">fermer [x]</a>
</div> </div>
<div id="specialiframediv"></div> <div id="specialiframediv"></div>
</div> </div>
@@ -42,8 +65,34 @@
<iframe id="wikiframe" name="wikiframe" src="/mw"></iframe> <iframe id="wikiframe" name="wikiframe" src="/mw"></iframe>
</div> </div>
</div> </div>
</body> </body>
<script type="text/javascript" src="dist/app.js"></script> <script type="text/javascript">
<script src="dist/index.js"></script> 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> </html>

142
style.css
View File

@@ -1,12 +1,11 @@
/* ------- F O N T E S ------- */
/* F O N T E S */
@font-face { @font-face {
font-family: "Combined"; font-family: "Combined";
src: url('/mw/skins/foreground/assets/fonts/combined.otf'); src: url('/mw/skins/foreground/assets/fonts/combined.otf');
font-style: normal; font-style: normal;
font-weight: normal; font-weight: normal;
} }
@font-face { @font-face {
font-family: "Vega"; font-family: "Vega";
src: url('/mw/skins/foreground/assets/fonts/Vega-Regular.otf'); 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/woff/Lucette-Regular.woff");
src: url("/mw/skins/foreground/assets/fonts/LUCETTE/font/woff2/Lucette-Regular.woff2"); src: url("/mw/skins/foreground/assets/fonts/LUCETTE/font/woff2/Lucette-Regular.woff2");
} }
@font-face { @font-face {
font-family: Lucette; font-family: Lucette;
src: url("/mw/skins/foreground/assets/fonts/LUCETTE/font/otf/Lucette-Regularitalic.otf"); src: url("/mw/skins/foreground/assets/fonts/LUCETTE/font/otf/Lucette-Regularitalic.otf");
@@ -42,22 +42,64 @@ font-style: italic;
font-style:normal font-style:normal
} }
:root { /* Global variables. */
--bg:#fff; :root,
--color-a: #A700FF; ::backdrop {
--color-a-shadow: rgba(167, 0, 255, 0.44); /* Set sans-serif & mono fonts */
--color-b: #00AB6B; --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) { @media (prefers-color-scheme: dark) {
:root { :root,
--bg:#222; ::backdrop {
--fg: 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 { body {
margin: 0; margin: 0;
padding: 0; padding: 0;
@@ -74,6 +116,18 @@ div#handle {
background-color: transparent; background-color: transparent;
left: 5em; 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 { .links line {
stroke: #aaa; stroke: #aaa;
@@ -112,13 +166,14 @@ div#handle {
fill: aqua; fill: aqua;
} }
/* ------- param<61>tre de la carte ------- */
svg { svg {
position: absolute; position: absolute;
left: 0; top: 0; right: 0; bottom: 0; left: 0; top: 0; right: 0; bottom: 0;
font: 10px sans-serif; 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) { @media only screen and (max-width: 320px) {
@@ -133,10 +188,12 @@ svg g.page {
cursor: pointer; cursor: pointer;
} }
/* texte des noeud */
svg g.page text { svg g.page text {
visibility: hidden; visibility: hidden;
fill: var(--color-a); fill: var(--color-a);
font: 13px Combined; font: 10px Combined;
max-width: 20%;
} }
svg g.active text { svg g.active text {
@@ -190,7 +247,7 @@ use {
} }
.active text { .active text {
stroke: white; stroke: var(--bg);
stroke-width: 1px; stroke-width: 1px;
paint-order: stroke; paint-order: stroke;
fill: var(--color-b) !important; fill: var(--color-b) !important;
@@ -205,7 +262,7 @@ use {
/* Categories */ /* --------- Categories ------- */
@media only screen and (max-width: 600px) { @media only screen and (max-width: 600px) {
#page { #page {
@@ -256,7 +313,8 @@ use {
position: absolute; position: absolute;
left: 10px; left: 10px;
bottom: 10px; bottom: 10px;
background: #FFFFFFFF; background: white;
color: black;
border-radius: 24px; border-radius: 24px;
padding: 10px; padding: 10px;
font-size: 12px; font-size: 12px;
@@ -323,7 +381,8 @@ use {
border: none; border: none;
} }
/* MEDIAWIKI PAGE */ /* ------- MEDIAWIKI PAGE ------- */
.header-container { .header-container {
display: none !important; display: none !important;
} }
@@ -340,7 +399,7 @@ a.talk {
} }
/* control positioning */ /* ------- control positioning ------- */
.leaflet-control { .leaflet-control {
position: relative; position: relative;
@@ -354,7 +413,7 @@ a.talk {
clear: both; clear: both;
} }
/* general toolbar styles */ /* ------- general toolbar styles ------- */
.leaflet-bar { .leaflet-bar {
box-shadow: 0 1px 5px rgba(0,0,0,0.65); box-shadow: 0 1px 5px rgba(0,0,0,0.65);
@@ -395,18 +454,19 @@ a.talk {
} }
/* zoom controls */ /* ------- zoom controls -------- */
.zoom-controls { .zoom-controls {
position: absolute; position: absolute;
left: 10px; /* changed from left top to bottom right */
top: 10px; right: 10px;
bottom: 10px;
z-index: 10; z-index: 10;
} }
#specialclosediv { #specialclosediv {
position: absolute; position: absolute;
left: 10px; left: 25px;
top: 10px; top: 10px;
z-index: 10000; z-index: 10000;
box-shadow: 0 3px 3px 3px var(--color-a-shadow); 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 { #specialselectdiv {
position: absolute; position: absolute;
bottom: 10px; /* changement des valeur sde bottom right a top left*/
right: 20px; top: 8px;
left: 25px;
z-index: 10000; z-index: 10000;
} background: white;
}
#specialselectdiv select { #specialselectdiv select {
box-shadow: 0 3px 3px 3px var(--color-a-shadow); box-shadow: 0 3px 3px 3px var(--color-a-shadow);
background-color: white; background-color: white;
@@ -485,6 +568,7 @@ svg {
padding: 6px 2px; padding: 6px 2px;
text-transform: uppercase; text-transform: uppercase;
cursor: pointer; cursor: pointer;
color: black;
} }