added changes after feedback, worked on artwork template and implemented image carousel
This commit is contained in:
parent
f305e9259a
commit
69f5b8c7d5
@ -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;
|
||||
}
|
||||
|
||||
/*************************************/
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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 %}
|
||||
@ -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…
Reference in New Issue
Block a user