From 222cfda7680fc37f4a33d862b931b4ba31936280 Mon Sep 17 00:00:00 2001 From: Ilya Litvinenko Date: Thu, 4 Mar 2021 15:35:37 +0200 Subject: [PATCH] VDS-841: Improve login page UI (#187) * VDS-841: Improve login page UI * Add aria-hidden="true" to icons * Remove font weight class --- assets/images/login-card-bg.png | Bin 0 -> 3435 bytes assets/scss/bootstrap-migration/_custom.scss | 28 ++++++++++++---- assets/scss/bootstrap-migration/_maps.scss | 3 +- .../bootstrap-migration/custom/_lists.scss | 8 +++++ .../bootstrap-migration/custom/_type.scss | 4 --- locales/en.default.json | 1 + .../customers/login-form.liquid | 12 +++---- .../customers/sign-in-content.liquid | 17 ++++++++++ .../form-errors-custom.liquid | 9 ++++-- templates/customers/login.liquid | 30 +++++------------- 10 files changed, 68 insertions(+), 44 deletions(-) create mode 100644 assets/images/login-card-bg.png create mode 100644 assets/scss/bootstrap-migration/custom/_lists.scss create mode 100644 snippets/bootstrap-migration/customers/sign-in-content.liquid diff --git a/assets/images/login-card-bg.png b/assets/images/login-card-bg.png new file mode 100644 index 0000000000000000000000000000000000000000..14c7cfc5c60bc841c85138370aa85094b3cc7d51 GIT binary patch literal 3435 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
{% else %} -
- +
+ {% include 'bootstrap-migration/customers/forgot-links' %} +
+
+ {% endif %} {% if template != 'customers/login' %} @@ -39,11 +42,6 @@
{% endif %}
- {% if template == 'customers/login' %} -
- {% include 'bootstrap-migration/customers/forgot-links' %} -
- {% endif %} {{ antiforgery }} diff --git a/snippets/bootstrap-migration/customers/sign-in-content.liquid b/snippets/bootstrap-migration/customers/sign-in-content.liquid new file mode 100644 index 00000000..34979e3d --- /dev/null +++ b/snippets/bootstrap-migration/customers/sign-in-content.liquid @@ -0,0 +1,17 @@ +
+ {% capture loginUrl %} {{ requestUrl }} {% endcapture %} + {% include 'bootstrap-migration/customers/login-form' %} +
+ diff --git a/snippets/bootstrap-migration/form-errors-custom.liquid b/snippets/bootstrap-migration/form-errors-custom.liquid index 0d8f5cda..5a540ae4 100644 --- a/snippets/bootstrap-migration/form-errors-custom.liquid +++ b/snippets/bootstrap-migration/form-errors-custom.liquid @@ -1,7 +1,10 @@ {% unless form.errors.empty? %} -
-

{{ 'general.forms.post_error' | t }}

-
    +
    + + + + +
      {% assign message = 'contact.form.message' | t %} {% for field in form.errors %} {% if field == 'form' %} diff --git a/templates/customers/login.liquid b/templates/customers/login.liquid index 598b2296..6db37c7b 100644 --- a/templates/customers/login.liquid +++ b/templates/customers/login.liquid @@ -1,28 +1,14 @@ {% layout 'bootstrap_migration' %} -
      -
      -
      +
      +
      +

      {{ 'customer.sign_in.title' | t }}

      - {% capture loginUrl %} {{ requestUrl }} {% endcapture %} - {% include 'bootstrap-migration/customers/login-form' %} -
      -
      -

      {{ 'customer.sign_in.registration_title' | t: shop.name }}

      -

      - {{ 'customer.sign_in.registration_advantages_title' | t: shop.name }} -

        - {% assign advantages_size = 'customer.sign_in.registration_advantages' | t | size | minus: 2 %} - {% assign registration_advantage = 'customer.sign_in.registration_advantages' | t | slice: 1, advantages_size %} - {% assign advantages = registration_advantage | split: ',' %} - {% for phrase in advantages %} - {% assign phrase_size = phrase | strip | size | minus: 2 %} -
      • {{ phrase | strip | slice: 1, phrase_size }}
        • - {% endfor %} -
      -

      -
      - {{ 'layout.customer.register' | t | customer_register_link | replace: 'a href', 'a class="btn btn-primary w-25" href' }} +
      + {% include 'bootstrap-migration/customers/sign-in-content' %} +
      +
      + {% include 'bootstrap-migration/customers/sign-in-content' %}