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

started mobile design layout

master
JoBCB 4 years ago
parent
655a2b110c
commit
a537699fe0
3 changed files with 200 additions and 43 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. 228
      static/css/style.css
  2. 1
      templates/home.html
  3. 14
      templates/layout.html

228
static/css/style.css
View File

@ -50,7 +50,7 @@ div#footer-title-socials p, thead tr th, .artwork-nav-label, .label-item {
font-size: calc(12px + 6 * (100vw - 320px) / 1600); font-size: calc(12px + 6 * (100vw - 320px) / 1600);
line-height: 16px; line-height: 16px;
} }
/* 12 18 line height diff */ div#footer-socials-links a { /* 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); font-size: calc(12px + 6 * (100vw - 320px) / 1600);
line-height: 28.4px; line-height: 28.4px;
} }
@ -59,11 +59,11 @@ div.artwork-relatedworks-tile {
font-size: calc(14px + 8 * (100vw - 320px) / 1600); font-size: calc(14px + 8 * (100vw - 320px) / 1600);
line-height: 1.44; line-height: 1.44;
} }
/* 10 14 - line height 16 */ div#backend-data-button, div#container-backend-data-button, /* 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, .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 .primary-button a:visited, #home-top-div .secondary-button a,
#home-top-div .secondary-button a:visited, div.browsebycategory-categories a { #home-top-div .secondary-button a:visited, div.browsebycategory-categories a {
font-size: calc(10px + 4 * (100vw - 320px) / 1600); font-size: calc(10px + 6 * (100vw - 320px) / 1600);
line-height: 16px; line-height: 16px;
} }
/* 18 32 */ .mw-parser-output blockquote p { /* 18 32 */ .mw-parser-output blockquote p {
@ -108,7 +108,7 @@ div#navigation a, .title, .metadata-link, .metadata-link a, .metadata-link a spa
div.artwork-relatedworks-tile { div.artwork-relatedworks-tile {
font-size: 20px; font-size: 20px;
} }
div#footer-socials-links a { 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: 18px; font-size: 18px;
} }
div#backend-data-button, div#container-backend-data-button, .primary-button, div#backend-data-button, div#container-backend-data-button, .primary-button,
@ -373,6 +373,7 @@ div#navigation a:active {
color: #1b42d8; color: #1b42d8;
text-decoration: none; text-decoration: none;
} }
#home-top-div:after { #home-top-div:after {
content:""; content:"";
position: absolute; position: absolute;
@ -474,7 +475,7 @@ a#footer-img-br img {
a#footer-img-br, a#footer-img-br figcaption , a#footer-img-br figcaption:hover, a#footer-img-br figcaption:visited, 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 { a#footer-img-wiki, a#footer-img-wiki figcaption, a#footer-img-wiki figcaption:hover, a#footer-img-wiki figcaption:visited {
font-family: 'Roboto', sans-serif; font-family: 'Roboto', sans-serif;
font-size: 16px; /*font-size: 16px;*/
margin: 0; margin: 0;
padding: 0; padding: 0;
line-height: 26px; line-height: 26px;
@ -544,32 +545,6 @@ div#contactform:hover {
max-width: 365px; max-width: 365px;
} }
@media screen and (min-width:0px) and (max-width: 1000px) {
div#footer{ flex-wrap: wrap; }
.footer-left{ justify-content: space-between;}
.footer-right{ justify-content: space-between; margin: 0px;}
#footer-title-others, #footer-title-contact {text-align: right;}
#footer-contact-form {margin: 30px 0px 0px 0px;}
#footer-credit, #footer-socials{ padding: 0px; }
}
@media screen and (min-width:0px) and (max-width: 768px) {
#footer-title-others {text-align: right;}
#footer-title-contact {text-align: left;}
#footer-socials {width: 100%; }
#footer-socials-links{
display: flex;
flex-direction: row;
justify-content: space-between;
width: 100%;
}
div#contactform {width: 100%; max-width: none;}
#footer-contact-form { width: 100%; max-width: none;}
.footer-left, .footer-right { width: 100%; }
.footer-right { flex-wrap: wrap; }
#footer-credit, #footer-socials{ padding: 0px; }
#footer-right { margin: 0px; }
#footer-socials, #footer-contact-form {margin: 30px 0px 0px 0px;}
}
/*Titles all pages*/ /*Titles all pages*/
@ -886,6 +861,11 @@ div#home-top-div{
box-shadow: 1px 1px 5px 3px #00000024; box-shadow: 1px 1px 5px 3px #00000024;
border-radius: 6px; border-radius: 6px;
} }
#wrapper-vid a {
text-align: center;
width: 100%;
display: inline-grid;
}
#home-top-div #wrapper-top-buttons{ #home-top-div #wrapper-top-buttons{
display: flex; display: flex;
align-items: center; align-items: center;
@ -1139,16 +1119,6 @@ div.home-show-wrapper a:hover {
background-color: black; background-color: black;
} }
@media (min-width: 768px) {
#home-recent-grid, #browsethearchive-grid, #selfpublishedindex-grid, #zinesindex-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
#home-recent-grid, #browsethearchive-grid, #selfpublishedindex-grid, #zinesindex-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 1400px) {
#home-recent-grid, #browsethearchive-grid, #selfpublishedindex-grid, #zinesindex-grid { grid-template-columns: repeat(6, 1fr); }
}
/************ ABOUT & TEXT TEMPLATES ************/ /************ ABOUT & TEXT TEMPLATES ************/
@ -1730,7 +1700,7 @@ div.browsebycategory-categories:hover {
margin-top: 0px; margin-top: 0px;
margin-bottom: 30px; margin-bottom: 30px;
} }
.metadata-link:hover, .metadata-link a:hover, .metadata-link a span:hover { .metadata-link:hover, .metadata-link a:hover, .metadata-link a span:hover, .metadata-link p {
color: black; color: black;
text-decoration-color: black; text-decoration-color: black;
} }
@ -1828,6 +1798,10 @@ img.artwork-relatedworks-imgs, .artwork-lists-img img{
margin: 0px -10px 0px 0px !important; margin: 0px -10px 0px 0px !important;
} }
/*.tns-item img {
width: inherit;
}*/
/*************************************/ /*************************************/
/************ WIKI PAGES ************/ /************ WIKI PAGES ************/
/***********************************/ /***********************************/
@ -1845,4 +1819,174 @@ div#tutorials-intro h3, div#tutorials-intro p {
margin: auto; margin: auto;
} }
/************ Disactive Mobile ************/
#navigation-mobile {
display: none;
}
/********************************** RESPONSIVE DESIGN *********************************/
/***************** MOBILE ****************/
@media (min-width: 320px) {
#home-recent-grid, #browsethearchive-grid, #selfpublishedindex-grid, #zinesindex-grid { grid-template-columns: repeat(2, 1fr); }
}
@media screen and (min-width:0px) and (max-width: 768px) {
/********** NAV
#navigation {
display: none !important;
}
div#header {
height: 60px !important;
}
div#header-top {
border-bottom: 0px !important;
}
#navigation-mobile {
display: block;
position: fixed;
top: 60px;
left: 0;
width: 100%;
z-index: 10000;
height: 100%;
background-color: rgba(255, 255, 255, 0.96);
overflow-y: hidden;
}
.navigation-mobile-items{
margin: 100px 0px 0px 0px;
display: flex;
flex-direction: column;
align-items: center;
}
.navigation-mobile-items div a{
font-family: Roboto Condensed;
font-size: 24px;
font-weight: normal;
font-stretch: condensed;
font-style: normal;
line-height: 1.58;
letter-spacing: 1.33px;
text-align: center;
color: var(--black);
text-decoration: none;
margin: 30px 0px;
}
.navigation-mobile-items div a {
color: var(--blue);
}
.navigation-mobile-items #nav-login{
margin: 100px 0px 0px 0px;
}
.navigation-mobile-items #nav-login a{
font-size: 16px;
line-height: 2.38;
letter-spacing: 0.89px;
text-align: center;
color: var(--black);
}
**********/
/********** MAIN **********/
#home-top-div > img , #wrapper-bt {
display: none;
}
div#home-top-div {
height: 50vh;
}
#home-top-div #wrapper-vid {
margin-bottom: 5vw;
}
#home-top-div .heading_A {
grid-column-start: 1;
grid-column-end: 19;
max-width: none;
margin-top: 3vw;
}
#home-top-div #wrapper-vid {
grid-column-start: 1;
grid-column-end: 19;
grid-row-start: 1;
grid-row-end: 3;
margin-bottom: 2vw;
}
div#footer {
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
#footer-title-others {text-align: right;}
#footer-title-contact {text-align: left;}
#footer-socials {width: 100%; }
#footer-socials-links{
display: flex;
flex-direction: row;
justify-content: space-between;
width: 100%;
}
a#footer-img-wiki {
padding-left: 20px;
}
div#contactform {width: 100%; max-width: none;}
#footer-contact-form { width: 100%; max-width: none;}
.footer-left, .footer-right { width: 100%; justify-content: space-between;}
.footer-right { flex-wrap: wrap; margin: 0px;}
#footer-credit, #footer-socials{ padding: 0px; }
#footer-right { margin: 0px; }
#footer-socials, #footer-contact-form {margin: 30px 0px 0px 0px;}
/********** ABOUT **********/
.mw-parser-output blockquote, .mw-parser-output blockquote + p {
grid-column-start: 1;
grid-column-end: 19;
}
.mw-parser-output p, .mw-parser-output ul, .mw-parser-output h2, .mw-parser-output h3 {
grid-column-start: 1;
grid-column-end: 19;
}
}
/********* ARTWORK **********/
/***************** LAPTOP MEDIUM ****************/
@media screen and (min-width: 769px) and (max-width: 1000px) {
div#footer{ flex-wrap: wrap; }
.footer-left{ justify-content: space-between;}
.footer-right{ justify-content: space-between; margin: 0px;}
#footer-title-others, #footer-title-contact {text-align: right;}
#footer-contact-form {margin: 30px 0px 0px 0px;}
#footer-credit, #footer-socials{ padding: 0px; }
}
@media (min-width: 1000px) {
#home-recent-grid, #browsethearchive-grid, #selfpublishedindex-grid, #zinesindex-grid { grid-template-columns: repeat(4, 1fr); }
}
/***************** LAPTOP BIG ****************/
@media (min-width: 1400px) {
#home-recent-grid, #browsethearchive-grid, #selfpublishedindex-grid, #zinesindex-grid { grid-template-columns: repeat(6, 1fr); }
}

