UI rework by Uyen
2024-11-18
- Delete unnecessary lines from .gitignore file.
- Fix sidebar to not be visible (on non-auth instances), if empty.
- Fix display/behaviour of annotation assistant bar to move correctly, when user types into the searchbar and clicks on the sidebar or anywhere else afterwards.
- Restore unlinted init.js file from patch 16 and add back changes for sidebar, top navbar, etc.
2024-10-30
- Fix overlap of documentation pop-up window.
- Change results area to not being shifted when sidebar is open.
- Add and adjust code for tour links (changed by Helge).
- Fix burger menu behaviour when clicking on tour link.
- Delete news and announcements template files from repository.
- Delete code snippets and files concerning news page.
- Change top navbar to non-sticky.
- Add and adjust code for top navbar items to be configurable (changed by Nils).
2024-10-09
- Add variables for element sizes and spacings.
- Remove static class for shifting the sidebar (fix position for annotation assistant bar on pages with the sidebar open by default).
- Fix shifted view on documentation page on small screens.
- Add check for burger icon existence.
- Add and style legend for login area.
- Delete commented-out code snippets on the go.
- Add new overall line-height.
- Add new logo addon styles back from patch set 12.
- Add back missing class attribute of hint-element.
2024-10-01
- Revise login area to be shown in a dropdown box on hovering the login icon.
- Fix login box focus, when user clicks on auto-completion.
- Add logout icon next to sign out text.
- Create new files for news and announcements (controller, templates) and fix news link.
- Fix visibility of news link for logged in and logged out users.
- Fix empty sidebar issue (make sidebar invisible, if empty).
- Fix animation issue, when the sidebar slides out (blank space, content shift).
- Fix relocation issue of annotation assistant bar.
- Fix navbar to not scroll up initially, when the user clicks on a hash link.
- Fix content display in tour window (title overlapped with text).
- Add tour link to the top navbar.
- Fix burger menu behaviour (lock navbar, when burger menu is active).
- Edit burger menu visibility, when the user clicks on tour link on small screens.
- Add media queries for navbar/dropdown.
- Fix small design issues.
2024-09-11
- Revise sidebar, searchbar, and content slide behaviour.
- Add and fix media queries for sidebar, content, and doc navigation.
- Fix news link and comments.
- Fix small design issues.
2024-08-05
- Fix sidebar visibility on starting page.
- Change slide-in state on start.
2024-07-15
- Improve appearance of title-addon on logo.
- Create and style new item on top navbar for 'News'.
- Change settings link in logout.html.ep to dynamic link.
2024-04-29
- Add an indicator for user login, and some minor design changes.
- Add back content_block headerButtonGroup due to backwards
compatibility and modify header.html.ep to fit changes.
- Correct color of minimize button for snippets to
nearly-white, and add media query for border-radius of
the search bar.
- Delete helper class get_user_name and set user_handle
instead to get the user name.
- Add scroll functionality for navbar: hide on scroll down,
show on scroll up.
- Create burger menu and add responsive styles for navbar,
optimize element positions in header.
- Add and style registration link to fit in login area,
change navbar size and input fields, improve positionings of
logo and icons, fix animation of navbar when scrolling on
small devices.
Change-Id: Ie7803aeafb6683d18de51f8c918fb7b0dd308fcc
diff --git a/dev/js/src/init.js b/dev/js/src/init.js
index 12474c0..0d54ebc 100644
--- a/dev/js/src/init.js
+++ b/dev/js/src/init.js
@@ -2,7 +2,7 @@
* Initialize The JS frontend part and decorate
* the static HTML data.
*
- * @author Nils Diewald
+ * @author Nils Diewald, Helge Stallkamp
*
* TODO: Create lazy loading of objects including
* - obj.hint()
@@ -13,6 +13,9 @@
* - obj.matchCreate() (using webpack)
* - obj.koral() (show result, parse for errors ...)
* - obj.alignment() // toggle
+ *
+ * TODO: After upgrading to ES 6
+ * - use optional chaining operator (for example see below)
*/
"use strict";
@@ -96,14 +99,20 @@
for(let j = 0; j < gt.length; j++){
gt[j].setAttribute('href', '#');
gt[j].addEventListener('click', function(){
- tourClass.gTstartSearch().start();
- });
- }
+ tourClass.gTstartSearch().start();
- KorAP.tourshowR = function(){
- tourClass.gTshowResults().start();
+ // Close the burger menu by simulating a click on the burger icon
+ const burgerIcon = document.querySelector('.burger-icon');
+ if (isBurgerMenuOpen) {
+ burgerIcon.click();
+ }
+ });
+ }
+
+ KorAP.tourshowR = function(){
+ tourClass.gTshowResults().start();
};
- };
+ }
var obj = {};
@@ -129,6 +138,50 @@
}
);
+ // Responsive navbar: hide and show burger menu
+ const burgerIcon = document.querySelector('.burger-icon');
+ let isBurgerMenuOpen = false;
+
+ if (burgerIcon) {
+ burgerIcon.addEventListener('click', function() {
+ const navbar = document.querySelector('.navbar');
+ navbar.classList.toggle('show');
+
+ isBurgerMenuOpen = !isBurgerMenuOpen;
+ if (isBurgerMenuOpen) {
+ navbar.style.top = '0';
+ }
+ });
+ }
+
+ // Fallback solution for login dropdown visibility (if :focus-within is not supported)
+ document.addEventListener('DOMContentLoaded', function() {
+ const dropdown = document.querySelector('.dropdown');
+ const dropdownContent = document.querySelector('.dropdown-content');
+
+ dropdown.addEventListener('mouseenter', function() {
+ dropdownContent.style.display = 'block';
+ });
+
+ dropdown.addEventListener('mouseleave', function() {
+ // If no input inside the form is focused, then close dropdown content
+ if (!dropdown.contains(document.activeElement)) {
+ dropdownContent.style.display = 'none';
+ }
+ });
+
+ dropdownContent.addEventListener('focusin', function() {
+ dropdownContent.style.display = 'block';
+ });
+
+ dropdownContent.addEventListener('focusout', function(e) {
+ // If focus moved outside the dropdown content, then close it
+ if (!dropdownContent.contains(e.relatedTarget)) {
+ dropdownContent.style.display = 'none';
+ }
+ });
+ });
+
/**
* Replace Virtual Corpus field
*/
@@ -212,6 +265,91 @@
};
});
+ // Function to toggle the shifted class on elements
+ function shiftContent() {
+ // Get elements to perform content shift when sidebar is active
+ const header = document.querySelector('header');
+ const main = document.querySelector('main');
+ const footer = document.querySelector('footer');
+ const hint = document.querySelector('#hint');
+ const results = document.querySelector('.found');
+ const aside = document.querySelector('aside');
+
+ if (aside && aside.classList.contains('active')) {
+ header.classList.add('shifted');
+ if (!results) {
+ main.classList.add('shifted');
+ }
+ footer.classList.add('shifted');
+ if (hint) {
+ hint.classList.add('shifted');
+ adjustHintPosition();
+ }
+ } else {
+ header.classList.remove('shifted');
+ main.classList.remove('shifted');
+ footer.classList.remove('shifted');
+ if (hint) {
+ hint.classList.remove('shifted');
+ adjustHintPosition();
+ }
+ }
+ }
+
+ // Function to adjust the position of the annotation assistant bar (hint), when user types into the searchbar and clicks the sidebar (or anywhere outside the searchbar) afterwards
+ function adjustHintPosition() {
+ const hint = document.querySelector('#hint');
+ const searchInput = document.querySelector('#q-field');
+ const aside = document.querySelector('aside');
+
+ if (hint && searchInput) {
+ // Create a temporary span to measure the exact text width
+ const span = document.createElement('span');
+ span.style.visibility = 'hidden';
+ span.style.position = 'absolute';
+ span.style.whiteSpace = 'pre';
+ // Copy the input's font properties
+ const inputStyle = window.getComputedStyle(searchInput);
+ span.style.font = inputStyle.font;
+ span.style.fontSize = inputStyle.fontSize;
+ span.style.fontFamily = inputStyle.fontFamily;
+ span.textContent = searchInput.value;
+ document.body.appendChild(span);
+
+ // Get the actual width of the text
+ const inputWidth = searchInput.value.length > 0 ? span.offsetWidth : 0;
+ document.body.removeChild(span);
+ let hintLeftPosition = inputWidth;
+
+ // TODO: This shouldn't be a fixed position!
+ if (aside && aside.classList.contains('active')) {
+ hintLeftPosition += 230;
+ }
+
+ hint.style.left = `${hintLeftPosition}px`;
+ }
+ }
+ //Can be solved more elegant witch ES6 (see optional chaining operator)
+ let qlf = document.querySelector('#q-field');
+ if(qlf != null){
+ qlf.addEventListener('blur', adjustHintPosition);
+ }
+
+ // MutationObserver to detect when #hint is injected into the DOM
+ const observer = new MutationObserver((mutationsList, observer) => {
+ for (const mutation of mutationsList) {
+ if (mutation.type === 'childList') {
+ const hint = document.querySelector('#hint');
+ if (hint) {
+ shiftContent();
+ observer.disconnect();
+ }
+ }
+ }
+ });
+
+ observer.observe(document.body, { childList: true, subtree: true });
+
// Add focus listener to aside
var aside = d.getElementsByTagName('aside')[0];
@@ -219,34 +357,36 @@
// Horrible lock to deal with sidebar clicks
var asideClicked = false;
-
+
+ shiftContent();
+
// Make aside active on focus
- aside.addEventListener('focus', function(e) {
+ aside.addEventListener('focus', function (e) {
this.classList.add('active');
+ shiftContent();
});
// Deactivate focus when clicking anywhere else
var body = d.getElementsByTagName('body')[0];
if (body !== null) {
- body.addEventListener('click', function() {
+ body.addEventListener('click', function () {
if (!asideClicked) {
aside.classList.remove('active');
- }
- else {
+ shiftContent();
+ } else {
asideClicked = false;
- };
+ }
});
- };
+ }
/* Stop click event on aside
* (to not trickle down to body)
*/
- aside.addEventListener('click', function(e) {
+ aside.addEventListener('click', function (e) {
asideClicked = true;
});
- };
+ }
-
// Replace QL select menus with KorAP menus
var qlField = d.getElementById('ql-field');
if (qlField !== null) {
diff --git a/dev/scss/base/base.scss b/dev/scss/base/base.scss
index cfe10b5..7750665 100644
--- a/dev/scss/base/base.scss
+++ b/dev/scss/base/base.scss
@@ -34,16 +34,17 @@
fill: $dark-grey;
}
-html {
- height: 100vh;
-}
+// html {
+// height: 100vh;
+// }
body {
- position: relative;
min-height: 100vh;
font-size: 12pt;
margin: 0;
padding: 0;
+ display: flex;
+ flex-direction: column;
}
a {
@@ -99,6 +100,8 @@
border-left: 5px solid $ids-blue-1;
background-color: $ids-blue-2;
color: $ids-blue-1;
+ -webkit-mix-blend-mode: normal; // Safari
+ mix-blend-mode: soft-light;
&.bug,
&.missing,
diff --git a/dev/scss/base/icons.scss b/dev/scss/base/icons.scss
index ae4974a..3d758c0 100644
--- a/dev/scss/base/icons.scss
+++ b/dev/scss/base/icons.scss
@@ -2,6 +2,7 @@
* Font Awesome symbol table.
*/
+$fa-user: "\f007";
$fa-bars: "\f0c9";
$fa-extlink: "\f08e";
$fa-up: "\f0d8";
diff --git a/dev/scss/base/lengths.scss b/dev/scss/base/lengths.scss
index c4a7e5a..613b8c6 100644
--- a/dev/scss/base/lengths.scss
+++ b/dev/scss/base/lengths.scss
@@ -4,15 +4,16 @@
* Defined lengths and sizes for the
* Kalamar layout.
*/
-$standard-border-radius: 6px;
-$item-padding: 3pt 6pt;
-$button-width: 30px;
-$base-padding: 8px;
-$border-size: 2px;
-$result-border-size: 1px;
-$left-width: 176px;
-$border-size: 2px;
-$left-distance: $left-width + ($border-size * 2);
+$standard-border-radius: 6px;
+$item-padding: 3pt 6pt;
+$button-width: 30px;
+$base-padding: 8px;
+$border-size: 2px;
+$result-border-size: 1px;
+$left-width: 176px;
+$border-size: 2px;
+$left-distance: $left-width + ($border-size * 2);
+$standard-size-and-spacing: 4rem;
/**
* Margins
diff --git a/dev/scss/footer/footer.scss b/dev/scss/footer/footer.scss
index 1a5b312..0d85a78 100644
--- a/dev/scss/footer/footer.scss
+++ b/dev/scss/footer/footer.scss
@@ -7,9 +7,9 @@
*/
footer {
background-color: $dark-grey;
- position: absolute;
-
- bottom: 0;
+ // position: absolute;
+ // bottom: 0;
+ margin-top: auto;
padding-bottom: 2px;
font-size: 70%;
width: 100%;
@@ -19,6 +19,10 @@
align-items: center;
height: $footer-height;
+ &.shifted {
+ padding-left: $logo-left-distance;
+ }
+
nav {
margin-left: $button-width;
padding: $item-padding;
@@ -94,6 +98,6 @@
}
aside.active:not(.off) ~ footer {
- padding-left: $logo-left-distance;
+ // padding-left: $logo-left-distance;
transition: all .3s ease-in-out;
}
diff --git a/dev/scss/header/header.scss b/dev/scss/header/header.scss
index 41b5cc4..ccd13bd 100644
--- a/dev/scss/header/header.scss
+++ b/dev/scss/header/header.scss
@@ -12,14 +12,289 @@
@import "state"; // State
@import "panel"; // Panel
+.navbar {
+ width: 100%;
+ height: $standard-size-and-spacing;
+ background-color: $dark-green;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: end;
+ // overflow: hidden;
+ // position: fixed;
+ position: absolute;
+ top: 0;
+ z-index: 999;
+ transition: top .3s ease-in-out;
+ -o-transition: top .3s ease-in-out;
+ -moz-transition: top .3s ease-in-out;
+ -webkit-transition: top .3s ease-in-out;
+
+ &-group {
+ display: flex;
+ align-items: center;
+
+ h3.nav-link {
+ height: $standard-size-and-spacing;
+ font-size: 1rem;
+ 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;
+
+ &:hover {
+ background-color: $middle-green;
+ }
+
+ a {
+ display: block;
+ padding: 1.5rem 1rem;
+ color: $nearly-white;
+ }
+ }
+
+ // fieldset.fieldset-login {
+ // display: flex;
+ // flex-direction: column;
+ // margin-right: 4rem;
+ // padding: 0;
+ // min-inline-size: unset;
+ // border: unset;
+
+ // form.login {
+ // display: flex;
+ // align-items: center;
+
+ // input[type=text],
+ // input[type=password] {
+ // @include input-field;
+ // margin-right: 8px;
+ // height: 1.5rem;
+ // }
+
+ // button.btn-login {
+ // // width: 3rem;
+ // // height: 3rem;
+ // // background-color: $dark-green;
+ // background-color: unset;
+ // color: $nearly-white;
+ // // padding: .75rem 1rem;
+ // font-size: 180%;
+ // border: none;
+ // border-color: unset;
+ // border-radius: 0;
+ // text-shadow: none;
+ // font-weight: normal;
+ // top: unset;
+ // 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;
+
+ // &::after {
+ // content: $fa-login;
+ // }
+
+ // &:hover {
+ // // background-color: $middle-green;
+ // color: $dark-orange;
+ // }
+ // }
+ // }
+
+ // p {
+ // margin: 0;
+ // font-size: .7rem;
+ // color: $nearly-white;
+
+ // a {
+ // color: $dark-orange;
+
+ // &:hover {
+ // color: $middle-orange;
+ // }
+ // }
+ // }
+ // }
+ }
+
+ .dropdown {
+ display: flex;
+ align-items: center;
+ margin-right: $standard-size-and-spacing;
+ position: relative;
+
+ &:hover .dropdown-content,
+ &:focus-within .dropdown-content {
+ display: block;
+ }
+
+ &:hover .dropdown-btn,
+ &:focus-within .dropdown-btn {
+ color: $nearly-white;
+ background-color: $middle-green;
+ }
+
+ &-btn {
+ height: $standard-size-and-spacing;
+ padding: 1.25rem 1rem;
+ color: $nearly-white;
+ 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;
+ cursor: pointer;
+
+ &.login::before {
+ @include icon-font;
+ content: $fa-login;
+ font-size: 150%;
+ }
+
+ &.profile::before {
+ @include icon-font;
+ content: $fa-user;
+ font-size: 150%;
+ }
+
+ h3.user-name {
+ padding-right: 2px;
+ // font-size: 85%;
+ font-size: 120%;
+ display: inline;
+ }
+ }
+
+ &-content {
+ display: none;
+ width: fit-content;
+ margin-top: $standard-size-and-spacing;
+ padding: 0;
+ background-color: $middle-green;
+ position: absolute;
+ top: 0;
+ z-index: 999;
+
+ &--left {
+ left: 0;
+ }
+
+ &--right {
+ right: 0;
+ padding: 1rem;
+ }
+
+ form.login {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+
+ legend {
+ padding-bottom: $base-padding;
+ color: $nearly-white;
+ }
+
+ input[type=text],
+ input[type=password] {
+ @include input-field;
+ margin-bottom: 8px;
+ height: 2rem;
+ }
+
+ button.btn-login {
+ width: 100%;
+ height: 2rem;
+ margin-bottom: 1rem;
+ background-color: $dark-green;
+ color: $nearly-white;
+ font-size: 120%;
+ border: none;
+ border-color: unset;
+ border-radius: 0;
+ text-shadow: none;
+ font-weight: normal;
+ top: unset;
+ 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;
+
+ &::after {
+ content: $fa-login;
+ }
+
+ &:hover {
+ // color: $dark-orange;
+ background-color: $dark-orange;
+ }
+ }
+ }
+
+ p {
+ margin: 0;
+ font-size: .7rem;
+ color: $nearly-white;
+
+ a {
+ color: $dark-orange;
+
+ &:hover {
+ color: $middle-orange;
+ }
+ }
+ }
+ }
+
+ &-item {
+ display: block;
+ padding: .75rem;
+ font-size: 1rem;
+ color: $nearly-white;
+ 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;
+
+ &:hover {
+ color: $nearly-white;
+ background-color: $light-green;
+ }
+
+ &.logout::before {
+ @include icon-font;
+ content: $fa-logout;
+ font-size: 1rem;
+ }
+
+ span {
+ display: inline;
+ }
+ }
+ }
+
+ .burger-icon {
+ display: none;
+
+ &::after {
+ @include icon-font;
+ content: $fa-bars;
+ }
+ }
+}
+
header {
@include box-sizing-box();
position: relative;
background-color: $light-green;
- padding: $base-padding 0 0 $base-padding;
+ // padding: $base-padding 0 0 $base-padding;
+ padding-top: $standard-size-and-spacing;
font-size: 10pt;
color: $nearly-white;
-
+
+ &.shifted {
+ padding-left: $logo-left-distance;
+ }
+
span.select {
display: inline-block;
cursor: pointer;
@@ -64,9 +339,12 @@
form {
position: relative;
display: block;
- padding-left: $logo-left-distance;
+ // padding-left: $logo-left-distance;
min-height: 2.7em;
- margin: 0px;
+
+ &#searchform {
+ margin: 0 $standard-size-and-spacing;
+ }
}
input {
@@ -92,7 +370,8 @@
top: 0;
right: 0;
margin-right: 0;
- width: math.div($standard-margin,2);
+ width: 20px;
+ // width: math.div($standard-margin,2);
background-color: $dark-green;
text-align: center;
height: 100%;
@@ -118,7 +397,6 @@
@include icon-font;
}
- // Icons for buttons
> a.tutorial::after {
content: $fa-tutorial;
}
diff --git a/dev/scss/header/hint.scss b/dev/scss/header/hint.scss
index 68222b7..df85e25 100644
--- a/dev/scss/header/hint.scss
+++ b/dev/scss/header/hint.scss
@@ -4,6 +4,13 @@
/**
* Rules for the Kalamar hint helper.
*/
+
+#hint {
+ &.shifted {
+ left: $logo-left-distance;
+ }
+}
+
ul.menu.hint {
display: inline-block;
white-space: normal;
diff --git a/dev/scss/header/searchbar.scss b/dev/scss/header/searchbar.scss
index b082050..48f8bc5 100644
--- a/dev/scss/header/searchbar.scss
+++ b/dev/scss/header/searchbar.scss
@@ -10,6 +10,7 @@
margin-bottom: 3px;
width: 100%;
margin: 0;
+ border-radius: 6px;
&::-webkit-search-cancel-button {
display: none;
@@ -28,13 +29,14 @@
position: relative;
width: 100%;
padding: 0;
- padding-right: $right-distance + $button-width;
+ // padding-right: $right-distance + $button-width;
margin-top: 7pt;
button[type=submit] {
position: absolute;
padding: 0;
- right: $right-distance;
+ // right: $right-distance;
+ right: 0;
&:not(.loading)::after {
content: $fa-search;
diff --git a/dev/scss/header/vc.scss b/dev/scss/header/vc.scss
index edd83e9..9057cad 100644
--- a/dev/scss/header/vc.scss
+++ b/dev/scss/header/vc.scss
@@ -14,6 +14,12 @@
.builder {
position: initial;
+
+ + .action {
+ .minimize::after {
+ color: $dark-grey !important;
+ }
+ }
}
.docGroup {
diff --git a/dev/scss/main/announcements.scss b/dev/scss/main/announcements.scss
new file mode 100644
index 0000000..5db0e27
--- /dev/null
+++ b/dev/scss/main/announcements.scss
@@ -0,0 +1,66 @@
+@charset "utf-8";
+@import "../util";
+
+section#announcements {
+ background-color: $ids-green-2;
+ mix-blend-mode: soft-light;
+ padding: 1em;
+ padding-right: 2em;
+ border-radius: $standard-border-radius;
+ 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;
+ text-align: left;
+ font-weight: bold;
+ float: none;
+ width: auto;
+ padding-bottom: .2em;
+ }
+
+ dd.maintenance > h4::after {
+ @include icon-font;
+ color: $ids-pink-1;
+ content: " " + $fa-warn;
+ }
+
+ dd {
+ // margin: 0 1ex 0 16ex;
+ margin-left: 1em;
+ padding: 0 0 0.5em 1em;
+ > p {
+ max-width: 80ex;
+ margin-block-start: 0ex;
+ }
+
+ > h4 {
+ margin-block-start: 0ex;
+ margin-block-end: 0.33ex;
+ }
+ }
+}
+
+@media all and (max-width: 42.5em) {
+ section#announcements {
+ dt {
+ // text-align: left;
+ // float: none;
+ // width: auto;
+ // padding-bottom: .2em;
+ }
+ dd {
+ // margin-left: 1em;
+ }
+ }
+}
diff --git a/dev/scss/main/intro.scss b/dev/scss/main/intro.scss
index e3b4d63..f667759 100644
--- a/dev/scss/main/intro.scss
+++ b/dev/scss/main/intro.scss
@@ -5,6 +5,12 @@
*/
div.intro {
+ &-container {
+ margin-top: 3rem;
+ display: flex;
+ gap: $standard-size-and-spacing;
+ }
+
// Visited links
a:visited {
color: $darkest-orange
@@ -20,6 +26,17 @@
}
}
-aside.active:not(.off) ~ main div.intro {
- margin-left: $logo-left-distance - $standard-margin + $base-padding;
-}
\ No newline at end of file
+@media all and (max-width: 42.5em) {
+ div.intro {
+ &-container {
+ margin-top: 1rem;
+ flex-direction: column;
+ gap: 1rem;
+ }
+ }
+}
+
+// aside.active:not(.off) ~ main div.intro {
+// margin-left: $logo-left-distance - $standard-margin + $base-padding;
+// }
+
diff --git a/dev/scss/main/introjs.scss b/dev/scss/main/introjs.scss
index 1e8ffe7..5cc4013 100644
--- a/dev/scss/main/introjs.scss
+++ b/dev/scss/main/introjs.scss
@@ -198,7 +198,9 @@
padding: 0;
font-weight: 700;
float: left;
- line-height: 32px; }
+ line-height: 32px;
+ top: 1rem;
+}
.introjs-tooltip-header {
padding-left: 20px;
diff --git a/dev/scss/main/logos.scss b/dev/scss/main/logos.scss
index 9b26013..eaa309d 100644
--- a/dev/scss/main/logos.scss
+++ b/dev/scss/main/logos.scss
@@ -9,17 +9,17 @@
content: "" !important;
}
- div.logoaddon {
- position:absolute;
- display: block;
- font-size: 45%;
- right: 5pt;
- bottom: 2.5pt;
- text-align:right;
- color: $nearly-white;
- padding: 3pt;
- text-shadow: 1pt 1pt 0 $light-green, -1pt -1pt 0 $light-green, -1pt 1pt 0 $light-green, 1pt -1pt 0 $light-green;
- }
+// div.logoaddon {
+// position:absolute;
+// display: block;
+// font-size: 45%;
+// right: 5pt;
+// bottom: 2.5pt;
+// text-align:right;
+// color: $nearly-white;
+// padding: 3pt;
+// text-shadow: 1pt 1pt 0 $light-green, -1pt -1pt 0 $light-green, -1pt 1pt 0 $light-green, 1pt -1pt 0 $light-green;
+// }
> * {
background: {
@@ -31,6 +31,26 @@
> span {
@include blind;
}
+
+ > div.logoaddon {
+ position:absolute;
+ display: block;
+ font-size: 10pt;
+ right: -1rem;
+ top: 1.7rem;
+ // bottom: 4pt;
+ // text-align:right;
+ color: $nearly-white;
+ // padding: 3pt;
+ text-shadow: 1pt 1pt 0 $light-green, -1pt -1pt 0 $light-green, -1pt 1pt 0 $light-green, 1pt -1pt 0 $light-green;
+
+ // Values from new logo:
+ // font-size: 45%;
+ // right: 5pt;
+ // bottom: 2.5pt;
+ // text-align: right;
+ // padding: 3pt;
+ }
}
}
@@ -44,9 +64,10 @@
a.logo > h1 {
position: absolute;
margin: 0;
- margin-left: 10pt;
+ // margin-left: 10pt;
+ margin-left: 3rem;
left: 0;
- top: 0;
+ top: 50%;
width: 7.8em;
height: 2.4em;
z-index: 105;
@@ -54,11 +75,15 @@
size: 78% !important;
image: url('#{$img-path}/korap-logo.svg');
}
+ transform: translateY(-50%);
+ -o-transform: translateY(-50%);
+ -moz-transform: translateY(-50%);
+ -webkit-transform: translateY(-50%);
}
-aside.active ~ header h1 {
- position: fixed;
-}
+// aside.active ~ header h1 {
+// position: fixed;
+// }
#overview {
diff --git a/dev/scss/main/main.scss b/dev/scss/main/main.scss
index 78bbad4..bb64ac0 100644
--- a/dev/scss/main/main.scss
+++ b/dev/scss/main/main.scss
@@ -1,38 +1,43 @@
@use 'sass:math';
-@import "highlight"; // JSON highlighting
-@import "kwic"; // Kwic view information
-@import "logos"; // Logo images
-@import "matchinfo"; // Match table
-@import "pagination"; // Pagination
-@import "query"; // View query
-@import "resultinfo"; // Information on results
-@import "tutorial"; // Embedded and non-embedded tutorial
-@import "koralquery"; // KoralQuery
-@import "alertify"; // Styling alerts
-@import "intro"; // Intro page
-@import "panel"; // Base panel system
-@import "introjs"; // Guided Tour
-@import "introjs-ids"; // Guided Tour: IDS specific
-@import "oauth"; // OAuth Management styles
-@import "news"; // View for optional news
-@import "plugin"; // Rules for embedded plugins
-@import "marketplace"; // Plugin Marketplace styles
+@import 'highlight'; // JSON highlighting
+@import 'kwic'; // Kwic view information
+@import 'logos'; // Logo images
+@import 'matchinfo'; // Match table
+@import 'pagination'; // Pagination
+@import 'query'; // View query
+@import 'resultinfo'; // Information on results
+@import 'tutorial'; // Embedded and non-embedded tutorial
+@import 'koralquery'; // KoralQuery
+@import 'alertify'; // Styling alerts
+@import 'intro'; // Intro page
+@import 'panel'; // Base panel system
+@import 'introjs'; // Guided Tour
+@import 'introjs-ids'; // Guided Tour: IDS specific
+@import 'oauth'; // OAuth Management styles
+@import 'announcements'; // Styling for announcements
+@import 'news'; // View for optional news
+@import 'plugin'; // Rules for embedded plugins
+@import 'marketplace'; // Plugin Marketplace styles
// @import "tagger"; // Tagger
-@import "../util";
-
+@import '../util';
main {
- padding-bottom: $footer-height + math.div($standard-margin,2);
+ padding: 0 $standard-size-and-spacing;
+ padding-bottom: $footer-height + math.div($standard-margin, 2);
- margin: {
- left: $standard-margin;
- right: math.div($standard-margin,2);
+ // margin: {
+ // left: $standard-margin;
+ // right: math.div($standard-margin,2);
+ // }
+
+ &.shifted {
+ padding-left: calc($standard-size-and-spacing + $logo-left-distance);
}
&.embedded {
margin: {
- left: 14px;
+ left: 14px;
right: 14px;
}
}
@@ -45,27 +50,27 @@
}
h2#page-top {
- margin-top: 0;
+ margin-top: 0;
padding-top: 1em;
}
- &.page {
- margin-left: $logo-left-distance + 15px;
- p,
- li,
- dd,
- dt {
- code {
- background-color: $ids-grey-2;
- color: $ids-grey-1;
- padding: 0 .5em;
- border-radius: $standard-border-radius;
- }
- }
- }
+ // &.page {
+ // margin-left: $logo-left-distance + 15px;
+ // p,
+ // li,
+ // dd,
+ // dt {
+ // code {
+ // background-color: $ids-grey-2;
+ // color: $ids-grey-1;
+ // padding: 0 .5em;
+ // border-radius: $standard-border-radius;
+ // }
+ // }
+ // }
p.hint {
- margin: 0 auto;
+ margin: 0 auto;
text-align: center;
}
}
diff --git a/dev/scss/main/news.scss b/dev/scss/main/news.scss
index 41b5b44..c1c0911 100644
--- a/dev/scss/main/news.scss
+++ b/dev/scss/main/news.scss
@@ -2,20 +2,22 @@
@import "../util";
section#news {
- background-color: $ids-green-2;
- -webkit-mix-blend-mode: normal; // Safari
- mix-blend-mode: soft-light;
- padding: 1em;
- padding-right: 2em;
- border-radius: $standard-border-radius;
- border-left: 5px solid $ids-green-1;
+ margin: 2rem 0;
+
+ 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 {
@@ -25,14 +27,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;
}
@@ -42,13 +45,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;
}
}
-}
\ No newline at end of file
+}
diff --git a/dev/scss/media.scss b/dev/scss/media.scss
index 88738a9..6ff91e7 100644
--- a/dev/scss/media.scss
+++ b/dev/scss/media.scss
@@ -21,16 +21,148 @@
}
header {
- padding-right: 8px;
+ padding-top: 3rem;
+ // padding-right: 8px;
+
+ &.shifted {
+ padding-left: 0;
+ }
}
header form {
+ margin: 1.5rem 1rem;
padding-left: 0;
- padding-top: 33px;
+ // padding-top: 33px;
+
+ &#searchform {
+ margin: 2.5rem 1rem 0 1rem;
+ }
+ }
+
+ .navbar {
+ *:not(:first-child) {
+ display: none;
+ }
+
+ &-group {
+ h3.nav-link {
+ height: 2rem;
+
+ a {
+ padding: .75rem !important;
+ }
+ }
+ }
+
+ .burger-icon {
+ position: relative;
+ display: block !important;
+ width: $standard-size-and-spacing;
+ height: $standard-size-and-spacing;
+ font-size: 1.8rem;
+ color: $nearly-white;
+
+ &::after {
+ position: absolute;
+ top: 2rem;
+ left: 2rem;
+ transform: translate(-50%, -50%);
+ -o-transform: translate(-50%, -50%);
+ -moz-transform: translate(-50%, -50%);
+ -webkit-transform: translate(-50%, -50%);
+ }
+ }
+
+ &.show .burger-icon {
+ position: absolute;
+ top: 0;
+ right: 0;
+ background-color: $middle-green;
+ }
+
+ &.show * {
+ display: block;
+ }
+
+ &-group {
+ margin-top: $standard-size-and-spacing;
+ width: 100%;
+ display: block;
+ position: absolute;
+ top: 0;
+ left: 0;
+ background-color: $middle-green;
+
+ fieldset.fieldset-login {
+ display: block !important;
+ margin-right: 0 !important;
+ padding: 1rem;
+
+ form.login {
+ align-items: normal !important;
+ flex-direction: column;
+ gap: 8px;
+
+ input[type=text],
+ input[type=password] {
+ @include input-field;
+ margin-right: 0 !important;
+ }
+
+ button.btn-login {
+ width: 100% !important;
+ align-self: center;
+ background-color: $dark-green !important;
+
+ &:hover {
+ background-color: $middle-green !important;
+ color: unset !important;
+ }
+ }
+ }
+
+ p {
+ padding: 1rem 0 0;
+
+ a {
+ display: inline;
+ }
+ }
+ }
+ }
+
+ @media (hover: none) and (pointer: coarse) {
+ .dropdown {
+ margin-right: 0 !important;
+
+ &-btn {
+ &.login {
+ visibility: hidden;
+ }
+ }
+
+ &-content {
+ display: block !important;
+ width: 100% !important;
+
+ form.login {
+ input[type=text],
+ input[type=password] {
+ width: 100%;
+ }
+ }
+
+ p {
+ a {
+ display: inline;
+ }
+ }
+ }
+ }
+ }
}
.vc {
-
font-size: 9pt;
.builder {
.doc {
@@ -58,13 +190,19 @@
}
z-index: 110;
position: absolute !important;
+ top: 50%;
+ transform: translateY(-50%);
+ -o-transform: translateY(-50%);;
+ -moz-transform: translateY(-50%);
+ -webkit-transform: translateY(-50%);
}
#searchbar {
padding-right: 30px;
margin-top: 0;
- input {
+ input#q-field {
font-size: 9pt;
+ border-radius: 6px 0 0 6px;
}
button[type=submit] {
right: 0;
@@ -80,8 +218,13 @@
}
main {
+ padding: 1rem;
margin-left: $standard-margin;
margin-right: $standard-margin;
+
+ &.shifted {
+ padding-left: 0;
+ }
}
header .button {
@@ -129,10 +272,17 @@
padding-right: 0;
.logo > * {
background: {
- size: 60%;
- position: 0 0;
+ size: 60%;
+ position: 0 0;
+ }
}
- }
+ }
+ }
+
+ .logo > * {
+ > div.logoaddon {
+ right: -1.2rem;
+ top: 1.4rem;
}
}
@@ -160,10 +310,10 @@
font-size: 9pt;
line-height: 1em;
}
- &.active ~ main div.intro,
- &.active ~ main.page {
- margin-left: $standard-margin !important;
- }
+ // &.active ~ main div.intro,
+ // &.active ~ main.page {
+ // margin-left: $standard-margin !important;
+ // }
&.active {
position: relative;
@@ -172,6 +322,7 @@
width: 100%;
top: 0;
border-width: 0;
+
fieldset input {
font-size: 9pt;
}
@@ -182,6 +333,10 @@
display: none;
}
}
+
+ .nav.nav-doc:first-child {
+ margin-top: $standard-size-and-spacing !important;
+ }
}
#tutorial {
@@ -203,9 +358,9 @@
}
}
- main.page {
- margin-right: 20px;
- }
+ // main.page {
+ // margin-right: 20px;
+ // }
footer {
padding-left: 0 !important;
@@ -220,6 +375,9 @@
}
}
}
+ padding-top: 2rem;
+ flex-direction: column;
+ height: unset;
}
}
diff --git a/dev/scss/sidebar/sidebar.scss b/dev/scss/sidebar/sidebar.scss
index da6541f..de7465c 100644
--- a/dev/scss/sidebar/sidebar.scss
+++ b/dev/scss/sidebar/sidebar.scss
@@ -1,26 +1,30 @@
@charset "utf-8";
-@use 'sass:math';
+@use "sass:math";
@import "../util";
aside {
background-color: $dark-green;
- color: $nearly-white;
- width: $logo-left-distance;
- position: fixed;
- display: block;
- transition: all .3s ease-in-out;
- outline: none;
- font-size: 10pt;
- z-index: 100; // Needs to be behind alerts
- top: 0;
- left: 0;
- height: 100%;
+ color: $nearly-white;
+ width: $logo-left-distance;
+ position: fixed;
+ display: block;
+ transition: all 0.3s ease-in-out;
+ outline: none;
+ font-size: 10pt;
+ z-index: 100; // Needs to be behind alerts
+ top: 0;
+ left: 0;
+ height: 100%;
padding-top: 65px;
> div {
overflow-y: auto;
overflow-x: visible;
max-height: 100%;
+
+ .fieldset-login {
+ display: none;
+ }
}
> * {
@@ -29,34 +33,35 @@
&::after {
@include icon-font;
- position: absolute;
- display: block;
- opacity: 0;
- cursor: pointer;
- right: 0;
- bottom: 0;
- content: $fa-login;
+ position: absolute;
+ display: block;
+ opacity: 0;
+ cursor: pointer;
+ right: 0;
+ bottom: 0;
+ // content: $fa-settings;
+ // content: $fa-login;
font-size: 16pt;
- width: 16pt;
- height: 17pt;
- padding: 6pt;
+ width: 16pt;
+ height: 17pt;
+ padding: 6pt;
background-color: $dark-green;
border-top-right-radius: $standard-border-radius;
- margin-right: -1 * math.div($standard-margin,2);
+ margin-right: -1 * math.div($standard-margin, 2);
}
&.settings::after {
- content: $fa-settings;
+ content: $fa-settings;
}
h2,
legend {
line-height: 2em;
- text-align: center;
- padding: 0;
- margin: 0;
+ text-align: center;
+ padding: 0;
+ margin: 0;
font: {
- size: 100%;
+ size: 100%;
weight: bold;
}
}
@@ -66,10 +71,10 @@
*/
ul.nav {
list-style-type: none;
- margin: 0;
- font-size: 10pt;
- text-indent: 0;
- padding: 0;
+ margin: 0;
+ font-size: 10pt;
+ text-indent: 0;
+ padding: 0;
li {
padding: 0;
@@ -116,7 +121,7 @@
margin: 0;
font: {
weight: bold;
- size: 100%;
+ size: 100%;
}
}
@@ -137,26 +142,31 @@
nav > ul > li > a {
font-weight: bold;
}
-
+
fieldset {
- position: relative;
+ position: relative;
border-width: 0;
legend {
display: none;
}
-
- input[type=text],
- input[type=password] {
+
+ input[type="text"],
+ input[type="password"] {
@include input-field;
width: 100%;
}
-
+
+ .login {
+ display: none;
+ }
+
+ // search form
> form > div {
- position: relative;
- width: 100%;
- margin-top: 4px;
- padding-right: $button-width
+ position: relative;
+ width: 100%;
+ margin-top: 4px;
+ padding-right: $button-width;
}
> p {
@@ -166,7 +176,7 @@
> p.announcement {
color: $nearly-white;
> time {
- display: block;
+ display: block;
font-size: 70%;
}
}
@@ -177,24 +187,24 @@
}
ul {
- display: block;
- font-size: 80%;
+ display: block;
+ font-size: 80%;
text-align: right;
- padding: 0;
+ padding: 0;
margin-top: 0;
> li {
display: inline;
&:first-child::after {
- content: ' | ';
+ content: " | ";
}
}
}
button {
position: absolute;
- top: 0;
- right: 0;
+ top: 0;
+ right: 0;
&::after {
content: $fa-login;
}
@@ -204,21 +214,25 @@
// Off aside
&.off,
&:not(:focus):not(.active) {
- margin-left: -1 * ($logo-left-distance - math.div($standard-margin,2));
+ margin-left: -1 * ($logo-left-distance - math.div($standard-margin, 2));
&::after {
opacity: 1;
}
-
+
> * {
opacity: 0;
transition: {
property: opacity;
- duration: .3s;
+ duration: 0.3s;
}
}
}
&.off::after {
- display:none;
+ display: none;
+ }
+
+ &.invisible {
+ display: none;
}
}