profile responsive and loading label

annamar26 · Jan 25, 2022 · e4d2afd · e4d2afd
1 parent 81a8b02
commit e4d2afd
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 17 deletions.
diff --git a/blackrock/src/app/pages/profile/profile.component.scss b/blackrock/src/app/pages/profile/profile.component.scss
@@ -2,9 +2,9 @@
 
 $black: #000000;
 $white: #ffffff;
-$orange: #FF4713;
-$pink: #FC9BB3;
-$yellow: #FFCE00;
+$orange: #ff4713;
+$pink: #fc9bb3;
+$yellow: #ffce00;
 
 @mixin noto($color, $x, $y) {
   color: $color;
@@ -21,6 +21,7 @@ main {
     display: flex;
     flex-direction: row;
     justify-content: flex-end;
+    flex-wrap: wrap;
     padding-right: 2rem;
     .stats {
       padding: 3rem 8rem 0;
@@ -32,6 +33,7 @@ main {
   .user-info {
     display: flex;
     flex-direction: row;
+    flex-wrap: wrap;
     align-items: center;
     padding: 0 10rem 0;
     .back-color-profile {
@@ -53,6 +55,7 @@ main {
       .profile-name-edit {
         display: flex;
         flex-direction: row;
+        flex-wrap: wrap;
         align-items: baseline;
         gap: 1rem;
         h1 {
@@ -94,11 +97,11 @@ main {
       grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
       grid-template-rows: auto;
       column-gap: 3rem;
-			row-gap: 3rem;
+      row-gap: 3rem;
       padding: 2rem 5rem 3rem;
       .card-general {
-				box-shadow: 0px 0px 10px -2px rgba(0,0,0,0.7);
-        cursor:pointer;
+        box-shadow: 0px 0px 10px -2px rgba(0, 0, 0, 0.7);
+        cursor: pointer;
         div {
           height: 250px;
           box-sizing: border-box;
@@ -112,9 +115,9 @@ main {
           }
         }
         .title-section {
-					display: flex;
-					align-items: center;
-					padding: 1rem 1rem 0 1rem;
+          display: flex;
+          align-items: center;
+          padding: 1rem 1rem 0 1rem;
           height: 40px;
           background-color: $black;
           p {
@@ -133,3 +136,36 @@ main {
 ::ng-deep .mat-progress-bar.mat-accent .mat-progress-bar-buffer {
   background-color: $black !important;
 }
+
+@media (max-height: 420px), screen and (orientation: portrait) {
+  main {
+    .admin-data {
+      justify-content: flex-end;
+      padding:0 1rem 2rem 0;
+      .stats {
+        padding: 2rem 0 0 !important;
+      }
+    }
+    .user-info {
+			  padding: 0 1rem 0 !important;
+      .back-color-profile {
+        border-radius: 50%;
+      }
+    }
+    .profile-info {
+			margin-top: 1rem !important;
+			 padding-left: 10px !important;
+    }
+		.progress{
+			padding: 2rem 1rem 2rem;
+		}
+		.training{
+			h3{
+				padding: 3rem 1rem 0;
+			}
+			.grid-courses{
+				padding: 2rem 2rem 3rem;
+			}
+		}
+  }
+}
diff --git a/blackrock/src/app/pages/spinner/spinner.component.html b/blackrock/src/app/pages/spinner/spinner.component.html
@@ -1,3 +1,4 @@
 <div>
 	<mat-progress-spinner mode="indeterminate" color="accent"></mat-progress-spinner>
+	<p>Cargando...</p>
 </div>
diff --git a/blackrock/src/app/pages/spinner/spinner.component.scss b/blackrock/src/app/pages/spinner/spinner.component.scss
@@ -1,10 +1,24 @@
+@import url("https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;700&display=swap");
 
-  div {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-content: center;
-    align-items: center;
-		padding-top: 15%;
-    overflow-y: hidden;
+@mixin noto($color, $x, $y) {
+  color: $color;
+  font: {
+    family: "Noto Sans", sans-serif;
+    size: $x;
+    weight: $y;
   }
+}
+
+div {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-content: center;
+  align-items: center;
+  padding-top: 15%;
+  overflow-y: hidden;
+  p {
+    margin-top: 3rem;
+		@include noto(black, 28px, 700)
+  }
+}