Browse Source

added changes after feedback, worked on artwork template and implemented image carousel

master
JoBCB 4 years ago
parent
commit
69f5b8c7d5
  1. 161
      static/css/style.css
  2. 2
      templates/artistsindex.html
  3. 58
      templates/artwork.html
  4. 17
      templates/layout.html

161
static/css/style.css

@ -207,7 +207,6 @@ img.artwork-mockuppage{
}
.soon-nofix {
margin: 80px 80px;
width: 100%;
}
@media screen and (min-width: 1920px) {
.soon-nofix + #footer {
@ -265,7 +264,7 @@ body i {
div#header{
width: 100%;
background-color: #FFFFFF;
height: 134px;
height: 120px;
border-bottom: 3px solid #000;
display: flex;
width: 100%;
@ -282,13 +281,13 @@ div#header-top{
}
div#animatedlogo{
display: flex;
width: 8vw;
min-width: 130px;
width: 8.5vw;
/*min-width: 130px;*/
}
div#animatedlogo img{
width: 8vw; /*auto*/
min-width: 130px;
max-width: 130px;
width: 8.5vw; /*auto*/
min-width: 58px;
max-width: 117px;
justify-self: center;
}
div#header-title{
@ -331,7 +330,7 @@ div#header-top div#header-keyword-search:after {
}
div#header-top, div#navigation{
width: 100%;
height: 67px;
height: 60px;
padding-right: 8vw;
}
div#navigation{
@ -454,14 +453,26 @@ div#footer-title-br p, div#footer-title-others p, div#footer-title-contact p, di
letter-spacing: 1.5px;
color: var(--brown-grey);
}
div#footer-img-br img{
width: 85px;
a#footer-img-br img {
width: 75px;
height: auto;
padding-top: 5px;
margin-left: -8px;
margin-left: auto;
margin-right: auto;
padding-top: 15px;
display: block;
/*
margin-left: 22px;*/
}
a#footer-img-wiki img {
width: 75px;
height: auto;
margin-left: auto;
margin-right: auto;
display: block;
}
/* Banner Repeater Logo*/
div#footer-img-br figcaption {
a#footer-img-br, a#footer-img-br figcaption , a#footer-img-br figcaption:hover, a#footer-img-br figcaption:visited,
a#footer-img-wiki, a#footer-img-wiki figcaption, a#footer-img-wiki figcaption:hover, a#footer-img-wiki figcaption:visited {
font-family: 'Roboto', sans-serif;
font-size: 16px;
margin: 0;
@ -470,7 +481,13 @@ div#footer-img-br figcaption {
font-style: normal;
font-weight: normal;
white-space: nowrap;
margin-top: -8px;
/*margin-top: -6px; */
text-decoration: none;
color: #FFFFFF;
cursor: pointer;
}
a#footer-img-wiki figcaption, a#footer-img-wiki figcaption:hover, a#footer-img-wiki figcaption:visited {
margin-top: 6px;
}
div#footer-img-others{
display: flex;
@ -478,14 +495,21 @@ div#footer-img-others{
flex-wrap: nowrap;
padding-top: 26px;
}
div#footer-img-lottery{
padding-left: 60px;
a#footer-img-lottery, a#footer-img-lottery:hover, a#footer-img-lottery:visited,
a#footer-img-wiki, a#footer-img-wiki:hover, a#footer-img-wiki:visited
a#footer-img-br:, a#footer-img-br:hover, a#footer-img-br:visited {
text-decoration: none;
color: #FFFFFF;
cursor: pointer;
}
div#footer-img-lottery img{
a#footer-img-lottery img{
width: 124px;
height: auto;
}
div#footer-img-wiki img{
a#footer-img-wiki{
padding-left: 60px;
}
a#footer-img-wiki img{
width: 56px;
height: auto;
}
@ -701,7 +725,7 @@ a.paginate_button.next:after {
}
/************ TEXT STYLES************/
.title, div.artwork-relatedworks-tile {
.title, .artwork-relatedworks-tile {
/* width: 200px;
height: 26px;
font-size: 18px;
@ -858,6 +882,9 @@ div#home-top-div{
height: auto;
position: relative;
z-index: 99;
border: 2px solid #bdbdbd;
box-shadow: 1px 1px 5px 3px #00000024;
border-radius: 6px;
}
#home-top-div #wrapper-top-buttons{
display: flex;
@ -1086,6 +1113,12 @@ div#home-recent-grid, div#browsethearchive-grid, div#selfpublishedindex-grid, di
/*text-align: center;*/
grid-gap: 1rem;
}
.browsethearchive-items-bottom a.title:hover, .browsethearchive-items-bottom a.title:hover ~ .date ,
.home-recent-items-bottom a.title:hover, .home-recent-items-bottom a.title:hover ~ .date {
color: var(--blue-blue);
}
div.home-show-wrapper{
width: 100%;
margin: 0px auto 60px auto;
@ -1372,7 +1405,7 @@ div.browsebycategory-categories:hover {
.artwork-title {
margin: 20px 8vw 30px 8vw;
margin: 30px 8vw 0px 8vw;
/* font-size: 25px; */
font-family: 'Roboto Condensed Bold', sans-serif;
font-weight: bold;
@ -1481,7 +1514,7 @@ div.browsebycategory-categories:hover {
color: var(--blue-blue);
cursor: pointer;
}
.artwork-about, .artwork-copieswrapper, .artwork-relatedwrapper {
.artwork-about, .artwork-copieswrapper, .artwork-relatedwrapper, .artwork-lists {
width: 100%;
display: grid;
row-gap: 0rem;
@ -1492,13 +1525,17 @@ div.browsebycategory-categories:hover {
grid-template-areas:
"title title item1 item1 item1 item2 item2 item2 item3 item3 item3 item4 item4 item4 item5 item5 item5";
}*/
.artwork-about{
.artwork-about, .artwork-lists{
padding: 30px 8vw 60px 8vw;
}
.artwork-lists {
border-top: solid 3px var(--black);
}
.artwork-copieswrapper {
border-top: solid 3px var(--black);
border-bottom: solid 3px var(--black);
padding: 30px 8vw 30px 8vw;
padding: 40px 8vw 30px 8vw;
}
.artwork-relatedwrapper {
padding: 30px 8vw 30px 8vw;
@ -1530,26 +1567,30 @@ div.browsebycategory-categories:hover {
grid-row-start: 2;
grid-row-end: 2;
}
.artwork-rightcolumn-top {
.artwork-rightcolumn-top{
border-bottom: 3px solid #000;
}
.artwork-rightcolumn-top, .artwork-rightcolumn-bottom {
margin: 0 !important;
display: grid;
}
.artwork-rightcolumn-top-contributors {
grid-column-start: 9;
grid-column-end: 13;
grid-column-start: 1;
grid-column-end: 10;
grid-row-start: 1;
grid-row-end: 1;
}
.artwork-rightcolumn-top-date {
grid-column-start: 14;
grid-column-start: 10;
grid-column-end: 18;
grid-row-start: 1;
grid-row-end: 1;
}
.artwork-rightcolumn-top-publishers, .artwork-rightcolumn-top-publishers {
grid-column-start: 15;
.artwork-rightcolumn-top-publishers {
grid-column-start: 10;
grid-column-end: 18;
grid-row-start: 2;
grid-row-end: 2;
@ -1569,7 +1610,7 @@ div.browsebycategory-categories:hover {
border-top: 3px solid black;
}
.text-description .mw-parser-output, .text-exhibition .mw-parser-output{
.text-description .mw-parser-output, .artwork-rightcolumn-exhibition .mw-parser-output, .text-exhibition .mw-parser-output{
display: initial;
}
.artwork-rightcolumn-exhibition {
@ -1586,27 +1627,23 @@ div.browsebycategory-categories:hover {
grid-row-end: 4;
border-top: 3px solid black;
}
.artwork-rightcolumn-top-publishers {
grid-column-start: 15;
grid-column-end: 18;
grid-row-start: 2;
grid-row-end: 2;
}
.artwork-rightcolumn-exhibition, .artwork-rightcolumn-description {
display: grid;
row-gap: 0rem;
column-gap: 1rem;
/*column-gap: 1rem;*/
grid-template-columns: repeat(9, 1fr);
grid-template-rows: min-content auto;
}
.artwork-rightcolumn-exhibition p, .artwork-rightcolumn-description p {
grid-column-start: 1;
grid-column-end: 9;
grid-row-start: 1;
grid-row-end: 1;
margin: 1em 0 0.5em;
}
.text-description {
grid-column-start: 1;
grid-column-end: 7;
grid-column-end: 8;
grid-row-start: 2;
grid-row-end: 2;
}
@ -1625,9 +1662,11 @@ div.browsebycategory-categories:hover {
grid-column-end: 11;
grid-row-start: 2;
grid-row-end: 2;
margin-left: 1em;
}
.text-date-author .label-item:nth-of-type(1) {
margin-top: 0px;
/* margin-top: 0px;*/
margin: 0 0;
}
.artwork-lists {
padding: 30px 8vw 30px 8vw;
@ -1643,7 +1682,7 @@ div.browsebycategory-categories:hover {
.artwork-copiesincollection-title-div {
text-align: center;
}
.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-end: 3;
/* writing-mode: sideways-lr;
@ -1744,9 +1783,49 @@ div.browsebycategory-categories:hover {
grid-column-end: 18;
margin: 0 !important;
}
.artwork-relatedworks-imgs{
.artwork-relatedworks-tile:hover, .artwork-relatedworks-tile:hover ~ .artwork-relatedworks-date {
color: var(--blue-blue);
}
img.artwork-relatedworks-imgs, .artwork-lists-img img{
width: 100%;
max-width: 200px;
display: inline;
}
.artwork-relatedworks-img-div /*TEST*/ {
height: 80%;
display: flex;
align-items: center;
}
.artwork-lists-img {}
.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;
padding: 0;
margin: 0 5px;
border-radius: 50%;
background: #ddd;
border: 0;
}
#tns1-iw {
margin: 0px -10px 0px 0px !important;
}
/*************************************/

2
templates/artistsindex.html

@ -1,7 +1,7 @@
{% extends "layout.html" %}
{% block content %}
<div class="pagetitle" id="artistsindex-title">INDEX OF ARTIST</div>
<div class="pagetitle" id="artistsindex-title">INDEX OF CREATORS / CONTRIBUTORS</div>
<table id="artistsindex-table">
<thead>

58
templates/artwork.html

@ -27,10 +27,10 @@
<!-- NAVIGATION HERE? -->
<div class="artwork-nav">
<div class="artwork-nav-label active">ABOUT THIS WORK</div>
<div class="artwork-nav-label artwork-nav-label-about active">ABOUT THIS WORK</div>
<!-- <div class="artwork-nav-label">RELATIONSHIPS</div> -->
<!-- <div class="artwork-nav-label">LISTS</div> -->
<div class="artwork-nav-label"><a class="det-record" target="_blank" href="https://daap.bannerrepeater.org/wiki/Item:{{ artwork_id }}">DETAILED RECORD</a></div>
<div class="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>
</div>
@ -41,20 +41,25 @@
<div class="artwork-leftcolumn">
<!-- ARTWORK IMAGES -->
<div class="artwork-about-img">
<!-- removed artwork-about-img + on img artwork-about-imgs -->
<div class="my-slider">
{% if artworkimages['results']['bindings']==[] %}
<img class="artwork-about-imgs" src="{{ url_for('static', filename='/imgs/Icons/placeholder_no-image2.png') }}">
<img class="item" src="{{ url_for('static', filename='/imgs/Icons/placeholder_no-image2.png') }}">
{% else %}
{% for x in artworkimages['results']['bindings'] %}
{% if "image" in x %}
<img class="artwork-about-imgs" src='{{ x["image"]["value"] | replace("wiki/File:","wiki/Special:Redirect/file/") }}'>
<img class="item" src='{{ x["image"]["value"] | replace("wiki/File:","wiki/Special:Redirect/file/") }}'>
{% endif %}
{% endfor %}
{% endif %}
</div>
<!-- other stuff like downloads, absent for now -->
<div class="artwork-about-under-img">
@ -206,11 +211,11 @@
{% endif %}
{% endfor %}
{% endif %}
</div>
<!-- </div> -->
<!-- end of date -->
<!-- publishers-->
<div class="artwork-rightcolumn-top-publishers">
<!-- <div class="artwork-rightcolumn-top-publishers"> -->
<p class="label-item">PUBLISHERS</p>
<!-- loop through publishers -->
{% if artworkpublisher['results']['bindings']==[] %}
@ -239,7 +244,7 @@
<!-- end of about right top -->
<!-- start of about right column bottom -->
<div class="artwork-rightcolumn-bottom">
<div class="">
<!-- description -->
@ -248,16 +253,16 @@
{% else %}
<!-- For loop -->
{% for x in artworkdescriptiondata['results']['bindings'] %}
<div>
<div class="artwork-rightcolumn-bottom">
<p class="label-item">DESCRIPTION</p>
<!-- left part with the description text already coming in a div from wiki-->
<div>
<div class="text-description">
{{ x["text"] | safe }}
</div>
<!-- right ride with author etc LATER-->
<div>
<div class="text-date-author">
<p class="label-item">AUTHOR</p>
{% if "authordescriptionPageLabel" in x %}
<p>{{ x['authordescriptionPageLabel']['value'] }}</p>
@ -289,14 +294,14 @@
{% else %}
{% for x in artworkexhibitiondata['results']['bindings'] %}
<div>
<div class="artwork-rightcolumn-exhibition">
<p class="label-item">EXHIBITION AND DISTRIBUTION HISTORY</p>
<div>
<div class="text-exhibition">
{{ x['text'] | safe }}
</div>
<!-- right ride with author etc LATER-->
<div>
<div class="text-date-author">
<p class="label-item">AUTHOR</p>
<!-- if there is an author name then add here otherwise info non available -->
{% if "authorexhibitionHisPageLabel" in x %}
@ -344,7 +349,7 @@
<!-- LISTS DESIGN IF NO LISTS TO BE CLARIFIED-->
<div class="artwork-lists">
<div class="artwork-nav-label">LISTS</div>
<div class="Heading_C">LISTS</div>
{% if artworklists['results']['bindings']==[] %}
<p>The artwork isn't featured in any lists yet</p>
@ -441,4 +446,27 @@
<!-- End related works -->
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.2/min/tiny-slider.js"></script>
<script type="text/javascript">
var slider = tns({
container: '.my-slider',
items: 1,
responsive: {
640: {
edgePadding: 20,
gutter: 20,
items: 2
},
700: {
gutter: 30
},
900: {
items: 1
}
}
});
</script>
{% endblock content %}

17
templates/layout.html

@ -6,8 +6,7 @@
<title>D.A.A.P</title>
<link rel="stylesheet" href="{{ url_for('static', filename='/css/style.css') }}">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.3/tiny-slider.css">
</head>
<body>
@ -53,17 +52,21 @@
<div class="footer-left">
<div id="footer-credit">
<div id="footer-title-br"><p>A project by</p></div>
<div id="footer-img-br">
<a id="footer-img-br" target="_blank" href="https://www.bannerrepeater.org/">
<img src="{{ url_for('static', filename='/imgs/Logos/Banner-Repeater-logo.png') }}">
<figcaption>Banner Repeater</figcaption>
</div>
</a>
</div>
<div id="footer-funds">
<div id="footer-title-others"><p>With support from</p></div>
<div id="footer-img-others">
<div id="footer-img-wiki"><img src="{{ url_for('static', filename='/imgs/Logos/wikimedia_logo.png') }}"></div>
<div id="footer-img-lottery"><img src="{{ url_for('static', filename='/imgs/Logos/Lottery-white on black.png') }}"></div>
<a id="footer-img-lottery" target="_blank" href="https://www.artscouncil.org.uk/funding-finder/grants-arts">
<img src="{{ url_for('static', filename='/imgs/Logos/Lottery-white on black.png') }}">
</a>
<a id="footer-img-wiki" target="_blank" href="https://wikimedia.org.uk/">
<img src="{{ url_for('static', filename='/imgs/Logos/wikimedia_logo.png') }}">
<figcaption>Wikimedia UK</figcaption>
</a>
</div>
</div>
</div>

Loading…
Cancel
Save