Browse Source

artwork layout

master
JoBCB 4 years ago
parent
commit
9173dbeeb4
  1. 189
      static/css/style.css
  2. 36
      templates/artwork.html

189
static/css/style.css

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

36
templates/artwork.html

@ -27,10 +27,10 @@
<!-- NAVIGATION HERE? -->
<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">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>
@ -159,11 +159,11 @@
<!-- end of other stuff like downloads, absent for now -->
<!-- RIGHT COLUMN -->
<!-- RIGHT COLUMN
<div class="artwork-rightcolumn">
<!-- RIGHT TOP -->
<div class="artwork-rightcolumn-top">
-->
<!-- RIGHT TOP
<div class="artwork-rightcolumn-top"> -->
<!-- contributors -->
<div class="artwork-rightcolumn-top-contributors">
<p class="label-item">CONTRIBUTORS</p>
@ -206,11 +206,11 @@
{% endif %}
{% endfor %}
{% endif %}
</div>
<!-- </div> -->
<!-- end of date -->
<!-- publishers-->
<div class="artwork-rightcolumn-top-publishers">
<!-- <div class="artwork-rightcolumn-top-publishers"> -->
<p class="label-item">PUBLISHERS</p>
<!-- loop through publishers -->
{% if artworkpublisher['results']['bindings']==[] %}
@ -235,11 +235,11 @@
</div>
<!-- end of publishers-->
</div>
<!-- </div> artwork-rightcolumn-top -->
<!-- end of about right top -->
<!-- start of about right column bottom -->
<div class="artwork-rightcolumn-bottom">
<!-- <div class="artwork-rightcolumn-bottom"> -->
<!-- description -->
@ -248,16 +248,16 @@
{% else %}
<!-- For loop -->
{% for x in artworkdescriptiondata['results']['bindings'] %}
<div>
<div class="artwork-rightcolumn-description">
<p class="label-item">DESCRIPTION</p>
<!-- left part with the description text already coming in a div from wiki-->
<div>
<div class="text-description">
{{ x["text"] | safe }}
</div>
<!-- right ride with author etc LATER-->
<div>
<div class="text-date-author">
{% if "authordescriptionPageLabel" in x %}
<p class="label-item">AUTHOR</p>
<p>{{ x['authordescriptionPageLabel']['value'] }}</p>
@ -290,14 +290,14 @@
{% else %}
{% for x in artworkexhibitiondata['results']['bindings'] %}
<div>
<div class="artwork-rightcolumn-exhibition">
<p class="label-item">EXHIBITION AND DISTRIBUTION HISTORY</p>
<div>
<div class="text-exhibition">
{{ x['text'] | safe }}
</div>
<!-- right ride with author etc LATER-->
<div>
<div class="text-date-author">
<p class="label-item">AUTHOR</p>
<!-- if there is an author name then add here otherwise info non available -->
{% if "authorexhibitionHisPageLabel" in x %}
@ -322,8 +322,8 @@
{% endif %}
<!-- end exhibition loop -->
<!-- end of right column -->
</div>
<!-- </div> end of right column -->
<!-- end of about -->
</div>

Loading…
Cancel
Save