From 9173dbeeb4d6f8ee8071390f57047d6e5daa577d Mon Sep 17 00:00:00 2001 From: JoBCB Date: Thu, 19 Nov 2020 20:39:27 +0000 Subject: [PATCH] artwork layout --- static/css/style.css | 189 ++++++++++++++++++++++++++++++++++++----- templates/artwork.html | 38 ++++----- 2 files changed, 185 insertions(+), 42 deletions(-) diff --git a/static/css/style.css b/static/css/style.css index 785fc8b..86e0c17 100644 --- a/static/css/style.css +++ b/static/css/style.css @@ -206,9 +206,18 @@ img.artwork-mockuppage{ left: 0; } .soon-nofix { - margin: 10vmin 80px; + margin: 80px 80px; width: 100%; } +@media screen and (min-width: 1920px) { + .soon-nofix + #footer { + position: fixed; + } +} + +br{ + display: none; +} /************ LAYOUT ************/ :root { --black: #000000; @@ -599,24 +608,24 @@ tbody tr th a{ } .idnumber { padding: 16px 0px 16px 8vw; - min-width: 56px; - max-width: 128px; /*56px * 2 + 16*/ + width: 10%; +/*min-width: 56px; + max-width: 128px; */ +} +.label { + width: 20%; } .label a { font-family: Roboto Condensed Bold, sans-serif; font-weight: bold; - min-width: 128px; - max-width: 272px;/*56px * 4 + 16 * 3*/ color: #000000; } .altaliases { - min-width: 128px; - max-width: 272px;/*56px * 4 + 16 * 3*/ + width: 20%; } .description { padding: 16px 8vw 16px 0px; - min-width: 128px; - max-width: 560px;/*56px * 8 + 16 * 7*/ + width: 50%; } .idnumber, .label, .altaliases, .description{ vertical-align: top;} @@ -785,9 +794,10 @@ div#home-top-div{ padding: 0vw 8vw; display: grid; - row-gap: 0rem; + row-gap: 2rem; column-gap: 1rem; grid-template-columns: repeat(18, 1fr); + grid-template-rows: min-content auto; } .heading_A { font-family: Roboto Condensed; @@ -804,12 +814,14 @@ div#home-top-div{ #home-top-div .heading_A { position: relative; /*max-width: 634px;*/ - z-index: 99; - - grid-column-start: 2; + z-index: 1000; /*99*/ + grid-column-start: 1; grid-column-end: 10; grid-row-start: 1; grid-row-end: 1; + align-self: center; + max-width: 800px; + margin-top: 6vw; } #home-top-div p { margin-bottom: 0px; @@ -826,18 +838,18 @@ div#home-top-div{ /*width: 50%;*/ z-index: 99; grid-column-start: 9; - grid-column-end: 18; + grid-column-end: 17; grid-row-start: 1; grid-row-end: 3; align-self: end; margin-bottom: 2vw; } #home-top-div #wrapper-bt{ - margin: 36px 26px 0px 0vw; /*8vmin*/ + /* margin: 36px 26px 0px 0vw; 8vmin*/ /*width: 50%;*/ z-index: 99; - grid-column-start: 2; - grid-column-end: 8; + grid-column-start: 1; + grid-column-end: 9; grid-row-start: 2; grid-row-end: 2; } @@ -989,7 +1001,7 @@ div#home-top-div{ line-height: normal; letter-spacing: 1.5px; color: var(--blue-blue); - display: flex; + display: none; /*flex*/ flex-direction: row; justify-content: right; width: 96%; @@ -1378,14 +1390,21 @@ div.browsebycategory-categories:hover { font-style: normal; letter-spacing: normal; color: var(--black); - margin: 20px 8vw 30px 8vw; + margin: 20px 8vw 0px 8vw; } .artwork-nav { - display: flex; +/* display: flex; flex-direction: row; width: 100%; - justify-content: space-evenly; + justify-content: space-evenly;*/ + width: 100%; + display: grid; + row-gap: 0rem; + margin: 30px 0px; + padding-bottom: 2rem; + column-gap: 1rem; + grid-template-columns: repeat(18, 1fr); border-bottom: 3px solid #000; } @@ -1401,6 +1420,45 @@ div.browsebycategory-categories:hover { color: var(--brown-grey); } +.artwork-nav-label-about { + grid-column-start: 4; + grid-column-end: 7; + grid-row-start: 1; + grid-row-end: 1; +} + +.artwork-nav-label-about:before { + content: ""; + position: absolute; + z-index: -1; + top: 0; + bottom: 0; + border-left: 3px solid blue; + transform: translate(90%); + height: 45px; + max-width: 2px; + margin-top: 410px; + left: 21.5%; +} +.artwork-nav-label-record:before { + content: ""; + position: absolute; + z-index: -1; + top: 0; + bottom: 0; + border-left: 3px solid var(--brown-grey); + transform: translate(90%); + height: 45px; + max-width: 2px; + margin-top: 410px; + left: 44%; +} +.artwork-nav-label-record { + grid-column-start: 8; + grid-column-end: 11; + grid-row-start: 1; + grid-row-end: 1; +} .artwork-nav-label .det-record:after { display: inline-block; content: ' '; @@ -1472,10 +1530,14 @@ div.browsebycategory-categories:hover { grid-row-start: 2; grid-row-end: 2; } +.artwork-rightcolumn-top { + margin: 0 !important; + display: grid; +} .artwork-rightcolumn-top-contributors { grid-column-start: 9; - grid-column-end: 14; + grid-column-end: 13; grid-row-start: 1; grid-row-end: 1; } @@ -1486,14 +1548,90 @@ div.browsebycategory-categories:hover { grid-row-start: 1; grid-row-end: 1; } +.artwork-rightcolumn-top-publishers, .artwork-rightcolumn-top-publishers { + grid-column-start: 15; + grid-column-end: 18; + grid-row-start: 2; + grid-row-end: 2; +} +.artwork-rightcolumn-description { + grid-column-start: 9; + grid-column-end: 18; + grid-row-start: 3; + grid-row-end: 3; + border-top: 0.5px solid var(--brown-grey);; +} +.artwork-rightcolumn-top-date + div.artwork-rightcolumn-description { + grid-column-start: 9; + grid-column-end: 18; + grid-row-start: 2; + grid-row-end: 2; + border-top: 3px solid black; +} +.text-description .mw-parser-output, .text-exhibition .mw-parser-output{ + display: initial; +} +.artwork-rightcolumn-exhibition { + grid-column-start: 9; + grid-column-end: 18; + grid-row-start: 5; + grid-row-end: 5; + border-top: 0.5px solid var(--brown-grey);; +} +.artwork-rightcolumn-description + .artwork-rightcolumn-exhibition { + grid-column-start: 9; + grid-column-end: 18; + grid-row-start: 4; + grid-row-end: 4; + border-top: 3px solid black; +} .artwork-rightcolumn-top-publishers { grid-column-start: 15; grid-column-end: 18; grid-row-start: 2; grid-row-end: 2; } +.artwork-rightcolumn-exhibition, .artwork-rightcolumn-description { + display: grid; + row-gap: 0rem; + column-gap: 1rem; + grid-template-columns: repeat(9, 1fr); +} +.artwork-rightcolumn-exhibition p, .artwork-rightcolumn-description p { + grid-column-start: 1; + grid-column-end: 9; + grid-row-start: 1; + grid-row-end: 1; +} +.text-description { + grid-column-start: 1; + grid-column-end: 7; + grid-row-start: 2; + grid-row-end: 2; +} +.text-description .mw-parser-output { + padding: 0px; +} +.text-exhibition { + grid-column-start: 1; + grid-column-end: 8; + grid-row-start: 2; + grid-row-end: 2; +} +.text-date-author { + grid-column-start: 8; + grid-column-end: 11; + grid-row-start: 2; + grid-row-end: 2; +} +.text-date-author .label-item:nth-of-type(1) { + margin-top: 0px; +} +.artwork-lists { + padding: 30px 8vw 30px 8vw; +} .artwork-copiesincollection { grid-column-start: 3; grid-column-end: 6; @@ -1502,7 +1640,6 @@ div.browsebycategory-categories:hover { flex-direction: column; justify-content: center; } - .artwork-copiesincollection-title-div { text-align: center; } @@ -1576,6 +1713,12 @@ div.browsebycategory-categories:hover { padding: 30px 0px 0px 0px; display: inherit; } +.artwork-rightcolumn-bottom .mw-parser-output { + width: 100%; + margin: 0px; + padding: 0px; + display: initial; +} .artwork-relatedworks:nth-of-type(2) { grid-column-start: 3; grid-column-end: 6; diff --git a/templates/artwork.html b/templates/artwork.html index 67d7348..67e8f14 100644 --- a/templates/artwork.html +++ b/templates/artwork.html @@ -27,10 +27,10 @@
-
ABOUT THIS WORK
+
ABOUT THIS WORK
-
DETAILED RECORD
+
DETAILED RECORD
@@ -159,11 +159,11 @@ - + -
+--> +

CONTRIBUTORS

@@ -206,11 +206,11 @@ {% endif %} {% endfor %} {% endif %} -
+ -
+

PUBLISHERS

{% if artworkpublisher['results']['bindings']==[] %} @@ -232,14 +232,14 @@ {% endif %} -
+
- + -
+ @@ -248,16 +248,16 @@ {% else %} {% for x in artworkdescriptiondata['results']['bindings'] %} -
+

DESCRIPTION

-
+
{{ x["text"] | safe }}
-
+
{% if "authordescriptionPageLabel" in x %}

AUTHOR

{{ x['authordescriptionPageLabel']['value'] }}

@@ -290,14 +290,14 @@ {% else %} {% for x in artworkexhibitiondata['results']['bindings'] %} -
+

EXHIBITION AND DISTRIBUTION HISTORY

-
+
{{ x['text'] | safe }}
-
+

AUTHOR

{% if "authorexhibitionHisPageLabel" in x %} @@ -322,8 +322,8 @@ {% endif %} - -
+ +