Merge branch 'aleeexgreeen-midnight_blue-login'

PublicaMundi · Dec 19, 2024 · 9998b46 · 9998b46
2 parents 5d90b19 + 09bc130
commit 9998b46
Show file tree

Hide file tree

Showing 20 changed files with 345 additions and 196 deletions.
diff --git a/ckan/public-midnight-blue/base/css/main-rtl.css b/ckan/public-midnight-blue/base/css/main-rtl.css
@@ -11851,6 +11851,11 @@ h6, .h6, h5, .h5, h4, .h4, h3, .h3, h2, .h2, h1, .h1 {
   border-color: #d0d5dd;
 }
 
+.alert {
+  border: unset;
+  border-left: solid;
+}
+
 .tag {
   display: inline-block;
   margin-bottom: 4px;
@@ -12588,6 +12593,16 @@ form .control-medium .info-block.info-inline {
   margin-left: 5px;
 }
 
+.form-group .controls .icon {
+  padding: 14px;
+  position: absolute;
+}
+
+.form-group .controls .icon + .form-control {
+  width: 100%;
+  padding-left: 2.5rem;
+}
+
 .form-narrow label {
   margin-bottom: 0;
 }
@@ -12736,6 +12751,7 @@ select[data-module=autocomplete] {
 
 .alert-danger a {
   color: #b55457;
+  text-decoration: underline;
 }
 
 .form-group.has-error input,
@@ -14815,6 +14831,51 @@ td.diff_header {
   align-items: center;
 }
 
+.login-form {
+  display: inline-grid;
+}
+.login-form .form-actions {
+  align-items: center;
+  padding: 1rem 0.5rem 1rem 0;
+}
+.login-form .form-actions .btn:first-child {
+  margin-left: 0;
+}
+@media (max-width: 991.98px) {
+  .login-form .form-actions {
+    flex-direction: row;
+    justify-content: space-between;
+  }
+  .login-form .form-actions .btn {
+    flex-basis: auto;
+  }
+}
+
+.login-main {
+  padding: 20px;
+}
+@media (min-width: 576px) {
+  .login-main {
+    background-color: #f2f4f7;
+  }
+  .login-main .login-wrapper {
+    min-height: 300px;
+    background-color: #fff;
+    border-radius: 24px;
+    padding: 1.5rem;
+  }
+  .login-main .login-container {
+    display: flex;
+    flex-direction: column;
+  }
+}
+@media (max-width: 767.98px) {
+  .login-main .btn-light, .login-main .btn-default {
+    width: 100%;
+    display: block !important;
+  }
+}
+
 @font-face {
   font-family: "Noto Sans";
   src: url("../../../base/fonts/NotoSans-VariableFont_wdth,wght.ttf") format("truetype");

diff --git a/ckan/public-midnight-blue/base/css/main.css b/ckan/public-midnight-blue/base/css/main.css
@@ -11851,6 +11851,11 @@ h6, .h6, h5, .h5, h4, .h4, h3, .h3, h2, .h2, h1, .h1 {
   border-color: #d0d5dd;
 }
 
+.alert {
+  border: unset;
+  border-left: solid;
+}
+
 .tag {
   display: inline-block;
   margin-bottom: 4px;
@@ -12588,6 +12593,16 @@ form .control-medium .info-block.info-inline {
   margin-left: 5px;
 }
 
+.form-group .controls .icon {
+  padding: 14px;
+  position: absolute;
+}
+
+.form-group .controls .icon + .form-control {
+  width: 100%;
+  padding-left: 2.5rem;
+}
+
 .form-narrow label {
   margin-bottom: 0;
 }
@@ -12736,6 +12751,7 @@ select[data-module=autocomplete] {
 
 .alert-danger a {
   color: #b55457;
+  text-decoration: underline;
 }
 
 .form-group.has-error input,
@@ -14815,6 +14831,51 @@ td.diff_header {
   align-items: center;
 }
 
+.login-form {
+  display: inline-grid;
+}
+.login-form .form-actions {
+  align-items: center;
+  padding: 1rem 0.5rem 1rem 0;
+}
+.login-form .form-actions .btn:first-child {
+  margin-left: 0;
+}
+@media (max-width: 991.98px) {
+  .login-form .form-actions {
+    flex-direction: row;
+    justify-content: space-between;
+  }
+  .login-form .form-actions .btn {
+    flex-basis: auto;
+  }
+}
+
+.login-main {
+  padding: 20px;
+}
+@media (min-width: 576px) {
+  .login-main {
+    background-color: #f2f4f7;
+  }
+  .login-main .login-wrapper {
+    min-height: 300px;
+    background-color: #fff;
+    border-radius: 24px;
+    padding: 1.5rem;
+  }
+  .login-main .login-container {
+    display: flex;
+    flex-direction: column;
+  }
+}
+@media (max-width: 767.98px) {
+  .login-main .btn-light, .login-main .btn-default {
+    width: 100%;
+    display: block !important;
+  }
+}
+
 @font-face {
   font-family: "Noto Sans";
   src: url("../../../base/fonts/NotoSans-VariableFont_wdth,wght.ttf") format("truetype");

diff --git a/ckan/public-midnight-blue/base/images/ckan-logo-boat.png b/ckan/public-midnight-blue/base/images/ckan-logo-boat.png
diff --git a/ckan/public-midnight-blue/base/scss/_ckan.scss b/ckan/public-midnight-blue/base/scss/_ckan.scss
@@ -23,4 +23,5 @@
 @import "input-groups.scss";
 @import "resource-icons.scss";
 @import "buttons.scss";
+@import "login.scss";
 @import "fonts.scss";
diff --git a/ckan/public-midnight-blue/base/scss/_custom.scss b/ckan/public-midnight-blue/base/scss/_custom.scss
@@ -11,4 +11,9 @@ h6, .h6, h5, .h5, h4, .h4, h3, .h3, h2, .h2, h1, .h1 {
         background-color: $gray-300 !important;
         border-color: $gray-300;
     }
+}
+
+.alert {
+    border: unset;
+    border-left: map-get($map: $border-widths, $key: "4") solid;
 }
diff --git a/ckan/public-midnight-blue/base/scss/_forms.scss b/ckan/public-midnight-blue/base/scss/_forms.scss
@@ -213,6 +213,17 @@ form .control-medium .info-block.info-inline {
     margin-left: 5px;
 }
 
+// Form icons
+.form-group .controls .icon {
+    padding: 14px;
+    position: absolute;
+}
+
+.form-group .controls .icon + .form-control {
+    width: 100%;
+    padding-left: 2.5rem;
+}
+
 // Form Narrow
 .form-narrow label {
     margin-bottom: 0;
@@ -366,6 +377,7 @@ select[data-module="autocomplete"] {
 // Errors
 .alert-danger a {
     color: $errorText;
+    text-decoration: underline;
 }
 
 .form-group.has-error input,

diff --git a/ckan/public-midnight-blue/base/scss/_login.scss b/ckan/public-midnight-blue/base/scss/_login.scss
@@ -0,0 +1,41 @@
+.login-form {
+    display: inline-grid;
+    .form-actions {
+        align-items: center;
+        padding: 1rem 0.5rem 1rem 0;
+        .btn:first-child {
+            margin-left: 0;
+        }
+        @include media-breakpoint-down(lg){
+            flex-direction: row;
+            justify-content: space-between;
+            .btn {
+                flex-basis: auto;
+            }
+        }
+    }
+}
+
+.login-main {
+    padding: 20px;
+    @include media-breakpoint-up(sm){
+        background-color: $gray-100;
+        .login-wrapper {
+            min-height: 300px;
+            background-color: #fff;
+            border-radius: 24px;
+            padding: 1.5rem;
+        }
+        .login-container {
+            display: flex;
+            flex-direction: column;
+        }
+    }
+    @include media-breakpoint-down(md){
+        .btn-light {
+            width: 100%;
+            display: block !important;
+        }
+    }
+}
+
diff --git a/ckan/templates-midnight-blue/macros/form/errors.html b/ckan/templates-midnight-blue/macros/form/errors.html
@@ -2,7 +2,7 @@
 Builds a list of errors for the current form.
 
 errors  - A dict of field/message pairs.
-type    - The alert-* class that should be applied (default: "error")
+type    - The alert-* class that should be applied (default: "danger")
 classes - A list of classes to apply to the wrapper (default: [])
 
 Example:
@@ -12,7 +12,7 @@
 
 #}
 
-{% macro errors(errors={}, type="error", classes=[]) %}
+{% macro errors(errors={}, type="danger", classes=[]) %}
 {% if errors %}
 <div class="error-explanation alert alert-{{ type }}{{ " " ~ classes | join(' ') }}">
 <p>{{ _('The form contains invalid entries:') }}</p>

diff --git a/ckan/templates-midnight-blue/macros/form/input.html b/ckan/templates-midnight-blue/macros/form/input.html
@@ -21,10 +21,11 @@
 {{ form.input('title', label=_('Title'), value=data.title, error=errors.title) }}
 
 #}
-{% macro input(name, id='', label='', value='', placeholder='', type='text', error="", classes=[], attrs={'class': 'form-control'}, is_required=false) %}
+{% macro input(name, id='', label='', value='', placeholder='', type='text', icon="", error="", classes=[], attrs={'class': 'form-control'}, is_required=false) %}
 {%- set extra_html = caller() if caller -%}
 
-{% call input_block(id or name, label or name, error, classes, extra_html=extra_html, is_required=is_required) %} 
+{% call input_block(id or name, label or name, error, classes, extra_html=extra_html, is_required=is_required) %}
+{% if icon %}<i class="fa fa-{{ icon }} icon"></i>{% endif %}
 <input id="{{ id or name }}" type="{{ type }}" name="{{ name }}" value="{{ value | empty_and_escape }}" placeholder="{{ placeholder }}" {{ attributes(attrs) }} />
 {% endcall %} 
 {% endmacro %}
diff --git a/ckan/templates-midnight-blue/page.html b/ckan/templates-midnight-blue/page.html
@@ -24,7 +24,7 @@
             <div class="flash-messages">
               {% block flash_inner %}
                 {% for category, message in h.get_flashed_messages(with_categories=true) %}
-                  <div class="alert alert-dismissible fade show {{ category }}">
+                  <div class="alert alert-dismissible fade show {{ category }}" role="alert">
                     {{ h.literal(message) }}
                   </div>
                 {% endfor %}

diff --git a/ckan/templates-midnight-blue/user/login.html b/ckan/templates-midnight-blue/user/login.html
@@ -6,49 +6,37 @@
   <li class="active">{{ h.nav_link(_('Login'), named_route='user.login') }}</li>
 {% endblock %}
 
-{% block primary_content %}
-  <section class="module">
-    <div class="module-content">
-      <h1 class="page-heading">{% block page_heading %}{{ _('Login') }}{% endblock %}</h1>
+{% block maintag %}<div class="login-main">{% endblock %}
+
+{% block main_content %}
+  {% block toolbar %}
+    {{ super() }}
+  {% endblock %}
+  {% block primary %}
+  <div class="row login-wrapper" role="main">
+    {% block primary_content %}
+      <div class="col-md-6 login-container">
+        <div class="login-content mt-4">
+            <h1 class="page-heading">
+              {% block page_heading %}{{ _('Login') }}{% endblock %}
+            </h1>
+          {% block primary_content_inner %}
+          {% endblock primary_content_inner %}
+        </div>
+      </div>
+    <div class="col-md-6 login-form">
+      {% block flash %}
+        <div class="flash-messages mt-3">
+          {% block flash_inner %}
+            {{ super() }}
+          {% endblock flash_inner %}
+        </div>
+      {% endblock flash %}
       {% block form %}
         {% snippet "user/snippets/login_form.html", error_summary=error_summary %}
       {% endblock %}
     </div>
-  </section>
-{% endblock %}
-
-{% block secondary_content %}
-  {% if h.check_access('user_create') %}
-  {% block help_register %}
-  <section class="module module-narrow module-shallow">
-    {% block help_register_inner %}
-      <h2 class="module-heading">{{ _('Need an Account?') }}</h2>
-      <div class="module-content">
-        <p>{% trans %}Then sign right up, it only takes a minute.{% endtrans %}</p>
-        <p class="action">
-        {% block help_register_button %}
-          <a class="btn btn-default" href="{{ h.url_for('user.register') }}">{{ _('Create an Account') }}</a>
-        {% endblock %}
-        </p>
-      </div>
-    {% endblock %}
-  </section>
-  {% endblock %}
-  {% endif %}
-
-  {% block help_forgotten %}
-  <section class="module module-narrow module-shallow">
-    {% block help_forgotten_inner %}
-    <h2 class="module-heading">{{ _('Forgotten your password?') }}</h2>
-    <div class="module-content">
-      <p>{% trans %}No problem, use our password recovery form to reset it.{% endtrans %}</p>
-      <p class="action">
-        {% block help_forgotten_button %}
-        <a class="btn btn-default" href="{{ h.url_for('user.request_reset') }}">{{ _('Forgot your password?') }}</a>
-        {% endblock %}
-      </p>
-    </div>
-    {% endblock %}
-  </section>
-  {% endblock %}
-{% endblock %}
+    {% endblock primary_content %}
+  </div>
+  {% endblock primary %}
+{% endblock main_content %}