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

mobile layout artwork andadjustment on landingpage

Browse Source
This commit is contained in:
JoBCB 2020-12-01 14:23:33 +00:00
parent e44fbd1c31
commit af78fded69
5 changed files with 184 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
static/css/Icons/icn_bars-solid.svg Normal file
View File

@ -0,0 +1 @@
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="bars" class="svg-inline--fa fa-bars fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M16 132h416c8.837 0 16-7.163 16-16V76c0-8.837-7.163-16-16-16H16C7.163 60 0 67.163 0 76v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 569 B

217
static/css/style.css
View File

@ -237,9 +237,11 @@ html {
box-sizing: border-box; box-sizing: border-box;
} }
*, *:before, *:after { *, *:before, *:after {
-webkit-box-sizing: inherit; -webkit-box-sizing: inherit;
-moz-box-sizing: inherit; -moz-box-sizing: inherit;
box-sizing: inherit; } box-sizing: inherit;
margin: 0
}
body { body {
font-family: Roboto; font-family: Roboto;
@ -374,7 +376,7 @@ div#navigation a:active {
text-decoration: none; text-decoration: none;
} }
#home-top-div:after { /*#home-top-div:after {
content:""; content:"";
position: absolute; position: absolute;
z-index: -1; z-index: -1;
@ -394,14 +396,7 @@ div#navigation a:active {
border-left: 2px solid rgba(233,233,233, 1); border-left: 2px solid rgba(233,233,233, 1);
transform: translate(-50%); transform: translate(-50%);
} }
div#home-top-div { */
/* margin: 10px auto;
width: 60%;
height: 100px;
border: 1px solid #333;
position:relative;
text-align:center*/
}
/*Footer*/ /*Footer*/
div#footer{ div#footer{
@ -784,19 +779,19 @@ a.paginate_button.next:after {
/*Home Top div*/ /*Home Top div*/
div#home-top-div{ div#home-top-div{
height: 60vh; /* 661px;*/ height: 40vh; /* 661px;*/
min-height: 400px;
width: 100%; width: 100%;
overflow: hidden; overflow: hidden;
position: relative; position: relative;
border-bottom: solid black 3px; border-bottom: solid black 3px;
background-color: rgba(233,233,233, 0.5); background-color: rgba(233,233,233, 0.5);
padding: 0vw 8vw; padding: 0vw 8vw;
display: grid; display: grid;
row-gap: 2rem; row-gap: 2rem;
column-gap: 1rem; column-gap: 1rem;
grid-template-columns: repeat(18, 1fr); grid-template-columns: repeat(18, 1fr);
grid-template-rows: min-content auto; grid-template-rows: auto auto;
} }
.heading_A { .heading_A {
font-family: Roboto Condensed; font-family: Roboto Condensed;
@ -815,12 +810,12 @@ div#home-top-div{
/*max-width: 634px;*/ /*max-width: 634px;*/
z-index: 1000; /*99*/ z-index: 1000; /*99*/
grid-column-start: 1; grid-column-start: 1;
grid-column-end: 10; grid-column-end: 11;
grid-row-start: 1; grid-row-start: 1;
grid-row-end: 1; grid-row-end: 1;
align-self: center; align-self: center;
max-width: 800px; max-width: 800px;
margin-top: 6vw; /*margin-top: 6vw;*/
} }
#home-top-div p { #home-top-div p {
margin-bottom: 0px; margin-bottom: 0px;
@ -1176,7 +1171,7 @@ div.home-show-wrapper a:hover {
grid-row-end: 2; grid-row-end: 2;
} }
.mw-parser-output p { .mw-parser-output p {
margin: 0px 0px 30px 0px; margin: 0px 0px 1em 0px;
} }
.Heading_C, .mw-parser-output h2, h2 { .Heading_C, .mw-parser-output h2, h2 {
@ -1408,7 +1403,7 @@ div.browsebycategory-categories:hover {
display: grid; display: grid;
row-gap: 0rem; row-gap: 0rem;
margin: 30px 0px; margin: 30px 0px;
padding-bottom: 2rem; padding-bottom: 1rem;
column-gap: 1rem; column-gap: 1rem;
grid-template-columns: repeat(18, 1fr); grid-template-columns: repeat(18, 1fr);
border-bottom: 3px solid #000; border-bottom: 3px solid #000;
@ -1443,9 +1438,9 @@ div.browsebycategory-categories:hover {
bottom: 0; bottom: 0;
border-left: 3px solid blue; border-left: 3px solid blue;
transform: translate(90%); transform: translate(90%);
height: 45px; height: 40px;
max-width: 2px; max-width: 2px;
margin-top: 410px; margin-top: 390px;
left: 24.5%; left: 24.5%;
} }
.artwork-nav-label-record:before { .artwork-nav-label-record:before {
@ -1456,13 +1451,13 @@ div.browsebycategory-categories:hover {
bottom: 0; bottom: 0;
border-left: 3px solid var(--brown-grey); border-left: 3px solid var(--brown-grey);
transform: translate(90%); transform: translate(90%);
height: 45px; height: 40px;
max-width: 2px; max-width: 2px;
margin-top: 410px; margin-top: 390px;
left: 46.5%; left: 44%;
} }
.artwork-nav-label-record { .artwork-nav-label-record {
grid-column-start: 8; grid-column-start: 7;
grid-column-end: 11; grid-column-end: 11;
grid-row-start: 1; grid-row-start: 1;
grid-row-end: 1; grid-row-end: 1;
@ -1489,12 +1484,19 @@ div.browsebycategory-categories:hover {
color: var(--blue-blue); color: var(--blue-blue);
cursor: pointer; cursor: pointer;
} }
.artwork-about, .artwork-copieswrapper, .artwork-relatedwrapper, .artwork-lists { .artwork-about {
width: 100%; width: 100%;
display: grid; display: grid;
row-gap: 0rem; row-gap: 0rem;
column-gap: 1rem; column-gap: 1rem;
grid-template-columns: repeat(18, 1fr); grid-template-columns: repeat(19, 1fr);
}
.artwork-relatedwrapper,.artwork-copieswrapper, .artwork-lists {
width: 100%;
display: grid;
row-gap: 2rem;
column-gap: 1rem;
grid-template-columns: repeat(10, 1fr);
} }
/*.artwork-relatedwrapper{ /*.artwork-relatedwrapper{
grid-template-areas: grid-template-areas:
@ -1521,15 +1523,15 @@ div.browsebycategory-categories:hover {
grid-column-end: 8; grid-column-end: 8;
grid-row-start: 1; grid-row-start: 1;
grid-row-end: 3; grid-row-end: 3;
margin: 0 !important; margin: -15px 0 0 0 !important;
} }
.artwork-rightcolumn { .artwork-rightcolumn {
grid-column-start: 9; grid-column-start: 9;
grid-column-end: 18; grid-column-end: 19;
grid-row-start: 1; grid-row-start: 1;
grid-row-end: 1; grid-row-end: 1;
margin: 0 !important; margin: 0 !important;
display: grid; /*display: grid;*/
} }
.artwork-about-img img { .artwork-about-img img {
@ -1547,18 +1549,20 @@ div.browsebycategory-categories:hover {
margin: 0 0 0 0 !important; margin: 0 0 0 0 !important;
display: grid; display: grid;
padding: 0 0 20px 0; padding: 0 0 20px 0;
grid-template-columns: repeat(10, 1fr);
column-gap: 1rem;
} }
.artwork-rightcolumn-top-contributors { .artwork-rightcolumn-top-contributors {
grid-column-start: 1; grid-column-start: 1;
grid-column-end: 10; grid-column-end: 6;
grid-row-start: 1; grid-row-start: 1;
grid-row-end: 1; grid-row-end: 1;
} }
.artwork-rightcolumn-top-date { .artwork-rightcolumn-top-date {
grid-column-start: 10; grid-column-start: 6;
grid-column-end: 18; grid-column-end: 12;
grid-row-start: 1; grid-row-start: 1;
grid-row-end: 1; grid-row-end: 1;
@ -1585,6 +1589,8 @@ div.browsebycategory-categories:hover {
.text-description .mw-parser-output, .artwork-rightcolumn-exhibition .mw-parser-output, .text-exhibition .mw-parser-output{ .text-description .mw-parser-output, .artwork-rightcolumn-exhibition .mw-parser-output, .text-exhibition .mw-parser-output{
display: initial; display: initial;
grid-template-columns: none;
padding: 0px;
} }
.artwork-rightcolumn-exhibition { .artwork-rightcolumn-exhibition {
grid-column-start: 9; grid-column-start: 9;
@ -1626,11 +1632,12 @@ div.browsebycategory-categories:hover {
border-top: 3px solid #000; border-top: 3px solid #000;
margin: 0px; margin: 0px;
padding: 20px 0; padding: 20px 0;
margin-top: 40px;
} }
.text-description { .text-description {
grid-column-start: 1; grid-column-start: 1;
grid-column-end: 8; grid-column-end: 6;
grid-row-start: 2; grid-row-start: 2;
grid-row-end: 2; grid-row-end: 2;
} }
@ -1639,7 +1646,7 @@ div.browsebycategory-categories:hover {
} }
.text-exhibition { .text-exhibition {
grid-column-start: 1; grid-column-start: 1;
grid-column-end: 8; grid-column-end: 6;
grid-row-start: 2; grid-row-start: 2;
grid-row-end: 2; grid-row-end: 2;
@ -1659,19 +1666,20 @@ div.browsebycategory-categories:hover {
padding: 30px 8vw 30px 8vw; padding: 30px 8vw 30px 8vw;
} }
.artwork-copiesincollection { .artwork-copiesincollection {
grid-column-start: 3; /* grid-column-start: 2;
grid-column-end: 6; grid-column-end: 6;*/
border-right: solid 0.5px var(--black); border-right: solid 0.5px var(--black);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
padding: 0px 20px;
} }
.artwork-copiesincollection-title-div { .artwork-copiesincollection-title-div {
text-align: center; text-align: center;
} }
.artwork-lists .Heading_C , .artwork-relatedwrapper .Heading_C , .artwork-copieswrapper .Heading_C { .artwork-lists .Heading_C , .artwork-relatedwrapper .Heading_C , .artwork-copieswrapper .Heading_C {
grid-column-start: 1; grid-column-start: 1;
grid-column-end: 3; grid-column-end: 2;
/* writing-mode: sideways-lr; /* writing-mode: sideways-lr;
max-height: 120px; */ max-height: 120px; */
text-align: center; text-align: center;
@ -1761,7 +1769,7 @@ div.browsebycategory-categories:hover {
padding: 0px; padding: 0px;
display: initial; display: initial;
} }
.artwork-relatedworks:nth-of-type(2) { /*.artwork-relatedworks:nth-of-type(2) {
grid-column-start: 3; grid-column-start: 3;
grid-column-end: 6; grid-column-end: 6;
margin: 0 !important; margin: 0 !important;
@ -1785,7 +1793,7 @@ div.browsebycategory-categories:hover {
grid-column-start: 15; grid-column-start: 15;
grid-column-end: 18; grid-column-end: 18;
margin: 0 !important; margin: 0 !important;
} }*/
.artwork-relatedworks-tile a:hover, .artwork-relatedworks-tile a:hover ~ .artwork-relatedworks-date, .artwork-lists-title a:hover { .artwork-relatedworks-tile a:hover, .artwork-relatedworks-tile a:hover ~ .artwork-relatedworks-date, .artwork-lists-title a:hover {
color: var(--blue-blue); color: var(--blue-blue);
} }
@ -1807,17 +1815,21 @@ img.artwork-relatedworks-imgs, .artwork-lists-img img{
text-decoration: none; text-decoration: none;
cursor: pointer; cursor: pointer;
} }
.artwork-about-under-img a:hover { .artwork-about-under-img .distri-links a, .artwork-about-under-img .distri-links a:visited{
color: #000;
}
.artwork-about-under-img a:hover, .artwork-about-under-img .distri-links a:hover {
color: var(--blue-blue); color: var(--blue-blue);
} }
.artwork-about-under-img .distri-links a, .artwork-about-under-img .distri-links a:visited{ .artefact, .facsimile, .distri-links div {
color: var(--blue-blue);
}
.artefact, .facsimile {
align-items: center; align-items: center;
display: flex; display: flex;
} }
.facsimile > a , .artefact > a, .distri-links div > a {
padding: 0 10px 0 0;
}
/* LIBRARY */ /* LIBRARY */
.tns-controls { text-align: center; margin-bottom: 10px; } .tns-controls { text-align: center; margin-bottom: 10px; }
.tns-controls [aria-controls] { .tns-controls [aria-controls] {
@ -1825,16 +1837,18 @@ img.artwork-relatedworks-imgs, .artwork-lists-img img{
} }
.tns-nav { .tns-nav {
text-align: center; text-align: center;
margin: 10px 0; margin: 0px;
padding-bottom: 20px;
padding-right: 15px;
} }
.tns-nav > [aria-controls] { .tns-nav > [aria-controls] {
width: 12px; width: 16px;
height: 12px; height: 16px;
padding: 0; padding: 0;
margin: 0 5px 0 0; margin: 0 10px 0 0;
border-radius: 50%; border-radius: 50%;
border: 1px solid #000; border: 1px solid #000;
background: #FFF; /*background: #FFF;*/
} }
.tns-nav-active { .tns-nav-active {
background: #000 !important; background: #000 !important;
@ -1845,6 +1859,7 @@ img.artwork-relatedworks-imgs, .artwork-lists-img img{
.tns-item p:nth-of-type(1) { .tns-item p:nth-of-type(1) {
text-transform: uppercase; text-transform: uppercase;
margin: 10px 0 0px 0px !important;
} }
.tns-item p{ .tns-item p{
text-align: center; text-align: center;
@ -1867,6 +1882,8 @@ img.artwork-relatedworks-imgs, .artwork-lists-img img{
max-width: inherit; max-width: inherit;
} }
.artwork-nav-label-mobile, .artwork-about-under-img-mobile { display: none; }
/*************************************/ /*************************************/
/************ WIKI PAGES ************/ /************ WIKI PAGES ************/
@ -1887,10 +1904,13 @@ div#tutorials-intro h3, div#tutorials-intro p {
/************ Disactive Mobile ************/ /************ Disactive Mobile ************/
#navigation-mobile, #message-mobile { #navigationmobile, #message-mobile {
display: none; display: none;
} }
#mobtop{
display: none;
}
/********************************** RESPONSIVE DESIGN *********************************/ /********************************** RESPONSIVE DESIGN *********************************/
@ -1929,11 +1949,52 @@ div#tutorials-intro h3, div#tutorials-intro p {
overflow: hidden; overflow: hidden;
position: static; position: static;
} }
/********** NAV
.web-dev-placeholder {
padding: 0px 10px;
margin-right: 30px;
}
/********** NAV **********/
#mobtop{
display: initial;
}
#navigation { #navigation {
display: none !important; display: none !important;
} }
a.mobile-nav-icon, a.mobile-nav-icon:visited, a.mobile-nav-icon:hover {
cursor: pointer;
text-decoration: none;
position: absolute;
right: 0;
margin-right: 8vw;
}
a.mobile-nav-icon:after {
cursor: pointer;
text-decoration: none;
display: inline-block;
content: ' ';
background-image: url('Icons/icn_bars-solid.svg');
background-size: 16px 16px;
height: 16px;
width: 16px;
color: var(--blue-blue);
}
a.mob-close-icon:after {
cursor: pointer;
text-decoration: none;
display: inline-block;
content: ' ';
background-image: url('Icons/icn_close_large.svg');
background-size: 16px 16px;
height: 16px;
width: 16px;
color: var(--blue-blue);
z-index: 99;
}
div#header { div#header {
height: 60px !important; height: 60px !important;
} }
@ -1950,12 +2011,11 @@ div#tutorials-intro h3, div#tutorials-intro p {
input[type="checkbox"]:checked ~ .sidebarIconToggle > .icon-cross { input[type="checkbox"]:checked ~ .sidebarIconToggle > .icon-cross {
display: block; display: block;
} }
.sidebarIconToggle { .sidebarIconToggle {
cursor: pointer; cursor: pointer;
} }
#navigation-mobile { #navigationmobile {
display: block; display: none;
position: fixed; position: fixed;
top: 60px; top: 60px;
left: 0; left: 0;
@ -1966,8 +2026,6 @@ div#tutorials-intro h3, div#tutorials-intro p {
overflow-y: hidden; overflow-y: hidden;
transition: transform 250ms ease-in-out; transition: transform 250ms ease-in-out;
} }
.navigation-mobile-items{ .navigation-mobile-items{
margin: 100px 0px 0px 0px; margin: 100px 0px 0px 0px;
display: flex; display: flex;
@ -2003,13 +2061,21 @@ div#tutorials-intro h3, div#tutorials-intro p {
color: var(--black); color: var(--black);
} }
**********/ div#animatedlogo img {
width: 8.5vw;
min-width: 32px;
margin-top: 10px;
}
/********** MAIN **********/ /********** MAIN **********/
#home-top-div > img , #wrapper-bt { #home-top-div > img {
display: none; display: none;
} }
#home-top-div #wrapper-bt {
grid-column-start: 1;
grid-column-end: 19;
}
div#home-top-div { div#home-top-div {
height: 50vh; height: 50vh;
} }
@ -2074,10 +2140,34 @@ div#tutorials-intro h3, div#tutorials-intro p {
grid-column-end: 19; grid-column-end: 19;
} }
}
/********* ARTWORK **********/ /********* ARTWORK **********/
.artwork-relatedwrapper,.artwork-copieswrapper, .artwork-lists { display: none; }
.artwork-nav { display: none; }
.artwork-nav-label-mobile {
display: flex;
padding: 0px 0px 60px 8vw;
}
.artwork-nav-label-record::before {display: none;}
.artwork-leftcolumn {
grid-column-start: 1;
grid-column-end: 19;
grid-row-start: 1;
grid-row-end: 3;
margin: 0 !important;
}
.artwork-rightcolumn {
grid-column-start: 1;
grid-column-end: 19;
grid-row-start: 3;
grid-row-end: 3;
}
.artwork-about-under-img { margin: 0 0 20px 0; }
}
/***************** LAPTOP MEDIUM ****************/ /***************** LAPTOP MEDIUM ****************/
@media screen and (min-width: 769px) and (max-width: 1000px) { @media screen and (min-width: 769px) and (max-width: 1000px) {
@ -2087,16 +2177,23 @@ div#tutorials-intro h3, div#tutorials-intro p {
#footer-title-others, #footer-title-contact {text-align: right;} #footer-title-others, #footer-title-contact {text-align: right;}
#footer-contact-form {margin: 30px 0px 0px 0px;} #footer-contact-form {margin: 30px 0px 0px 0px;}
#footer-credit, #footer-socials{ padding: 0px; } #footer-credit, #footer-socials{ padding: 0px; }
.artwork-relatedwrapper,.artwork-copieswrapper, .artwork-lists { grid-template-columns: repeat(5, 1fr); }
} }
@media (min-width: 1000px) { @media (min-width: 1000px) {
#home-recent-grid, #browsethearchive-grid, #selfpublishedindex-grid, #zinesindex-grid { grid-template-columns: repeat(4, 1fr); } #home-recent-grid, #browsethearchive-grid, #selfpublishedindex-grid, #zinesindex-grid { grid-template-columns: repeat(4, 1fr); }
.artwork-relatedwrapper,.artwork-copieswrapper, .artwork-lists { grid-template-columns: repeat(5, 1fr); }
} }
/***************** LAPTOP BIG ****************/ /***************** LAPTOP BIG ****************/
@media (min-width: 1400px) { @media (min-width: 1400px) {
#home-recent-grid, #browsethearchive-grid, #selfpublishedindex-grid, #zinesindex-grid { grid-template-columns: repeat(6, 1fr); } #home-recent-grid, #browsethearchive-grid, #selfpublishedindex-grid, #zinesindex-grid { grid-template-columns: repeat(6, 1fr); }
.artwork-relatedwrapper,.artwork-copieswrapper, .artwork-lists { grid-template-columns: repeat(10, 1fr); }
} }

