From 0d5dcee566462da1374c0710edc9c1a974331e7f Mon Sep 17 00:00:00 2001
From: JoBCB <joaninha_quelhas@hotmail.com>
Date: Mon, 16 Nov 2020 10:55:00 +0000
Subject: [PATCH] update on artworks layout

---
 static/css/style.css   | 91 ++++++++++++++++++++++++++++++++++--------
 templates/artwork.html | 12 +++---
 2 files changed, 80 insertions(+), 23 deletions(-)

diff --git a/static/css/style.css b/static/css/style.css
index 8ab8472..e7cbf74 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -41,7 +41,7 @@ font-style: normal;
 @media screen and (min-width: 320px) {
 
 /* 12 18 */ body, tbody tr th, .mw-parser-output ul, .mw-parser-output a, .artwork-intro, 
-.date, div#header-keyword-search span {
+.date, div.artwork-relatedworks-date, div#header-keyword-search span, .metadata-link p {
 		font-size: calc(12px + 6 * (100vw - 320px) / 1600);
 		 line-height: 1.63;
 	}
@@ -54,7 +54,8 @@ div#footer-title-socials p, thead tr th, .artwork-nav-label, .label-item {
 		font-size: calc(12px + 6 * (100vw - 320px) / 1600);
 		line-height: 28.4px;
 	}
-/* 14 20 */ div#navigation a, .title, .metadata-link, .metadata-link a, .metadata-link a span {
+/* 14 20 */ div#navigation a, .title, .metadata-link, .metadata-link a, .metadata-link a span,
+div.artwork-relatedworks-tile  {
 		font-size: calc(14px + 8 * (100vw - 320px) / 1600);
   		line-height: 1.44;
 	}
@@ -96,14 +97,15 @@ div#footer-title-socials p, thead tr th, .artwork-nav-label, .label-item {
 
 @media screen and (min-width: 1920px) {
 body, tbody tr th, .mw-parser-output ul, .mw-parser-output a, .artwork-intro, 
-.date, div#header-keyword-search span {
+.date, div.artwork-relatedworks-date, div#header-keyword-search span, .metadata-link p {
 		font-size: 18px;
 	}
 div#footer-title-br p, div#footer-title-others p, div#footer-title-contact p, 
 div#footer-title-socials p, thead tr th, .artwork-nav-label, .label-item {
 		font-size: 	font-size: 18px;
 	}
-div#navigation a, .title, .metadata-link, .metadata-link a, .metadata-link a span  {
+div#navigation a, .title, .metadata-link, .metadata-link a, .metadata-link a span, 
+div.artwork-relatedworks-tile  {
 		font-size: 20px;
 	}
 div#footer-socials-links a {
@@ -191,7 +193,15 @@ img.artwork-mockuppage{
 	text-transform: uppercase;
 	padding: 0px 20px;
 }
