Browse Source

final adjustments on mobile and templates

master
JoBCB 4 years ago
parent
commit
93fd7a8d24
  1. 120
      static/css/style.css
  2. 8
      templates/artwork.html

120
static/css/style.css

@ -434,14 +434,14 @@ div#footer{
}
div#footer-title-contact {
margin-bottom: 20px;
margin-bottom: 20px !important;
}
#footer-socials-links {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
margin-top: 10px;
margin-top: 10px !important;
}
div#footer-title-br p, div#footer-title-others p, div#footer-title-contact p, div#footer-title-socials p{
@ -1046,9 +1046,14 @@ div#home-top-div{
}
/* ARCHIVE PREVIEW */
/*.home-recent-items-top a, .browsethearchive-items-top a, .zinesindex-items-top a, .selfpublishedindex-items-top a {
max-height: 450px;
}
*/
img.home-recent-imgs, img.browsethearchive-imgs, img.selfpublishedindex-imgs, img.zinesindex-imgs {
width: 100%;
max-height: 450px;
object-fit: contain;
}
div.home-recent-items, div.browsethearchive-items, div.zinesindex-items, div.selfpublishedindex-items {
@ -1403,6 +1408,7 @@ div.browsebycategory-categories:hover {
letter-spacing: normal;
color: var(--black);
margin: 20px 8vw 0px 8vw;
min-height: 30px;
}
.artwork-nav {
@ -1561,7 +1567,7 @@ div.browsebycategory-categories:hover {
display: grid;
/*padding: 0 0 20px 0;*/
grid-template-columns: repeat(10, 1fr);
column-gap: 1rem;
/*column-gap: 1rem;*/
}
.artwork-rightcolumn-top-contributors {
@ -1613,10 +1619,10 @@ div.browsebycategory-categories:hover {
padding: 20px 0;
border-bottom: 0.5px solid var(--brown-grey);
}
.artwork-rightcolumn-bottom:nth-of-type(2) {
/*.artwork-rightcolumn-bottom:nth-of-type(2) {
padding: 20px 0 0 0;
border-top: 0.5px solid var(--brown-grey);
}
}*/
.artwork-rightcolumn-description + .artwork-rightcolumn-exhibition {
grid-column-start: 9;
@ -1640,17 +1646,23 @@ div.browsebycategory-categories:hover {
margin: 1em 0 0.5em;
}
.des-exh-section .des, .des-exh-section .exh {
border-top: 3px solid #000;
margin: 0px;
padding: 20px 0;
margin-top: 40px;
padding: 20px 0 0 0;
}
.des-exh-section .des {
margin-top: 40px;
border-top: 3px solid #000;
}
.des-exh-section .exh {
border-top: 2px solid #000;
}
.text-description {
grid-column-start: 1;
grid-column-end: 8;
grid-row-start: 2;
grid-row-end: 2;
padding-top: 20px;
border-bottom: 1px solid black;
}
.text-description .mw-parser-output {
padding: 0px;
@ -1667,7 +1679,9 @@ div.browsebycategory-categories:hover {
grid-column-end: 11;
grid-row-start: 2;
grid-row-end: 2;
margin-left: 1em;
padding-left: 2em;
padding-top: 20px;
border-bottom: 1px solid black;
}
.text-date-author .label-item:nth-of-type(1) {
/* margin-top: 0px;*/
@ -1691,6 +1705,7 @@ div.browsebycategory-categories:hover {
.artwork-lists .Heading_C , .artwork-relatedwrapper .Heading_C , .artwork-copieswrapper .Heading_C {
grid-column-start: 1;
grid-column-end: 2;
grid-row: 1 / span 4;
/* writing-mode: sideways-lr;
max-height: 120px; */
text-align: center;
@ -1841,7 +1856,7 @@ img.artwork-relatedworks-imgs, .artwork-lists-img img{
padding: 0 10px 0 0;
}
/* LIBRARY */
/* LIBRARY CAROUSEL */
.tns-controls { text-align: center; margin-bottom: 10px; }
.tns-controls [aria-controls] {
display: none;
@ -1893,6 +1908,9 @@ img.artwork-relatedworks-imgs, .artwork-lists-img img{
width: 100%;
max-width: inherit;
}
#tns1 > .tns-item {
font-size: 14px;
}
.artwork-nav-label-mobile, .artwork-about-under-img-mobile { display: none; }
@ -1937,7 +1955,7 @@ div#tutorials-intro h3, div#tutorials-intro p {
@media screen and (min-width:0px) and (max-width: 768px) {
#message-mobile {
display: block;
display: none;
position: fixed;
width: 100%;
top: 0;
@ -1949,20 +1967,21 @@ div#tutorials-intro h3, div#tutorials-intro p {
overflow-y: hidden;
}
#message-mobile p {
text-align: center;
font-family: Roboto Condensed;
font-size: 24px;
line-height: 1.58;
letter-spacing: 1.33px;
margin: 25vw 8vw;
}
#message-mobile ~ * {
overflow: hidden;
position: static;
}
#message-mobile p {
text-align: center;
font-family: Roboto Condensed;
font-size: 24px;
line-height: 1.58;
letter-spacing: 1.33px;
margin: 25vw 8vw;
}
#message-mobile ~ * {
overflow: hidden;
position: static;
}
.web-dev-placeholder {
display: none;
padding: 0px 10px;
margin-right: 30px;
}
@ -2034,7 +2053,7 @@ div#tutorials-intro h3, div#tutorials-intro p {
width: 100%;
z-index: 10000;
height: 100%;
background-color: rgba(255, 255, 255, 0.96);
background-color: rgba(255, 255, 255, 0.90);
overflow-y: hidden;
transition: transform 250ms ease-in-out;
}
@ -2044,6 +2063,9 @@ div#tutorials-intro h3, div#tutorials-intro p {
flex-direction: column;
align-items: center;
}
.navigation-mobile-items div {
margin: 5px 0px;
}
.navigation-mobile-items div a{
font-family: Roboto Condensed;
font-size: 24px;
@ -2055,7 +2077,6 @@ div#tutorials-intro h3, div#tutorials-intro p {
text-align: center;
color: var(--black);
text-decoration: none;
margin: 30px 0px;
cursor: pointer;
}
@ -2089,7 +2110,8 @@ div#tutorials-intro h3, div#tutorials-intro p {
grid-column-end: 19;
}
div#home-top-div {
height: 50vh;
height: 340px; /*50vh*/
min-height: 340px;
}
#home-top-div #wrapper-vid {
@ -2148,6 +2170,11 @@ div#tutorials-intro h3, div#tutorials-intro p {
grid-column-end: 19;
}
.mw-parser-output blockquote + p {
grid-row-start: 3;
grid-row-end: 3;
}
.mw-parser-output p, .mw-parser-output ul, .mw-parser-output h2, .mw-parser-output h3 {
grid-column-start: 1;
grid-column-end: 19;
@ -2161,8 +2188,21 @@ div#tutorials-intro h3, div#tutorials-intro p {
.artwork-nav-label-mobile {
display: flex;
padding: 0px 0px 60px 8vw;
padding: 0px 8vw 60px 8vw;
flex-direction: column;
text-align: left;
}
.artwork-nav-label-mobile p {
color: #000;
font-family: Roboto Condensed;
font-size: calc(12px + 6 * (100vw - 320px) / 1600);
line-height: 1.63;
font-weight: normal;
font-stretch: normal;
font-style: normal;
letter-spacing: normal;
}
.artwork-nav-label-record::before {display: none;}
.artwork-leftcolumn {
@ -2179,6 +2219,26 @@ div#tutorials-intro h3, div#tutorials-intro p {
grid-row-end: 3;
}
.artwork-about-under-img { margin: 0 0 20px 0; }
.tns-nav { padding: 0 15px; }
.tns-nav button:last-child { margin-right: 0px; }
.text-date-author {
grid-column-start: 1;
grid-column-end: 19;
grid-row-start: 3;
grid-row-end: 4;
padding-left: 0em;
padding-top: 20px;
border-bottom: 1px solid black;
}
.text-description {
grid-column-start: 1;
grid-column-end: 19;
grid-row-start: 2;
grid-row-end: 2;
padding-top: 20px;
border-bottom: 1px solid black;
}
}
/***************** LAPTOP MEDIUM ****************/
@ -2199,14 +2259,14 @@ div#tutorials-intro h3, div#tutorials-intro p {
@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); }
.artwork-relatedwrapper,.artwork-copieswrapper, .artwork-lists { grid-template-columns: repeat(4, 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); }
.artwork-relatedwrapper,.artwork-copieswrapper, .artwork-lists { grid-template-columns: repeat(6, 1fr); }
}

8
templates/artwork.html

@ -319,9 +319,9 @@
{% for x in artworkexhibitiondata['results']['bindings'] %}
<div class="artwork-rightcolumn-exhibition">
<div class="artwork-rightcolumn-bottom">
<div class="text-exhibition">
<div class="text-description">
{{ x['text'] | safe }}
</div>
<!-- right ride with author etc LATER-->
@ -456,7 +456,9 @@
</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 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>
<p>For best view of all data available, please visit the site on desktop.</p>
</div>
</div>

Loading…
Cancel
Save