Browse Source

mobile layout artwork andadjustment on landingpage

master
JoBCB 4 years ago
parent
commit
af78fded69
  1. 1
      static/css/Icons/icn_bars-solid.svg
  2. 215
      static/css/style.css
  3. 6
      templates/artwork.html
  4. 4
      templates/home.html
  5. 29
      templates/layout.html

1
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>

After

Width:  |  Height:  |  Size: 569 B

215
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: #000;
}
.artwork-about-under-img a:hover, .artwork-about-under-img .distri-links a:hover {
color: var(--blue-blue);
}
.artefact, .facsimile {
.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); }
}

6
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>

4
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>

29
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>

Loading…
Cancel
Save