From 7c0bdce8821a875b336f30429c3604869fe3dd2a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Stephan=20B=C3=B6sch-Plepelits?= Date: Sat, 2 Jan 2021 22:26:57 +0100 Subject: [PATCH] ObjectDisplay: styling --- src/ObjectDisplay.js | 2 + style.css | 178 +++++++++++++++++-------------------------- 2 files changed, 72 insertions(+), 108 deletions(-) diff --git a/src/ObjectDisplay.js b/src/ObjectDisplay.js index fe4e4356..129dd2dd 100644 --- a/src/ObjectDisplay.js +++ b/src/ObjectDisplay.js @@ -16,6 +16,8 @@ module.exports = class ObjectDisplay { var k dom.innerHTML = '' + dom.classList.add('objectDisplay') + dom.classList.add('objectDisplay-' + displayId) let header = document.createElement('div') header.className = 'header' diff --git a/style.css b/style.css index 833ad436..29a572be 100644 --- a/style.css +++ b/style.css @@ -112,21 +112,22 @@ a:active { } #content.details > #contentDetails { display: block; + margin-left: -10px; + margin-right: -10px; } #content.options > #contentOptions { display: block; } -#contentDetails > .header > .title { - border-bottom: 1px solid #3f3f3f; - margin-bottom: 1em; - margin-top: 0.5em; +.objectDisplay > .header { + padding: 0.5em 10px; } -#contentDetails > .header > .title { +.objectDisplay > .header > .title { font-size: 1.5em; font-weight: normal; + margin: 0; } -#contentDetails > .header > .description { +.objectDisplay > .header > .description { display: block; font-style: italic; color: #7f7f7f; @@ -134,9 +135,55 @@ a:active { font-weight: normal; } +.objectDisplay.hasImage .images { + display: flex; + justify-content: center; + align-items: center; + flex-direction: row; +} +.objectDisplay.hasImage .images .imageWrapper { + display: flex; + align-items: center; + justify-content: center; + height: 100%; +} +.objectDisplay-popup.hasImage .images .imageWrapper { + max-height: 12em; +} +.objectDisplay-details.hasImage .images .imageWrapper { + height: 200px; +} +.objectDisplay .images .imageWrapper img { + max-width: 100%; + border-radius: 6px; + display: block; +} +.objectDisplay-popup .images .imageWrapper img { + max-height: 12em; +} +.objectDisplay-details .images .imageWrapper img { + max-height: 200px; +} + +.objectDisplay .block { + border-top: 1px solid #afafaf; + padding: 0.5em 10px; +} +.objectDisplay .block > h3 { + margin-top: 0; + margin-bottom: 0.25em; + border: none; +} +.objectDisplay .block.empty { + border-top: none; + padding: 0 0; +} /* Popups */ -.leaflet-popup-content ul.popup-footer li { +.objectDisplay ul.footer { + padding-left: 0; +} +.objectDisplay ul.footer li { display: inline-block; list-style: none; padding-right: 1em; @@ -351,11 +398,10 @@ a:active { font-family: "Helvetica Neue", "Arial", "Helvetica", sans-serif; line-height: 1.4; } -#content h1, -.leaflet-popup-content > h1 { +#content h1 { margin: 0; } -#contentDetails a { +.objectDisplay a { color: #0078A8; } @@ -376,70 +422,27 @@ a:active { margin: 0; overflow: auto; } -.leaflet-popup-content > .header { - border-top-left-radius: 12px; - border-top-right-radius: 12px; - padding: 1em 1em 0 1em; -} -.leaflet-popup-content.hasImage > .header, -.leaflet-popup-content.hasBody > .header { - padding-bottom: 0.5em; - margin-bottom: 0.5em; - border-bottom: 1px solid #afafaf; -} -.leaflet-popup-content > .header::after { - content: ''; - clear: both; - display: table; -} -.leaflet-popup-content > .popupBody { - padding: 0 1em; -} -.leaflet-popup-content > .popup-footer { - padding: 0.5em 1em 0.5em 1em; - border-top: 1px solid #afafaf; - margin-top: 0.5em; -} -.leaflet-popup-content .header .description { - display: block; - font-style: italic; - color: #7f7f7f; - font-size: 1.5em; - font-weight: normal; -} -.leaflet-popup-content .header .title { - font-size: 1.5em; - font-weight: normal; -} -.leaflet-popup-content .header .details { - float: right; - max-width: 50%; - text-align: right; - color: #7f7f7f; - word-wrap: break-word; -} - .body ul, -.leaflet-popup-content ul { +.objectDisplay ul { margin: 0; padding-left: 20px; } .body ul > li, -.leaflet-popup-content ul > li { +.objectDisplay ul > li { position: relative; } .body ul > li.hasSymbol, -.leaflet-popup-content ul > li.hasSymbol { +.objectDisplay ul > li.hasSymbol { list-style: none; } .body ul > li.hasSymbol > i, -.leaflet-popup-content ul > li.hasSymbol > i, +.objectDisplay ul > li.hasSymbol > i, .body ul > li.hasSymbol > .symbol, -.leaflet-popup-content ul > li.hasSymbol > .symbol, +.objectDisplay ul > li.hasSymbol > .symbol, .body ul > li.hasSymbol > img, -.leaflet-popup-content ul > li.hasSymbol > img, +.objectDisplay ul > li.hasSymbol > img, .body ul > li.hasSymbol > span > svg, -.leaflet-popup-content ul > li.hasSymbol > span > svg { +.objectDisplay ul > li.hasSymbol > span > svg { position: absolute; margin-left: -20px; padding-top: 2px; @@ -447,14 +450,14 @@ a:active { text-align: center; } .body ul > li > .key, -.leaflet-popup-content ul > li > .key { +.objectDisplay ul > li > .key { font-weight: bold; } -#contentDetails div > .loadingIndicator { +.objectDisplay div > .loadingIndicator { display: none; } -#contentDetails div.loading > .loadingIndicator { +.objectDisplay div.loading > .loadingIndicator { float: right; display: block; } @@ -476,12 +479,12 @@ a:active { text-align: justify; margin-bottom: 0.5em; } -#contentDetails h3 { +.objectDisplay h3 { border-bottom: 1px solid black; clear: both; text-align: left; } -#contentDetails h4 { +.objectDisplay h4 { clear: both; text-decoration: underline; font-weight: bold; @@ -489,43 +492,6 @@ a:active { .wikipedia .reference { display: none; } -.leaflet-popup-content.hasImage .images { - display: flex; - justify-content: center; - flex-direction: row; -} -.leaflet-popup-content.hasImage.hasBody .images { - border-bottom: 1px solid #afafaf; - padding-bottom: 0.5em; - margin-bottom: 0.5em; -} -.leaflet-popup-content.hasImage .images .imageWrapper { - margin: 0 1em 0 1em; - max-height: 12.5em; -} -.leaflet-popup-content.hasImage .images img { - max-width: 100%; - max-height: 12.5em; - border-radius: 6px; - display: block; -} - -#contentDetails .images { -} -#contentDetails .images .imageWrapper { - text-align: center; - width: 100%; - height: 200px; - position: relative; -} -#contentDetails .images .imageWrapper img { - max-width: 100%; - max-height: 100%; - position: absolute; - top: 0; bottom: 0; left: 0; right: 0; - margin: auto; - border-radius: 6px; -} .info .sign, .overpass-layer-icon .sign { @@ -542,7 +508,7 @@ a:active { display: table; } -#contentDetails ul.overpass-layer-list, +.objectDisplay .body ul.overpass-layer-list, ul.overpass-layer-list { padding-left: 0; } @@ -560,7 +526,7 @@ ul.overpass-layer-list > li:hover, ul.overpass-layer-list > li.selected { background: #cfcfcf !important; } -#contentDetails ul.overpass-layer-list > li a, +.objectDisplay ul.overpass-layer-list > li a, ul.overpass-layer-list > li a { color: #000000; } @@ -617,10 +583,6 @@ ul.overpass-layer-list > li > a > .content > .details { text-align: right; } -.leaflet-popup-content h1 .title { - font-style: italic; -} - .leaflet-popup-content-wrapper { overflow: hidden; }