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

other changes

Browse Source
This commit is contained in:
Michael Murtaugh
2019-07-10 09:04:59 +02:00
parent 5ac253c712
commit 7e379b97c9
7 changed files with 447 additions and 238 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
dist/app.js vendored
View File

@@ -3156,6 +3156,12 @@ var app = (function (exports) {
var identity$1 = new Transform(1, 0, 0); var identity$1 = new Transform(1, 0, 0);
transform.prototype = Transform.prototype;
function transform(node) {
return node.__zoom || identity$1;
}
function nopropagation$1() { function nopropagation$1() {
event.stopImmediatePropagation(); event.stopImmediatePropagation();
} }
@@ -5164,8 +5170,8 @@ var app = (function (exports) {
var width = 600, var width = 600,
height = 600; height = 600;
this.zoom_level = opts.zoom || 1.5;
this.apiurl = opts.apiurl; this.apiurl = opts.apiurl;
this.init_svg(opts.svg);
this.categorylabel = opts.categorylabel || "Category"; this.categorylabel = opts.categorylabel || "Category";
this.symbols_src = opts.symbols; this.symbols_src = opts.symbols;
this.categorydiv = select(opts.categorydiv); this.categorydiv = select(opts.categorydiv);
@@ -5178,6 +5184,7 @@ var app = (function (exports) {
// this.net = new ForceNet({}); // this.net = new ForceNet({});
// this.net.on("nodeclick", this.nodeclick.bind(this)); // this.net.on("nodeclick", this.nodeclick.bind(this));
this.svg = null; this.svg = null;
this.init_svg(opts.svg);
this.historylinks = {}; this.historylinks = {};
this.links = null; this.links = null;
this.highlight_category = null; this.highlight_category = null;
@@ -5263,9 +5270,9 @@ var app = (function (exports) {
this.rect = this.svg.append("rect") this.rect = this.svg.append("rect")
.attr("width", 1000) .attr("width", 1000)
.attr("height", 1000) .attr("height", 1000)
.style("fill", "none") .style("fill", "none");
.style("pointer-events", "all") // .style("pointer-events", "all")
.call(this.zoom); // .call(this.zoom);
this.content = this.svg.append("g") this.content = this.svg.append("g")
.attr("id", "content"), .attr("id", "content"),
this.linksg = this.content.append("g") this.linksg = this.content.append("g")
@@ -5354,11 +5361,17 @@ var app = (function (exports) {
this.categorydiv this.categorydiv
.selectAll("div.cat") .selectAll("div.cat")
.classed("highlight", d=> d.page ? d.page.highlight : false); .classed("highlight", d=> d.page ? d.page.highlight : false);
var data = {nodes: this.wiki.get_nodes(), links: values(this.all_links_by_key)}; var data = {nodes: this.get_nodes(), links: values(this.all_links_by_key)};
this.update_node_counts(); this.update_node_counts();
this.update_graph(data); this.update_graph(data);
} }
get_nodes () {
var nodes = this.wiki.get_nodes();
nodes = nodes.filter(d => d.linked || d.active || d.active2 || d.highlight);
return nodes;
}
async set_active_page (page) { async set_active_page (page) {
console.log("wikimap: set_active_page:", page.title); console.log("wikimap: set_active_page:", page.title);
if (page === this.active_page) { if (page === this.active_page) {
@@ -5421,14 +5434,16 @@ var app = (function (exports) {
} }
this.active_page = page; this.active_page = page;
this.active_page.active = true; this.active_page.active = true;
this.linked_nodes_set_active(this.active_page, true); this.linked_nodes_set_active(this.active_page, true);
this.events.emit("page", this.active_page); setTimeout(() => {
this.centerOnItem(page, 1000);
}, 1000);
var data = {nodes: this.wiki.get_nodes(), links: values(this.all_links_by_key)}; this.events.emit("page", this.active_page);
var data = {nodes: this.get_nodes(), links: values(this.all_links_by_key)};
this.update_node_counts(); this.update_node_counts();
this.update_graph(data); this.update_graph(data);
// this.update_nodes(); // this.update_nodes();
@@ -5623,7 +5638,44 @@ var app = (function (exports) {
this.simulation.alpha(0.5).restart(); this.simulation.alpha(0.5).restart();
} }
centerOnItem(item, duration) {
var bounds = this.svg.node().getBoundingClientRect();
var curt = transform(this.rect.node());
console.log("centerOnItem", this.zoom_level, "item", item);
var zoom_level = this.zoom_level ? this.zoom_level : curt.k;
if (item && item.x !== undefined) {
var transform$1 = function () {
return identity$1
.translate(bounds.width / 2, bounds.height / 2)
.scale(zoom_level)
.translate(-item.x, -item.y);
};
if (duration) {
this.rect.transition().duration(duration).call(this.zoom.transform, transform$1);
} else {
this.rect.call(this.zoom.transform, transform$1);
}
} else {
console.log("NO ITEM");
var transform$1 = function () {
return identity$1
.scale(1);
};
this.rect.call(this.zoom.transform, transform$1);
}
}
do_zoom (f, transition) {
this.rect.call(this.zoom.scaleBy, f);
}
zoom_in () {
this.do_zoom(1.25);
}
zoom_out () {
this.do_zoom(1/1.25);
}
} }
exports.Map = Map$2; exports.Map = Map$2;

49
dist/index.js vendored
View File

@@ -1,17 +1,17 @@
var svg = document.querySelector("#svg"), var svg = document.querySelector("#svg"),
page = document.querySelector("#page"),
iframe = document.querySelector("iframe#wikiframe"), iframe = document.querySelector("iframe#wikiframe"),
cats = document.querySelector("#cats"), map = new app.Map({
cats_contents = document.querySelector("#cats .body"), apiurl: "/mw/api.php",
// cats_thumb = document.querySelector("#cats .thumb"), symbols: "src/legend.json",
allcatscb = document.querySelector("input#allcats"), svg: "#svg",
historycb = document.querySelector("input#history"), categorylabel: "Catégorie",
// current_title = null, categorydiv: "#cats .body",
// loaded = false, zoom: 2.0
wikibaseurl, }),
wikibasepat; zoom_in = document.querySelector(".leaflet-control-zoom-in"),
zoom_out = document.querySelector(".leaflet-control-zoom-out"),
cats = document.querySelector("#cats");
window.addEventListener("resize", resize); window.addEventListener("resize", resize);
function resize() { function resize() {
@@ -28,29 +28,14 @@ function resize() {
// Match size of parent // Match size of parent
svg.setAttribute("width", page.clientWidth); svg.setAttribute("width", page.clientWidth);
svg.setAttribute("height", page.clientHeight); svg.setAttribute("height", page.clientHeight);
} }
resize();
var map = new app.Map({
apiurl: "/mw/api.php",
symbols: "src/legend.json",
svg: "#svg",
categorylabel: "Catégorie",
categorydiv: "#cats .body"
});
async function doload () { async function doload () {
resize();
console.log("map.init"); console.log("map.init");
await map.init(); await map.init();
console.log("map.init: done"); console.log("map.init: done");
// await map.load_json("data/sitemap.json");
// console.log("loading categories");
// await map.load_cats("data/cats.json", cats_contents);
// await map.load_legend("src/legend.json", cats_contents);
// loaded = true;
map.on("page", function (page) { map.on("page", function (page) {
// console.log("map.page", page.title); // console.log("map.page", page.title);
var url = page.url(); var url = page.url();
@@ -59,8 +44,18 @@ async function doload () {
iframe.src = url; iframe.src = url;
} }
}) })
zoom_in.addEventListener("click", (e) => {
map.zoom_in();
})
zoom_out.addEventListener("click", (e) => {
map.zoom_out();
})
} }
window.addEventListener("DOMContentLoaded", doload); window.addEventListener("DOMContentLoaded", doload);
iframe.addEventListener("load", function () { iframe.addEventListener("load", function () {
map.set_active_url(iframe.contentWindow.location.href); map.set_active_url(iframe.contentWindow.location.href);
}); });
cats.addEventListener("click", e => {
cats.classList.toggle("expanded");
})

36
index.html
View File

@@ -8,36 +8,26 @@
<link rel="stylesheet" type="text/css" href="style.css"> <link rel="stylesheet" type="text/css" href="style.css">
</head> </head>
<body> <body>
<div id="vbody">
<div id="page"> <div id="page">
<svg id="svg"></svg> <svg id="svg"></svg>
<pre id="debug"></pre> <div id="cats">
<div id="bottompane">
<div id="bottompage">
<div id="menubar">
<span id="menu"><img src="img/symhamburger.png"></span>
<input id="searchinput" type="input" placeholder="école de recherche graphique" />
<label for="searchinput" id="search"><img src="img/symsearch.png"></label>
<img src="img/symup.png" />
</div>
<div id="wikiframediv">
<iframe id="wikiframe" src="/mw"></iframe>
</div>
</div>
</div>
<div id="cats" class="expanded">
<div class="ocontents">
<div class="contents">
<div class="head">Liste des catégories</div>
<div class="body"></div> <div class="body"></div>
<div class="foot"><input id="allcats" type="checkbox"><label for="allcats">Afficher tous</label></div> <div class="placeholder">?</div>
<hr>
<div class="history"><input id="history" type="checkbox"><label for="history">Histoire</div>
</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">-</a>
</div>
</div> </div>
<div class="botright"><div class="thumb"></div></div>
</div> </div>
<div id="wikiframediv">
<iframe id="wikiframe" src="/mw"></iframe>
</div>
</div>
</body> </body>
<script src="dist/custom_scroller_menu.js"></script>
<script type="text/javascript" src="dist/app.js"></script> <script type="text/javascript" src="dist/app.js"></script>
<script src="dist/index.js"></script> <script src="dist/index.js"></script>
</html> </html>

141
splitscreen.css
View File

@@ -192,56 +192,39 @@ use {
/* Categories */ /* Categories */
#cats .body {
display: none;
}
#cats .placeholder {
min-width: 100%;
text-align: center;
color: gray;
font-weight: bold;
font-size: 12px;
}
#cats.expanded .body {
display: block;
}
#cats.expanded .placeholder {
display: none;
}
#cats { #cats {
/*display: none;*/ /*display: none;*/
position: absolute; position: absolute;
left: 10px; left: 10px;
bottom: 30px; bottom: 10px;
background: #FFFFFFFF; background: #FFFFFFFF;
border-radius: 24px; border-radius: 24px;
padding: 10px; padding: 10px;
font-size: 12px; font-size: 12px;
} min-width: 16px;
#cats .head { min-height: 16px;
display: none; box-shadow: 0 3px 3px 3px rgba(255, 0, 255, 0.44);
}
/* showall class */
#cats div.cat {
display: none;
}
#cats div.cat span.spacing {
display: none;
}
#cats div.cat.icon {
display: block;
background-position: center center;
}
#cats.showall div.cat {
display: block;
}
#cats.showall div.cat span.spacing {
display: inline;
} }
#cats .contents {
overflow: auto;
}
#cats .contents .scroll {}
#cats .botright {
position: absolute;
right: 0;
bottom: 0;
}
#cats .botright .thumb {
position: absolute;
left: 0;
bottom: 0;
width: 32px;
height: 32px;
background: #FFFFFFDD;
}
#cats div.cat span.icon { #cats div.cat span.icon {
position: relative; position: relative;
top: 4px; top: 4px;
@@ -250,6 +233,7 @@ use {
height: 18px; height: 18px;
background-repeat: no-repeat; background-repeat: no-repeat;
margin-right: 4px; margin-right: 4px;
background-position: center center;
} }
#cats div.cat span.count { #cats div.cat span.count {
display: none; display: none;
@@ -304,3 +288,80 @@ iframe form.header {
a.talk { a.talk {
display:none; display:none;
} }
/* control positioning */
.leaflet-control {
position: relative;
z-index: 800;
pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
pointer-events: auto;
font-size: 12px;
}
.leaflet-control {
float: left;
clear: both;
}
/* general toolbar styles */
.leaflet-bar {
box-shadow: 0 1px 5px rgba(0,0,0,0.65);
}
.leaflet-bar a,
.leaflet-bar a:hover {
background-color: #fff;
border-bottom: 1px solid #ccc;
width: 26px;
height: 26px;
line-height: 26px;
display: block;
text-align: center;
text-decoration: none;
color: black;
}
.leaflet-bar a,
.leaflet-control-layers-toggle {
background-position: 50% 50%;
background-repeat: no-repeat;
display: block;
}
.leaflet-bar a:hover {
background-color: #f4f4f4;
}
.leaflet-bar a:first-child {
}
.leaflet-bar a:last-child {
border-bottom: none;
}
.leaflet-bar a.leaflet-disabled {
cursor: default;
background-color: #f4f4f4;
color: #bbb;
}
/* zoom controls */
.zoom-controls {
position: absolute;
left: 10px;
top: 10px;
z-index: 10000;
}
.leaflet-control-zoom-in,
.leaflet-control-zoom-out {
font: Combined;
font-size: 24px;
line-height: 20px;
text-indent: 1px;
box-shadow: 0 3px 3px 3px rgba(255, 0, 255, 0.44);
background-color: #ffffff;
}

18
splitscreen.html
View File

@@ -10,18 +10,22 @@
<body> <body>
<div id="page"> <div id="page">
<svg id="svg"></svg> <svg id="svg"></svg>
<div id="cats" class="expanded"> <div id="cats">
<div class="contents"> <div class="body"></div>
<div class="head">Liste des catégories</div> <div class="placeholder">?</div>
<div class="body"></div>
<hr>
<div class="history"><input id="history" type="checkbox"><label for="history">Histoire</div>
</div>
</div> </div>
</div> </div>
<div id="wikiframediv"> <div id="wikiframediv">
<iframe id="wikiframe" src="/mw"></iframe> <iframe id="wikiframe" src="/mw"></iframe>
</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">-</a>
</div>
</div>
</body> </body>
<script type="text/javascript" src="dist/app.js"></script> <script type="text/javascript" src="dist/app.js"></script>
<script src="dist/index.js"></script> <script src="dist/index.js"></script>

64
src/wikimap.js
View File

@@ -1,7 +1,7 @@
import { event, select, selectAll} from 'd3-selection'; import { event, select, selectAll} from 'd3-selection';
import { values, set, map } from 'd3-collection'; import { values, set, map } from 'd3-collection';
import { drag } from 'd3-drag'; import { drag } from 'd3-drag';
import { zoom } from 'd3-zoom'; import { zoom, zoomIdentity, zoomTransform } from 'd3-zoom';
import { forceSimulation, forceLink, forceManyBody, forceCenter, forceX, forceY, forceRadial } from 'd3-force'; import { forceSimulation, forceLink, forceManyBody, forceCenter, forceX, forceY, forceRadial } from 'd3-force';
import { Wiki, Page } from './wiki.js'; import { Wiki, Page } from './wiki.js';
import EventEmitter from 'eventemitter3'; import EventEmitter from 'eventemitter3';
@@ -15,8 +15,8 @@ export class Map {
var width = 600, var width = 600,
height = 600; height = 600;
this.zoom_level = opts.zoom || 1.5;
this.apiurl = opts.apiurl; this.apiurl = opts.apiurl;
this.init_svg(opts.svg);
this.categorylabel = opts.categorylabel || "Category"; this.categorylabel = opts.categorylabel || "Category";
this.symbols_src = opts.symbols; this.symbols_src = opts.symbols;
this.categorydiv = select(opts.categorydiv); this.categorydiv = select(opts.categorydiv);
@@ -29,6 +29,7 @@ export class Map {
// this.net = new ForceNet({}); // this.net = new ForceNet({});
// this.net.on("nodeclick", this.nodeclick.bind(this)); // this.net.on("nodeclick", this.nodeclick.bind(this));
this.svg = null; this.svg = null;
this.init_svg(opts.svg);
this.historylinks = {}; this.historylinks = {};
this.links = null; this.links = null;
this.highlight_category = null; this.highlight_category = null;
@@ -114,9 +115,9 @@ export class Map {
this.rect = this.svg.append("rect") this.rect = this.svg.append("rect")
.attr("width", 1000) .attr("width", 1000)
.attr("height", 1000) .attr("height", 1000)
.style("fill", "none") .style("fill", "none");
.style("pointer-events", "all") // .style("pointer-events", "all")
.call(this.zoom); // .call(this.zoom);
this.content = this.svg.append("g") this.content = this.svg.append("g")
.attr("id", "content"), .attr("id", "content"),
this.linksg = this.content.append("g") this.linksg = this.content.append("g")
@@ -205,11 +206,17 @@ export class Map {
this.categorydiv this.categorydiv
.selectAll("div.cat") .selectAll("div.cat")
.classed("highlight", d=> d.page ? d.page.highlight : false); .classed("highlight", d=> d.page ? d.page.highlight : false);
var data = {nodes: this.wiki.get_nodes(), links: values(this.all_links_by_key)}; var data = {nodes: this.get_nodes(), links: values(this.all_links_by_key)};
this.update_node_counts() this.update_node_counts()
this.update_graph(data); this.update_graph(data);
} }
get_nodes () {
var nodes = this.wiki.get_nodes();
nodes = nodes.filter(d => d.linked || d.active || d.active2 || d.highlight);
return nodes;
}
async set_active_page (page) { async set_active_page (page) {
console.log("wikimap: set_active_page:", page.title); console.log("wikimap: set_active_page:", page.title);
if (page === this.active_page) { if (page === this.active_page) {
@@ -276,9 +283,12 @@ export class Map {
this.active_page.active = true; this.active_page.active = true;
this.linked_nodes_set_active(this.active_page, true); this.linked_nodes_set_active(this.active_page, true);
this.events.emit("page", this.active_page); setTimeout(() => {
this.centerOnItem(page, 1000);
}, 1000);
var data = {nodes: this.wiki.get_nodes(), links: values(this.all_links_by_key)}; this.events.emit("page", this.active_page);
var data = {nodes: this.get_nodes(), links: values(this.all_links_by_key)};
this.update_node_counts() this.update_node_counts()
this.update_graph(data); this.update_graph(data);
// this.update_nodes(); // this.update_nodes();
@@ -475,6 +485,44 @@ export class Map {
this.simulation.alpha(0.5).restart(); this.simulation.alpha(0.5).restart();
} }
centerOnItem(item, duration) {
var bounds = this.svg.node().getBoundingClientRect();
var curt = zoomTransform(this.rect.node());
console.log("centerOnItem", this.zoom_level, "item", item);
var zoom_level = this.zoom_level ? this.zoom_level : curt.k;
var ITEM_SIZE = 36;
if (item && item.x !== undefined) {
var transform = function () {
return zoomIdentity
.translate(bounds.width / 2, bounds.height / 2)
.scale(zoom_level)
.translate(-item.x, -item.y);
};
if (duration) {
this.rect.transition().duration(duration).call(this.zoom.transform, transform);
} else {
this.rect.call(this.zoom.transform, transform);
}
} else {
console.log("NO ITEM");
var transform = function () {
return zoomIdentity
.scale(1);
};
this.rect.call(this.zoom.transform, transform);
}
}
do_zoom (f, transition) {
this.rect.call(this.zoom.scaleBy, f);
}
zoom_in () {
this.do_zoom(1.25);
}
zoom_out () {
this.do_zoom(1/1.25);
}
} }

303
style.css
View File

@@ -78,17 +78,16 @@ body {
margin: 0; margin: 0;
padding: 0; padding: 0;
background: #f1f2f3; background: #f1f2f3;
/*overflow: hidden;*/ overflow: hidden;
} }
.links line { .links line {
stroke: #aaa; stroke: #aaa;
/*stroke: none;*/ /*stroke: none;*/
} }
.links line.active2 { .links line.active2 {
stroke: red; stroke: magenta;
} }
.links line.history { .links line.history {
@@ -96,11 +95,11 @@ body {
} }
.active { .active {
stroke: red; stroke: magenta;
} }
.category circle { .category circle {
fill: yellow; fill: cyan;
} }
.web circle { .web circle {
@@ -134,11 +133,11 @@ svg g.page {
svg g.page text { svg g.page text {
visibility: hidden; visibility: hidden;
fill: #222; fill: #222;
font: 12px sans-serif; font: 9px sans-serif;
} }
svg g.active text { svg g.active text {
visibility: visible; /*visibility: visible;*/
} }
svg g.mouse text { svg g.mouse text {
@@ -150,85 +149,81 @@ use {
stroke: black; stroke: black;
} }
.highlight use {
fill: #FFF;
stroke: cyan;
}
.active use {
/* animation-transform: 2;*/
animation-duration: 2s;
animation-name: pulse;
animation-iteration-count: infinite;
}
@keyframes pulse {
0% {
transform: scale(1, 1);
}
50% {
transform: scale(1.5, 1.5);
}
100% {
transform: scale(1, 1);
}
}
.active use { .active use {
fill: #FFF; fill: #FFF;
stroke: red; stroke: magenta;
} }
.active text { .active text {
stroke: black; stroke: none;
} }
.active2 use { .active2 use {
fill: #FFF; fill: #FFF;
stroke: red; stroke: magenta;
} }
.highlight use {
fill: #FFF;
stroke: orange;
}
/* Categories */ /* Categories */
#cats .head {
#cats .body {
display: none; display: none;
} }
#cats .placeholder {
min-width: 100%;
text-align: center;
color: gray;
font-weight: bold;
font-size: 12px;
}
#cats.expanded .body {
display: block;
}
#cats.expanded .placeholder {
display: none;
}
#cats { #cats {
display: none; /*display: none;*/
position: absolute; position: absolute;
left: 10px; left: 10px;
bottom: 10px; bottom: 10px;
}
#cats .ocontents {
background: #FFFFFFFF; background: #FFFFFFFF;
display: none; border-radius: 24px;
border-radius: 30px; padding: 10px;
/*padding: 5px;*/ font-size: 12px;
/*box-sizing: border-box;*/ min-width: 16px;
} min-height: 16px;
#cats.expanded .ocontents { box-shadow: 0 3px 3px 3px rgba(255, 0, 255, 0.44);
display: block;
} }
/* showall class */
#cats div.cat {
display: none;
}
#cats div.cat span.spacing {
display: none;
}
#cats div.cat.icon {
display: block;
}
#cats.showall div.cat {
display: block;
}
#cats.showall div.cat span.spacing {
display: inline;
}
#cats .contents {
overflow: auto;
height: 50vh;
min-width: 300px;
}
#cats .contents .scroll {}
#cats .botright {
position: absolute;
right: 0;
bottom: 0;
}
#cats .botright .thumb {
position: absolute;
left: 0;
bottom: 0;
width: 32px;
height: 32px;
background: #FFFFFFDD;
}
#cats div.cat span.icon { #cats div.cat span.icon {
position: relative; position: relative;
top: 4px; top: 4px;
@@ -237,8 +232,10 @@ use {
height: 18px; height: 18px;
background-repeat: no-repeat; background-repeat: no-repeat;
margin-right: 4px; margin-right: 4px;
background-position: center center;
} }
#cats div.cat span.count { #cats div.cat span.count {
display: none;
padding: 0px 3px; padding: 0px 3px;
background: #DDD; background: #DDD;
color: #444; color: #444;
@@ -249,74 +246,31 @@ use {
color: black; color: black;
text-decoration: none; text-decoration: none;
} }
#cats div.cat.highlight a {
color: cyan;
}
#cats hr {
color: white;
}
#page { #page {
position: absolute; position: absolute;
left: 0; right: 0; top: 0; left: 0; right: 50%;
height: 160vh; top: 0;
text-align: center; bottom: 0;
} }
#page.touched {
background: #444;
}
#bottompane {
position: absolute;
top: 60vh;
left: 0; right: 0;
height: 100vh;
z-index: 2;
}
#bottompane #bottompage {
position: absolute;
left: 0; right: 0;
margin: 0 auto;
max-width: 800px;
background: white;
border: 1px solid #E6E6E6;
border-radius: 10px;
display: inline-block;
width: 100%;
height: 100%;
}
#bottompane #menubar {
height: 48px;
width: 100%;
}
#wikiframediv { #wikiframediv {
position: absolute; position: absolute;
left: 0; top: 48px; left: 50%; top: 0;
right: 0; bottom: 0; right: 0; bottom: 0;
} }
#bottompane iframe { #wikiframediv iframe {
border: none; width: 100%;
width: 100%; height: 100%;
height: 100%; border: none;
} }
#debug {
width: 300px;
font-size: 10px;
height: 8em;
overflow: auto;
position: absolute; left: 10px; top: 10px; z-index:23
}
#searchinput {
min-width: 220px;
font-family: "combinedregular";
font-size: 11px;
}
#menubar {
text-align: center;
}
#menubar img {
position: relative;
top: 10px;
}
/* MEDIAWIKI PAGE */ /* MEDIAWIKI PAGE */
.header-container { .header-container {
@@ -326,9 +280,114 @@ use {
iframe form.header { iframe form.header {
display: none; display: none;
} }
ul#page-actions { /*ul#page-actions {
display: none; display: none;
} }
*/
a.talk { a.talk {
display:none; display:none;
} }
/* control positioning */
.leaflet-control {
position: relative;
z-index: 800;
pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
pointer-events: auto;
font-size: 12px;
}
.leaflet-control {
float: left;
clear: both;
}
/* general toolbar styles */
.leaflet-bar {
box-shadow: 0 1px 5px rgba(0,0,0,0.65);
}
.leaflet-bar a,
.leaflet-bar a:hover {
background-color: #fff;
border-bottom: 1px solid #ccc;
width: 26px;
height: 26px;
line-height: 26px;
display: block;
text-align: center;
text-decoration: none;
color: black;
}
.leaflet-bar a,
.leaflet-control-layers-toggle {
background-position: 50% 50%;
background-repeat: no-repeat;
display: block;
}
.leaflet-bar a:hover {
background-color: #f4f4f4;
}
.leaflet-bar a:first-child {
}
.leaflet-bar a:last-child {
border-bottom: none;
}
.leaflet-bar a.leaflet-disabled {
cursor: default;
background-color: #f4f4f4;
color: #bbb;
}
/* zoom controls */
.zoom-controls {
position: absolute;
left: 10px;
top: 10px;
z-index: 10000;
}
.leaflet-control-zoom-in,
.leaflet-control-zoom-out {
font: Combined;
font-size: 24px;
line-height: 20px;
text-indent: 1px;
box-shadow: 0 3px 3px 3px rgba(255, 0, 255, 0.44);
background-color: #ffffff;
}
@media only screen and (max-width: 600px) {
body {
overflow: auto;
}
#container {
position: absolute;
left: 0; top: 0;
right: 0;
height: 160vh;
}
#page {
position: absolute;
left: 0; top: 0;
height: 60vh;
width: 100vw;
}
#wikiframediv {
position: absolute;
left: 0; top: 60vh;
height: 100vh;
width: 100vw;
}
}