Merge branch '572-improve-mobile-design-of-login-page' into 'master'

Resolve "Improve mobile design of login page"

Closes #572

See merge request !905

CHANGELOG.rst

@@ -14,6 +14,11 @@ Changed
 
 * Added a `Retry` button to the server error page
 
+Fixed
+~~~~~
+
+* The ``reset password`` button on the login site used to overflow the card on smaller devices.
+
 `2.7.4`_ - 2022-02-09
 ---------------------
 

aleksis/core/static/public/style.scss

@@ -937,3 +937,14 @@ $person-logo-size: 20vh;
   @extend .application-circle;
   object-fit: cover;
 }
+
+// Login Page
+.login-card-action {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  row-gap: 0.7rem;
+  & *:last-child {
+    grid-column: -2;
+    text-align: center;
+  }
+}

aleksis/core/templates/socialaccount/snippets/provider_list.html

@@ -7,7 +7,7 @@
         {% for brand in provider.get_brands %}
             <a title="{{brand.name}}" 
               class="socialaccount_provider {{provider.id}} {{brand.id}}
-              btn-large waves-effect waves-light primary-color" 
+              btn-large waves-effect waves-light primary-color margin-bottom"
               href="{% provider_login_url provider.id openid=brand.openid_url process=process %}">
               {% blocktrans with name=brand.name %}
                 Login with {{ name }}
@@ -16,7 +16,7 @@
         {% endfor %}
       {% endif %}
         <a title="{{provider.name}}" class="socialaccount_provider {{provider.id}}
-        btn hundred-percent waves-effect waves-light primary-color" 
+        btn hundred-percent waves-effect waves-light primary-color margin-bottom"
           href="{% provider_login_url provider.id process=process scope=scope auth_params=auth_params %}">
           {% blocktrans with name=provider.name %}
             Login with {{ name }}

aleksis/core/templates/two_factor/core/login.html

@@ -90,13 +90,13 @@
 
             {% include "two_factor/_wizard_forms.html" %}
           </div>
-          <div class="card-action-light">
+          <div class="card-action-light login-card-action">
             <button type="submit" class="btn green waves-effect waves-light">
               {% trans "Login" %}
               <i class="material-icons right">send</i>
             </button>
             {% if request.site.preferences.auth__allow_password_change and wizard.steps.current == "auth" %}
-              <a href="{% url "account_reset_password" %}" class="btn-flat right waves-effect waves-light">
+              <a href="{% url "account_reset_password" %}" class="btn-flat right waves-effect waves-red">
                 {% trans "Reset password" %}
               </a>
             {% endif %}
@@ -111,7 +111,8 @@
                 <p>{% trans "Or, alternatively, use one of your backup phones:" %}</p>
                 <p>
                   {% for other in other_devices %}
-                    <button name="challenge_device" value="{{ other.persistent_id }}" class="btn" type="submit">
+                    <button name="challenge_device" value="{{ other.persistent_id }}" class="btn margin-bottom"
+                            type="submit">
                       {{ other|device_action }}
                     </button>
                   {% endfor %}