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

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

master
JoBCB 4 years ago
parent
f305e9259a
commit
69f5b8c7d5
4 changed files with 174 additions and 64 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  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
View File

@ -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;
margin-left: auto;
margin-right: auto;
padding-top: 15px;
display: block;
/*
margin-left: 22px;*/
}
a#footer-img-wiki img {
width: 75px;
height: auto; height: auto;
padding-top: 5px; margin-left: auto;
margin-left: -8px; 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;
@ -1530,26 +1567,30 @@ div.browsebycategory-categories:hover {
grid-row-start: 2; grid-row-start: 2;
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
View File

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

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

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

Write Preview
Loading…
Cancel
Save