Merge pull request #1093 from ecds/ui-bug-triage

A series of UI improvements, including bug triage and aesthetic tweaks
ecds · Oct 14, 2024 · ba684b1 · ba684b1
2 parents efdbd8a + 6e6676d
commit ba684b1
Show file tree

Hide file tree

Showing 14 changed files with 220 additions and 39 deletions.
diff --git a/apps/static/css/readux2/main.scss b/apps/static/css/readux2/main.scss
@@ -1,4 +1,21 @@
 /* base.html */
+html, body {
+    height: 100%;
+    margin: 0;
+    display: flex;
+    flex-direction: column;
+}
+
+#v-readux {
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+}
+
+main {
+    flex-grow: 1;
+}
+
 .landing {
     margin: 0;
     padding: 0;
@@ -596,4 +613,19 @@ iframe {
 .brand-tagline {
     font-size: small; 
     color: white; 
+}
+
+
+.description-button {
+    transition: ease 0.1s;
+    &:hover {
+        background-color: darken(#E60000, 10%);
+    }
+    &:active {
+        background-color: darken(#E60000, 25%);
+    }
+}
+
+.justify-content-normal {
+    justify-content: normal !important;
 }
diff --git a/apps/static/css/readux2/search.scss b/apps/static/css/readux2/search.scss
@@ -127,10 +127,6 @@ form#search-form input[type="search"][name="q"] {
   width: 100%;
 }
 
-.uk-button-default {
-  font-size: 1.25rem;
-}
-
 #search-grid {
   gap: 1.5rem;
 }
@@ -249,4 +245,20 @@ ol#search-results dl {
 
 .selectize-control.plugin-clear_button .clear {
   height: 85%;
+}
+
+.search-button {
+  background-color: #E60000; 
+  color: white; 
+  padding: 0 9px; 
+  border:none; 
+  height: 40px;
+  font-size: 1.25rem;
+  transition: ease 0.1s;
+  &:hover {
+      background-color: darken(#E60000, 10%);
+  }
+  &:active {
+      background-color: darken(#E60000, 25%);
+  }
 }
diff --git a/apps/templates/account/password_reset.html b/apps/templates/account/password_reset.html
@@ -1,26 +1,68 @@
 {% extends "account/base.html" %}
-
+{% load sass_tags %}
 {% load i18n %}
 {% load account %}
 {% load crispy_forms_tags %}
 
 {% block head_title %}{% trans "Password Reset" %}{% endblock %}
 
+{% block extra_javascript %}
+    <script>
+      document.addEventListener('DOMContentLoaded', function () {
+        // Get the reset button
+        const resetBtn = document.getElementById('sign-up-form-reset-btn');
+
+        // Add event listener to the reset button
+        resetBtn.addEventListener('click', function () {
+          // Get the form by its ID
+          const form = document.getElementById('password_reset_form');
+          // Reset the form
+          form.reset();
+        });
+      });
+    </script>
+{% endblock %}
+
 {% block inner %}
+    <link type="text/css" href="{% sass_src 'css/readux2/menu-inverse.scss' %}" rel="stylesheet">
+    {% include '_home/_nav.html' %}
+
+    <div class="uk-container uk-margin-bottom">
+    <!-- Breadcrumb -->
+    <ul class="breadcrumb uk-margin-small-top uk-margin-bottom">
+        <li><a href="/">Home</a></li>
+        <li>Password Reset</li>
+    </ul>
+    <!-- End -->
+
+    <h1 class="page-title uk-margin-top uk-margin-remove-bottom">{% trans "Password Reset" %}</h1>
 
-    <h1>{% trans "Password Reset" %}</h1>
     {% if user.is_authenticated %}
     {% include "account/snippets/already_logged_in.html" %}
     {% endif %}
 
     <p>{% trans "Forgotten your password? Enter your e-mail address below, and we'll send you an e-mail allowing you to reset it." %}</p>
 
-    <form method="POST" action="{% url 'account_reset_password' %}" class="password_reset">
+    <form class="uk-form-stacked signup" id="password_reset_form" method="post" action="{% url 'account_reset_password' %}">
         {% csrf_token %}
-        {{ form|crispy }}
-        <input class="btn btn-primary" type="submit" value="{% trans 'Reset My Password' %}" />
-    </form>
+        <!-- Email Field -->
+        <div class="uk-margin uk-input-icon uk-width-1-1 uk-width-1-2@m">
+          <span uk-icon="icon: mail" class="uk-icon"></span>
+          <input type="email" placeholder="{% trans 'Email' %}" class="uk-input" name="email" required>
+        </div>
+
+        <!-- Action Buttons -->
+        <div class="action-buttons justify-content-normal uk-margin-bottom uk-width-1-1 uk-width-1-2@m">
+          <button type="button" id="sign-up-form-reset-btn" class="uk-button uk-button-default">{% trans "Reset Form" %}</button>
+          <button type="submit" class="uk-button sign-in-btn">{% trans "Reset Password" %} </button>
+        </div>
+
+        <!-- Links -->
+        <div class="uk-flex uk-flex-between uk-width-1-1">
+            <p>{% blocktrans %}Please <a href="#" class="uk-link text-anchor-blue">contact us</a> if you have any trouble resetting your password.{% endblocktrans %}</p>
+        </div>
+      </form>
 
-    <p>{% blocktrans %}Please contact us if you have any trouble resetting your password.{% endblocktrans %}</p>
+    </div>
 {% endblock %}
 
diff --git a/apps/templates/account/password_reset_done.html b/apps/templates/account/password_reset_done.html
@@ -1,17 +1,34 @@
 {% extends "account/base.html" %}
+{% load sass_tags %}
 
 {% load i18n %}
 {% load account %}
 
 {% block head_title %}{% trans "Password Reset" %}{% endblock %}
 
 {% block inner %}
-    <h1>{% trans "Password Reset" %}</h1>
+
+<link type="text/css" href="{% sass_src 'css/readux2/menu-inverse.scss' %}" rel="stylesheet">
+{% include '_home/_nav.html' %}
+
+<div class="uk-container uk-margin-bottom">
+
+    <!-- Breadcrumb -->
+    <ul class="breadcrumb uk-margin-small-top uk-margin-bottom">
+        <li><a href="/">Home</a></li>
+        <li>Password Reset</li>
+    </ul>
+    <!-- End -->
+
+    <h1 class="page-title uk-margin-top uk-margin-remove-bottom">{% trans "Password Reset" %}</h1>
 
     {% if user.is_authenticated %}
     {% include "account/snippets/already_logged_in.html" %}
     {% endif %}
 
-    <p>{% blocktrans %}We have sent you an e-mail. Please contact us if you do not receive it within a few minutes.{% endblocktrans %}</p>
+    <p>{% blocktrans %}We have sent you an e-mail. Please <a href="#" class="uk-link text-anchor-blue">contact us</a> if you do not receive it within a few minutes.{% endblocktrans %}</p>
+</div>
+
+</div>
 {% endblock %}
 
diff --git a/apps/templates/account/password_set.html b/apps/templates/account/password_set.html
@@ -1,17 +1,32 @@
 {% extends "account/base.html" %}
+{% load sass_tags %}
 
 {% load i18n %}
 {% load crispy_forms_tags %}
 
 {% block head_title %}{% trans "Set Password" %}{% endblock %}
 
 {% block inner %}
-    <h1>{% trans "Set Password" %}</h1>
+<link type="text/css" href="{% sass_src 'css/readux2/menu-inverse.scss' %}" rel="stylesheet">
+{% include '_home/_nav.html' %}
+
+<div class="uk-container uk-margin-bottom">
+
+    <!-- Breadcrumb -->
+    <ul class="breadcrumb uk-margin-small-top uk-margin-bottom">
+        <li><a href="/">Home</a></li>
+        <li>Set Password</li>
+    </ul>
+    <!-- End -->
+
+    <h1 class="page-title uk-margin-top uk-margin-remove-bottom">{% trans "Set Password" %}</h1>
 
     <form method="POST" action="{% url 'account_set_password' %}" class="password_set">
         {% csrf_token %}
         {{ form|crispy }}
         <input type="submit" name="action" value="{% trans 'Set Password' %}"/>
     </form>
+
+</div>
 {% endblock %}
 
diff --git a/apps/templates/account/signup.html b/apps/templates/account/signup.html
@@ -1,23 +1,93 @@
 {% extends "account/base.html" %}
-
+{% load sass_tags %}
 {% load i18n %}
 {% load crispy_forms_tags %}
 
-{% block head_title %}{% trans "Signup" %}{% endblock %}
+{% block head_title %}{% trans "Readux - Sign up" %}{% endblock %}
+
+{% block extra_javascript %}
+    <script
+        src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.15.2/js/selectize.min.js"
+        integrity="sha512-IOebNkvA/HZjMM7MxL0NYeLYEalloZ8ckak+NDtOViP7oiYzG5vn6WVXyrJDiJPhl4yRdmNAG49iuLmhkUdVsQ=="
+        crossorigin="anonymous"
+        referrerpolicy="no-referrer"
+    ></script>
+    <script>
+      document.addEventListener('DOMContentLoaded', function () {
+        // Get the reset button
+        const resetBtn = document.getElementById('sign-up-form-reset-btn');
+
+        // Add event listener to the reset button
+        resetBtn.addEventListener('click', function () {
+          // Get the form by its ID
+          const form = document.getElementById('signup_form');
+          // Reset the form
+          form.reset();
+        });
+      });
+    </script>
+{% endblock %}
 
 {% block inner %}
-<h1>{% trans "Sign Up" %}</h1>
+<link type="text/css" href="{% sass_src 'css/readux2/menu-inverse.scss' %}" rel="stylesheet">
+{% include '_home/_nav.html' %}
 
-<p>{% blocktrans %}Already have an account? Then please <a href="{{ login_url }}">sign in</a>.{% endblocktrans %}</p>
+<div class="uk-container uk-margin-bottom">
 
-<form class="signup" id="signup_form" method="post" action="{% url 'account_signup' %}">
-  {% csrf_token %}
-  {{ form|crispy }}
-  {% if redirect_field_value %}
-  <input type="hidden" name="{{ redirect_field_name }}" value="{{ redirect_field_value }}" />
-  {% endif %}
-  <button class="btn btn-primary" type="submit">{% trans "Sign Up" %} &raquo;</button>
-</form>
+  <!-- Breadcrumb -->
+  <ul class="breadcrumb uk-margin-small-top uk-margin-bottom">
+    <li><a href="/">Home</a></li>
+    <li>Sign up</li>
+  </ul>
+  <!-- End -->
+  <h1 class="page-title uk-margin-top uk-margin-remove-bottom">{% trans "Sign Up" %}</h1>
 
-{% endblock %}
+  <p>{% blocktrans %}Already have an account? Then please <a href="#" uk-toggle="target: #login-modal" class="uk-link text-anchor-blue">sign in</a>.{% endblocktrans %}</p>
+
+  <form class="uk-form-stacked signup" id="signup_form" method="post" action="{% url 'account_signup' %}">
+    {% csrf_token %}
+
+    <!-- Username Field -->
+    <div class="uk-margin uk-input-icon uk-width-1-1 uk-width-1-2@m">
+      <span uk-icon="icon: user" class="uk-icon"></span>
+      <input type="text" placeholder="{% trans 'Username' %}" class="uk-input" name="username" required>
+    </div>
+
+    <!-- Email Field -->
+    <div class="uk-margin uk-input-icon uk-width-1-1 uk-width-1-2@m">
+      <span uk-icon="icon: mail" class="uk-icon"></span>
+      <input type="email" placeholder="{% trans 'Email' %}" class="uk-input" name="email" required>
+    </div>
+
+    <!-- Password Field -->
+    <div class="uk-margin uk-input-icon uk-width-1-1 uk-width-1-2@m">
+      <span uk-icon="icon: lock" class="uk-icon"></span>
+      <input type="password" placeholder="{% trans 'Password' %}" class="uk-input" name="password" required>
+    </div>
+
+    <!-- Password Confirmation Field -->
+    <div class="uk-margin uk-input-icon uk-width-1-1 uk-width-1-2@m">
+      <span uk-icon="icon: lock" class="uk-icon"></span>
+      <input type="password" placeholder="{% trans 'Confirm Password' %}" class="uk-input" name="password_confirm" required>
+    </div>
+
+    {% if redirect_field_value %}
+    <input type="hidden" name="{{ redirect_field_name }}" value="{{ redirect_field_value }}" />
+    {% endif %}
+
+    <!-- Action Buttons -->
+    <div class="action-buttons justify-content-normal uk-margin-bottom uk-width-1-1 uk-width-1-2@m">
+      <button type="button" id="sign-up-form-reset-btn" class="uk-button uk-button-default">{% trans "Reset Form" %}</button>
+      <button type="submit" class="uk-button sign-in-btn">{% trans "Sign Up" %} </button>
+    </div>
+
+    <!-- Links -->
+    <div class="uk-flex uk-flex-between uk-width-1-1">
+      <a href="{% url 'account_reset_password' %}" class="uk-link text-anchor-blue">{% trans "Forgot Password?" %}</a>
+    </div>
+  </form>
+
+
+</div>
 
+{% endblock %}
diff --git a/apps/templates/base.html b/apps/templates/base.html
@@ -95,7 +95,7 @@
     <a class="sr-only" href="#main">Jump to main content</a>
 
     {# Primary container; host for Vue application #}
-    <div class="uk-container" id="v-readux">
+    <div id="v-readux">
       {% comment %}
         TODO: Remove existing nav and replace with the following partial.
         It seems it may be added elsewhere; vue? needs investigation.
@@ -124,6 +124,7 @@
         {% block viewer %}{% endblock viewer %}
       </main>
 
+      {% include '_home/_footer.html' %}
     </div>
 
     <!-- Matomo Image Tracker-->

diff --git a/apps/templates/cms/collections_page.html b/apps/templates/cms/collections_page.html
@@ -67,8 +67,6 @@ <h2>{{ collection.label|default:"[no title]"|truncatechars:200 }}</h2>
 
 </div>
 
-{% include '_home/_footer.html' %}
-
 {% include_block page.body %}
 <script>
   // JavaScript to make list view table rows clickable

diff --git a/apps/templates/cms/content_page.html b/apps/templates/cms/content_page.html
@@ -77,8 +77,6 @@ <h1 class="page-title uk-margin-top uk-margin-remove-bottom">{{ page.page_title|
 <p class="lead">{{page.tagline}}</p>
 {% endif %}
 
-{% include '_home/_footer.html' %}
-
 <script>
     document.addEventListener('DOMContentLoaded', function () {
         const navLinks = document.querySelectorAll('.navigation a');

diff --git a/apps/templates/cms/home_page.html b/apps/templates/cms/home_page.html
@@ -19,6 +19,8 @@
       {% include '_home/_hero.html' %}
       {% if page.featured_story_title and page.featured_story_url %}
         {% include '_home/_featured_story.html' %}
+      {% else %}
+        <div class="uk-section uk-section-default uk-padding-remove-top"></div> <!-- Filler Div -->
       {% endif %}
       {% if page.featured_volumes.all.count != 0 %}
         {% include '_home/_featured_volumes.html' %}

diff --git a/apps/templates/cms/volumes_page.html b/apps/templates/cms/volumes_page.html
@@ -73,8 +73,6 @@ <h1 class="page-title uk-margin-top uk-margin-remove-bottom">{{ page.page_title|
   {% endif %}
 </div>
 
-{% include '_home/_footer.html' %}
-
 {% endblock content %}
 
 {% block extra_javascript %}

diff --git a/apps/templates/collection.html b/apps/templates/collection.html
@@ -68,6 +68,5 @@ <h2 style="color: white; font-weight: bold;">{{ collection.label }}</h2>
   </div>
 
 </div>
-{% include '_home/_footer.html' %}
 
 {% endblock content %}
diff --git a/apps/templates/pages/home.html b/apps/templates/pages/home.html
@@ -9,5 +9,4 @@
 {% include '_home/_featured_volumes.html' %}
 {% include '_home/_video.html' %}
 {% include '_home/_highlights.html' %}
-{% include '_home/_footer.html' %}
 {% endif %}
-Original file line number
+Diff line change
@@ Expand Up @@
       </div>
     </div>
-    {% include '_home/_footer.html' %}
     {% endblock content %}