6
templates/artwork.html
View File

@ -358,11 +358,6 @@
<!-- end of about --> <!-- end of about -->
</div> </div>
</div> </div>
<!-- END OF ABOUT --> <!-- END OF ABOUT -->
@ -462,6 +457,7 @@
</div> </div>
<!-- END OF LISTS --> <!-- END OF LISTS -->
<div class="artwork-nav-label-mobile 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>

4
templates/home.html
View File

@ -30,14 +30,14 @@
<a id="wrapper-top-buttons" class="primary-button" href="{{ url_for('zinesindex') }}">SEE EXAMPLE SEARCH FOR ZINES</a> <a id="wrapper-top-buttons" class="primary-button" href="{{ url_for('zinesindex') }}">SEE EXAMPLE SEARCH FOR ZINES</a>
<a id="wrapper-top-buttons" class="secondary-button" href="{{ url_for('casestudy') }}">CAROLEE SCHNEEMANN CASE STUDY</a> <a id="wrapper-top-buttons" class="secondary-button" href="{{ url_for('casestudy') }}">CAROLEE SCHNEEMANN CASE STUDY</a>
</div> </div>
<div id="wrapper-vid"> <!-- <div id="wrapper-vid">
<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>
<p> <p>
<a class="metadata-link" target="_blank" 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">See Live Data Visualization</a> <a class="metadata-link" target="_blank" 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">See Live Data Visualization</a>
</p> </p>
</div> </div> -->
</div> </div>
<div class="scroll-down"><span>Scroll Down</span></div> <div class="scroll-down"><span>Scroll Down</span></div>

