other changes
This commit is contained in:
Michael Murtaugh
68
dist/app.js
vendored
68
dist/app.js
vendored
@@ -3156,6 +3156,12 @@ var app = (function (exports) {
|
||||
|
||||
var identity$1 = new Transform(1, 0, 0);
|
||||
|
||||
transform.prototype = Transform.prototype;
|
||||
|
||||
function transform(node) {
|
||||
return node.__zoom || identity$1;
|
||||
}
|
||||
|
||||
function nopropagation$1() {
|
||||
event.stopImmediatePropagation();
|
||||
}
|
||||
@@ -5164,8 +5170,8 @@ var app = (function (exports) {
|
||||
var width = 600,
|
||||
height = 600;
|
||||
|
||||
this.zoom_level = opts.zoom || 1.5;
|
||||
this.apiurl = opts.apiurl;
|
||||
this.init_svg(opts.svg);
|
||||
this.categorylabel = opts.categorylabel || "Category";
|
||||
this.symbols_src = opts.symbols;
|
||||
this.categorydiv = select(opts.categorydiv);
|
||||
@@ -5178,6 +5184,7 @@ var app = (function (exports) {
|
||||
// this.net = new ForceNet({});
|
||||
// this.net.on("nodeclick", this.nodeclick.bind(this));
|
||||
this.svg = null;
|
||||
this.init_svg(opts.svg);
|
||||
this.historylinks = {};
|
||||
this.links = null;
|
||||
this.highlight_category = null;
|
||||
@@ -5263,9 +5270,9 @@ var app = (function (exports) {
|
||||
this.rect = this.svg.append("rect")
|
||||
.attr("width", 1000)
|
||||
.attr("height", 1000)
|
||||
.style("fill", "none")
|
||||
.style("pointer-events", "all")
|
||||
.call(this.zoom);
|
||||
.style("fill", "none");
|
||||
// .style("pointer-events", "all")
|
||||
// .call(this.zoom);
|
||||
this.content = this.svg.append("g")
|
||||
.attr("id", "content"),
|
||||
this.linksg = this.content.append("g")
|
||||
@@ -5354,11 +5361,17 @@ var app = (function (exports) {
|
||||
this.categorydiv
|
||||
.selectAll("div.cat")
|
||||
.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_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) {
|
||||
console.log("wikimap: set_active_page:", page.title);
|
||||
if (page === this.active_page) {
|
||||
@@ -5421,14 +5434,16 @@ var app = (function (exports) {
|
||||
|
||||
}
|
||||
|
||||
|
||||
this.active_page = page;
|
||||
this.active_page.active = 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_graph(data);
|
||||
// this.update_nodes();
|
||||
@@ -5623,7 +5638,44 @@ var app = (function (exports) {
|
||||
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;
|
||||
|
||||
49
dist/index.js
vendored
49
dist/index.js
vendored
@@ -1,17 +1,17 @@
|
||||
|
||||
var svg = document.querySelector("#svg"),
|
||||
page = document.querySelector("#page"),
|
||||
iframe = document.querySelector("iframe#wikiframe"),
|
||||
cats = document.querySelector("#cats"),
|
||||
cats_contents = document.querySelector("#cats .body"),
|
||||
// cats_thumb = document.querySelector("#cats .thumb"),
|
||||
allcatscb = document.querySelector("input#allcats"),
|
||||
historycb = document.querySelector("input#history"),
|
||||
// current_title = null,
|
||||
// loaded = false,
|
||||
wikibaseurl,
|
||||
wikibasepat;
|
||||
|
||||
map = new app.Map({
|
||||
apiurl: "/mw/api.php",
|
||||
symbols: "src/legend.json",
|
||||
svg: "#svg",
|
||||
categorylabel: "Catégorie",
|
||||
categorydiv: "#cats .body",
|
||||
zoom: 2.0
|
||||
}),
|
||||
zoom_in = document.querySelector(".leaflet-control-zoom-in"),
|
||||
zoom_out = document.querySelector(".leaflet-control-zoom-out"),
|
||||
cats = document.querySelector("#cats");
|
||||
|
||||
window.addEventListener("resize", resize);
|
||||
function resize() {
|
||||
@@ -28,29 +28,14 @@ function resize() {
|
||||
// Match size of parent
|
||||
svg.setAttribute("width", page.clientWidth);
|
||||
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 () {
|
||||
resize();
|
||||
console.log("map.init");
|
||||
await map.init();
|
||||
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) {
|
||||
// console.log("map.page", page.title);
|
||||
var url = page.url();
|
||||
@@ -59,8 +44,18 @@ async function doload () {
|
||||
iframe.src = url;
|
||||
}
|
||||
})
|
||||
zoom_in.addEventListener("click", (e) => {
|
||||
map.zoom_in();
|
||||
})
|
||||
zoom_out.addEventListener("click", (e) => {
|
||||
map.zoom_out();
|
||||
})
|
||||
}
|
||||
window.addEventListener("DOMContentLoaded", doload);
|
||||
iframe.addEventListener("load", function () {
|
||||
map.set_active_url(iframe.contentWindow.location.href);
|
||||
});
|
||||
|
||||
cats.addEventListener("click", e => {
|
||||
cats.classList.toggle("expanded");
|
||||
})
|
||||
34
index.html
34
index.html
@@ -8,36 +8,26 @@
|
||||
<link rel="stylesheet" type="text/css" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="vbody">
|
||||
<div id="page">
|
||||
<svg id="svg"></svg>
|
||||
<pre id="debug"></pre>
|
||||
<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 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">-</a>
|
||||
</div>
|
||||
</div>
|
||||
</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="foot"><input id="allcats" type="checkbox"><label for="allcats">Afficher tous</label></div>
|
||||
<hr>
|
||||
<div class="history"><input id="history" type="checkbox"><label for="history">Histoire</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="botright"><div class="thumb"></div></div>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
<script src="dist/custom_scroller_menu.js"></script>
|
||||
<script type="text/javascript" src="dist/app.js"></script>
|
||||
<script src="dist/index.js"></script>
|
||||
</html>
|
||||
|
||||
141
splitscreen.css
141
splitscreen.css
@@ -192,56 +192,39 @@ use {
|
||||
|
||||
/* 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 {
|
||||
/*display: none;*/
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
bottom: 30px;
|
||||
bottom: 10px;
|
||||
background: #FFFFFFFF;
|
||||
border-radius: 24px;
|
||||
padding: 10px;
|
||||
font-size: 12px;
|
||||
}
|
||||
#cats .head {
|
||||
display: none;
|
||||
}
|
||||
/* 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;
|
||||
min-width: 16px;
|
||||
min-height: 16px;
|
||||
box-shadow: 0 3px 3px 3px rgba(255, 0, 255, 0.44);
|
||||
}
|
||||
|
||||
#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 {
|
||||
position: relative;
|
||||
top: 4px;
|
||||
@@ -250,6 +233,7 @@ use {
|
||||
height: 18px;
|
||||
background-repeat: no-repeat;
|
||||
margin-right: 4px;
|
||||
background-position: center center;
|
||||
}
|
||||
#cats div.cat span.count {
|
||||
display: none;
|
||||
@@ -304,3 +288,80 @@ iframe form.header {
|
||||
a.talk {
|
||||
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;
|
||||
}
|
||||
|
||||
|
||||
@@ -10,18 +10,22 @@
|
||||
<body>
|
||||
<div id="page">
|
||||
<svg id="svg"></svg>
|
||||
<div id="cats" class="expanded">
|
||||
<div class="contents">
|
||||
<div class="head">Liste des catégories</div>
|
||||
<div id="cats">
|
||||
<div class="body"></div>
|
||||
<hr>
|
||||
<div class="history"><input id="history" type="checkbox"><label for="history">Histoire</div>
|
||||
</div>
|
||||
<div class="placeholder">?</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="wikiframediv">
|
||||
<iframe id="wikiframe" src="/mw"></iframe>
|
||||
</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>
|
||||
<script type="text/javascript" src="dist/app.js"></script>
|
||||
<script src="dist/index.js"></script>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import { event, select, selectAll} from 'd3-selection';
|
||||
import { values, set, map } from 'd3-collection';
|
||||
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 { Wiki, Page } from './wiki.js';
|
||||
import EventEmitter from 'eventemitter3';
|
||||
@@ -15,8 +15,8 @@ export class Map {
|
||||
var width = 600,
|
||||
height = 600;
|
||||
|
||||
this.zoom_level = opts.zoom || 1.5;
|
||||
this.apiurl = opts.apiurl;
|
||||
this.init_svg(opts.svg);
|
||||
this.categorylabel = opts.categorylabel || "Category";
|
||||
this.symbols_src = opts.symbols;
|
||||
this.categorydiv = select(opts.categorydiv);
|
||||
@@ -29,6 +29,7 @@ export class Map {
|
||||
// this.net = new ForceNet({});
|
||||
// this.net.on("nodeclick", this.nodeclick.bind(this));
|
||||
this.svg = null;
|
||||
this.init_svg(opts.svg);
|
||||
this.historylinks = {};
|
||||
this.links = null;
|
||||
this.highlight_category = null;
|
||||
@@ -114,9 +115,9 @@ export class Map {
|
||||
this.rect = this.svg.append("rect")
|
||||
.attr("width", 1000)
|
||||
.attr("height", 1000)
|
||||
.style("fill", "none")
|
||||
.style("pointer-events", "all")
|
||||
.call(this.zoom);
|
||||
.style("fill", "none");
|
||||
// .style("pointer-events", "all")
|
||||
// .call(this.zoom);
|
||||
this.content = this.svg.append("g")
|
||||
.attr("id", "content"),
|
||||
this.linksg = this.content.append("g")
|
||||
@@ -205,11 +206,17 @@ export class Map {
|
||||
this.categorydiv
|
||||
.selectAll("div.cat")
|
||||
.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_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) {
|
||||
console.log("wikimap: set_active_page:", page.title);
|
||||
if (page === this.active_page) {
|
||||
@@ -276,9 +283,12 @@ export class Map {
|
||||
this.active_page.active = 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_graph(data);
|
||||
// this.update_nodes();
|
||||
@@ -475,6 +485,44 @@ export class Map {
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
297
style.css
297
style.css
@@ -78,17 +78,16 @@ body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: #f1f2f3;
|
||||
/*overflow: hidden;*/
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
||||
.links line {
|
||||
stroke: #aaa;
|
||||
/*stroke: none;*/
|
||||
}
|
||||
|
||||
.links line.active2 {
|
||||
stroke: red;
|
||||
stroke: magenta;
|
||||
}
|
||||
|
||||
.links line.history {
|
||||
@@ -96,11 +95,11 @@ body {
|
||||
}
|
||||
|
||||
.active {
|
||||
stroke: red;
|
||||
stroke: magenta;
|
||||
}
|
||||
|
||||
.category circle {
|
||||
fill: yellow;
|
||||
fill: cyan;
|
||||
}
|
||||
|
||||
.web circle {
|
||||
@@ -134,11 +133,11 @@ svg g.page {
|
||||
svg g.page text {
|
||||
visibility: hidden;
|
||||
fill: #222;
|
||||
font: 12px sans-serif;
|
||||
font: 9px sans-serif;
|
||||
}
|
||||
|
||||
svg g.active text {
|
||||
visibility: visible;
|
||||
/*visibility: visible;*/
|
||||
}
|
||||
|
||||
svg g.mouse text {
|
||||
@@ -150,85 +149,81 @@ use {
|
||||
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 {
|
||||
fill: #FFF;
|
||||
stroke: red;
|
||||
stroke: magenta;
|
||||
}
|
||||
|
||||
.active text {
|
||||
stroke: black;
|
||||
stroke: none;
|
||||
}
|
||||
|
||||
.active2 use {
|
||||
fill: #FFF;
|
||||
stroke: red;
|
||||
stroke: magenta;
|
||||
}
|
||||
|
||||
.highlight use {
|
||||
fill: #FFF;
|
||||
stroke: orange;
|
||||
}
|
||||
|
||||
|
||||
/* Categories */
|
||||
#cats .head {
|
||||
|
||||
#cats .body {
|
||||
display: none;
|
||||
}
|
||||
#cats {
|
||||
|
||||
#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 {
|
||||
/*display: none;*/
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
bottom: 10px;
|
||||
}
|
||||
#cats .ocontents {
|
||||
background: #FFFFFFFF;
|
||||
display: none;
|
||||
border-radius: 30px;
|
||||
/*padding: 5px;*/
|
||||
/*box-sizing: border-box;*/
|
||||
}
|
||||
#cats.expanded .ocontents {
|
||||
display: block;
|
||||
border-radius: 24px;
|
||||
padding: 10px;
|
||||
font-size: 12px;
|
||||
min-width: 16px;
|
||||
min-height: 16px;
|
||||
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;
|
||||
}
|
||||
#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 {
|
||||
position: relative;
|
||||
top: 4px;
|
||||
@@ -237,8 +232,10 @@ use {
|
||||
height: 18px;
|
||||
background-repeat: no-repeat;
|
||||
margin-right: 4px;
|
||||
background-position: center center;
|
||||
}
|
||||
#cats div.cat span.count {
|
||||
display: none;
|
||||
padding: 0px 3px;
|
||||
background: #DDD;
|
||||
color: #444;
|
||||
@@ -249,74 +246,31 @@ use {
|
||||
color: black;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
|
||||
#cats div.cat.highlight a {
|
||||
color: cyan;
|
||||
}
|
||||
#cats hr {
|
||||
color: white;
|
||||
}
|
||||
|
||||
|
||||
#page {
|
||||
position: absolute;
|
||||
left: 0; right: 0; top: 0;
|
||||
height: 160vh;
|
||||
text-align: center;
|
||||
left: 0; right: 50%;
|
||||
top: 0;
|
||||
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 {
|
||||
position: absolute;
|
||||
left: 0; top: 48px;
|
||||
left: 50%; top: 0;
|
||||
right: 0; bottom: 0;
|
||||
}
|
||||
#bottompane iframe {
|
||||
border: none;
|
||||
#wikiframediv iframe {
|
||||
width: 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 */
|
||||
.header-container {
|
||||
@@ -326,9 +280,114 @@ use {
|
||||
iframe form.header {
|
||||
display: none;
|
||||
}
|
||||
ul#page-actions {
|
||||
/*ul#page-actions {
|
||||
display: none;
|
||||
}
|
||||
*/
|
||||
a.talk {
|
||||
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;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user