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

Updates item, Lozana style searchbox

master
zeroth 4 years ago
parent
66dc8f541d
commit
8811929f74
4 changed files with 64 additions and 29 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. 69
      static/css/style.css
  2. 4
      templates/artwork.html
  3. 14
      templates/item.html
  4. 2
      templates/layout.html

69
static/css/style.css
View File

@ -30,6 +30,13 @@ font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Roboto Bold';
src: url('webfonts/Roboto_Regular/Roboto-Bold.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
/*new import font*/
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
@ -43,53 +50,53 @@ font-style: normal;
/* 12 18 */ body, tbody tr th, .mw-parser-output ul, .mw-parser-output a, .artwork-intro,
.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;
line-height: 1.2em;
}
/* 12 18 */ 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, .tns-item p:first-of-type {
font-size: calc(12px + 6 * (100vw - 320px) / 1600);
line-height: 16px;
line-height: 1.2em;
}
/* 12 18 line height diff */ div#footer-socials-links a, a#footer-img-br, a#footer-img-br figcaption, a#footer-img-br figcaption:hover, a#footer-img-br figcaption:visited, a#footer-img-wiki, a#footer-img-wiki figcaption, a#footer-img-wiki figcaption:hover, a#footer-img-wiki figcaption:visited {
font-size: calc(12px + 6 * (100vw - 320px) / 1600);
line-height: 28.4px;
line-height: 1.2em;
}
/* 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;
line-height: 1.2em;
}
/* 10 16 - line height 16 */ div#backend-data-button, div#container-backend-data-button,
.primary-button, .secondary-button, .artwork-button, #home-top-div .primary-button a,
#home-top-div .primary-button a:visited, #home-top-div .secondary-button a,
#home-top-div .secondary-button a:visited, div.browsebycategory-categories a {
font-size: calc(10px + 6 * (100vw - 320px) / 1600);
line-height: 16px;
line-height: 1.2em;
}
/* 18 32 */ .mw-parser-output blockquote p {
font-size: calc(18px + 12 * (100vw - 320px) / 1600);
line-height: 1.56;
line-height: 1.2em;
}
/* 40 22 */ .heading_A {
font-size: calc(22px + 18 * (100vw - 320px) / 1600);
line-height: 1.45;
line-height: 1.2em;
}
/* 20 25 */ .mw-parser-output h1, .Heading_B, .artwork-title, div.pagetitle,
.mw-parser-output h1, div#header-title {
font-size: calc(20px + 5 * (100vw - 320px) / 1600);
line-height: 35px;
line-height: 1.2em;
}
/* 18 30 */ h2, .artbase-logo, .Heading_C, .mw-parser-output h2 {
font-size: calc(18px + 12 * (100vw - 320px) / 1600);
line-height: 40px;
line-height: 1.2em;
}
/* 20 25 */ h3, .Heading_D, .mw-parser-output h3 {
font-size: calc(20px + 5 * (100vw - 320px) / 1600);
line-height: 35px;
line-height: 1.2em;
}
/* 14 20 */ .Heading_E {
font-size: calc(14px + 6 * (100vw - 320px) / 1600);
line-height: 20px;
line-height: 1.2em;
}
}
@ -714,7 +721,7 @@ a.paginate_button.next:after {
color: var(--black);
}
.date, div.artwork-relatedworks-date {
font-family: Roboto Condensed, sans-serif;
font-family: 'Roboto Regular', 'Roboto Condensed', sans-serif;
/*font-size: 16px;
line-height: 1.63;*/
font-weight: normal;
@ -1200,6 +1207,7 @@ div.home-show-wrapper a:hover {
font-style: normal;
letter-spacing: 1.13px;
color: var(--black);
padding-top: 1em;
}
.Heading_D, .mw-parser-output h3, h3 {
font-family: 'Roboto Condensed', sans-serif;
@ -1210,6 +1218,7 @@ div.home-show-wrapper a:hover {
font-style: normal;
letter-spacing: 1.13px;
color: var(--black);
padding-top: 1em;
}
.Heading_E {
font-family: 'Roboto Condensed', sans-serif;
@ -1221,13 +1230,14 @@ div.home-show-wrapper a:hover {
font-style: normal;
letter-spacing: 1.13px;
color: var(--black);
padding-top: 1em;
}
.mw-parser-output p, .mw-parser-output ul, .mw-parser-output h2, .mw-parser-output h3 {
grid-column-start: 4;
grid-column-end: 15;
}
.mw-parser-output ul {
font-family: 'Roboto Condensed', sans-serif;
font-family: 'Roboto Regular', 'Roboto Condensed', sans-serif;
/* font-size: calc(12px + (20 - 12) * ((100vw - 320px) / (1600 - 320)));
line-height: 1.63;*/
font-weight: normal;
@ -1369,6 +1379,7 @@ div.browsebycategory-categories:hover {
display: flex;
align-items: center;
justify-content: center;
text-transform: uppercase;
}
.artwork-box {
@ -1384,7 +1395,7 @@ div.browsebycategory-categories:hover {
border: solid 1px var(--black);
margin: 30px 8vw 0px 8vw;
padding: 6px 10px;
max-width: 120px;
max-width: 140px;
}
@ -1399,7 +1410,7 @@ div.browsebycategory-categories:hover {
}
.artwork-intro {
font-family: 'Roboto Condensed', sans-serif;
font-family: 'Roboto Regular', 'Roboto Condensed', sans-serif;
/* font-size: calc(12px + (20 - 12) * ((100vw - 320px) / (1600 - 320)));
line-height: 1.63;*/
font-weight: normal;
@ -1528,11 +1539,11 @@ div.browsebycategory-categories:hover {
}
.artwork-copieswrapper {
border-top: solid 3px var(--black);
border-bottom: solid 3px var(--black);
padding: 40px 8vw 30px 8vw;
}
.artwork-relatedwrapper {
padding: 30px 8vw 30px 8vw;
border-top: solid 3px var(--black);
}
.artwork-leftcolumn {
@ -1633,7 +1644,7 @@ div.browsebycategory-categories:hover {
}
.artwork-rightcolumn-exhibition, .artwork-rightcolumn-description {
display: grid;
row-gap: 0rem;
grid-row-gap: 0rem;
/*column-gap: 1rem;*/
grid-template-columns: repeat(9, 1fr);
grid-template-rows: min-content auto;
@ -1645,23 +1656,32 @@ div.browsebycategory-categories:hover {
grid-row-end: 1;
margin: 1em 0 0.5em;
}
.des-exh-section .des, .des-exh-section .exh {
.des-exh-section .des, .des-exh-section {
margin: 0px;
padding: 20px 0 0 0;
}
.des-exh-section .des {
margin-top: 40px;
border-top: 3px solid #000;
}
.des-exh-section .exh {
border-top: 2px solid #000;
margin: 0px;
padding: 20px 0 10px 0 !important;
}
.des p, .exh p {
padding-top: 20px;
}
.text-description {
grid-column-start: 1;
grid-column-end: 8;
grid-row-start: 2;
grid-row-end: 2;
padding-top: 20px;
padding-bottom: 20px;
border-bottom: 1px solid black;
}
.text-description .mw-parser-output {
@ -1681,6 +1701,7 @@ div.browsebycategory-categories:hover {
grid-row-end: 2;
padding-left: 2em;
padding-top: 20px;
padding-bottom: 20px;
border-bottom: 1px solid black;
}
.text-date-author .label-item:nth-of-type(1) {
@ -1705,7 +1726,7 @@ div.browsebycategory-categories:hover {
.artwork-lists .Heading_C , .artwork-relatedwrapper .Heading_C , .artwork-copieswrapper .Heading_C {
grid-column-start: 1;
grid-column-end: 2;
grid-row: 1 / span 4;
grid-row: 1 / span all;
/* writing-mode: sideways-lr;
max-height: 120px; */
text-align: center;
@ -1760,23 +1781,24 @@ div.browsebycategory-categories:hover {
text-decoration-color: black;
}
.metadata-link p {
font-family: 'Roboto Condensed', sans-serif;
font-family: 'Roboto Regular', 'Roboto Condensed', sans-serif;
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-date p.label-item,
.artwork-rightcolumn-top-contributors .metadata-link, .artwork-rightcolumn-top-date .metadata-link {
margin-bottom: 1em;
margin-top: 0px !important;
}
.artwork-rightcolumn-top-date p.label-item:first-of-type {
.artwork-rightcolumn-top-date p.label-item:first-of-type, .artwork-rightcolumn-top-contributors p.label-item:first-of-type {
margin-bottom: 1em;
margin-top: 0px !important;
}
.artwork-rightcolumn-top-date p.label-item{
.artwork-rightcolumn-top-date p.label-item, .artwork-rightcolumn-top-contributors p.label-item{
margin-bottom: 0.5em;
margin-top: 1em !important;
}
@ -1829,7 +1851,6 @@ img.artwork-relatedworks-imgs, .artwork-lists-img img{
display: inline;
}
.artwork-relatedworks-img-div /*TEST*/ {
height: 80%;
display: flex;
align-items: center;
}

4
templates/artwork.html
View File

@ -243,8 +243,12 @@
<!-- name, surname -->
<div class="metadata-link artwork-rightcolumn-top-publishers-item">
{% if 'publishersLabel' in x %}
{% if x['publishersLabel']['value'] =='self-published' %}
<span>{{ x['publishersLabel']['value'] }}</span>
{% else %}
<a href='/item?id={{ x["publishers"]["value"] | replace("http://daap.bannerrepeater.org/entity/", "") }}'><span>{{ x['publishersLabel']['value'] }}</span></a>
{% endif %}
{% endif %}
<!-- role -->
{% if 'role' in x %}
<span>{{ x['role']['value'] }}</span>

14
templates/item.html
View File

@ -38,6 +38,16 @@
</div>
<!-- END TITLE SHORT INTRO OF ITEM-->
<!-- NAVIGATION HERE? -->
<div class="artwork-nav">
<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 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>
<!-- ########################### -->
<!-- BLOCK IMAGE/DATA AND BIO -->
@ -101,7 +111,7 @@
{% if x['itemtypeLabel']['value'] == 'contributor' %}
<!-- person gender -->
<p class="label-item">GENDER</p>
<p class="label-item">GENDER IDENTITY</p>
{% if persongender['results']['bindings']==[] %}
<div>information not available</div>
{% else %}
@ -260,7 +270,7 @@
<!-- IDENTIFIERS FOR PERSON INSTITUTION AND COLLECTIVE -->
<div class="artwork-rightcolumn-top-date">
<p>Identifiers in other databases</p>
<p>IDENTIFIERS IN OTHER DATABASES:</p>
<!-- WIKIDATA ID -->
<p class="label-item">WIKIDATA ID</p>

2
templates/layout.html
View File

@ -39,7 +39,7 @@
<a id="link-search" href="https://daap.bannerrepeater.org/w/index.php?search=&search=&title=Special%3ASearch&go=Go" >
<div id="header-keyword-search">
<!-- <input type="text" id="fname" name="fname" value="" placeholder="Keyword search"> -->
<input type="text" id="fname" name="fname" value="" placeholder="Keyword search">
</div>
</a>
<!-- <div class="container" onclick="myFunction(this)">

Write Preview
Loading…
Cancel
Save