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

sort of working, but mobile behaviour glitches on actual mobile

Browse Source
This commit is contained in:
Michael Murtaugh
2019-06-09 16:44:52 +02:00
parent 4f620c860b 7f8efb6580
commit 308d847dfc
1 changed files with 66 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

77
index.html
View File

@@ -5,21 +5,75 @@
<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">
<style> <style>
#wiki { body {
left: 66%; overflow: hidden;
background: pink;
}
#map {
position: absolute;
left: 0; top: 0;
right: 0;
height: 160vh;
z-index: 0;
background: gray;
overflow: hidden;
}
#map #radio {
position: absolute;
left: 10px;
bottom: 10px;
width: 360px;
height: 60px;
}
#map a {
position: relative;
left: 200px;
top: 200px;
}
#pagediv {
position: absolute;
left: 0; top: 0;
bottom: 0; right: 0;
z-index: 0;
overflow: auto;
} }
/* https://stackoverflow.com/questions/24859452/css-how-to-center-absolute-position-div-with-max-width-in-ie9-10-11 */
#page {
position: absolute;
top: 60vh;
height: 100vh;
left: 0px;
right: 0px;
/*left: 80px; right: 80px;*/
text-align: center;
display: inline-block;
margin: 0 auto;
max-width: 800px;
width: 100%;
}
#page iframe {
width: 100%;
height: 100%;
border: none;
overflow: hidden;
}
#cats {
display: none;
}
</style> </style>
</head> </head>
<body> <body>
<div id="controls"> <div id="pagediv">
<a href="http://mw/api.php" id="mediawikiapi"></a><input id="startpage" value="Bienvenue à l’erg" autofocus /><button id="button">ok</button> <div id="map">
</div>
<div id="content">
<svg id="svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"></svg> <svg id="svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"></svg>
<!-- <div id="radio"><iframe width="100%" height="60" src="https://www.mixcloud.com/widget/iframe/?hide_cover=1&mini=1&feed=%2FErgote_Radio%2Fmagma-reclaim-the-climax-publication-exposition-documentation%2F" frameborder="0" ></iframe></div>
-->
</div>
<div id="page">
<iframe id="wikiframe" src="/mw"></iframe>
</div> </div>
<div id="wiki">
<iframe src="/mw/"></iframe>
</div> </div>
<div id="cats" class="expanded"> <div id="cats" class="expanded">
<div class="ocontents"> <div class="ocontents">
@@ -36,11 +90,8 @@
</body> </body>
<script type="text/javascript" src="dist/wikimaptotal.js"></script> <script type="text/javascript" src="dist/wikimaptotal.js"></script>
<script> <script>
var mediawikiapi = document.querySelector("#mediawikiapi").href, var svg = document.querySelector("#svg"),
startpage = document.querySelector("#startpage"), iframe = document.querySelector("iframe#wikiframe"),
button = document.querySelector("#button"),
svg = document.querySelector("#svg"),
iframe = document.querySelector("iframe"),
cats = document.querySelector("#cats"), cats = document.querySelector("#cats"),
cats_contents = document.querySelector("#cats .body"), cats_contents = document.querySelector("#cats .body"),
cats_thumb = document.querySelector("#cats .thumb"), cats_thumb = document.querySelector("#cats .thumb"),