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

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

master
JoBCB 4 years ago
parent
d65a415f81
commit
3b5763b8a2
4 changed files with 151 additions and 100 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. 168
      static/css/style.css
  2. 20
      templates/browsethearchive.html
  3. 16
      templates/home.html
  4. 43
      templates/layout.html

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); }
}
/*@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 THE ARCHIVE ************/
img.browsethearchive-imgs{
/************ 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 ************/

20
templates/browsethearchive.html
View File

@ -8,6 +8,7 @@
{% for x in results['results']['bindings']%}
<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 %}

16
templates/home.html
View File

@ -1,9 +1,8 @@
{% extends "layout.html" %}
{% block content %}
<div id="home-top-div">
<div id="home-top-div"></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="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>
</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="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 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>

Write Preview
Loading…
Cancel
Save