diff --git a/app/scripts/components/eventHandlers.js b/app/scripts/components/eventHandlers.js index 166a744..c4d7c61 100644 --- a/app/scripts/components/eventHandlers.js +++ b/app/scripts/components/eventHandlers.js @@ -9,7 +9,7 @@ $(document).on('scroll', function(e) { var header = $("#page-header"); - if (st > lastScrollTop) { + if (st >= lastScrollTop) { header.addClass('scrolled'); } else { header.removeClass('scrolled'); diff --git a/app/scripts/components/handleData.js b/app/scripts/components/handleData.js index b078020..ff0b5ab 100644 --- a/app/scripts/components/handleData.js +++ b/app/scripts/components/handleData.js @@ -37,6 +37,30 @@ function handleData (data, lang) { document.title = title + " – WikiPadia"; $(window).scrollTop(0); + if ($('#coordinates').length) { + $.getScript('https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.js').done(function() { + $('head').append('') + var geo = $('#coordinates').find('.geo'); + + if (geo.length) { + var latlng = L.latLng( geo.text().split(';')) + + $('body > .container').before('
'); + + var map = L.map('map', { + zoomControl: false, + scrollWheelZoom: false, + zoom: 12, + center: latlng, + attributionControl: false + }); + + var tileLayer = new L.TileLayer('//{s}.tile.stamen.com/{style}/{z}/{x}/{y}.png', { style: 'toner-lines' }); + tileLayer.addTo(map); + } + }); + } + if ($('ul.redirectText').length) { $('ul.redirectText').find('li a').each(function (i, el) { var $link = $(el); diff --git a/app/styles/_app.scss b/app/styles/_app.scss index 6fd20c9..812b1b8 100644 --- a/app/styles/_app.scss +++ b/app/styles/_app.scss @@ -1,8 +1,7 @@ body { - padding: 2em 0 0; - margin: 0 auto; - max-width: 60em; + margin: 0; + padding: 55px 0 0; } .page-header { @@ -194,6 +193,8 @@ fieldset { .container { position: relative; padding: 2em 4em 4em; + max-width: 60em; + margin: 0 auto; } #menu { diff --git a/app/styles/_content.scss b/app/styles/_content.scss index b021a8a..34889d1 100644 --- a/app/styles/_content.scss +++ b/app/styles/_content.scss @@ -7,7 +7,7 @@ html { } #content { - font-size: 1.25em; + font-size: 1.2em; line-height: 1.75em; counter-reset: section; @@ -129,6 +129,28 @@ img { position: static; } +#map { + // position: absolute !important; + height: 400px; + background: transparent; + opacity: 0.1; + + + .container { + margin-top: -400px; + } + + &:before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: linear-gradient(rgba(white, 0), white); + z-index: 100; + } +} + table { &.infobox { display: none; @@ -143,7 +165,7 @@ table { &.geography, &.vcard, &.active { - width: 100% !important; + max-width: 100% !important; margin: 2em auto; display: block; } @@ -159,17 +181,26 @@ table { border: 0 !important; background-color: transparent !important; padding: 0 !important; + + th { + background-color: transparent !important; + } } &.navbox { border: 0; padding: 0; + + th { + background-color: transparent !important; + } } &.wikitable { font-size: 90%; border-spacing: 0; border-collapse: collapse; + border-right: thin solid #ddd; caption { margin: 0 0 .5em; @@ -186,6 +217,21 @@ table { } } +table.wikitable, table.navbox { + overflow-y: hidden; + overflow-x: auto; + display: block; + max-width: 100%; + width: 100% !important; +} + +table.mbox-small { + background: transparent !important; + border: 0 !important; + font-style: italic; +} + + .tleft { float: left; margin-right: 2em; diff --git a/app/styles/_default.scss b/app/styles/_default.scss index b933231..2eeaef6 100644 --- a/app/styles/_default.scss +++ b/app/styles/_default.scss @@ -368,7 +368,7 @@ table.navbox + table.navbox { line-height: 1.5em; caption { - font-size: 125%; + font-size: 90%; font-weight: bold; padding: 0.2em; } diff --git a/app/styles/_themes.scss b/app/styles/_themes.scss index 7565ec0..7fe1e1a 100644 --- a/app/styles/_themes.scss +++ b/app/styles/_themes.scss @@ -13,6 +13,14 @@ html.sans { background: #111; color: #eee; + #map { + opacity: .1; + + &:before { + background: linear-gradient(rgba(#111, 0), #111); + } + } + .radio span { label { background: #333;