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

general changes after feedback plus artwork image gallery and layout

master
JoBCB 3 years ago
parent
ae0b544bc3
commit
e44fbd1c31
4 changed files with 173 additions and 49 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  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
View File

@ -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
View File

@ -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
View File

@ -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
View File

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

Write Preview
Loading…
Cancel
Save