Merge pull request #88 from annamar26/belm

Responsive header
annamar26 · Jan 25, 2022 · 8e10e16 · 8e10e16
2 parents 3f4a496 + 7c34246
commit 8e10e16
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 78 deletions.
diff --git a/blackrock/src/app/components/header/header.component.html b/blackrock/src/app/components/header/header.component.html
@@ -13,7 +13,7 @@ <h3 class="logout" *ngIf="path === '/profile' || path === '/courses'" (click)="l
 
 		</section>
 		<ng-template #elseBlock>
-			<div>
+			<div class="session">
 				<h3>¿Ya hiciste este quiz?</h3>
 				<button mat-stroked-button (click)="openDialog('login')">Iniciar sesión</button>
 			</div>

diff --git a/blackrock/src/app/components/header/header.component.scss b/blackrock/src/app/components/header/header.component.scss
@@ -26,19 +26,20 @@ header {
         justify-content: center;
         .logout {
           text-decoration: underline;
-					cursor: pointer;
+          cursor: pointer;
           font: {
             family: "Noto Sans", sans-serif;
             size: 16px;
             weight: 400;
           }
-					&:hover{
-						color: #ff4713;
-					}
+          &:hover {
+            color: #ff4713;
+          }
         }
       }
     }
-    div {
+    div,
+    .session {
       display: flex;
       flex-direction: row;
       justify-content: center;
@@ -86,86 +87,43 @@ header {
   }
 }
 
-@media (max-width: 420px) and (orientation: portrait)
-{
+@media (max-width: 420px) and (orientation: portrait) {
   header {
-    display: block;
-
-    .main{
-      display: block;
-      h3{
-        width:100%;
-        display: block;
-      }
-    }
-
+    flex-direction: row;
+    margin-right:0;
+    align-items: flex-start;
+    padding: 1rem 0 1rem 2rem;
     img{
-      width:150px;
+      margin: 10px 10px 20px;
     }
-
-    .section-user{
-      display: block;
-    }
-    .mat-iconmat-icon{
-      display: block;
-      align-items: flex-end;
-    }
-
-    button {
-        width: 85px;
+    .main {
+      display: flex;
+        flex-direction: column-reverse;
+        flex-wrap: wrap;
+        justify-content: flex-end;
+        gap:2rem;
+      .session {
+        display: flex;
+        flex-direction: column-reverse;
+        justify-content: flex-end;
+        gap:0;
 
+        h3 {
+          width: fit-content;
+          flex:100%;
+          text-align: right;
+        }
       }
-      .mat-button-wrapper{
-        font-size: 16px;
-        display: block;
-
-
+      span{
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-end;
+        padding-left: 4rem;
       }
-    .logout{
-      display: block;
+
     }
 
   }
 }
 
-@media (min-width: 421px) and (max-width:740px)
-{
-  header {
-    display: block;
-    img{
-      width:150px;
-    }
-    .section-user{
-      display: block;
-    }
-    .mat-iconmat-icon{
-      display: block;
-    }
-
-    .logout{
-      display: block;
-      width: 50px;
-    }
-
-  }
-}
-@media (min-width: 741px) and (max-width:1024px)
-{
-  header {
-
-    img{
-      width:150px;
-    }
-    .section-user{
-      display: block;
-    }
-    .mat-iconmat-icon{
-      display: block;
-    }
-    .logout{
-      display: block;
-      width: 50px;
-    }
-
-  }
-}
+