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

12
templates/artwork.html
View File

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

Write Preview
Loading…
Cancel
Save