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

mobile layout artwork andadjustment on landingpage

master
JoBCB 4 years ago
parent
e44fbd1c31
commit
af78fded69
5 changed files with 184 additions and 73 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. 1
      static/css/Icons/icn_bars-solid.svg
  2. 217
      static/css/style.css
  3. 6
      templates/artwork.html
  4. 4
      templates/home.html
  5. 29
      templates/layout.html

1
static/css/Icons/icn_bars-solid.svg
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 {
color: var(--blue-blue);
}
.artwork-about-under-img .distri-links a, .artwork-about-under-img .distri-links a:visited{ .artwork-about-under-img .distri-links a, .artwork-about-under-img .distri-links a:visited{
color: var(--blue-blue); color: #000;
} }
.artefact, .facsimile { .artwork-about-under-img a:hover, .artwork-about-under-img .distri-links a:hover {
color: var(--blue-blue);
}
.artefact, .facsimile, .distri-links div {
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>

Write Preview
Loading…
Cancel
Save