-
+.soon {
+	padding: 55px 80px;
+	width: 100%;
+}
+.soon + #footer {
+	position: fixed;
+	bottom: 0;
+	left: 0;
+}
 /************ LAYOUT ************/
 :root {
   --black: #000000;
@@ -647,7 +657,7 @@ a.paginate_button.next:after {
 }
 
 /************ TEXT STYLES************/
-.title {
+.title, div.artwork-relatedworks-tile {
   /* width: 200px;
   height: 26px;
   font-size: 18px;
@@ -659,7 +669,7 @@ a.paginate_button.next:after {
   letter-spacing: 0.9px;
   color: var(--black);
 }
-.date {
+.date, div.artwork-relatedworks-date {
   font-family: Roboto;
 /*font-size: 16px;
   line-height: 1.63;*/
@@ -1312,6 +1322,10 @@ div.browsebycategory-categories:hover {
 	column-gap: 1rem;
 	grid-template-columns: repeat(18, 1fr);
 }
+/*.artwork-relatedwrapper{
+	 grid-template-areas: 
+    "title title item1 item1 item1 item2 item2 item2 item3 item3 item3 item4 item4 item4 item5 item5 item5";
+}*/
 .artwork-about{
     padding: 30px 80px 60px 80px;
 }
@@ -1369,8 +1383,8 @@ div.browsebycategory-categories:hover {
 }
 
 .artwork-copiesincollection {
-	grid-column-start: 4;
-	grid-column-end: 7;
+	grid-column-start: 3;
+	grid-column-end: 6;
 	border-right: solid 0.5px var(--black);
 	display: flex;
 	flex-direction: column;
@@ -1380,7 +1394,6 @@ div.browsebycategory-categories:hover {
 .artwork-copiesincollection-title-div {
 	text-align: center;
 }
-
 .artwork-relatedwrapper .Heading_C , .artwork-copieswrapper .Heading_C {
 	grid-column-start: 1;
 	grid-column-end: 3;
@@ -1391,16 +1404,13 @@ div.browsebycategory-categories:hover {
     text-align: center;
     align-self: center;
 }
-
 .artwork-copiesincollection-img-div {
 	max-width: 55px;
 	align-self: center;
 }
-
 .artwork-copiesincollection-img-div img {
 	width: 100%;
 }
-
 .metadata-link, .metadata-link a, .metadata-link a span {
   font-family: Roboto Condensed Bold;
 /*  font-size: 18px;
@@ -1411,16 +1421,65 @@ div.browsebycategory-categories:hover {
   letter-spacing: 0.9px;
   color: var(--blue-blue);
 }
+.label-item-date-artwork{
+  font-family: Roboto Condensed Bold;
+  font-weight: bold;
+  font-stretch: condensed;
+  font-style: normal;
+  letter-spacing: 0.9px;
+  margin-top: 0px;
+  margin-bottom: 30px; 	
+}
 .metadata-link, .metadata-link a,  .metadata-link a span:hover {
   color: black;	
 }
-
-.artwork-about-bottom .mw-parser-output {
+.metadata-link p {
+	font-family: Roboto;
+	font-weight: normal;
+  	font-stretch: normal;
+  	font-style: normal;
+  	margin-top: 0px;
+  	margin-bottom: 0px;
+}
+.artwork-rightcolumn-top-contributors p.label-item, .artwork-rightcolumn-top-date p.label-item, 
+.artwork-rightcolumn-top-contributors .metadata-link, .artwork-rightcolumn-top-date .metadata-link {
+	margin-bottom: 30px;
+	margin-top: 0px !important;
+}
+.artwork-about-bottom .mw-parser-output, .artwork-about-bottom div.label-item, .artwork-about-bottom div.mw-parser-output {
   width: 100%;
   padding: 30px 0px 0px 0px;
   display: inherit;
 }
-
+.artwork-relatedworks:nth-of-type(2) {
+  grid-column-start: 3;
+  grid-column-end: 6;
+  margin: 0 !important;
+}
+.artwork-relatedworks:nth-of-type(3) {
+  grid-column-start: 6;
+  grid-column-end: 9;
+  margin: 0 !important;
+}
+.artwork-relatedworks:nth-of-type(4) {
+  grid-column-start: 9;
+  grid-column-end: 12;
+  margin: 0 !important;
+}
+.artwork-relatedworks:nth-of-type(5) {
+  grid-column-start: 12;
+  grid-column-end: 15;
+  margin: 0 !important;
+}
+.artwork-relatedworks:nth-of-type(6) {
+  grid-column-start: 15;
+  grid-column-end: 18;
+  margin: 0 !important;
+}
+.artwork-relatedworks-imgs{
+	width: 100%;
+	max-width: 200px;
+}
 
 /*************************************/
 /************ WIKI PAGES ************/
diff --git a/templates/artwork.html b/templates/artwork.html
index 12143ea..ba87273 100644
--- a/templates/artwork.html
+++ b/templates/artwork.html
@@ -64,28 +64,26 @@
 	
 				<!-- contributors -->
 				<div class="artwork-rightcolumn-top-contributors">
-						<span class="label-item">CONTRIBUTORS</span>
+						<p class="label-item">CONTRIBUTORS</p>
 						{% for x in artworkcontributors['results']['bindings'] %}
 							<!-- name surname -->
 							<div class="metadata-link">
 								<a href='/person?id={{ x["creators"]["value"] | replace("http://daap.bannerrepeater.org/entity/", "") }}'>
 									<span>{{ x['creatorsLabel']['value'] }}</span>
 								</a>
-							</div>
 							<!-- role/function -->
-							<div>
-								<span>{{ x['role']['value'] }}</span>
+								<p>{{ x['role']['value'] }}</p>
 							</div>
 						{% endfor %}
 				</div>
 				<!-- date -->
 				<div class="artwork-rightcolumn-top-date">
-						<span class="label-item">DATE</span>
+						<p class="label-item">DATE</p>
 							<!-- loops through dates -->
 							{% for x in artworkdate['results']['bindings'] %}
 							<!-- date -->
 								{% if 'date' in x %}
-								<div>{{ x['date']['value'] | replace("T00:00:00Z", "") }}</div>
+								<div class="label-item-date-artwork">{{ x['date']['value'] | replace("T00:00:00Z", "") }}</div>
 								{% else %}
 								but <div>information not available</div>
 								{% endif %}
@@ -98,7 +96,7 @@
 
 				<!-- publishers removed div .artwork-rightcolumn-top-publishers-->
 
-						<span class="label-item">PUBLISHERS</span>
+						<p class="label-item">PUBLISHERS</p>
 						<!-- loop through publishers -->
 						{% for x in artworkpublisher['results']['bindings'] %}
 							<!-- name, surname -->