From af78fded694f6c05fdde9a39cb008c11821b69e4 Mon Sep 17 00:00:00 2001
From: JoBCB <joaninha_quelhas@hotmail.com>
Date: Tue, 1 Dec 2020 14:23:33 +0000
Subject: [PATCH] mobile layout artwork andadjustment on landingpage

---
 static/css/Icons/icn_bars-solid.svg |   1 +
 static/css/style.css                | 217 ++++++++++++++++++++--------
 templates/artwork.html              |   6 +-
 templates/home.html                 |   4 +-
 templates/layout.html               |  29 +++-
 5 files changed, 184 insertions(+), 73 deletions(-)
 create mode 100644 static/css/Icons/icn_bars-solid.svg

diff --git a/static/css/Icons/icn_bars-solid.svg b/static/css/Icons/icn_bars-solid.svg
new file mode 100644
index 0000000..8a8b715
--- /dev/null
+++ b/static/css/Icons/icn_bars-solid.svg
@@ -0,0 +1 @@
+<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="bars" class="svg-inline--fa fa-bars fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M16 132h416c8.837 0 16-7.163 16-16V76c0-8.837-7.163-16-16-16H16C7.163 60 0 67.163 0 76v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z"></path></svg>
\ No newline at end of file
diff --git a/static/css/style.css b/static/css/style.css
index 7d2a51f..5ac25b8 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -237,9 +237,11 @@ html {
     box-sizing: border-box;
 }
 *, *:before, *:after { 
-  -webkit-box-sizing: inherit;
-  -moz-box-sizing: inherit;
-  box-sizing: inherit; }
+    -webkit-box-sizing: inherit;
+    -moz-box-sizing: inherit;
+    box-sizing: inherit; 
+	margin: 0
+	}
 
 body {
   font-family: Roboto;
@@ -374,7 +376,7 @@ div#navigation a:active {
 	text-decoration: none;
 }
 
-#home-top-div:after {
+/*#home-top-div:after {
     content:"";
     position: absolute;
     z-index: -1;
@@ -394,14 +396,7 @@ div#navigation a:active {
     border-left: 2px solid rgba(233,233,233, 1);
     transform: translate(-50%);
 }
-div#home-top-div {
-/*    margin: 10px auto;
-    width: 60%;
-    height: 100px;
-    border: 1px solid #333;
-    position:relative;
-    text-align:center*/
-}
+*/
 
 /*Footer*/
 div#footer{
@@ -784,19 +779,19 @@ a.paginate_button.next:after {
 /*Home Top div*/
 
 div#home-top-div{
-	height: 60vh; /* 661px;*/
+	height: 40vh; /* 661px;*/
+	min-height: 400px;
 	width: 100%;
 	overflow: hidden;
 	position: relative;
 	border-bottom:  solid black 3px;
 	background-color: rgba(233,233,233, 0.5);
-
 	padding: 0vw 8vw;
 	display: grid;
 	row-gap: 2rem;
 	column-gap: 1rem;
 	grid-template-columns: repeat(18, 1fr);
-	grid-template-rows: min-content auto;
+	grid-template-rows: auto auto;
 }
 .heading_A {
   font-family: Roboto Condensed;
@@ -815,12 +810,12 @@ div#home-top-div{
 	/*max-width: 634px;*/
 	z-index: 1000; /*99*/
 	grid-column-start: 1;
-	grid-column-end: 10;
+	grid-column-end: 11;
 	grid-row-start: 1;
 	grid-row-end: 1;
 	align-self: center;
 	max-width: 800px;
-	margin-top: 6vw;
+	/*margin-top: 6vw;*/
 }
 #home-top-div p {
 	margin-bottom: 0px;
