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

changed header to flex and continued working on home + browse the archive layouts

Browse Source
This commit is contained in:
JoBCB 2020-11-06 18:34:51 +00:00
parent d65a415f81
commit 3b5763b8a2
4 changed files with 151 additions and 100 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

168
static/css/style.css
View File

@ -106,44 +106,54 @@ div#header{
background-color: #FFFFFF;
height: 134px;
border-bottom: 3px solid #000;
display: flex;
width: 100%;
/* display: grid;*/
}
div#header-top{
display: grid;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
/* display: grid;
grid-template-columns: 5% 67.5% 27.5%;
grid-template-rows: 100%;
grid-column-gap: 0px;
grid-row-gap: 0px;
align-items: center;
*/
border-bottom: 1px solid #000;
}
#title-nav{
width: 100%;
}
div#animatedlogo{
grid-area: 1 / 1 / 2 / 2;
display: flex;
/* grid-area: 1 / 1 / 2 / 2;*/
}
div#animatedlogo img{
height: 43px;
width: auto;
max-height: 130px;
justify-self: center;
}
div#header-title{
grid-area: 1 / 2 / 2 / 3;
/* grid-area: 1 / 2 / 2 / 3;*/
font-family: 'Roboto Condensed', sans-serif;
font-weight: bold;
font-size: 18px;
font-size: 25px;
}
div#header-title a:link, div#header-title a:visited {
text-decoration: none;
color: #000000;
}
div#header-keyword-search{
grid-area: 1 / 3 / 2 / 4;
/* grid-area: 1 / 3 / 2 / 4;*/
}
div#header-keyword-search span {
font-size: 20px;
font-weight: bold;
padding: 2px 10px;
}
div#header-top div#header-keyword-search input[type=text]{
background-color: #e9e9e9;
color: #7f7f7f;
@ -156,33 +166,75 @@ div#header-top div#header-keyword-search input[type=text]{
border: none;
padding: 2px 2px 2px 12px;
}
div#header-top div#header-keyword-search:after {
display: inline-block;
content: ' ';
background-image: url('Icons/icn_search.svg');
background-size: 16px 16px;
height: 16px;
width: 16px;
margin: 0px 16px 0px -32px;
}
div#header-top, div#navigation{
width: 100%;
height: 67px;
padding-right: 80px;
}
div#navigation{
display: grid;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
/* display: grid;
grid-template-columns: 8% repeat(2, 12%) 1fr repeat(2, 10%) 12.5%;
grid-template-rows: 100%;
grid-column-gap: 0px;
grid-row-gap: 0px;
padding-left: 5%;
align-items: center;
*/
font-family: Roboto;
font-size: 18px;
font-weight: normal;
font-stretch: condensed;
font-style: normal;
line-height: 1.44;
letter-spacing: normal;
color: var(--black);
}
#nav-left {
display: flex;
flex-direction: row;
}
#nav-right {
display: flex;
flex-direction: row;
}
#nav-left div, #nav-right div {
padding: 0px 16px;
}
#nav-left div:first-child, #nav-right div:first-child{
padding-left: 0px;
}
#nav-right div:last-child {
padding-right: 0px;
}
div#navigation a{
font-family: 'Roboto Condensed', sans-serif;
text-decoration: none;
font-weight: normal;
color: black;
font-size: 18px;
line-height: 26px;
height: 67px;
}
div#nav-about {
div#navigation a:hover {
color: #1b42d8;
}
/*div#nav-about {
grid-area: 1 / 1 / 2 / 2;
}
div#nav-browse-archive { grid-area: 1 / 2 / 2 / 3; }
@ -196,7 +248,7 @@ div#nav-upload { grid-area: 1 / 6 / 2 / 7;
justify-self: center;
color: lightgrey;}
div#nav-login { grid-area: 1 / 7 / 2 / 8; }
*/
/*Footer*/
div#footer{
@ -212,7 +264,6 @@ div#footer{
grid-column-gap: 0px;
grid-row-gap: 0px;
}
div#footer-title-br{
grid-area: 1 / 1 / 2 / 2;
padding-left: 30%;
@ -223,11 +274,9 @@ div#footer-title-others{
div#footer-title-socials{
grid-area: 1 / 3 / 2 / 4;
}
div#footer-title-contact{
grid-area: 1 / 4 / 2 / 5;
}
div#footer-title-br p, div#footer-title-others p, div#footer-title-contact p, div#footer-title-socials p{
text-transform: uppercase;
font-family: 'Roboto Condensed', sans-serif;
@ -239,7 +288,6 @@ div#footer-title-br p, div#footer-title-others p, div#footer-title-contact p, di
letter-spacing: 1.5px;
color: var(--brown-grey);
}
div#footer-img-br{
grid-area: 2 / 1 / 3 / 2;
padding-left: 30%;
@ -302,9 +350,6 @@ div#footer-contact a{
color: #FFFFFF;
font-weight: bold;
}
div#footer div#footer-top div#footer-top-left,
div#footer div#footer-top div#footer-top-right{
display: inline-flex;
@ -321,15 +366,11 @@ div#footer div#footer-right{
float: right;
/*position: absolute;*/
}
div#footer div#footer-left div,
div#footer div#footer-right div{
display: inline-block;
border:cyan 1px solid;
}
input#newslettersubs{
background-color: #000000;
color:#FFFFFF;
@ -443,10 +484,10 @@ a.current {
border-radius: 6px;
background-color: #1B42D8;
display: flex;
justify-content: center;
align-content: baseline;
line-height: 36px;
margin-top: 6px;
align-items: center;
justify-content: center;
cursor: pointer;
}
.paginate_button{
@ -477,8 +518,8 @@ a.paginate_button.next:after {
/************ TEXT STYLES************/
.title {
width: 200px;
height: 26px;
/* width: 200px;
height: 26px;*/
font-family: Roboto Condensed;
font-size: 18px;
font-weight: bold;
@ -546,20 +587,20 @@ a.paginate_button.next:after {
cursor: pointer;
}
/************ HOME ************/
/************ HOME & Browse Archive Layout ************/
/*Top div*/
/*Home Top div*/
div#home-top-div{
height: 661px;
border:blue solid 1px;
}
img.home-recent-imgs{
img.home-recent-imgs, img.browsethearchive-imgs{
width: 100%;
}
div.home-recent-items{
div.home-recent-items, div.browsethearchive-items{
padding:10px;
font-size: 16px;
font-family: 'Roboto Condensed', sans-serif;
@ -571,7 +612,7 @@ div.home-recent-items{
height: 100%;
}
div.home-recent-items a{
div.home-recent-items a, div.browsethearchive-items a {
font-size: 18px;
line-height: 26px;
font-family: 'Roboto Condensed Bold', sans-serif;
@ -579,13 +620,13 @@ div.home-recent-items a{
text-decoration: none;
}
div.home-recent-items-top{
div.home-recent-items-top, div.browsethearchive-items-top {
display: flex;
flex-direction: column;
margin: auto;
}
div.home-recent-items-bottom{
div.home-recent-items-bottom, div.browsethearchive-items-bottom {
display: flex;
flex-direction: column;
flex-shrink: 0;
@ -593,7 +634,7 @@ div.home-recent-items-bottom{
justify-content: flex-start;
}
div#home-recent-grid{
div#home-recent-grid, div#browsethearchive-grid{
width: 100%;
padding: 0px 80px;
display: grid;
@ -624,20 +665,37 @@ span.home-show{
}
@media (min-width: 600px) {
#home-recent-grid { grid-template-columns: repeat(2, 1fr); }
#home-recent-grid, #browsethearchive-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
#home-recent-grid { grid-template-columns: repeat(4, 1fr); }
#home-recent-grid, #browsethearchive-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 1400px) {
#home-recent-grid { grid-template-columns: repeat(6, 1fr);
}
#home-recent-grid, #browsethearchive-grid { grid-template-columns: repeat(6, 1fr); }
}
/************ BROWSE THE ARCHIVE ************/
/*@media (min-width: 300px) {
#browsethearchive-grid { grid-template-columns: repeat(2, 1fr); }
}
img.browsethearchive-imgs{
@media (min-width: 700px) {
#browsethearchive-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1200px) {
#browsethearchive-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 1600px) {
#browsethearchive-grid { grid-template-columns: repeat(6, 1fr); }
}
*/
/************ BROWSE THE ARCHIVE Pagination ************/
/*img.browsethearchive-imgs{
width: 200px;
}
@ -662,9 +720,8 @@ div#browsethearchive-grid{
margin: 0 auto 60px auto;
display: grid;
grid-gap: 2rem;
/*border: 1px solid blue;*/
text-align: center;
}
}*/
.current {
background-color: #1b42d8;
@ -703,23 +760,6 @@ height: 139px;
text-align: center;
}
@media (min-width: 300px) {
#browsethearchive-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 700px) {
#browsethearchive-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1200px) {
#browsethearchive-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 1600px) {
#browsethearchive-grid { grid-template-columns: repeat(6, 1fr); }
}
/************ BROWSE BY CATEGORY ************/

22
templates/browsethearchive.html
View File

@ -7,7 +7,8 @@
<div id="browsethearchive-grid">
{% for x in results['results']['bindings']%}
<div class="browsethearchive-items">
<div class="browsethearchive-items">
<div class="browsethearchive-items-top">
{% if "image" in x %}
<a href='/artwork?id={{ x["work"]["value"] | replace("http://wikibase.svc/entity/", "") }}'>
<img class="browsethearchive-imgs" src='{{ x["image"]["value"] | replace("wiki/File:","wiki/Special:Redirect/file/") }}'>
@ -17,13 +18,20 @@
<img class="browsethearchive-imgs" src="{{ url_for('static', filename='/imgs/Icons/placeholder_no-image2.png') }}"><br>
</a>
{% endif %}
<a href='/artwork?id={{ x["work"]["value"] | replace("http://wikibase.svc/entity/", "") }}'>
{{ x["workLabel"]["value"]}}
</a> <br>
{% if "date" in x %}
{{ x["date"]["value"] | replace("T00:00:00Z", "") }} <br>
</div>
<div class="browsethearchive-items-bottom">
<a class="title" href='/artwork?id={{ x["work"]["value"] | replace("http://wikibase.svc/entity/", "") }}'>
{{ x["workLabel"]["value"]}}
</a> <br>
<span class="date">
{% if "date" in x %}
{{ x["date"]["value"] | replace("T00:00:00Z", "") }}
</span>
{% endif %}
</div>
{% endif %}
</div>
{% endfor %}

18
templates/home.html
View File

@ -1,9 +1,8 @@
{% extends "layout.html" %}
{% block content %}
<div id="home-top-div">
</div>
<div id="home-top-div"></div>
<div id="home-recently-added-works">
<div class="pagetitle" id="home-recent-title">RECENTLY ADDED WORKS</div>
@ -24,12 +23,13 @@
</div>
<div class="home-recent-items-bottom">
<a class="title" href='/artwork?id={{ x["work"]["value"] | replace("http://daap.bannerrepeater.org/entity/", "") }}'>
{{ x["workLabel"]["value"]}}
</a> <br>
<span class="date">
{% if "date" in x %}
{{ x["date"]["value"] | replace("T00:00:00Z", "") }} </span>
<a class="title" href='/artwork?id={{ x["work"]["value"] | replace("http://daap.bannerrepeater.org/entity/", "") }}'>
{{ x["workLabel"]["value"]}}
</a> <br>
<span class="date">
{% if "date" in x %}
{{ x["date"]["value"] | replace("T00:00:00Z", "") }}
</span>
{% endif %}
</div>

43
templates/layout.html
View File

@ -12,30 +12,33 @@
<body>
<div id="header">
<div id="header-top">
<div id="animatedlogo">
<div id="animatedlogo">
<img src="{{ url_for('static', filename='/imgs/Logos/DAAP BR square logo -Animated Image (Small).gif') }}">
</div>
<div id="title-nav">
<div id="header-top">
<div id="header-title">
<a href="{{ url_for('home') }}">DAAP</a>
</div>
<div id="header-keyword-search">
<input type="text" id="fname" name="fname" value="" placeholder="Keyword search">
</div>
</div>
<div id="header-title">
<a href="{{ url_for('home') }}">DIGITAL ARCHIVE OF ARTISTS' PUBLISHING</a>
</div>
<div id="header-keyword-search">
<input type="text" id="fname" name="fname" value="Keyword search">
<div id="navigation">
<div id="nav-left">
<div id="nav-about"><a href="{{ url_for('about') }}">About</a></div>
<div id="nav-browse-archive"><a href="{{ url_for('browsethearchive') }}">Browse the archive</a></div>
<div id="nav-browse-category"><a href="{{ url_for('browsebycategory') }}">Browse by category</a></div>
<div id="nav-search"><a href="{{ url_for('searchtools') }}">Search tools</a></div>
</div>
<div id="nav-right">
<div id="nav-tutorials"><a href="{{ url_for('tutorials') }}">Tutorials</a></div>
<div id="nav-upload"><a href="{{ url_for('upload') }}">Upload</a></div>
<div id="nav-login"><a href="https://daap.bannerrepeater.org/w/index.php?title=Special:UserLogin&returnto=Main+Page">Log in</a></div>
</div>
</div>
</div>
<div id="navigation">
<div id="nav-about"><a href="{{ url_for('about') }}">About</a></div>
<div id="nav-browse-archive"><a href="{{ url_for('browsethearchive') }}">Browse the archive</a></div>
<div id="nav-browse-category"><a href="{{ url_for('browsebycategory') }}">Browse by category</a></div>
<div id="nav-search"><a href="{{ url_for('searchtools') }}">Search tools</a></div>
<div id="nav-tutorials"><a href="{{ url_for('tutorials') }}">Tutorials</a></div>
<div id="nav-upload"><a href="{{ url_for('upload') }}">Upload</a></div>
<div id="nav-login"><a href="https://daap.bannerrepeater.org/w/index.php?title=Special:UserLogin&returnto=Main+Page">Log in</a></div>
</div>
</div>