Merge pull request #14969 from opf/bug/51949-announcement-box-and-cre…

…ate-new-account-button-are-not-responsive

[51949] Announcement box and create new account form are not responsive

app/views/account/_login.html.erb

@@ -77,7 +77,7 @@ See COPYRIGHT and LICENSE files for more details.
            
         </label>
         <input type="submit" name="login" id="login-pulldown"
-          value="<%=t(:button_login)%>" class="button -highlight" tabindex="1" />
+          value="<%=t(:button_login)%>" class="button -highlight button_no-margin" tabindex="1" />
       </div>
     </div>
 

app/views/account/_password_login_form.html.erb

@@ -55,23 +55,27 @@ See COPYRIGHT and LICENSE files for more details.
     </div>
   <% end %>
 
-  <%= submit_tag t(:button_login),
-                 name: :login,
-                 class: 'button -highlight',
-                 data: { disable_with: t(:label_loading) } %>
+  <div class="login-form--footer">
+    <%= submit_tag t(:button_login),
+                   name: :login,
+                   class: 'button -highlight button_no-margin',
+                   data: { disable_with: t(:label_loading) } %>
 
-  <div class="login-options-container">
-    <div class="login-links">
-      <% if Setting.lost_password? %>
-        <%= link_to t(:label_password_lost), { controller: '/account', action: 'lost_password' } %>
-        <br>
-      <% end %>
-      <% if Setting::SelfRegistration.enabled? %>
-        <%= link_to t(:label_register),
-          '',
-          title: t(:label_register),
-          class: 'registration-modal--activation-link' %>
-      <% end %>
+    <div class="login-options-container">
+      <div class="login-links">
+        <% if Setting.lost_password? %>
+          <%= link_to t(:label_password_lost),
+                      { controller: '/account', action: 'lost_password' },
+                      class: 'login-form--footer-link' %>
+          <br>
+        <% end %>
+        <% if Setting::SelfRegistration.enabled? %>
+          <%= link_to t(:label_register),
+                      '',
+                      title: t(:label_register),
+                      class: 'login-form--footer-link registration-modal--activation-link' %>
+        <% end %>
+      </div>
     </div>
   </div>
 <% end %>

frontend/src/global_styles/content/_accounts.sass

@@ -28,16 +28,14 @@
 
 #login-form
   margin: 50px auto 0
-  padding-top: 20px
+  padding: 20px
   width: 511px
   word-break: break-word
 
-  .login-options-container
+  .login-form--footer
+    display: flex
+    justify-content: space-between
     margin-bottom: 10px
-    .login-links
-      float: right
-      text-align: right
-      margin-top: -3rem
 
 #content .login-auth-providers.wide
   width: auto
@@ -63,13 +61,9 @@
   margin-top: 25px
 
   h3
-    border: none
-    margin-top: 20px
     font-weight: normal
     font-size: 1rem
-    text-decoration: none
     text-align: center
-
     position: relative
     z-index: 1
 
@@ -101,24 +95,11 @@
     @include prevent-float-collapse
     margin-top: 1em
 
-  a.auth-provider
-    float: left
-    margin-left: 10px
-    background-color: light-grey
-    font-weight: normal
-    color: var(--body-font-color)
-
-    &:hover
-      text-decoration: none
-
-    .auth-provider-name
-      line-height: normal
-      white-space: normal
+  a.auth-provider:hover
+    text-decoration: none
 
 #nav-login-content .login-auth-providers
   h3
-    &:before
-      width: 100%
     span
       background: var(--header-drop-down-bg-color)
   .login-auth-provider-list

frontend/src/global_styles/content/_accounts_mobile.sass

@@ -32,31 +32,23 @@
   #nav-login-content .login-auth-providers
     width: 100%
 
-  #content .login-auth-providers
-    margin-top: 114px
-
-    h3:before
-      top: -14px
-
   #login-form
     .form--field-container
       @include grid-content(12)
       padding: 0
+      margin: 0
 
-    .login-options-container
-      position: relative
-
-      .login-links
-        float: none
-        position: absolute
-        text-align: center
-        width: 100%
-        margin-top: 0
+    .login-form--footer
+      flex-direction: column
+      align-items: center
 
-        a
-          display: block
+      .login-form--footer-link
+        display: inline-block
+        margin-top: 15px
 
     .button
+      margin-right: 0
+      margin-left: 0
       width: 100%
 
   #new_user

frontend/src/global_styles/content/modules/_2fa.sass

@@ -54,42 +54,14 @@
 .mobile-otp-new-device--body
   flex: 1
 
-#login-form input[type=radio]
-  float: left
-
 #resend_otp_container
   margin-top: 30px
 
-#resend_otp_container input[type=radio]
-  margin-right: 8px
-
-#resend_otp_container label
-  margin-right: 10px
-
 #resend_otp_container .resend-header
   font-size: 14px
   font-weight: var(--base-text-weight-bold)
   margin-bottom: 10px
 
