UI rework by Uyen (issues #137, #174, #188)
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/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/footer/footer.scss b/dev/scss/footer/footer.scss
index e2ec64e..f981cbc 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%;
@@ -94,6 +94,6 @@
}
aside.active ~ 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 10d1256..dcae2d2 100644
--- a/dev/scss/header/header.scss
+++ b/dev/scss/header/header.scss
@@ -15,10 +15,194 @@
@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: 4rem;
font-size: 10pt;
color: $nearly-white;
+ .navbar {
+ width: 100%;
+ height: 4rem;
+ background-color: $dark-green;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: end;
+ // overflow: hidden;
+ position: fixed;
+ 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: baseline;
+
+ h3.news {
+ height: 4rem;
+ font-size: 120%;
+ 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;
+
+ a {
+ color: $dark-orange;
+
+ &:hover {
+ color: $middle-orange;
+ }
+ }
+ }
+ }
+ }
+
+ .dropdown {
+ display: flex;
+ align-items: center;
+ margin-right: 4rem;
+ position: relative;
+
+ &:hover .dropdown-content {
+ display: block;
+ }
+
+ &:hover .dropdown-btn {
+ background-color: $middle-green;
+ }
+
+ &-btn {
+ height: 4rem;
+ // padding: 1rem;
+ padding: 1.5rem 1rem;
+ // font-size: 180% !important;
+ 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;
+
+ &.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: 4rem;
+ padding: 0;
+ background-color: $middle-green;
+ list-style: none;
+ position: absolute;
+ top: 0;
+ left: 0;
+ z-index: 999;
+ }
+
+ &-item {
+ display: block;
+ padding: .75rem;
+ font-size: 120%;
+ 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 {
+ background-color: $light-green;
+ }
+ }
+ }
+
+ .burger-icon {
+ display: none;
+
+ &::after {
+ @include icon-font;
+ content: $fa-bars;
+ }
+ }
+ }
+
span.select {
display: inline-block;
cursor: pointer;
@@ -63,9 +247,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 4rem;
+ }
}
input {
@@ -91,7 +278,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%;
@@ -117,7 +305,6 @@
@include icon-font;
}
- // Icons for buttons
> a.tutorial::after {
content: $fa-tutorial;
}
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/intro.scss b/dev/scss/main/intro.scss
index 8f83175..9c02452 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: 4rem;
+ }
+
// Visited links
a:visited {
color: $darkest-orange
@@ -20,6 +26,16 @@
}
}
-aside.active ~ 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 ~ 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 325196c..8f5d2c2 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: 4pt;
- text-align:right;
- color: $dark-orange;
- padding: 3pt;
- text-shadow: 1pt 1pt 0 $nearly-white, -1pt -1pt 0 $nearly-white, -1pt 1pt 0 $nearly-white, 1pt -1pt 0 $nearly-white;
- }
+ // div.logoaddon {
+ // position:absolute;
+ // display: block;
+ // font-size: 45%;
+ // right: 5pt;
+ // bottom: 4pt;
+ // text-align:right;
+ // color: $dark-orange;
+ // padding: 3pt;
+ // text-shadow: 1pt 1pt 0 $nearly-white, -1pt -1pt 0 $nearly-white, -1pt 1pt 0 $nearly-white, 1pt -1pt 0 $nearly-white;
+ // }
> * {
background: {
@@ -31,6 +31,19 @@
> span {
@include blind;
}
+
+ > div.logoaddon {
+ position:absolute;
+ display: block;
+ font-size: 10pt;
+ right: -1rem;
+ top: 1.7rem;
+ // bottom: 4pt;
+ // text-align:right;
+ color: $dark-orange;
+ // padding: 3pt;
+ text-shadow: 1pt 1pt 0 $nearly-white, -1pt -1pt 0 $nearly-white, -1pt 1pt 0 $nearly-white, 1pt -1pt 0 $nearly-white;
+ }
}
}
@@ -40,9 +53,10 @@
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;
@@ -50,11 +64,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 e8c062d..910cd0a 100644
--- a/dev/scss/main/main.scss
+++ b/dev/scss/main/main.scss
@@ -23,12 +23,13 @@
main {
+ padding: 0 4rem;
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);
+ // }
&.embedded {
margin: {
diff --git a/dev/scss/main/news.scss b/dev/scss/main/news.scss
index 41b5b44..32b97b0 100644
--- a/dev/scss/main/news.scss
+++ b/dev/scss/main/news.scss
@@ -3,19 +3,30 @@
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;
+ 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 {
@@ -25,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;
}
@@ -42,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;
}
}
-}
\ No newline at end of file
+}
diff --git a/dev/scss/media.scss b/dev/scss/media.scss
index 88738a9..4c089a0 100644
--- a/dev/scss/media.scss
+++ b/dev/scss/media.scss
@@ -21,16 +21,122 @@
}
header {
- padding-right: 8px;
+ padding-top: 2rem;
+ // padding-right: 8px;
}
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.news {
+ a {
+ padding: .75rem !important;
+ }
+ }
+ }
+
+ .burger-icon {
+ position: relative;
+ display: block !important;
+ width: 4rem;
+ height: 4rem;
+ 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: 4rem;
+ width: 100%;
+ display: block;
+ position: fixed;
+ top: 0;
+ left: 0;
+ background-color: $middle-green;
+
+ fieldset.fieldset-login {
+ display: block !important;
+ margin-right: 0 !important;
+
+ 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;
+ background-color: $dark-green !important;
+
+ &:hover {
+ background-color: $middle-green !important;
+ color: unset !important;
+ }
+ }
+ }
+
+ p {
+ padding: 0 1rem 1rem;
+
+ a {
+ display: inline;
+ }
+ }
+ }
+ }
+
+ @media (hover: none) and (pointer: coarse) {
+ .dropdown {
+ margin-right: 0 !important;
+
+ &-content {
+ display: block !important;
+ width: 100% !important;
+ }
+ }
+ }
}
.vc {
-
font-size: 9pt;
.builder {
.doc {
@@ -58,13 +164,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,6 +192,7 @@
}
main {
+ padding: 1rem;
margin-left: $standard-margin;
margin-right: $standard-margin;
}
@@ -129,10 +242,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;
}
}
@@ -172,6 +292,7 @@
width: 100%;
top: 0;
border-width: 0;
+
fieldset input {
font-size: 9pt;
}
@@ -220,6 +341,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..39680a8 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,21 @@
// 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;
}
}