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

artwork layout

master
JoBCB 4 years ago
parent
cc1c8ed785
commit
9173dbeeb4
2 changed files with 185 additions and 42 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. 189
      static/css/style.css
  2. 38
      templates/artwork.html

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>

Write Preview
Loading…
Cancel
Save