responsive modal

annamar26 · Jan 25, 2022 · 712d493 · 712d493
1 parent 49aafd7
commit 712d493
Show file tree

Hide file tree

Showing 2 changed files with 65 additions and 7 deletions.
diff --git a/blackrock/src/app/components/modal-login/modal-login.component.html b/blackrock/src/app/components/modal-login/modal-login.component.html
@@ -68,16 +68,17 @@ <h2 mat-dialog-title>Regístrate</h2>
         </mat-error>
       </mat-form-field>
     </div>
+
       <div class="login"  *ngIf="valorModal; else elseBlock2"> 
-        <button mat-button  [mat-dialog-close]="true" cdkFocusInitial type="submit">
-        <mat-icon class='arrow'>keyboard_arrow_right</mat-icon>Inicia sesión</button>
+        <button mat-button  [mat-dialog-close]="true" cdkFocusInitial type="submit" class="loginbutton">
+                  <mat-icon class='arrow'>keyboard_arrow_right</mat-icon>Inicia sesión</button> <hr>
         <button mat-button  [mat-dialog-close]="true" cdkFocusInitial type="button" (click)="google()">
-          <mat-icon class='arrow'>keyboard_arrow_right</mat-icon>Inicia sesión con Google</button></div>
+          <mat-icon class='arrow'>Google</mat-icon>Inicia sesión con Google</button></div>
           <ng-template #elseBlock2 >
-            <div class="login"><button mat-button  [mat-dialog-close]="true" cdkFocusInitial type="submit">
-              <mat-icon class='arrow'>keyboard_arrow_right</mat-icon>Registrarse</button>
+            <div class="login"><button class="loginbutton" mat-button  [mat-dialog-close]="true" cdkFocusInitial type="submit">
+              <mat-icon class='arrow'>keyboard_arrow_right</mat-icon>Registrarse</button><hr>
               <button mat-button  [mat-dialog-close]="true" cdkFocusInitial type="button" (click)="google2()">
-                <mat-icon class='arrow'>keyboard_arrow_right</mat-icon>Registrarse con Google</button></div>
+                <mat-icon class='arrow'>Google_rounded</mat-icon>Registrarse con Google</button></div>
 
           </ng-template>
 

diff --git a/blackrock/src/app/components/modal-login/modal-login.component.scss b/blackrock/src/app/components/modal-login/modal-login.component.scss
@@ -46,18 +46,75 @@
         margin-top: 20px;
         width: 100%;
         display: flex;
+        flex-direction: column;
         justify-content: flex-end;
-        align-items: center;
+
+        hr {
+          align-self: center;
+          color: black;
+          width: 98%;
+          margin: 3%;
+          background-color: black;
+          height: 0.5px;
+          border-bottom: 0.3 black solid;
+        }
+        .loginbutton {
+          align-self: flex-end;
+        }
         button {
+          align-self: center;
           background-color: black;
           color: white;
           display: flex;
           justify-content: center;
           align-items: center;
           font-size: 18px;
           margin-left: 10px;
+          width: 30%;
           .arrow {
             color: #ff4713;
+            font-size: 18px;
+          }
+        }
+      }
+    }
+  }
+}
+@media (max-width: 600px) and (orientation: portrait) {
+  ::ng-deep .my-custom-dialog-login {
+    mat-dialog-container {
+      height: 90vh;
+      width: 100vw;
+
+      h2 {
+        margin-top: 6%;
+        font-size: 40px;
+        line-height: 45px;
+      }
+      p {
+        text-align: left;
+        font-size: 22px;
+      }
+      form {
+        width: 100%;
+        .inputs {
+          width: 100%;
+          display: flex;
+          flex-direction: column;
+          .mat-form-field {
+            width: 90%;
+            font-size: 18px;
+          }
+        }
+        .login {
+          width: 100%;
+
+          .loginbutton {
+            align-self: center;
+          }
+          button {
+            flex-wrap: wrap;
+            width: 87%;
           }
         }
       }