1
templates/home.html
View File

@ -34,6 +34,7 @@
<video preload="meta" autoplay="" loop=""> <video preload="meta" autoplay="" loop="">
<source src="{{ url_for('static', filename='/vid/DAAP_video_reduced.mp4') }}" type="video/mp4"> <source src="{{ url_for('static', filename='/vid/DAAP_video_reduced.mp4') }}" type="video/mp4">
</video> </video>
<a class="metadata-link" href="https://query.daap.bannerrepeater.org/embed.html#%23defaultView%3AGraph%0ASELECT%20%3Fwork%20%3FworkLabel%20%3Fimage_on_Commons%20%3Fplace_of_publication%20%3Fplace_of_publicationLabel%20%3Fcreator_of%20%3Fcreator_ofLabel%20WHERE%20%7B%0A%20%20SERVICE%20wikibase%3Alabel%20%7B%20bd%3AserviceParam%20wikibase%3Alanguage%20%22%5BAUTO_LANGUAGE%5D%2Cen%22.%20%7D%0A%20%20%3Fwork%20wdt%3AP9%20wd%3AQ421.%0A%20%20OPTIONAL%20%7B%20%3Fwork%20wdt%3AP31%20%3Fimage_on_Commons.%20%7D%0A%20%20OPTIONAL%20%7B%20%3Fwork%20wdt%3AP12%20%3Fplace_of_publication.%20%7D%0A%20%20OPTIONAL%20%7B%20%3Fwork%20wdt%3AP9%20%3Fcreator_of.%20%7D%0A%7D%0ALIMIT%20100">Explore Data Visualization</a>
</div> </div>
</div> </div>

14
templates/layout.html
View File

@ -10,6 +10,19 @@
</head> </head>
<body> <body>
<div id="navigation-mobile">
<div class= "navigation-mobile-items">
<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">To log-in, please view on desktop</a></div>
</div>
</div>
<div id="header"> <div id="header">
<div id="animatedlogo"> <div id="animatedlogo">
<a href="{{ url_for('home') }}"> <a href="{{ url_for('home') }}">
@ -44,7 +57,6 @@
</div> </div>
</div> </div>
{% block content %} {% block content %}
{% endblock content %} {% endblock content %}

Write Preview
Loading…
Cancel
Save