From bb91873194e1e22c53a25fa49dd0473c88e8a141 Mon Sep 17 00:00:00 2001
From: apapachristou <apapachristou@cite.gr>
Date: Tue, 29 Oct 2019 18:17:04 +0200
Subject: [PATCH] Fixes login table style

---
 .../app/ui/auth/login/login.component.html    |  17 +-
 .../app/ui/auth/login/login.component.scss    | 150 ++++++++++++------
 2 files changed, 113 insertions(+), 54 deletions(-)

diff --git a/dmp-frontend/src/app/ui/auth/login/login.component.html b/dmp-frontend/src/app/ui/auth/login/login.component.html
index 5b3511141..4540a7e80 100644
--- a/dmp-frontend/src/app/ui/auth/login/login.component.html
+++ b/dmp-frontend/src/app/ui/auth/login/login.component.html
@@ -7,32 +7,45 @@
 					<button *ngIf="hasGoogleOauth()" mat-icon-button id="googleSignInButton" class="login-social-button">
 						<i class="fa fa-google"></i>
 					</button>
+				</div>
+				<div class="col">
 					<button *ngIf="hasLinkedInOauth()" mat-icon-button class="login-social-button">
 						<i class="fa fa-linkedin" (click)="linkedInLogin()"></i>
 					</button>
+				</div>
+				<div class="col">
 					<button *ngIf="hasFacebookOauth()" mat-icon-button (click)="facebookLogin()" class="login-social-button">
 						<i class="fa fa-facebook-square"></i>
 					</button>
+				</div>
+				<div class="col">
 					<button *ngIf="hasTwitterOauth()" mat-icon-button (click)="twitterLogin()" class="login-social-button">
 						<i class="fa fa-twitter"></i>
 					</button>
 				</div>
 			</div>
-			<div class="row mt-2 accesss-methods">
-				<div class="col justify-content-center">
+			<div class="w-100"></div>
+			<div class="row pt-2 mb-4 accesss-methods">
+				<!-- <div class="col justify-content-center"> -->
+				<div class="col-auto logo">
 					<button *ngIf="hasB2AccessOauth()" class="b2access-button" mat-icon-button (click)="b2AccessLogin()" class="login-social-button">
 						<span class="iconmedium"></span>
 						<!-- <span></span> -->
 					</button>
+				</div>
+				<div class="col-auto orcid-logo">
 					<button *ngIf="hasOrcidOauth()" class="orcid-button" mat-icon-button (click)="orcidLogin()" class="login-social-button">
 						<span class="orcidIconMedium"></span>
 						<!-- <span></span> -->
 					</button>
+				</div>
+				<div class="col-auto openaire-logo">
 					<button *ngIf="hasOpenAireOauth()" class="openaire-button" mat-icon-button (click)="openaireLogin()" class="login-social-button">
 						<span class="openaireIcon"></span>
 						<!-- <span></span> -->
 					</button>
 				</div>
+				<!-- </div> -->
 			</div>
 		</div>
 		<div class="card-footer">
diff --git a/dmp-frontend/src/app/ui/auth/login/login.component.scss b/dmp-frontend/src/app/ui/auth/login/login.component.scss
index bdded71f0..2ca7b11fe 100644
--- a/dmp-frontend/src/app/ui/auth/login/login.component.scss
+++ b/dmp-frontend/src/app/ui/auth/login/login.component.scss
@@ -28,36 +28,32 @@
   margin-top: 40px;
 }
 
-@media (min-width: 1200px) {
-  .container {
-    width: 100%;
-  }
-}
-
-@media (min-width: 992px) {
-  .container {
-    width: 100%;
-  }
-}
-
-@media (min-width: 768px) {
-  .container {
-    width: 100%;
-  }
-}
-
-// @media (max-width: 438px) {
-//   .social-btns i {
-//     padding: 0.4em !important;
-//   }
-// }
-
 .container {
   height: 100%;
   position: relative;
   z-index: 1;
 }
 
+@-webkit-keyframes card {
+  from {
+    top: -40px;
+  }
+
+  to {
+    top: 0;
+  }
+}
+
+@keyframes card {
+  from {
+    top: -40px;
+  }
+
+  to {
+    top: 0;
+  }
+}
+
 .card {
   position: relative;
   padding: 20px;
@@ -80,26 +76,6 @@
   animation-fill-mode: forwards;
 }
 
-@-webkit-keyframes card {
-  from {
-    top: -40px;
-  }
-
-  to {
-    top: 0;
-  }
-}
-
-@keyframes card {
-  from {
-    top: -40px;
-  }
-
-  to {
-    top: 0;
-  }
-}
-
 .card-header {
   position: relative;
   overflow: hidden;
@@ -124,6 +100,7 @@
 
 .social-btns {
   height: 6em;
+  justify-content: center;
 }
 
 .social-btns i {
@@ -132,10 +109,44 @@
   color: #fff;
 }
 
-// .social-btns:hover {
-//   background-color: #f5f5f5;
-//   border-radius: 1em;
-// }
+.social-btns .col {
+  flex-grow: 0;
+}
+
+.social-btns i:hover {
+  background-color: #f5f5f51c;
+  border-radius: 60%;
+}
+
+.accesss-methods {
+  height: 5em;
+  justify-content: center;
+}
+
+.accesss-methods .col-auto:hover {
+  background-color: #f5f5f51c;
+  border-radius: 100%;
+}
+
+.accesss-methods .logo {
+  flex-grow: 0;
+  padding-top: 21px;
+  padding-bottom: 21px;
+}
+
+.accesss-methods .openaire-logo {
+  flex-grow: 0;
+  padding-top: 21px;
+  padding-bottom: 21px;
+  margin-top: 5px;
+  height: 90px;
+}
+
+.accesss-methods .orcid-logo {
+  height: 75px;
+  padding-top: 8px;
+  margin-top: 13px;
+}
 
 .tip {
   margin-top: -20px;
@@ -196,7 +207,7 @@ span.orcidIconMedium {
   background: url(img/ORCIDiD_medium.png) no-repeat;
   background-position: center;
   float: right;
-  width: 100px;
+  width: 56px;
   height: 56px;
   //   margin-left: 1em;
   //   margin-right: 1em;
@@ -206,7 +217,7 @@ span.openaireIcon {
   background: url(img/openaire_small.png) no-repeat;
   background-position: center;
   float: right;
-  width: 100px;
+  width: 80px;
   height: 56px;
   //   margin-left: 1em;
   //   margin-right: 1em;
@@ -244,6 +255,41 @@ span.openaireIcon {
   height: auto;
 }
 
-.accesss-methods {
-  height: 5em;
+@media (min-width: 1200px) {
+  .container {
+    width: 100%;
+  }
+}
+
+@media (min-width: 992px) {
+  .container {
+    width: 100%;
+  }
+}
+
+@media (min-width: 768px) {
+  .container {
+    width: 100%;
+  }
+}
+
+@media (min-width: 401px) and (max-width: 560px) {
+  .social-btns i {
+    padding: 0.4em !important;
+  }
+  .accesss-methods {
+    padding-top: 1em;
+  }
+}
+
+@media (min-width: 0px) and (max-width: 400px) {
+  .social-btns i {
+    padding: 0.4em !important;
+  }
+  .card-header {
+    height: 350px !important;
+  }
+  .accesss-methods {
+    padding-top: 1em;
+  }
 }