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

update on artworks layout

master
JoBCB 4 years ago
parent
4f6624ccb5
commit
0d5dcee566
2 changed files with 80 additions and 23 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. 91
      static/css/style.css
  2. 12
      templates/artwork.html

91
static/css/style.css
View File

@ -41,7 +41,7 @@ font-style: normal;
@media screen and (min-width: 320px) {
/* 12 18 */ body, tbody tr th, .mw-parser-output ul, .mw-parser-output a, .artwork-intro,
.date, div#header-keyword-search span {
.date, div.artwork-relatedworks-date, div#header-keyword-search span, .metadata-link p {
font-size: calc(12px + 6 * (100vw - 320px) / 1600);
line-height: 1.63;
}
@ -54,7 +54,8 @@ div#footer-title-socials p, thead tr th, .artwork-nav-label, .label-item {
font-size: calc(12px + 6 * (100vw - 320px) / 1600);
line-height: 28.4px;
}
/* 14 20 */ div#navigation a, .title, .metadata-link, .metadata-link a, .metadata-link a span {
/* 14 20 */ div#navigation a, .title, .metadata-link, .metadata-link a, .metadata-link a span,
div.artwork-relatedworks-tile {
font-size: calc(14px + 8 * (100vw - 320px) / 1600);
line-height: 1.44;
}
@ -96,14 +97,15 @@ div#footer-title-socials p, thead tr th, .artwork-nav-label, .label-item {
@media screen and (min-width: 1920px) {
body, tbody tr th, .mw-parser-output ul, .mw-parser-output a, .artwork-intro,
.date, div#header-keyword-search span {
.date, div.artwork-relatedworks-date, div#header-keyword-search span, .metadata-link p {
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 {
font-size: font-size: 18px;
}
div#navigation a, .title, .metadata-link, .metadata-link a, .metadata-link a span {
div#navigation a, .title, .metadata-link, .metadata-link a, .metadata-link a span,
div.artwork-relatedworks-tile {
font-size: 20px;
}
div#footer-socials-links a {
@ -191,7 +193,15 @@ img.artwork-mockuppage{
text-transform: uppercase;
padding: 0px 20px;
}
.soon {
padding: 55px 80px;
width: 100%;
}
.soon + #footer {
position: fixed;
bottom: 0;
left: 0;
}
/************ LAYOUT ************/
:root {
--black: #000000;
@ -647,7 +657,7 @@ a.paginate_button.next:after {
}
/************ TEXT STYLES************/
.title {
.title, div.artwork-relatedworks-tile {
/* width: 200px;
height: 26px;
font-size: 18px;
@ -659,7 +669,7 @@ a.paginate_button.next:after {
letter-spacing: 0.9px;
color: var(--black);
}
.date {
.date, div.artwork-relatedworks-date {
font-family: Roboto;
/*font-size: 16px;
line-height: 1.63;*/
@ -1312,6 +1322,10 @@ div.browsebycategory-categories:hover {
column-gap: 1rem;
grid-template-columns: repeat(18, 1fr);
}
/*.artwork-relatedwrapper{
grid-template-areas:
"title title item1 item1 item1 item2 item2 item2 item3 item3 item3 item4 item4 item4 item5 item5 item5";
}*/
.artwork-about{
padding: 30px 80px 60px 80px;
}
@ -1369,8 +1383,8 @@ div.browsebycategory-categories:hover {
}
.artwork-copiesincollection {
grid-column-start: 4;
grid-column-end: 7;
grid-column-start: 3;
grid-column-end: 6;
border-right: solid 0.5px var(--black);
display: flex;
flex-direction: column;
@ -1380,7 +1394,6 @@ div.browsebycategory-categories:hover {
.artwork-copiesincollection-title-div {
text-align: center;
}
.artwork-relatedwrapper .Heading_C , .artwork-copieswrapper .Heading_C {
grid-column-start: 1;
grid-column-end: 3;
@ -1391,16 +1404,13 @@ div.browsebycategory-categories:hover {
text-align: center;
align-self: center;
}
.artwork-copiesincollection-img-div {
max-width: 55px;
align-self: center;
}
.artwork-copiesincollection-img-div img {
width: 100%;
}
.metadata-link, .metadata-link a, .metadata-link a span {
font-family: Roboto Condensed Bold;
/* font-size: 18px;
@ -1411,16 +1421,65 @@ div.browsebycategory-categories:hover {
letter-spacing: 0.9px;
color: var(--blue-blue);
}
.label-item-date-artwork{
font-family: Roboto Condensed Bold;
font-weight: bold;
font-stretch: condensed;
font-style: normal;
letter-spacing: 0.9px;
margin-top: 0px;
margin-bottom: 30px;
}
.metadata-link, .metadata-link a, .metadata-link a span:hover {
color: black;
}
.artwork-about-bottom .mw-parser-output {
.metadata-link p {
font-family: Roboto;
font-weight: normal;
font-stretch: normal;
font-style: normal;
margin-top: 0px;
margin-bottom: 0px;
}
.artwork-rightcolumn-top-contributors p.label-item, .artwork-rightcolumn-top-date p.label-item,
.artwork-rightcolumn-top-contributors .metadata-link, .artwork-rightcolumn-top-date .metadata-link {
margin-bottom: 30px;
margin-top: 0px !important;
}
.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;
display: inherit;
}
.artwork-relatedworks:nth-of-type(2) {
grid-column-start: 3;
grid-column-end: 6;
margin: 0 !important;
}
.artwork-relatedworks:nth-of-type(3) {
grid-column-start: 6;
grid-column-end: 9;
margin: 0 !important;
}
.artwork-relatedworks:nth-of-type(4) {
grid-column-start: 9;
grid-column-end: 12;
margin: 0 !important;
}
.artwork-relatedworks:nth-of-type(5) {
grid-column-start: 12;
grid-column-end: 15;
margin: 0 !important;
}
.artwork-relatedworks:nth-of-type(6) {
grid-column-start: 15;
grid-column-end: 18;
margin: 0 !important;
}
.artwork-relatedworks-imgs{
width: 100%;
max-width: 200px;
}
/*************************************/
/************ WIKI PAGES ************/

12
templates/artwork.html
View File

@ -64,28 +64,26 @@
<!-- contributors -->
<div class="artwork-rightcolumn-top-contributors">
<span class="label-item">CONTRIBUTORS</span>
<p class="label-item">CONTRIBUTORS</p>
{% for x in artworkcontributors['results']['bindings'] %}
<!-- name surname -->
<div class="metadata-link">
<a href='/person?id={{ x["creators"]["value"] | replace("http://daap.bannerrepeater.org/entity/", "") }}'>
<span>{{ x['creatorsLabel']['value'] }}</span>
</a>
</div>
<!-- role/function -->
<div>
<span>{{ x['role']['value'] }}</span>
<p>{{ x['role']['value'] }}</p>
</div>
{% endfor %}
</div>
<!-- date -->
<div class="artwork-rightcolumn-top-date">
<span class="label-item">DATE</span>
<p class="label-item">DATE</p>
<!-- loops through dates -->
{% for x in artworkdate['results']['bindings'] %}
<!-- date -->
{% if 'date' in x %}
<div>{{ x['date']['value'] | replace("T00:00:00Z", "") }}</div>
<div class="label-item-date-artwork">{{ x['date']['value'] | replace("T00:00:00Z", "") }}</div>
{% else %}
but <div>information not available</div>
{% endif %}
@ -98,7 +96,7 @@
<!-- publishers removed div .artwork-rightcolumn-top-publishers-->
<span class="label-item">PUBLISHERS</span>
<p class="label-item">PUBLISHERS</p>
<!-- loop through publishers -->
{% for x in artworkpublisher['results']['bindings'] %}
<!-- name, surname -->

Write Preview
Loading…
Cancel
Save