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/lib/Kalamar.pm b/lib/Kalamar.pm
index 2afe546..9fa02a0 100644
--- a/lib/Kalamar.pm
+++ b/lib/Kalamar.pm
@@ -8,7 +8,7 @@
 use List::Util qw!none uniq!;
 
 # Minor version - may be patched from package.json
-our $VERSION = '0.55';
+our $VERSION = '0.57';
 
 # Supported version of Backend API
 our $API_VERSION = '1.0';
diff --git a/lib/Kalamar/Plugin/Auth/templates/partial/auth/login.html.ep b/lib/Kalamar/Plugin/Auth/templates/partial/auth/login.html.ep
index 9d6d535..34692c9 100644
--- a/lib/Kalamar/Plugin/Auth/templates/partial/auth/login.html.ep
+++ b/lib/Kalamar/Plugin/Auth/templates/partial/auth/login.html.ep
@@ -6,9 +6,9 @@
 %   } elsif (flash('handle') && !param('handle')) {
 %     param(handle_or_email => flash('handle'));
 %   };
-    <fieldset>
+    <fieldset class="fieldset-login">
     %= form_for 'login', 'accept-charset' => 'utf-8', class => 'login', begin
-      <legend><span><%= loc 'login' %></span></legend>
+      <!-- <legend><span><%= loc 'login' %></span></legend> -->
       %= csrf_field
       %= text_field 'handle_or_email', placeholder => loc('userormail')
       %= hidden_field fwd => $c->url_with
@@ -19,10 +19,10 @@
         %= hidden_field 'scope' => stash('scope')
         %= hidden_field 'redirect_uri' => stash('close_redirect_uri')
       % };
-      <div>
+      <!-- <div> -->
         %= password_field 'pwd', placeholder => loc('pwd')
-        <button type="submit"><span><%= loc 'go' %></span></button>
-      </div>
+        <button type="submit" class="btn-login"><span><%= loc 'go' %></span></button>
+      <!-- </div> -->
     % end
 
     %= content_block 'loginInfo', separator => '<hr />'
diff --git a/lib/Kalamar/Plugin/Auth/templates/partial/auth/logout.html.ep b/lib/Kalamar/Plugin/Auth/templates/partial/auth/logout.html.ep
index 5464664..a10c746 100644
--- a/lib/Kalamar/Plugin/Auth/templates/partial/auth/logout.html.ep
+++ b/lib/Kalamar/Plugin/Auth/templates/partial/auth/logout.html.ep
@@ -1,6 +1,27 @@
 % if ($c->auth->token) {
    %# TODO: CSRF protection
-   <a href="<%= url_for 'logout' %>"
-      class="logout"
-      title="<%= loc 'logout' %>: <%= user_handle %>"><span><%= loc 'logout' %></span></a>
+   <h3 class="news"><%= link_to loc('news') => 'doc/news' %></h3>
+   <div class="dropdown">
+      <div class="dropdown-btn profile">
+         <h3 class="user-name">
+            <%= user_handle %>
+         </h3>
+      </div>
+      <ul class="dropdown-content">
+         <li>
+            <%= link_to loc('settings') => 'settings', class => 'dropdown-item' %>
+         </li>
+         <li>
+            <a href="<%= url_for 'logout' %>"
+            class="dropdown-item logout"
+            title="<%= loc 'logout' %>: <%= user_handle %>">
+               <span><%= loc 'logout' %></span>
+            </a>
+         </li>
+      </ul>
+      <!-- <a href="<%= url_for 'logout' %>"
+         class="navbar-item logout"
+         title="<%= loc 'logout' %>: <%= user_handle %>"><span><%= loc 'logout' %></span>
+      </a> -->
+   </div>
 % };
diff --git a/lib/Kalamar/Plugin/KalamarUser.pm b/lib/Kalamar/Plugin/KalamarUser.pm
index 3963fec..0b3fee8 100644
--- a/lib/Kalamar/Plugin/KalamarUser.pm
+++ b/lib/Kalamar/Plugin/KalamarUser.pm
@@ -54,7 +54,7 @@
         $c->stash(user => $user);
         return $user;
       };
-
+      
       return 'not_logged_in';
     }
   );