@@ -1176,7 +1171,7 @@ div.home-show-wrapper a:hover {
   grid-row-end: 2;
 }
 .mw-parser-output p {
-	margin: 0px 0px 30px 0px;
+	margin: 0px 0px 1em 0px;
 }
 
 .Heading_C, .mw-parser-output h2, h2 {
@@ -1408,7 +1403,7 @@ div.browsebycategory-categories:hover {
 	display: grid;
 	row-gap: 0rem;
 	margin: 30px 0px; 
-	padding-bottom: 2rem;
+	padding-bottom: 1rem;
 	column-gap: 1rem;
 	grid-template-columns: repeat(18, 1fr);
 	border-bottom: 3px solid #000;
@@ -1443,9 +1438,9 @@ div.browsebycategory-categories:hover {
 	bottom: 0;
 	border-left: 3px solid blue;
 	transform: translate(90%);
-	height: 45px;
+	height: 40px;
 	max-width: 2px;
-	margin-top: 410px;
+	margin-top: 390px;
 	left: 24.5%;
 }
 .artwork-nav-label-record:before {
@@ -1456,13 +1451,13 @@ div.browsebycategory-categories:hover {
 	bottom: 0;
 	border-left: 3px solid  var(--brown-grey);
 	transform: translate(90%);
-	height: 45px;
+	height: 40px;
 	max-width: 2px;
-	margin-top: 410px;
-	left: 46.5%;
+	margin-top: 390px;
+	left: 44%;
 }
 .artwork-nav-label-record {
-	grid-column-start: 8;
+	grid-column-start: 7;
 	grid-column-end: 11;
 	grid-row-start: 1;
 	grid-row-end: 1;
@@ -1489,12 +1484,19 @@ div.browsebycategory-categories:hover {
 	color: var(--blue-blue);
 	cursor: pointer;
 }
-.artwork-about, .artwork-copieswrapper, .artwork-relatedwrapper, .artwork-lists  {
+.artwork-about  {
 	width: 100%;
 	display: grid;
 	row-gap: 0rem;
 	column-gap: 1rem;
-	grid-template-columns: repeat(18, 1fr);
+	grid-template-columns: repeat(19, 1fr);
+}
+.artwork-relatedwrapper,.artwork-copieswrapper, .artwork-lists {
+	width: 100%;
+	display: grid;
+	row-gap: 2rem;
+	column-gap: 1rem;
+	grid-template-columns: repeat(10, 1fr);	
 }
 /*.artwork-relatedwrapper{
 	 grid-template-areas: 
@@ -1521,15 +1523,15 @@ div.browsebycategory-categories:hover {
 	grid-column-end: 8;
 	grid-row-start: 1;
 	grid-row-end: 3;
-	margin: 0 !important;
+	margin: -15px 0 0 0 !important;
 }
 .artwork-rightcolumn {
 	grid-column-start: 9;
-	grid-column-end: 18;
+	grid-column-end: 19;
 	grid-row-start: 1;
 	grid-row-end: 1;
 	margin: 0 !important;
-	display: grid;
+	/*display: grid;*/
 }
 
 .artwork-about-img img {
@@ -1547,18 +1549,20 @@ div.browsebycategory-categories:hover {
 	margin: 0 0 0 0 !important;
 	display: grid;
 	padding: 0 0 20px 0;
+	grid-template-columns: repeat(10, 1fr);
+	column-gap: 1rem;
 }
 
 .artwork-rightcolumn-top-contributors {
 	grid-column-start: 1;
-	grid-column-end: 10;
+	grid-column-end: 6;
 	grid-row-start: 1;
 	grid-row-end: 1;
 }
 
 .artwork-rightcolumn-top-date {
-	grid-column-start: 10;
-	grid-column-end: 18;
+	grid-column-start: 6;
+	grid-column-end: 12;
 	grid-row-start: 1;
 	grid-row-end: 1;
 
@@ -1585,6 +1589,8 @@ div.browsebycategory-categories:hover {
 
 .text-description .mw-parser-output, .artwork-rightcolumn-exhibition .mw-parser-output, .text-exhibition .mw-parser-output{
 	display: initial;
+	grid-template-columns: none;
+	padding: 0px;
 }
 .artwork-rightcolumn-exhibition  {
 	grid-column-start: 9;
@@ -1626,11 +1632,12 @@ div.browsebycategory-categories:hover {
  border-top: 3px solid #000;
  margin: 0px;
  padding: 20px 0;
+ margin-top: 40px; 
 }
 
 .text-description {
 	grid-column-start: 1;
-	grid-column-end: 8;
+	grid-column-end: 6;
 	grid-row-start: 2;
 	grid-row-end: 2;
 }
@@ -1639,7 +1646,7 @@ div.browsebycategory-categories:hover {
 }
 .text-exhibition {
 	grid-column-start: 1;
-	grid-column-end: 8;
+	grid-column-end: 6;
 	grid-row-start: 2;
 	grid-row-end: 2;
 
@@ -1659,19 +1666,20 @@ div.browsebycategory-categories:hover {
 	padding: 30px 8vw 30px 8vw;
 }
 .artwork-copiesincollection {
-	grid-column-start: 3;
-	grid-column-end: 6;
+/*	grid-column-start: 2;
+	grid-column-end: 6;*/
 	border-right: solid 0.5px var(--black);
 	display: flex;
 	flex-direction: column;
 	justify-content: center;
+	padding: 0px 20px;
 }
 .artwork-copiesincollection-title-div {
 	text-align: center;
 }
 .artwork-lists .Heading_C , .artwork-relatedwrapper .Heading_C , .artwork-copieswrapper .Heading_C {
 	grid-column-start: 1;
-	grid-column-end: 3;
+	grid-column-end: 2;
   /*  writing-mode: sideways-lr;
    max-height: 120px; */
     text-align: center;
@@ -1761,7 +1769,7 @@ div.browsebycategory-categories:hover {
 	padding: 0px;
 	display: initial;
 }
-.artwork-relatedworks:nth-of-type(2) {
+/*.artwork-relatedworks:nth-of-type(2) {
   grid-column-start: 3;
   grid-column-end: 6;
   margin: 0 !important;
@@ -1785,7 +1793,7 @@ div.browsebycategory-categories:hover {
   grid-column-start: 15;
   grid-column-end: 18;
   margin: 0 !important;
-}
+}*/
 .artwork-relatedworks-tile a:hover, .artwork-relatedworks-tile a:hover ~ .artwork-relatedworks-date, .artwork-lists-title a:hover  {
 	color: var(--blue-blue);
 }
@@ -1807,17 +1815,21 @@ img.artwork-relatedworks-imgs, .artwork-lists-img img{
 	text-decoration: none;
 	cursor: pointer;
 }
-.artwork-about-under-img a:hover {
-	color: var(--blue-blue);	
-}
 .artwork-about-under-img .distri-links a, .artwork-about-under-img .distri-links a:visited{
-	color: var(--blue-blue);
+	color: #000;
 }
-.artefact, .facsimile {
+.artwork-about-under-img a:hover, .artwork-about-under-img .distri-links a:hover {
+	color: var(--blue-blue);	
+}
+.artefact, .facsimile, .distri-links div {
 	align-items: center;
 	display: flex;
 }
 
+.facsimile > a , .artefact > a, .distri-links div > a {
+	padding: 0 10px 0 0; 
+}
+
 /* LIBRARY */
 .tns-controls { text-align: center; margin-bottom: 10px; }
 .tns-controls [aria-controls] {
@@ -1825,16 +1837,18 @@ img.artwork-relatedworks-imgs, .artwork-lists-img img{
 }
 .tns-nav {
   text-align: center;
-  margin: 10px 0;
+  margin: 0px;
+  padding-bottom: 20px;
+  padding-right: 15px;
 }
 .tns-nav > [aria-controls] {
-  width: 12px;
-  height: 12px;
+  width: 16px;
+  height: 16px;
   padding: 0;
-  margin: 0 5px 0 0;
+  margin: 0 10px 0 0;
   border-radius: 50%;
   border: 1px solid #000;
-  background: #FFF;
+  /*background: #FFF;*/
 }
 .tns-nav-active {
 	background: #000 !important;
@@ -1845,6 +1859,7 @@ img.artwork-relatedworks-imgs, .artwork-lists-img img{
 
 .tns-item p:nth-of-type(1) {
  	text-transform: uppercase;
+ 	margin: 10px 0 0px 0px !important;
 }
 .tns-item p{
 	text-align: center;
@@ -1867,6 +1882,8 @@ img.artwork-relatedworks-imgs, .artwork-lists-img img{
     max-width: inherit;
 }
 
+.artwork-nav-label-mobile, .artwork-about-under-img-mobile { display: none;   }
+
 
 /*************************************/
 /************ WIKI PAGES ************/
@@ -1887,10 +1904,13 @@ div#tutorials-intro h3, div#tutorials-intro p {
 
 /************ Disactive Mobile ************/
 
-#navigation-mobile, #message-mobile {
+#navigationmobile, #message-mobile {
 	display:  none;
 }
 
+#mobtop{
+	display: none;
+}
 
 
 /********************************** RESPONSIVE DESIGN *********************************/
@@ -1929,11 +1949,52 @@ div#tutorials-intro h3, div#tutorials-intro p {
    overflow: hidden;
 	position: static;
 }
-/********** NAV 
+
+	.web-dev-placeholder {
+	padding: 0px 10px;
+	margin-right: 30px;
+	}
+/********** NAV  **********/
+
+	#mobtop{
+		display: initial;
+	}
 
 	#navigation {
 		display: none !important;
 	}
+	a.mobile-nav-icon, a.mobile-nav-icon:visited, a.mobile-nav-icon:hover {
+		cursor: pointer;
+		text-decoration: none;
+		position: absolute;
+		right: 0;
+		margin-right: 8vw;
+	}
+	a.mobile-nav-icon:after {
+	  cursor: pointer;
+	  text-decoration: none;
+	  display: inline-block;
+	  content: ' ';
+	  background-image: url('Icons/icn_bars-solid.svg');
+	  background-size: 16px 16px;
+	  height: 16px;
+	  width: 16px;
+	  color: var(--blue-blue);
+	}
+
+	a.mob-close-icon:after {
+	  cursor: pointer;
+	  text-decoration: none;
+	  display: inline-block;
+	  content: ' ';
+	  background-image: url('Icons/icn_close_large.svg');
+	  background-size: 16px 16px;
+	  height: 16px;
+	  width: 16px;
+	  color: var(--blue-blue);
+	  z-index: 99;
+	}
+
 	div#header {
 		height: 60px !important;
 	}
@@ -1950,12 +2011,11 @@ div#tutorials-intro h3, div#tutorials-intro p {
     input[type="checkbox"]:checked ~ .sidebarIconToggle > .icon-cross {
     display: block;
 	}
-
 	.sidebarIconToggle {
 		cursor: pointer;
 	}
-	#navigation-mobile {
-		display: block;
+	#navigationmobile {
+		display: none;
 		position: fixed;
 		top: 60px;
 		left: 0;
@@ -1966,8 +2026,6 @@ div#tutorials-intro h3, div#tutorials-intro p {
 		overflow-y: hidden;
 		transition: transform 250ms ease-in-out;
 	}
-
-
 	.navigation-mobile-items{
 		margin: 100px 0px 0px 0px;
 		display: flex;
@@ -2003,13 +2061,21 @@ div#tutorials-intro h3, div#tutorials-intro p {
 	  color: var(--black);
 	}
 
-**********/
+	div#animatedlogo img {
+    width: 8.5vw;
+    min-width: 32px;
+	margin-top: 10px;
+	}
 
 /********** MAIN **********/
 
-	#home-top-div > img , #wrapper-bt {
+	#home-top-div > img {
 		display: none;
 	}
+	#home-top-div #wrapper-bt {
+		grid-column-start: 1;
+		grid-column-end: 19;
+	}
 	div#home-top-div {
 		height: 50vh;
 	}
@@ -2074,10 +2140,34 @@ div#tutorials-intro h3, div#tutorials-intro p {
     grid-column-end: 19;
 }
 
-}
+
 /********* ARTWORK **********/
+	.artwork-relatedwrapper,.artwork-copieswrapper, .artwork-lists { display: none; }
+
+	.artwork-nav { display: none; }
 
+	.artwork-nav-label-mobile {
+	 	display: flex;
+		padding: 0px 0px 60px 8vw;  
+	}
+	.artwork-nav-label-record::before {display: none;}
+
+	.artwork-leftcolumn {
+	    grid-column-start: 1;
+	    grid-column-end: 19;
+	    grid-row-start: 1;
+	    grid-row-end: 3;
+	    margin: 0 !important;
+	}
+	.artwork-rightcolumn {
+		grid-column-start: 1;
+		grid-column-end: 19;
+		grid-row-start: 3;
+		grid-row-end: 3;
+	}
+	.artwork-about-under-img { margin: 0 0 20px 0; }
 
+}
 /***************** LAPTOP MEDIUM ****************/
 
 @media screen and (min-width: 769px) and (max-width: 1000px) { 
@@ -2087,16 +2177,23 @@ div#tutorials-intro h3, div#tutorials-intro p {
 	#footer-title-others, #footer-title-contact {text-align: right;}
 	#footer-contact-form {margin: 30px 0px 0px 0px;}
 	#footer-credit, #footer-socials{ padding: 0px; }
+
+  	.artwork-relatedwrapper,.artwork-copieswrapper, .artwork-lists { grid-template-columns: repeat(5, 1fr);	}
+
 }
 
 
 @media (min-width: 1000px) {
   	#home-recent-grid, #browsethearchive-grid, #selfpublishedindex-grid, #zinesindex-grid  { grid-template-columns: repeat(4, 1fr); }
+
+  	.artwork-relatedwrapper,.artwork-copieswrapper, .artwork-lists { grid-template-columns: repeat(5, 1fr);	}
 }
 
 /***************** LAPTOP BIG ****************/
 
 @media (min-width: 1400px) {
   #home-recent-grid, #browsethearchive-grid, #selfpublishedindex-grid, #zinesindex-grid  { grid-template-columns: repeat(6, 1fr); }
+   .artwork-relatedwrapper,.artwork-copieswrapper, .artwork-lists { grid-template-columns: repeat(10, 1fr);	}
+
 }
 
diff --git a/templates/artwork.html b/templates/artwork.html
index d35cc06..32c24ff 100644
--- a/templates/artwork.html
+++ b/templates/artwork.html
@@ -358,11 +358,6 @@
 <!-- end of about -->
 	</div>
 
-
-
-
-
-
 </div>
 <!-- END OF ABOUT -->
 
@@ -462,6 +457,7 @@
 	</div>
 <!-- END OF LISTS -->
 
+<div class="artwork-nav-label-mobile artwork-nav-label artwork-nav-label-record"><a class="det-record" target="_blank" href="https://daap.bannerrepeater.org/wiki/Item:{{ artwork_id }}">DETAILED RECORD</a></div>
 
 </div>
 
diff --git a/templates/home.html b/templates/home.html
index 4b1b996..80a2fbf 100644
--- a/templates/home.html
+++ b/templates/home.html
@@ -30,14 +30,14 @@
 			<a id="wrapper-top-buttons" class="primary-button" href="{{ url_for('zinesindex') }}">SEE EXAMPLE SEARCH FOR ZINES</a>
 			<a id="wrapper-top-buttons" class="secondary-button" href="{{ url_for('casestudy') }}">CAROLEE SCHNEEMANN CASE STUDY</a>
 		</div>
-		<div id="wrapper-vid">
+<!-- 		<div id="wrapper-vid">
 			<video preload="meta" autoplay="" loop="">
 				 <source src="{{ url_for('static', filename='/vid/DAAP_video_reduced.mp4') }}" type="video/mp4">
 			</video>
 			<p>
 				<a class="metadata-link" target="_blank" href="https://query.daap.bannerrepeater.org/embed.html#%23defaultView%3AGraph%0ASELECT%20%3Fwork%20%3FworkLabel%20%3Fimage_on_Commons%20%3Fplace_of_publication%20%3Fplace_of_publicationLabel%20%3Fcreator_of%20%3Fcreator_ofLabel%20WHERE%20%7B%0A%20%20SERVICE%20wikibase%3Alabel%20%7B%20bd%3AserviceParam%20wikibase%3Alanguage%20%22%5BAUTO_LANGUAGE%5D%2Cen%22.%20%7D%0A%20%20%3Fwork%20wdt%3AP9%20wd%3AQ421.%0A%20%20OPTIONAL%20%7B%20%3Fwork%20wdt%3AP31%20%3Fimage_on_Commons.%20%7D%0A%20%20OPTIONAL%20%7B%20%3Fwork%20wdt%3AP12%20%3Fplace_of_publication.%20%7D%0A%20%20OPTIONAL%20%7B%20%3Fwork%20wdt%3AP9%20%3Fcreator_of.%20%7D%0A%7D%0ALIMIT%20100">See Live Data Visualization</a>
 			</p>
-		</div>
+		</div> -->
 </div>
 
 <div class="scroll-down"><span>Scroll Down</span></div>
diff --git a/templates/layout.html b/templates/layout.html
index 3da62f1..579e234 100644
--- a/templates/layout.html
+++ b/templates/layout.html
@@ -10,7 +10,7 @@
 </head>
 <body>
 
-		<div id="navigation-mobile">
+		<div id="navigationmobile">
 			<div class= "navigation-mobile-items">
 				<div id="nav-about"><a href="{{ url_for('about') }}">About</a></div>
 				<div id="nav-browse-archive"><a href="{{ url_for('browsethearchive') }}">Browse the archive</a></div>
@@ -37,15 +37,17 @@
 				<a href="{{ url_for('home') }}">DAAP</a>
 			</div> 
 			<!-- <div id="header-keyword-search">
-			<input type="text" id="fname" name="fname" value="" placeholder="Keyword search"> 
+				<input type="text" id="fname" name="fname" value="" placeholder="Keyword search"> 
 			</div> 
 			<div class="container" onclick="myFunction(this)"> 
 
-			</div>
-			-->
+			</div> -->
+			 
 			<div class="web-dev-placeholder">
 				<p>WEBSITE IN DEVELOPMENT</p>
 			</div>
+			
+			<a id="mobtop" class="mobile-nav-icon mob-menu-icon" onclick="showMenu('navigationmobile'); toggleMenu();"></a>
 		</div>
 
 		<div id="navigation">
@@ -108,9 +110,24 @@
 
 <script type="text/javascript">
 	
-function menutoggle(x) {
-  x.classList.toggle("change");
+
+function showMenu(navigationmobile){
+	var e = document.getElementById('navigationmobile');
+	var element = document.getElementById("mobtop");
+	if(e.style.display == 'block')
+			e.style.display = 'none';
+		else
+			e.style.display = 'block';
+			document.querySelector('body').style.overflow = 'hidden';
+			element.classList.toggle("mob-close-icon");
 }
+
+// element.classList.add("mobile-nav-icon");
+// element.classList.remove("mob-close-icon");
+
+
+// 	element.classList.remove("mobile-nav-icon");
+//	element.classList.add("mob-close-icon");
 </script>