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

artwork layout

Browse Source
This commit is contained in:
JoBCB 2020-11-19 20:39:27 +00:00
parent cc1c8ed785
commit 9173dbeeb4
2 changed files with 185 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

189
static/css/style.css
View File

@ -206,9 +206,18 @@ img.artwork-mockuppage{
left: 0; left: 0;
} }
.soon-nofix { .soon-nofix {
margin: 10vmin 80px; margin: 80px 80px;
width: 100%; width: 100%;
} }
@media screen and (min-width: 1920px) {
.soon-nofix + #footer {
position: fixed;
}
}
br{
display: none;
}
/************ LAYOUT ************/ /************ LAYOUT ************/
:root { :root {
--black: #000000; --black: #000000;
@ -599,24 +608,24 @@ tbody tr th a{
} }
.idnumber { .idnumber {
padding: 16px 0px 16px 8vw; padding: 16px 0px 16px 8vw;
min-width: 56px; width: 10%;
max-width: 128px; /*56px * 2 + 16*/ /*min-width: 56px;
max-width: 128px; */
}
.label {
width: 20%;
} }
.label a { .label a {
font-family: Roboto Condensed Bold, sans-serif; font-family: Roboto Condensed Bold, sans-serif;
font-weight: bold; font-weight: bold;
min-width: 128px;
max-width: 272px;/*56px * 4 + 16 * 3*/
color: #000000; color: #000000;
} }
.altaliases { .altaliases {
min-width: 128px; width: 20%;
max-width: 272px;/*56px * 4 + 16 * 3*/
} }
.description { .description {
padding: 16px 8vw 16px 0px; padding: 16px 8vw 16px 0px;
min-width: 128px; width: 50%;
max-width: 560px;/*56px * 8 + 16 * 7*/
} }
.idnumber, .label, .altaliases, .description{ .idnumber, .label, .altaliases, .description{
vertical-align: top;} vertical-align: top;}
@ -785,9 +794,10 @@ div#home-top-div{
padding: 0vw 8vw; padding: 0vw 8vw;
display: grid; display: grid;
row-gap: 0rem; row-gap: 2rem;
column-gap: 1rem; column-gap: 1rem;
grid-template-columns: repeat(18, 1fr); grid-template-columns: repeat(18, 1fr);
grid-template-rows: min-content auto;
} }
.heading_A { .heading_A {
font-family: Roboto Condensed; font-family: Roboto Condensed;
@ -804,12 +814,14 @@ div#home-top-div{
#home-top-div .heading_A { #home-top-div .heading_A {
position: relative; position: relative;
/*max-width: 634px;*/ /*max-width: 634px;*/
z-index: 99; z-index: 1000; /*99*/
grid-column-start: 1;
grid-column-start: 2;
grid-column-end: 10; grid-column-end: 10;
grid-row-start: 1; grid-row-start: 1;
grid-row-end: 1; grid-row-end: 1;
align-self: center;
max-width: 800px;
margin-top: 6vw;
} }
#home-top-div p { #home-top-div p {
margin-bottom: 0px; margin-bottom: 0px;
@ -826,18 +838,18 @@ div#home-top-div{
/*width: 50%;*/ /*width: 50%;*/
z-index: 99; z-index: 99;
grid-column-start: 9; grid-column-start: 9;
grid-column-end: 18; grid-column-end: 17;
grid-row-start: 1; grid-row-start: 1;
grid-row-end: 3; grid-row-end: 3;
align-self: end; align-self: end;
margin-bottom: 2vw; margin-bottom: 2vw;
} }
#home-top-div #wrapper-bt{ #home-top-div #wrapper-bt{
margin: 36px 26px 0px 0vw; /*8vmin*/ /* margin: 36px 26px 0px 0vw; 8vmin*/
/*width: 50%;*/ /*width: 50%;*/
z-index: 99; z-index: 99;
grid-column-start: 2; grid-column-start: 1;
grid-column-end: 8; grid-column-end: 9;
grid-row-start: 2; grid-row-start: 2;
grid-row-end: 2; grid-row-end: 2;
} }
@ -989,7 +1001,7 @@ div#home-top-div{
line-height: normal; line-height: normal;
letter-spacing: 1.5px; letter-spacing: 1.5px;
color: var(--blue-blue); color: var(--blue-blue);
display: flex; display: none; /*flex*/
flex-direction: row; flex-direction: row;
justify-content: right; justify-content: right;
width: 96%; width: 96%;
@ -1378,14 +1390,21 @@ div.browsebycategory-categories:hover {
font-style: normal; font-style: normal;
letter-spacing: normal; letter-spacing: normal;
color: var(--black); color: var(--black);
margin: 20px 8vw 30px 8vw; margin: 20px 8vw 0px 8vw;
} }
.artwork-nav { .artwork-nav {
display: flex; /* display: flex;
flex-direction: row; flex-direction: row;
width: 100%; width: 100%;
justify-content: space-evenly; justify-content: space-evenly;*/
width: 100%;
display: grid;
row-gap: 0rem;
margin: 30px 0px;
padding-bottom: 2rem;
column-gap: 1rem;
grid-template-columns: repeat(18, 1fr);
border-bottom: 3px solid #000; border-bottom: 3px solid #000;
} }
@ -1401,6 +1420,45 @@ div.browsebycategory-categories:hover {
color: var(--brown-grey); color: var(--brown-grey);
} }
.artwork-nav-label-about {
grid-column-start: 4;
grid-column-end: 7;
grid-row-start: 1;
grid-row-end: 1;
}
.artwork-nav-label-about:before {
content: "";
position: absolute;
z-index: -1;
top: 0;
bottom: 0;
border-left: 3px solid blue;
transform: translate(90%);
height: 45px;
max-width: 2px;
margin-top: 410px;
left: 21.5%;
}
.artwork-nav-label-record:before {
content: "";
position: absolute;
z-index: -1;
top: 0;
bottom: 0;
border-left: 3px solid var(--brown-grey);
transform: translate(90%);
height: 45px;
max-width: 2px;
margin-top: 410px;
left: 44%;
}
.artwork-nav-label-record {
grid-column-start: 8;
grid-column-end: 11;
grid-row-start: 1;
grid-row-end: 1;
}
.artwork-nav-label .det-record:after { .artwork-nav-label .det-record:after {
display: inline-block; display: inline-block;
content: ' '; content: ' ';
@ -1472,10 +1530,14 @@ div.browsebycategory-categories:hover {
grid-row-start: 2; grid-row-start: 2;
grid-row-end: 2; grid-row-end: 2;
} }
.artwork-rightcolumn-top {
margin: 0 !important;
display: grid;
}
.artwork-rightcolumn-top-contributors { .artwork-rightcolumn-top-contributors {
grid-column-start: 9; grid-column-start: 9;
grid-column-end: 14; grid-column-end: 13;
grid-row-start: 1; grid-row-start: 1;
grid-row-end: 1; grid-row-end: 1;
} }
@ -1486,14 +1548,90 @@ div.browsebycategory-categories:hover {
grid-row-start: 1; grid-row-start: 1;
grid-row-end: 1; grid-row-end: 1;
} }
.artwork-rightcolumn-top-publishers, .artwork-rightcolumn-top-publishers {
grid-column-start: 15;
grid-column-end: 18;
grid-row-start: 2;
grid-row-end: 2;
}
.artwork-rightcolumn-description {
grid-column-start: 9;
grid-column-end: 18;
grid-row-start: 3;
grid-row-end: 3;
border-top: 0.5px solid var(--brown-grey);;
}
.artwork-rightcolumn-top-date + div.artwork-rightcolumn-description {
grid-column-start: 9;
grid-column-end: 18;
grid-row-start: 2;
grid-row-end: 2;
border-top: 3px solid black;
}
.text-description .mw-parser-output, .text-exhibition .mw-parser-output{
display: initial;
}
.artwork-rightcolumn-exhibition {
grid-column-start: 9;
grid-column-end: 18;
grid-row-start: 5;
grid-row-end: 5;
border-top: 0.5px solid var(--brown-grey);;
}
.artwork-rightcolumn-description + .artwork-rightcolumn-exhibition {
grid-column-start: 9;
grid-column-end: 18;
grid-row-start: 4;
grid-row-end: 4;
border-top: 3px solid black;
}
.artwork-rightcolumn-top-publishers { .artwork-rightcolumn-top-publishers {
grid-column-start: 15; grid-column-start: 15;
grid-column-end: 18; grid-column-end: 18;
grid-row-start: 2; grid-row-start: 2;
grid-row-end: 2; grid-row-end: 2;
} }
.artwork-rightcolumn-exhibition, .artwork-rightcolumn-description {
display: grid;
row-gap: 0rem;
column-gap: 1rem;
grid-template-columns: repeat(9, 1fr);
}
.artwork-rightcolumn-exhibition p, .artwork-rightcolumn-description p {
grid-column-start: 1;
grid-column-end: 9;
grid-row-start: 1;
grid-row-end: 1;
}
.text-description {
grid-column-start: 1;
grid-column-end: 7;
grid-row-start: 2;
grid-row-end: 2;
}
.text-description .mw-parser-output {
padding: 0px;
}
.text-exhibition {
grid-column-start: 1;
grid-column-end: 8;
grid-row-start: 2;
grid-row-end: 2;
}
.text-date-author {
grid-column-start: 8;
grid-column-end: 11;
grid-row-start: 2;
grid-row-end: 2;
}
.text-date-author .label-item:nth-of-type(1) {
margin-top: 0px;
}
.artwork-lists {
padding: 30px 8vw 30px 8vw;
}
.artwork-copiesincollection { .artwork-copiesincollection {
grid-column-start: 3; grid-column-start: 3;
grid-column-end: 6; grid-column-end: 6;
@ -1502,7 +1640,6 @@ div.browsebycategory-categories:hover {
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
} }
.artwork-copiesincollection-title-div { .artwork-copiesincollection-title-div {
text-align: center; text-align: center;
} }
@ -1576,6 +1713,12 @@ div.browsebycategory-categories:hover {
padding: 30px 0px 0px 0px; padding: 30px 0px 0px 0px;
display: inherit; display: inherit;
} }
.artwork-rightcolumn-bottom .mw-parser-output {
width: 100%;
margin: 0px;
padding: 0px;
display: initial;
}
.artwork-relatedworks:nth-of-type(2) { .artwork-relatedworks:nth-of-type(2) {
grid-column-start: 3; grid-column-start: 3;
grid-column-end: 6; grid-column-end: 6;

38
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>
@ -159,11 +159,11 @@
<!-- end of other stuff like downloads, absent for now --> <!-- end of other stuff like downloads, absent for now -->
<!-- RIGHT COLUMN --> <!-- RIGHT COLUMN
<div class="artwork-rightcolumn"> <div class="artwork-rightcolumn">
-->
<!-- RIGHT TOP --> <!-- RIGHT TOP
<div class="artwork-rightcolumn-top"> <div class="artwork-rightcolumn-top"> -->
<!-- contributors --> <!-- contributors -->
<div class="artwork-rightcolumn-top-contributors"> <div class="artwork-rightcolumn-top-contributors">
<p class="label-item">CONTRIBUTORS</p> <p class="label-item">CONTRIBUTORS</p>
@ -206,11 +206,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']==[] %}
@ -232,14 +232,14 @@
{% endif %} {% endif %}
</div> </div>
<!-- end of publishers--> <!-- end of publishers-->
</div> <!-- </div> artwork-rightcolumn-top -->
<!-- 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="artwork-rightcolumn-bottom"> -->
<!-- description --> <!-- description -->
@ -248,16 +248,16 @@
{% else %} {% else %}
<!-- For loop --> <!-- For loop -->
{% for x in artworkdescriptiondata['results']['bindings'] %} {% for x in artworkdescriptiondata['results']['bindings'] %}
<div> <div class="artwork-rightcolumn-description">
<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">
{% if "authordescriptionPageLabel" in x %} {% if "authordescriptionPageLabel" in x %}
<p class="label-item">AUTHOR</p> <p class="label-item">AUTHOR</p>
<p>{{ x['authordescriptionPageLabel']['value'] }}</p> <p>{{ x['authordescriptionPageLabel']['value'] }}</p>
@ -290,14 +290,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 %}
@ -322,8 +322,8 @@
{% endif %} {% endif %}
<!-- end exhibition loop --> <!-- end exhibition loop -->
<!-- end of right column --> <!-- </div> end of right column -->
</div>
<!-- end of about --> <!-- end of about -->
</div> </div>