created burger menu and added responsive styles for navbar, optimized element positions in header
diff --git a/dev/js/src/init.js b/dev/js/src/init.js
index 5b0e7d1..60f961a 100644
--- a/dev/js/src/init.js
+++ b/dev/js/src/init.js
@@ -131,15 +131,28 @@
let prevScrollPos = window.scrollY;
window.onscroll = function() {
+ const navbar = document.querySelector('.navbar');
let currentScrollPos = window.scrollY;
if (prevScrollPos > currentScrollPos) {
- document.querySelector('.navbar').style.top = '0';
+ navbar.style.top = '0';
} else {
- document.querySelector('.navbar').style.top = '-3rem';
+ if (!navbar.classList.contains('show')) {
+ navbar.style.top = '-3rem';
+ }
}
prevScrollPos = currentScrollPos;
}
+ // Responsive navbar: hide and show burger menu
+ document.querySelector('.burger-icon').addEventListener('click', function() {
+ const navbar = document.querySelector('.navbar');
+ if (navbar.className === 'navbar') {
+ navbar.className += ' show';
+ } else {
+ navbar.className = 'navbar';
+ }
+ })
+
/**
* Replace Virtual Corpus field
*/
diff --git a/dev/scss/header/header.scss b/dev/scss/header/header.scss
index 04e318e..5b244ba 100644
--- a/dev/scss/header/header.scss
+++ b/dev/scss/header/header.scss
@@ -39,25 +39,25 @@
&-group {
- & fieldset.fieldset-login {
+ fieldset.fieldset-login {
display: inline;
margin-right: 0;
padding: 0;
min-inline-size: unset;
border: unset;
- & form.login {
+ form.login {
display: flex;
align-items: center;
- & input[type=text],
- & input[type=password] {
+ input[type=text],
+ input[type=password] {
@include input-field;
margin-right: 8px;
height: 2rem;
}
- & button.btn-login {
+ button.btn-login {
width: 3rem;
height: 3rem;
background-color: $dark-green;
@@ -79,7 +79,7 @@
content: $fa-login;
}
}
- & button.btn-login:hover {
+ button.btn-login:hover {
background-color: $middle-green;
}
}
@@ -140,7 +140,6 @@
display: block;
padding: .75rem;
font-size: 120%;
- // font-weight: bold;
color: $nearly-white;
transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
@@ -153,40 +152,14 @@
}
}
- // &-item {
- // height: 3rem;
- // padding: .6rem .9rem;
- // font-size: 180% !important;
- // transition: all .2s ease-in-out;
- // -o-transition: all .2s ease-in-out;
- // -moz-transition: all .2s ease-in-out;
- // -webkit-transition: all .2s ease-in-out;
+ .burger-icon {
+ display: none;
- // &:hover {
- // background-color: $middle-green;
- // }
-
- // &.profile {
- // width: 3rem;
- // height: 3rem;
- // padding: .6rem .9rem;
-
- // &:hover {
- // background-color: $middle-green;
- // }
- // }
-
- // &.logout {
- // width: 3rem;
- // height: 3rem;
- // margin-left: 1rem;
- // padding: .6rem .9rem;
-
- // &:hover {
- // background-color: $middle-green;
- // }
- // }
- // }
+ &::after {
+ @include icon-font;
+ content: $fa-bars;
+ }
+ }
}
span.select {
diff --git a/dev/scss/main/intro.scss b/dev/scss/main/intro.scss
index 80130f0..9c02452 100644
--- a/dev/scss/main/intro.scss
+++ b/dev/scss/main/intro.scss
@@ -26,6 +26,16 @@
}
}
+@media all and (max-width: 42.5em) {
+ div.intro {
+ &-container {
+ margin-top: 1rem;
+ flex-direction: column;
+ gap: 1rem;
+ }
+ }
+}
+
// aside.active ~ main div.intro {
// margin-left: $logo-left-distance - $standard-margin + $base-padding;
// }
\ No newline at end of file
diff --git a/dev/scss/main/logos.scss b/dev/scss/main/logos.scss
index 3a63c24..af8a0db 100644
--- a/dev/scss/main/logos.scss
+++ b/dev/scss/main/logos.scss
@@ -53,9 +53,9 @@
}
}
-aside.active ~ header h1 {
- position: fixed;
-}
+// aside.active ~ header h1 {
+// position: fixed;
+// }
#overview {
diff --git a/dev/scss/main/news.scss b/dev/scss/main/news.scss
index 7cdb669..32b97b0 100644
--- a/dev/scss/main/news.scss
+++ b/dev/scss/main/news.scss
@@ -10,13 +10,23 @@
border-left: 5px solid $ids-green-1;
height: 20rem;
overflow-y: scroll;
+ font-size: .8rem;
+ width: 100%;
+
+ h3 {
+ font-size: 1rem;
+ }
dt {
- float: left;
- clear: left;
- width: 15ex;
- text-align: right;
+ // float: left;
+ // clear: left;
+ // width: 15ex;
+ // text-align: right;
+ text-align: left;
font-weight: bold;
+ float: none;
+ width: auto;
+ padding-bottom: .2em;
}
dd.maintenance > h4::after {
@@ -26,14 +36,15 @@
}
dd {
- margin: 0 1ex 0 16ex;
+ // margin: 0 1ex 0 16ex;
+ margin-left: 1em;
padding: 0 0 0.5em 1em;
> p {
max-width: 80ex;
margin-block-start: 0ex;
}
- > h4 {
+ > h4 {
margin-block-start: 0ex;
margin-block-end: 0.33ex;
}
@@ -43,13 +54,13 @@
@media all and (max-width: 42.5em) {
section#news {
dt {
- text-align: left;
- float: none;
- width: auto;
- padding-bottom: .2em;
+ // text-align: left;
+ // float: none;
+ // width: auto;
+ // padding-bottom: .2em;
}
dd {
- margin-left: 1em;
+ // margin-left: 1em;
}
}
}
diff --git a/dev/scss/media.scss b/dev/scss/media.scss
index d7875f8..dcf78dd 100644
--- a/dev/scss/media.scss
+++ b/dev/scss/media.scss
@@ -21,16 +21,82 @@
}
header {
+ padding-top: 2rem;
padding-right: 8px;
}
header form {
+ margin: 1.5rem 1rem;
padding-left: 0;
- padding-top: 33px;
+ // padding-top: 33px;
+ }
+
+ .navbar {
+ *:not(:first-child) {
+ display: none;
+ }
+
+ .burger-icon {
+ display: block !important;
+ padding: .6rem .9rem;
+ font-size: 1.5rem;
+ color: $nearly-white;
+ }
+
+ &.show .burger-icon {
+ position: absolute;
+ top: 0;
+ right: 0;
+ background-color: $middle-green;
+ }
+
+ &.show * {
+ display: block;
+ }
+
+ &-group {
+ margin-top: 3rem;
+ width: 100%;
+ display: block;
+ position: fixed;
+ top: 0;
+ left: 0;
+ background-color: $middle-green;
+
+ fieldset.fieldset-login {
+ width: 100%;
+
+ form.login {
+ align-items: normal !important;
+ flex-direction: column;
+ gap: 6px;
+
+ input[type=text],
+ input[type=password] {
+ @include input-field;
+ margin-right: 0 !important;
+ }
+
+ button.btn-login {
+ width: 100% !important;
+ align-self: center;
+ }
+ }
+ }
+ }
+
+ @media (hover: none) and (pointer: coarse) {
+ .dropdown {
+ margin-right: 0 !important;
+
+ &-content {
+ display: block !important;
+ }
+ }
+ }
}
.vc {
-
font-size: 9pt;
.builder {
.doc {
@@ -58,6 +124,11 @@
}
z-index: 110;
position: absolute !important;
+ top: 50%;
+ transform: translateY(-50%);
+ -o-transform: translateY(-50%);;
+ -moz-transform: translateY(-50%);
+ -webkit-transform: translateY(-50%);
}
#searchbar {
@@ -81,6 +152,7 @@
}
main {
+ padding: 1rem;
margin-left: $standard-margin;
margin-right: $standard-margin;
}
@@ -173,6 +245,7 @@
width: 100%;
top: 0;
border-width: 0;
+
fieldset input {
font-size: 9pt;
}
diff --git a/dev/scss/sidebar/sidebar.scss b/dev/scss/sidebar/sidebar.scss
index 9e52ab2..f5542ee 100644
--- a/dev/scss/sidebar/sidebar.scss
+++ b/dev/scss/sidebar/sidebar.scss
@@ -3,12 +3,11 @@
@import "../util";
aside {
- display: none;
background-color: $dark-green;
color: $nearly-white;
width: $logo-left-distance;
position: fixed;
- // display: block;
+ display: block;
transition: all .3s ease-in-out;
outline: none;
font-size: 10pt;
@@ -18,6 +17,10 @@
height: 100%;
padding-top: 65px;
+ &:not(.settings) {
+ display: none;
+ }
+
> div {
overflow-y: auto;
overflow-x: visible;
@@ -152,6 +155,10 @@
@include input-field;
width: 100%;
}
+
+ .login {
+ display: none;
+ }
// search form
> form > div {
diff --git a/templates/partial/header.html.ep b/templates/partial/header.html.ep
index 756a6fe..f35fdc6 100644
--- a/templates/partial/header.html.ep
+++ b/templates/partial/header.html.ep
@@ -6,6 +6,13 @@
%= include 'partial/auth/login'
%= content_block 'headerButtonGroup'
</div>
+
+ <div class="burger-icon"></div>
+
+ <!-- <a href="javascript:void(0);" class="burger-icon" onclick="toggleNavBar()"></a> -->
+
+ <!-- <input type="checkbox" class="burger-icon" id="burger-menu" />
+ <label for="burger-menu" class="burger-icon"></label> -->
</nav>
<form autocomplete="off" action="<%= url_for 'index' %>" id="searchform">