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/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 {