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

mobile layout artwork andadjustment on landingpage

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

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="secondary-button" href="{{ url_for('casestudy') }}">CAROLEE SCHNEEMANN CASE STUDY</a>
</div>
<div id="wrapper-vid">
<!-- <div id="wrapper-vid">
<video preload="meta" autoplay="" loop="">
<source src="{{ url_for('static', filename='/vid/DAAP_video_reduced.mp4') }}" type="video/mp4">
</video>
<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>
</p>
</div>
</div> -->
</div>
<div class="scroll-down"><span>Scroll Down</span></div>

29
templates/layout.html
View File

@ -10,7 +10,7 @@
</head>
<body>
<div id="navigation-mobile">
<div id="navigationmobile">
<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>
@ -37,15 +37,17 @@
<a href="{{ url_for('home') }}">DAAP</a>
</div>
<!-- <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 class="container" onclick="myFunction(this)">
</div>
-->
</div> -->
<div class="web-dev-placeholder">
<p>WEBSITE IN DEVELOPMENT</p>
</div>
<a id="mobtop" class="mobile-nav-icon mob-menu-icon" onclick="showMenu('navigationmobile'); toggleMenu();"></a>
</div>
<div id="navigation">
@ -108,9 +110,24 @@
<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>

Write Preview
Loading…
Cancel
Save