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">
<link rel="stylesheet" type="text/css" href="style.css">
<style>
#wiki {
left: 66%;
body {
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>
</head>
<body>
<div id="controls">
<a href="http://mw/api.php" id="mediawikiapi"></a><input id="startpage" value="Bienvenue à l’erg" autofocus /><button id="button">ok</button>
</div>
<div id="content">
<div id="pagediv">
<div id="map">
<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 id="wiki">
<iframe src="/mw/"></iframe>
</div>
<div id="cats" class="expanded">
<div class="ocontents">
@@ -36,11 +90,8 @@
</body>
<script type="text/javascript" src="dist/wikimaptotal.js"></script>
<script>
var mediawikiapi = document.querySelector("#mediawikiapi").href,
startpage = document.querySelector("#startpage"),
button = document.querySelector("#button"),
svg = document.querySelector("#svg"),
iframe = document.querySelector("iframe"),
var svg = document.querySelector("#svg"),
iframe = document.querySelector("iframe#wikiframe"),
cats = document.querySelector("#cats"),
cats_contents = document.querySelector("#cats .body"),
cats_thumb = document.querySelector("#cats .thumb"),