-#resend_otp_container .radios-wrapper
-  padding-top: 7px
-  float: left
-  border: none
-  overflow: hidden
-  clear: none
-
-
-#resend_otp_container .radios-wrapper label
-  float: left
-  clear: none
-  display: block
-  padding: 2px 1em 0 0
-
-
-#resend_otp_container .radios-wrapper input[type=radio]
-  float: left
-  clear: none
-  margin: 2px 0 15px 2px
 
 // Add some paddings to action links
 .mobile-otp--two-factor-device-row td.buttons

frontend/src/global_styles/openproject/_announcements.sass

@@ -4,3 +4,5 @@
   margin-top: 1rem
   width: 511px
 
+  @media screen and (max-width: $breakpoint-sm)
+    width: 100%

modules/two_factor_authentication/app/views/two_factor_authentication/authentication/enter_backup_code.html.erb

@@ -11,7 +11,9 @@
         <%= styled_text_field_tag 'backup_code', nil, required: true, autocomplete: 'off', size: 20, maxlength: 20, tabindex: 1, autofocus: true  %>
       </div>
     </div>
-      <input type="submit" name="login" value="<%=t(:button_submit)%>" class="button -highlight" tabindex="2" />
+    <div class="login-form--footer">
+      <input type="submit" name="login" value="<%=t(:button_submit)%>" class="button -highlight button_no-margin" tabindex="2" />
+    </div>
   <% end %>
   </div>
 </div>

modules/two_factor_authentication/app/views/two_factor_authentication/authentication/request_otp.html.erb

@@ -43,20 +43,24 @@
         </label>
       </div>
     <% end %>
-    <input type="submit" name="login" value="<%= t(:button_login) %>" class="button -highlight" tabindex="2"/>
-    <% if resend_supported || has_other_devices || has_backup_codes %>
-      <div class="login-options-container">
-        <div class="login-links">
-          <%= link_to(
-                t(:text_otp_not_receive),
-                '#',
-                id: 'toggle_resend_form',
-                tabindex: 3,
-                data: { action: 'two-factor-authentication#toggleResendOptions' }
-              ) %>
+    <div class="login-form--footer">
+      <input type="submit" name="login" value="<%= t(:button_login) %>" class="button -highlight button_no-margin" tabindex="2"/>
+      <% if resend_supported || has_other_devices || has_backup_codes %>
+        <div class="login-options-container">
+          <div class="login-links">
+            <%= link_to(
+                  t(:text_otp_not_receive),
+                  '#',
+                  id: 'toggle_resend_form',
+                  tabindex: 3,
+                  data: { action: 'two-factor-authentication#toggleResendOptions' },
+                  class: 'login-form--footer-link'
+                ) %>
+          </div>
         </div>
-      </div>
-    <% end %>
+      <% end %>
+    </div>
+
   <% end %>
   <div
     id="resend_otp_container"
@@ -68,14 +72,16 @@
         <%= hidden_field_tag 'use_device', @service.device.id %>
         <hr/>
         <div class="resend-header"><%= t(:text_send_otp_again) %></div>
-        <div class="radios-wrapper">
-          <% default_channel = @service.device.channel %>
-          <% supported_channels = @used_device.class.supported_channels & @strategy.class.supported_channels %>
-          <% supported_channels.each do |channel| %>
+
+        <% default_channel = @service.device.channel %>
+        <% supported_channels = @used_device.class.supported_channels & @strategy.class.supported_channels %>
+        <% supported_channels.each do |channel| %>
+          <div class="form--field">
             <%= radio_button_tag 'use_channel', channel, default_channel == channel %>
             <label for="channel_<%= channel %>"><%= t("button_otp_by_#{channel}") %></label>
-          <% end %>
-        </div>
+          </div>
+        <% end %>
+
         <input type="submit" value="<%= t(:button_resend_otp_form) %>" id="submit_resend_form" class="button -highlight"/>
       <% end %>
     <% end %>
@@ -95,12 +101,13 @@
       </ul>
     <% end %>
     <% if has_backup_codes %>
+      <hr/>
+      <div class="resend-header"><%= t('two_factor_authentication.login.enter_backup_code_title') %></div>
       <ul>
         <li>
           <%= link_to(t('two_factor_authentication.login.enter_backup_code_title'), { action: :enter_backup_code }) %>
-        </a>
-      </li>
-    </ul>
-  <% end %>
-</div>
+        </li>
+      </ul>
+    <% end %>
+  </div>
 </div>

modules/two_factor_authentication/app/views/two_factor_authentication/two_factor_devices/confirm.html.erb

@@ -13,7 +13,7 @@
       <%= styled_text_field_tag 'otp', nil, required: true, autocomplete: 'off', size: 6, maxlength: 6, tabindex: 1, autofocus: true  %>
     </div>
   </div>
-  <div>
-    <input type="submit" name="login" value="<%= t 'button_continue' %>" class="button -highlight" tabindex="2" />
+  <div  class="login-form--footer">
+    <input type="submit" name="login" value="<%= t 'button_continue' %>" class="button -highlight button_no-margin" tabindex="2" />
   </div>
 <% end %>