jules
/
DAAP_interface
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
Browse Source

final adjustments on mobile and templates

master
JoBCB 3 years ago
parent
cbd6c9b92a
commit
93fd7a8d24
2 changed files with 95 additions and 33 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 120
      static/css/style.css
  2. 8
      templates/artwork.html

120
static/css/style.css
View File

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

@ -319,9 +319,9 @@
{% for x in artworkexhibitiondata['results']['bindings'] %} {% 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 }} {{ x['text'] | safe }}
</div> </div>
<!-- right ride with author etc LATER--> <!-- right ride with author etc LATER-->
@ -456,7 +456,9 @@
</div> </div>
<!-- END OF LISTS --> <!-- 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> </div>

Write Preview
Loading…
Cancel
Save