Merge pull request #806 from openstax/translate_show_hide_btn

Translate SHOW/HIDE password button
openstax · Apr 13, 2020 · 9f731a9 · 9f731a9
2 parents 2e8d967 + 4b86318
commit 9f731a9
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 31 deletions.
diff --git a/app/assets/stylesheets/newflow_layout.scss b/app/assets/stylesheets/newflow_layout.scss
@@ -54,27 +54,25 @@ body {
 }
 
 .form-divider {
+    font-size: 1.2rem;
+    font-weight: bold;
+    color: #424242;
+    display: grid;
+    grid-column-gap: 2rem;
+    grid-template-columns: 1fr auto 1fr;
+    justify-items: center;
     text-align: center;
-    position: relative;
 
-    &:after {
-        border-top: 0.1rem solid #d5d5d5;
-        content: '';
-        display: block;
-        width: calc(50% - 7rem);
-        right: 0px;
-        position: absolute;
-        top: 50%;
+    .line {
+        border-bottom: 0.1rem solid #d5d5d5;
+        width: 100%;
+        height: 0.1rem;
+        transform: translateY(1rem);
     }
 
-    &:before {
-        border-top: 0.1rem solid #d5d5d5;
-        content: '';
-        display: block;
-        width: calc(50% - 7rem);
-        left: 0px;
-        position: absolute;
-        top: 50%;
+    .the-content {
+        max-width: calc(100vw - 18rem);
+        text-align: center;
     }
 }
 
@@ -508,16 +506,6 @@ input.has-error {
         }
     }
 
-    .form-divider {
-        @include width-up-to($phone-max) {
-            margin-top: -1.5rem;
-        }
-
-        font-weight: bold;
-        font-size: 1.2rem;
-        text-align: center;
-    }
-
     // informational messages shown to users, for example on email confirmation screen
     .info-message {
         @include set-font(body-regular);

diff --git a/app/views/newflow/login_signup/_password_show_hide.html.erb b/app/views/newflow/login_signup/_password_show_hide.html.erb
@@ -1,6 +1,10 @@
 <span id="password-show-hide-button">
-    <span class="toggle-show-hide">SHOW</span>
-    <span class="toggle-show-hide" style="display: none">HIDE</span>
+    <span class="toggle-show-hide">
+      <%= I18n.t(:"login_signup_form.show_password_btn")  %>
+    </span>
+    <span class="toggle-show-hide" style="display: none">
+      <%= I18n.t(:"login_signup_form.hide_password_btn")  %>
+    </span>
 </span>
 
 <script type="text/javascript">

diff --git a/app/views/newflow/login_signup/login_form.html.erb b/app/views/newflow/login_signup/login_form.html.erb
@@ -36,8 +36,14 @@
                         </div>
                     </div>
 
-                    <div class="content form-divider">
-                        <%= I18n.t(:"login_signup_form.or_login_below") %>
+                    <div class="content">
+                        <div class="form-divider">
+                            <div class="line"></div>
+                            <div class="the-content">
+                                <%= I18n.t(:"login_signup_form.or_login_below") %>
+                            </div>
+                            <div class="line"></div>
+                        </div>
                     </div>
 
                     <div class="content control-group">

diff --git a/config/locales/en.yml b/config/locales/en.yml
@@ -109,6 +109,8 @@ en:
     password_is_blank: Password can't be blank
     password_requirements: Password requirements
     min_characters: "%{number} characters minimum"
+    show_password_btn: SHOW
+    hide_password_btn: HIDE
 
   student_profile:
     enable_other_sign_in_options: Enable other login options

diff --git a/config/locales/pl.yml b/config/locales/pl.yml
@@ -110,6 +110,8 @@ pl:
     password_is_blank: Wpisz hasło
     password_requirements: Wymagania dotyczące hasła
     min_characters: "%{number} znaków minimum"
+    show_password_btn: POKAZAĆ
+    hide_password_btn: UKRYĆ
 
   student_profile:
     enable_other_sign_in_options: Zezwól na inne opcje logowania