29
templates/layout.html
View File

@ -10,7 +10,7 @@
</head> </head>
<body> <body>
<div id="navigation-mobile"> <div id="navigationmobile">
<div class= "navigation-mobile-items"> <div class= "navigation-mobile-items">
<div id="nav-about"><a href="{{ url_for('about') }}">About</a></div> <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-archive"><a href="{{ url_for('browsethearchive') }}">Browse the archive</a></div>
@ -37,15 +37,17 @@
<a href="{{ url_for('home') }}">DAAP</a> <a href="{{ url_for('home') }}">DAAP</a>
</div> </div>
<!-- <div id="header-keyword-search"> <!-- <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> </div>
<div class="container" onclick="myFunction(this)"> <div class="container" onclick="myFunction(this)">
</div> </div> -->
-->
<div class="web-dev-placeholder"> <div class="web-dev-placeholder">
<p>WEBSITE IN DEVELOPMENT</p> <p>WEBSITE IN DEVELOPMENT</p>
</div> </div>
<a id="mobtop" class="mobile-nav-icon mob-menu-icon" onclick="showMenu('navigationmobile'); toggleMenu();"></a>
</div> </div>
<div id="navigation"> <div id="navigation">
@ -108,9 +110,24 @@
<script type="text/javascript"> <script type="text/javascript">
function menutoggle(x) {
x.classList.toggle("change"); function showMenu(navigationmobile){
var e = document.getElementById('navigationmobile');
var element = document.getElementById("mobtop");
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
document.querySelector('body').style.overflow = 'hidden';
element.classList.toggle("mob-close-icon");
} }
// element.classList.add("mobile-nav-icon");
// element.classList.remove("mob-close-icon");
// element.classList.remove("mobile-nav-icon");
// element.classList.add("mob-close-icon");
</script> </script>