Browse Source

general changes after feedback plus artwork image gallery and layout

master
JoBCB 4 years ago
parent
commit
e44fbd1c31
  1. 176
      static/css/style.css
  2. 26
      templates/artwork.html
  3. 4
      templates/home.html
  4. 16
      templates/layout.html

176
static/css/style.css

@ -46,7 +46,7 @@ font-style: normal;
line-height: 1.63;
}
/* 12 18 */ 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 {
div#footer-title-socials p, thead tr th, .artwork-nav-label, .label-item, .tns-item p:first-of-type {
font-size: calc(12px + 6 * (100vw - 320px) / 1600);
line-height: 16px;
}
@ -101,7 +101,7 @@ body, tbody tr th, .mw-parser-output ul, .mw-parser-output a, .artwork-intro,
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 {
div#footer-title-socials p, thead tr th, .artwork-nav-label, .label-item, .tns-item p:first-of-type {
font-size: font-size: 18px;
}
div#navigation a, .title, .metadata-link, .metadata-link a, .metadata-link a span,
@ -206,7 +206,7 @@ img.artwork-mockuppage{
left: 0;
}
.soon-nofix {
margin: 80px 80px;
margin: 10vh 8vw 25vh;
}
@media screen and (min-width: 1920px) {
.soon-nofix + #footer {
@ -842,6 +842,8 @@ div#home-top-div{
grid-row-end: 3;
align-self: end;
margin-bottom: 2vw;
max-width: 800px;
justify-self: center;
}
#home-top-div #wrapper-bt{
/* margin: 36px 26px 0px 0vw; 8vmin*/
@ -861,7 +863,7 @@ div#home-top-div{
box-shadow: 1px 1px 5px 3px #00000024;
border-radius: 6px;
}
#wrapper-vid a {
#wrapper-vid p a {
text-align: center;
width: 100%;
display: inline-grid;
@ -1040,6 +1042,7 @@ div#home-top-div{
img.home-recent-imgs, img.browsethearchive-imgs, img.selfpublishedindex-imgs, img.zinesindex-imgs {
width: 100%;
max-height: 450px;
}
div.home-recent-items, div.browsethearchive-items, div.zinesindex-items, div.selfpublishedindex-items {
@ -1053,7 +1056,7 @@ div.home-recent-items, div.browsethearchive-items, div.zinesindex-items, div.sel
height: 100%;
}
div.home-recent-items a, div.browsethearchive-items a, div.zinesindex-items a, div.selfpublishedindex-items a {
div.home-recent-items a, div.browsethearchive-items a, div.zinesindex-items a, div.selfpublishedindex-items a, .artwork-relatedworks-tile a, .artwork-lists-title a {
/* font-size: 18px;
line-height: 26px;
display: flex;
@ -1410,8 +1413,11 @@ div.browsebycategory-categories:hover {
grid-template-columns: repeat(18, 1fr);
border-bottom: 3px solid #000;
}
.artwork-nav-label, .label-item {
.artwork-nav-label{
width: 100%;
text-align: center;
}
.artwork-nav-label, .label-item, .tns-item p:first-of-type {
margin: 25px 0 12px 1px;
font-family: Roboto Condensed;
/* font-size: calc(14px + (18 - 14) * ((100vw - 320px) / (1600 - 320)));
@ -1429,7 +1435,6 @@ div.browsebycategory-categories:hover {
grid-row-start: 1;
grid-row-end: 1;
}
.artwork-nav-label-about:before {
content: "";
position: absolute;
@ -1441,7 +1446,7 @@ div.browsebycategory-categories:hover {
height: 45px;
max-width: 2px;
margin-top: 410px;
left: 21.5%;
left: 24.5%;
}
.artwork-nav-label-record:before {
content: "";
@ -1454,7 +1459,7 @@ div.browsebycategory-categories:hover {
height: 45px;
max-width: 2px;
margin-top: 410px;
left: 44%;
left: 46.5%;
}
.artwork-nav-label-record {
grid-column-start: 8;
@ -1537,12 +1542,11 @@ div.browsebycategory-categories:hover {
grid-row-start: 2;
grid-row-end: 2;
}
.artwork-rightcolumn-top{
border-bottom: 3px solid #000;
}
.artwork-rightcolumn-top, .artwork-rightcolumn-bottom {
margin: 0 !important;
margin: 0 0 0 0 !important;
display: grid;
padding: 0 0 20px 0;
}
.artwork-rightcolumn-top-contributors {
@ -1570,7 +1574,6 @@ div.browsebycategory-categories:hover {
grid-column-end: 18;
grid-row-start: 3;
grid-row-end: 3;
border-top: 0.5px solid var(--brown-grey);;
}
.artwork-rightcolumn-top-date + div.artwork-rightcolumn-description {
grid-column-start: 9;
@ -1588,8 +1591,16 @@ div.browsebycategory-categories:hover {
grid-column-end: 18;
grid-row-start: 5;
grid-row-end: 5;
border-top: 0.5px solid var(--brown-grey);;
}
.exh + .artwork-rightcolumn-exhibition {
padding: 20px 0;
border-bottom: 0.5px solid var(--brown-grey);
}
.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;
grid-column-end: 18;
@ -1611,6 +1622,12 @@ div.browsebycategory-categories:hover {
grid-row-end: 1;
margin: 1em 0 0.5em;
}
.des-exh-section .des, .des-exh-section .exh {
border-top: 3px solid #000;
margin: 0px;
padding: 20px 0;
}
.text-description {
grid-column-start: 1;
grid-column-end: 8;
@ -1698,8 +1715,12 @@ div.browsebycategory-categories:hover {
font-style: normal;
letter-spacing: 0.9px;
margin-top: 0px;
}
.artwork-rightcolumn-top-date p.label-item > .label-item-date-artwork {
margin-bottom: 30px;
}
.metadata-link:hover, .metadata-link a:hover, .metadata-link a span:hover, .metadata-link p {
color: black;
text-decoration-color: black;
@ -1717,6 +1738,18 @@ div.browsebycategory-categories:hover {
margin-bottom: 1em;
margin-top: 0px !important;
}
.artwork-rightcolumn-top-date p.label-item:first-of-type {
margin-bottom: 1em;
margin-top: 0px !important;
}
.artwork-rightcolumn-top-date p.label-item{
margin-bottom: 0.5em;
margin-top: 1em !important;
}
.artwork-rightcolumn-top-date .source {
margin-bottom: 1em;
margin-top: 0.5em ;
}
.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;
@ -1753,7 +1786,7 @@ div.browsebycategory-categories:hover {
grid-column-end: 18;
margin: 0 !important;
}
.artwork-relatedworks-tile:hover, .artwork-relatedworks-tile:hover ~ .artwork-relatedworks-date {
.artwork-relatedworks-tile a:hover, .artwork-relatedworks-tile a:hover ~ .artwork-relatedworks-date, .artwork-lists-title a:hover {
color: var(--blue-blue);
}
img.artwork-relatedworks-imgs, .artwork-lists-img img{
@ -1769,38 +1802,71 @@ img.artwork-relatedworks-imgs, .artwork-lists-img img{
.artwork-lists-img {}
.artwork-about-under-img a , .artwork-about-under-img a:visited{
color: #000;
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);
}
.artefact, .facsimile {
align-items: center;
display: flex;
}
/* LIBRARY */
.tns-controls { text-align: center; margin-bottom: 10px; }
.tns-controls [aria-controls] {
display: none;
}
.tns-outer {
display: flex;
flex-direction: column-reverse;
}
.tns-nav {
text-align: center;
margin: 10px 0;
}
.tns-nav > [aria-controls] {
width: 9px;
height: 9px;
width: 12px;
height: 12px;
padding: 0;
margin: 0 5px;
margin: 0 5px 0 0;
border-radius: 50%;
background: #ddd;
border: 0;
border: 1px solid #000;
background: #FFF;
}
.tns-nav-active {
background: #000 !important;
}
#tns1-iw {
margin: 0px -10px 0px 0px !important;
}
/*.tns-item img {
width: inherit;
}*/
.tns-item p:nth-of-type(1) {
text-transform: uppercase;
}
.tns-item p{
text-align: center;
}
.tns-outer {
display: inline-grid;
}
.tns-outer {
-webkit-transform: scaleY(-1);
-ms-transform: scaleY(-1);
transform: scaleY(-1);
}
.tns-outer > * {
-webkit-transform: scaleY(-1);
-ms-transform: scaleY(-1);
transform: scaleY(-1);
}
.tns-item img {
width: 100%;
max-width: inherit;
}
/*************************************/
/************ WIKI PAGES ************/
@ -1821,11 +1887,12 @@ div#tutorials-intro h3, div#tutorials-intro p {
/************ Disactive Mobile ************/
#navigation-mobile {
#navigation-mobile, #message-mobile {
display: none;
}
/********************************** RESPONSIVE DESIGN *********************************/
@ -1837,6 +1904,31 @@ div#tutorials-intro h3, div#tutorials-intro p {
@media screen and (min-width:0px) and (max-width: 768px) {
#message-mobile {
display: block;
position: fixed;
width: 100%;
top: 0;
left: 0;
width: 100%;
z-index: 10000;
height: 100%;
background-color: rgba(255, 255, 255, 0.96);
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;
}
/********** NAV
#navigation {
@ -1848,6 +1940,20 @@ div#tutorials-intro h3, div#tutorials-intro p {
div#header-top {
border-bottom: 0px !important;
}
input[type="checkbox"]:checked ~ #navigation-mobile {
transform: translateY(0);
}
input[type="checkbox"]:checked ~ .sidebarIconToggle > .icon-menu {
display: none;
}
input[type="checkbox"]:checked ~ .sidebarIconToggle > .icon-cross {
display: block;
}
.sidebarIconToggle {
cursor: pointer;
}
#navigation-mobile {
display: block;
position: fixed;
@ -1858,7 +1964,10 @@ div#tutorials-intro h3, div#tutorials-intro p {
height: 100%;
background-color: rgba(255, 255, 255, 0.96);
overflow-y: hidden;
transition: transform 250ms ease-in-out;
}
.navigation-mobile-items{
margin: 100px 0px 0px 0px;
display: flex;
@ -1877,6 +1986,7 @@ div#tutorials-intro h3, div#tutorials-intro p {
color: var(--black);
text-decoration: none;
margin: 30px 0px;
cursor: pointer;
}
.navigation-mobile-items div a {

26
templates/artwork.html

@ -93,21 +93,21 @@
{% endif %}
{% if 'DownloadDigitalFacsimile' in x %}
<div>
<div class="facsimile">
<a target="_blank" href="{{ x['DownloadDigitalFacsimile']['value'] }}"><img src="{{ url_for('static', filename='/imgs/Icons/icn_download.svg') }}"></a>
<a target="_blank" href="{{ x['DownloadDigitalFacsimile']['value'] }}"><span>Download digital facsimile</span></a>
</div>
{% endif %}
{% if 'DigitalFacsimileExternalLink' in x %}
<div>
<div class="facsimile">
<a target="_blank" href="{{ x['DigitalFacsimileExternalLink']['value'] }}"><img src="{{ url_for('static', filename='/imgs/Icons/icn_external_link.svg') }}"></a>
<a target="_blank" href="{{ x['DigitalFacsimileExternalLink']['value'] }}"><span>External digital facsimile link</span></a>
</div>
{% endif %}
{% if 'DigitalFacsimileExternalLink2' in x %}
<div>
<div class="facsimile">
<a target="_blank" href="{{ x['DigitalFacsimileExternalLink2']['value'] }}"><img src="{{ url_for('static', filename='/imgs/Icons/icn_external_link.svg') }}"></a>
<a target="_blank" href="{{ x['DigitalFacsimileExternalLink2']['value'] }}"><span>External digital facsimile link 2</span></a>
</div>
@ -132,21 +132,21 @@
{% endif %}
{% if 'VideoFile' in x %}
<div>
<div class="artefact">
<a target="_blank" href="{{ x['VideoFile']['value'] }}"><img src="{{ url_for('static', filename='/imgs/Icons/icn_video.svg') }}"></a>
<a target="_blank" href="{{ x['VideoFile']['value'] }}"><span>Video</span></a>
</div>
{% endif %}
{% if 'AudioFile' in x %}
<div>
<div class="artefact">
<a target="_blank" href="{{ x['AudioFile']['value'] }}"><img src="{{ url_for('static', filename='/imgs/Icons/icn_audio.svg') }}"></a>
<a target="_blank" href="{{ x['AudioFile']['value'] }}"><span>Audio</span></a>
</div>
{% endif %}
{% if 'ImageFile' in x %}
<div>
<div class="artefact">
<a target="_blank" href="{{ x['ImageFile']['value'] }}"><img src="{{ url_for('static', filename='/imgs/Icons/icn_image.svg') }}"></a>
<a target="_blank" href="{{ x['ImageFile']['value'] }}"><span>Image</span></a>
</div>
@ -157,7 +157,7 @@
</div>
<!-- DISTRIBUTOR LINKS -->
<div>
<div class="distri-links">
{% if artworkdistributorlinks['results']['bindings']==[] %}
{% else %}
<p class="label-item">DISTRIBUTOR LINKS</p>
@ -225,7 +225,7 @@
<!-- extra info if available -->
{% if 'sourceLabel' in x %}
<div>Source: {{ x['sourceLabel']['value'] }}</div>
<div class="source">Source: {{ x['sourceLabel']['value'] }}</div>
{% endif %}
{% endfor %}
{% endif %}
@ -262,12 +262,12 @@
<!-- end of about right top -->
<!-- start of about right column bottom -->
<div class="">
<div class="des-exh-section">
<!-- description -->
<!-- if there is a description add description here -->
<p class="label-item">DESCRIPTION</p>
<p class="label-item des">DESCRIPTION</p>
{% if artworkdescriptiondata['results']['bindings']==[] %}
<p>information not available</p>
@ -312,7 +312,7 @@
<!-- end description loop -->
<!-- exhibition and distribution history loop-->
<p class="label-item">EXHIBITION AND DISTRIBUTION HISTORY</p>
<p class="label-item exh">EXHIBITION AND DISTRIBUTION HISTORY</p>
<!-- if exhibition in, then do show that -->
{% if artworkexhibitiondata['results']['bindings']==[] %}
<p>information not available</p>
@ -436,7 +436,7 @@
<!-- LISTS DESIGN IF NO LISTS TO BE CLARIFIED-->
<div class="artwork-lists">
<div class="Heading_C">LISTS</div>
<div class="Heading_C">Lists</div>
{% if artworklists['results']['bindings']==[] %}
{% else %}
@ -475,7 +475,7 @@
640: {
edgePadding: 20,
gutter: 20,
items: 2
items: 1
},
700: {
gutter: 30

4
templates/home.html

@ -34,7 +34,9 @@
<video preload="meta" autoplay="" loop="">
<source src="{{ url_for('static', filename='/vid/DAAP_video_reduced.mp4') }}" type="video/mp4">
</video>
<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">Explore Data Visualization</a>
<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>

16
templates/layout.html

@ -22,6 +22,9 @@
</div>
</div>
<div id="message-mobile">
<p>Mobile version coming soon, please view on desktop</p>
</div>
<div id="header">
<div id="animatedlogo">
@ -35,7 +38,11 @@
</div>
<!-- <div id="header-keyword-search">
<input type="text" id="fname" name="fname" value="" placeholder="Keyword search">
</div> -->
</div>
<div class="container" onclick="myFunction(this)">
</div>
-->
<div class="web-dev-placeholder">
<p>WEBSITE IN DEVELOPMENT</p>
</div>
@ -99,7 +106,12 @@
</div>
</div>
<script type="text/javascript">
function menutoggle(x) {
x.classList.toggle("change");
}
</script>

Loading…
Cancel
Save