From 832a12b0e80b3488fcf80a8a5bceb6ba3afa1f65 Mon Sep 17 00:00:00 2001
From: test2a <39449563+test2a@users.noreply.github.com>
Date: Wed, 25 Nov 2020 20:27:10 +0530
Subject: adjust registration form width on mobile (#3274)

Co-authored-by: Rigel Kent <sendmemail@rigelk.eu>
---
 .../+register/register-step-user.component.html     |  2 +-
 .../app/+signup/+register/register.component.scss   | 21 ++++++++++++++++-----
 client/src/sass/include/_mixins.scss                |  1 +
 3 files changed, 18 insertions(+), 6 deletions(-)

(limited to 'client')

diff --git a/client/src/app/+signup/+register/register-step-user.component.html b/client/src/app/+signup/+register/register-step-user.component.html
index 1bd378b13..edb93b8ed 100644
--- a/client/src/app/+signup/+register/register-step-user.component.html
+++ b/client/src/app/+signup/+register/register-step-user.component.html
@@ -20,7 +20,7 @@
 
     <div class="input-group">
       <input
-        type="text" id="username" i18n-placeholder placeholder="Example: jane_doe"
+        type="text" id="username" i18n-placeholder="Username choice placeholder in the registration form" placeholder="e.g. jane_doe"
         formControlName="username" class="form-control" [ngClass]="{ 'input-error': formErrors['username'] }"
       >
       <div class="input-group-append">
diff --git a/client/src/app/+signup/+register/register.component.scss b/client/src/app/+signup/+register/register.component.scss
index 6a7e361e3..4221354ee 100644
--- a/client/src/app/+signup/+register/register.component.scss
+++ b/client/src/app/+signup/+register/register.component.scss
@@ -20,6 +20,10 @@
 
     &.register-form {
       width: 450px;
+
+      @media screen and (max-width: $mobile-view) {
+        width: 100%;
+      }
     }
 
     &.instance-information {
@@ -35,6 +39,9 @@
       @media screen and (max-width: 1500px) {
         width: 450px;
       }
+      @media screen and (max-width: $mobile-view) {
+        width: 100%;
+      }
 
       ngb-accordion ::ng-deep {
         .btn {
@@ -43,10 +50,6 @@
         }
       }
     }
-
-    @media screen and (max-width: $mobile-view) {
-      width: auto;
-    }
   }
 }
 
@@ -64,7 +67,6 @@
 
 input:not([type=submit]) {
   @include peertube-input-text(400px);
-
   display: block;
 
   &#username,
@@ -74,10 +76,19 @@ input:not([type=submit]) {
   }
 }
 
+@media screen and (max-width: $mobile-view) {
+  .form-group-terms,
+  .input-group,
+  input:not([type=submit]) {
+    width: 100%;
+  }
+}
+
 input[type=submit],
 button {
   @include peertube-button;
   @include orange-button;
+  
 }
 
 .name-information {
diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index e6491b492..1a94de5b2 100644
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -121,6 +121,7 @@
   min-height: $button-height;
   padding-top: 0;
   padding-bottom: 0;
+  flex-wrap: nowrap;
 
   .input-group-text{
     font-size: 14px;
-- 
cgit v1.2.3