Browse Source

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

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

159
static/css/style.css

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

58
templates/artwork.html

@ -27,10 +27,10 @@
<!-- NAVIGATION HERE? --> <!-- NAVIGATION HERE? -->
<div class="artwork-nav"> <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">RELATIONSHIPS</div> -->
<!-- <div class="artwork-nav-label">LISTS</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>
</div> </div>
@ -41,20 +41,25 @@
<div class="artwork-leftcolumn"> <div class="artwork-leftcolumn">
<!-- ARTWORK IMAGES --> <!-- ARTWORK IMAGES -->
<div class="artwork-about-img"> <!-- removed artwork-about-img + on img artwork-about-imgs -->
<div class="my-slider">
{% if artworkimages['results']['bindings']==[] %} {% 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 %} {% else %}
{% for x in artworkimages['results']['bindings'] %} {% for x in artworkimages['results']['bindings'] %}
{% if "image" in x %} {% 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 %} {% endif %}
{% endfor %} {% endfor %}
{% endif %} {% endif %}
</div> </div>
<!-- other stuff like downloads, absent for now --> <!-- other stuff like downloads, absent for now -->
<div class="artwork-about-under-img"> <div class="artwork-about-under-img">
@ -206,11 +211,11 @@
{% endif %} {% endif %}
{% endfor %} {% endfor %}
{% endif %} {% endif %}
</div> <!-- </div> -->
<!-- end of date --> <!-- end of date -->
<!-- publishers--> <!-- publishers-->
<div class="artwork-rightcolumn-top-publishers"> <!-- <div class="artwork-rightcolumn-top-publishers"> -->
<p class="label-item">PUBLISHERS</p> <p class="label-item">PUBLISHERS</p>
<!-- loop through publishers --> <!-- loop through publishers -->
{% if artworkpublisher['results']['bindings']==[] %} {% if artworkpublisher['results']['bindings']==[] %}
@ -239,7 +244,7 @@
<!-- end of about right top --> <!-- end of about right top -->
<!-- start of about right column bottom --> <!-- start of about right column bottom -->
<div class="artwork-rightcolumn-bottom"> <div class="">
<!-- description --> <!-- description -->
@ -248,16 +253,16 @@
{% else %} {% else %}
<!-- For loop --> <!-- For loop -->
{% for x in artworkdescriptiondata['results']['bindings'] %} {% for x in artworkdescriptiondata['results']['bindings'] %}
<div> <div class="artwork-rightcolumn-bottom">
<p class="label-item">DESCRIPTION</p> <p class="label-item">DESCRIPTION</p>
<!-- left part with the description text already coming in a div from wiki--> <!-- left part with the description text already coming in a div from wiki-->
<div> <div class="text-description">
{{ x["text"] | safe }} {{ x["text"] | safe }}
</div> </div>
<!-- right ride with author etc LATER--> <!-- right ride with author etc LATER-->
<div> <div class="text-date-author">
<p class="label-item">AUTHOR</p> <p class="label-item">AUTHOR</p>
{% if "authordescriptionPageLabel" in x %} {% if "authordescriptionPageLabel" in x %}
<p>{{ x['authordescriptionPageLabel']['value'] }}</p> <p>{{ x['authordescriptionPageLabel']['value'] }}</p>
@ -289,14 +294,14 @@
{% else %} {% else %}
{% for x in artworkexhibitiondata['results']['bindings'] %} {% for x in artworkexhibitiondata['results']['bindings'] %}
<div> <div class="artwork-rightcolumn-exhibition">
<p class="label-item">EXHIBITION AND DISTRIBUTION HISTORY</p> <p class="label-item">EXHIBITION AND DISTRIBUTION HISTORY</p>
<div> <div class="text-exhibition">
{{ x['text'] | safe }} {{ x['text'] | safe }}
</div> </div>
<!-- right ride with author etc LATER--> <!-- right ride with author etc LATER-->
<div> <div class="text-date-author">
<p class="label-item">AUTHOR</p> <p class="label-item">AUTHOR</p>
<!-- if there is an author name then add here otherwise info non available --> <!-- if there is an author name then add here otherwise info non available -->
{% if "authorexhibitionHisPageLabel" in x %} {% if "authorexhibitionHisPageLabel" in x %}
@ -344,7 +349,7 @@
<!-- LISTS DESIGN IF NO LISTS TO BE CLARIFIED--> <!-- LISTS DESIGN IF NO LISTS TO BE CLARIFIED-->
<div class="artwork-lists"> <div class="artwork-lists">
<div class="artwork-nav-label">LISTS</div> <div class="Heading_C">LISTS</div>
{% if artworklists['results']['bindings']==[] %} {% if artworklists['results']['bindings']==[] %}
<p>The artwork isn't featured in any lists yet</p> <p>The artwork isn't featured in any lists yet</p>
@ -441,4 +446,27 @@
<!-- End related works --> <!-- End related works -->
</div> </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 %} {% endblock content %}

17
templates/layout.html

@ -6,8 +6,7 @@
<title>D.A.A.P</title> <title>D.A.A.P</title>
<link rel="stylesheet" href="{{ url_for('static', filename='/css/style.css') }}"> <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> <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> </head>
<body> <body>
@ -53,17 +52,21 @@
<div class="footer-left"> <div class="footer-left">
<div id="footer-credit"> <div id="footer-credit">
<div id="footer-title-br"><p>A project by</p></div> <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') }}"> <img src="{{ url_for('static', filename='/imgs/Logos/Banner-Repeater-logo.png') }}">
<figcaption>Banner Repeater</figcaption> <figcaption>Banner Repeater</figcaption>
</div> </a>
</div> </div>
<div id="footer-funds"> <div id="footer-funds">
<div id="footer-title-others"><p>With support from</p></div> <div id="footer-title-others"><p>With support from</p></div>
<div id="footer-img-others"> <div id="footer-img-others">
<div id="footer-img-wiki"><img src="{{ url_for('static', filename='/imgs/Logos/wikimedia_logo.png') }}"></div> <a id="footer-img-lottery" target="_blank" href="https://www.artscouncil.org.uk/funding-finder/grants-arts">
<div id="footer-img-lottery"><img src="{{ url_for('static', filename='/imgs/Logos/Lottery-white on black.png') }}"></div> <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> </div>
</div> </div>

Loading…
Cancel
Save