worked on changes for issues #137, #174, #188, added an indicator for…

… user login, and some minor design changes Change-Id: I3113cea6130317db6938579552a879e439e47562
KorAP · Mar 25, 2024 · 162716a · 162716a
2 parents 3c5df16 + 8dbf9c6
commit 162716a
Show file tree

Hide file tree

Showing 24 changed files with 599 additions and 62 deletions.
diff --git a/.gitignore b/.gitignore
@@ -17,20 +17,29 @@
 /.sass-cache
 /dev/css
 /dev/js/spec/src
+<<<<<<< HEAD
 /dev/js/src/custom
 /templates/announcement.html.ep*
 /templates/custom
 /lib/Kalamar/Plugin/Announcements.pm
 /log
 /blib
 /super_client_info
+=======
+/lib/Kalamar/Plugin/Announcements.pm
+/log
+/blib
+>>>>>>> 8dbf9c626c0ec10d49c8ea535f6e1a8806efbbeb
 /script*
 /MYMETA*
 /Makefile
 /pm_to_blib
 /t/kalamar_user_client.t
 \#*
+<<<<<<< HEAD
 adminToken
+=======
+>>>>>>> 8dbf9c626c0ec10d49c8ea535f6e1a8806efbbeb
 *.tar.gz
 *~
 *.sqlite
@@ -42,9 +51,17 @@ adminToken
 /t/kalamar_user_client.t
 !.gitignore
 !.github
+<<<<<<< HEAD
 !.gitlab-ci.yml
+=======
+>>>>>>> 8dbf9c626c0ec10d49c8ea535f6e1a8806efbbeb
 !.dockerignore
 /npm-debug.log
 /package-lock.json
 /kalamar.code-workspace
-slim.report.json
+<<<<<<< HEAD
+slim.report.json
+=======
+
+!/kalamar.ids-mannheim.conf
+>>>>>>> 8dbf9c626c0ec10d49c8ea535f6e1a8806efbbeb
diff --git a/dev/scss/base/base.scss b/dev/scss/base/base.scss
@@ -34,16 +34,17 @@ g > text {
   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 {

diff --git a/dev/scss/base/buttongroup.scss b/dev/scss/base/buttongroup.scss
@@ -110,6 +110,7 @@
 
       &.minimize::after {
 	      content: $fa-minimize;
+        color: $dark-grey;
       }
 
       &.plugin::after {

diff --git 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
@@ -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%;
@@ -80,6 +80,6 @@ footer {
 }
 
 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
@@ -15,10 +15,176 @@ 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:      4rem;
   font-size:        10pt;
   color:            $nearly-white;
 
+  .navbar {
+    width: 100%;
+    height: 3rem;
+    background-color: $dark-green;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: end;
+    // overflow: hidden;
+    position: fixed;
+    top: 0;
+    z-index: 999;
+
+    &-group {
+
+      & fieldset.fieldset-login {
+        display: inline;
+        margin-right: 0;
+        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: 2rem;
+          }
+
+          & button.btn-login {
+            width: 3rem;
+            height: 3rem;
+            background-color: $dark-green;
+            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;
+            }
+          }
+          & button.btn-login:hover {
+            background-color: $middle-green;
+          }
+        }
+      }
+    }
+
+    .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: 3rem;
+        padding: .6rem .9rem;
+        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;
+        }
+
+        h3.user-name {
+          padding-right: 2px;
+          font-size: 85%;
+          display: inline;
+        }
+      }
+
+      &-content {
+        display: none;
+        width: 100%;
+        margin-top: 3rem;
+        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%;
+        // font-weight: bold;
+        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;
+        }
+      }
+    }
+
+    // &-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;
+
+    //   &: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;
+    //     }
+    //   }
+    // }
+  }
+
   span.select {
     display:     inline-block;
     cursor:      pointer;
@@ -63,9 +229,9 @@ header {
   form {
     position:     relative;
     display:      block;
-    padding-left: $logo-left-distance;
+    // padding-left: $logo-left-distance;
     min-height:   2.7em;
-    margin:       0px;
+    margin:       0 4rem;
   }
 
   input {
@@ -91,7 +257,8 @@ header {
       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 +284,6 @@ header {
       @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
@@ -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/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,6 @@ div.intro {
   }
 }
 
-aside.active ~ main div.intro {
-  margin-left: $logo-left-distance - $standard-margin + $base-padding;
-}
+// aside.active ~ main div.intro {
+//   margin-left: $logo-left-distance - $standard-margin + $base-padding;
+// }
diff --git a/dev/scss/main/logos.scss b/dev/scss/main/logos.scss
@@ -40,7 +40,8 @@
 h1 {
   position:    absolute;
   margin:      0;
-  margin-left: 10pt;
+  // margin-left: 10pt;
+  margin-left: 3rem;
   left:        0;
   top:         0;
   width:       7.8em;

diff --git 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: {