From a45c208f381d40f7a44e16be1e2606cc5d04cef9 Mon Sep 17 00:00:00 2001
From: apapachristou <apapachristou@cite.gr>
Date: Fri, 13 Sep 2019 17:29:52 +0300
Subject: [PATCH] Fixes bug on access methods table ( /login )

---
 .../app/ui/auth/login/login.component.html    |  15 +-
 .../app/ui/auth/login/login.component.scss    | 237 +++++++++---------
 2 files changed, 131 insertions(+), 121 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 49082dde1..da8ce40e0 100644
--- a/dmp-frontend/src/app/ui/auth/login/login.component.html
+++ b/dmp-frontend/src/app/ui/auth/login/login.component.html
@@ -1,9 +1,9 @@
 <div class="login-screen login-bg d-flex flex-column align-items-center justify-content-center">
 	<div class="login-logo"></div>
 	<div class="card login-card">
-		<div class="card-header">
-			<div class="social-btns d-flex flex-column">
-				<div class="row">
+		<div class="container card-header">
+			<div class="row social-btns">
+				<div class="col">
 					<button *ngIf="hasGoogleOauth()" mat-icon-button id="googleSignInButton" class="login-social-button">
 						<i class="fa fa-google"></i>
 					</button>
@@ -17,17 +17,18 @@
 						<i class="fa fa-twitter"></i>
 					</button>
 				</div>
-				<div class="row justify-content-center">
+			</div>
+			<div class="row mt-2 accesss-methods">
+				<div class="col justify-content-center">
 					<button *ngIf="hasB2AccessOauth()" class="b2access-button" mat-icon-button (click)="b2AccessLogin()" class="login-social-button">
 						<span class="iconmedium"></span>
-						<span></span>
+						<!-- <span></span> -->
 					</button>
 					<button *ngIf="hasOrcidOauth()" class="orcid-button" mat-icon-button (click)="orcidLogin()" class="login-social-button">
 						<span class="orcidIconMedium"></span>
-						<span></span>
+						<!-- <span></span> -->
 					</button>
 				</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 77be6f443..9527477ec 100644
--- a/dmp-frontend/src/app/ui/auth/login/login.component.scss
+++ b/dmp-frontend/src/app/ui/auth/login/login.component.scss
@@ -1,151 +1,156 @@
 .login-screen {
-	margin-top: 70px;
-	height: calc(100vh - 10px);
+  margin-top: 70px;
+  height: calc(100vh - 10px);
 }
 
 .login-card {
-	width: auto;
-	margin-top: 0;
+  width: auto;
+  margin-top: 0;
 }
 
 .container {
-	padding: 15px 30px;
+  padding: 15px 30px;
 }
 
 .card {
-	box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.14);
-	border-radius: 6px;
-	color: rgba(0, 0, 0, 0.87);
-	background: #fff;
+  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.14);
+  border-radius: 6px;
+  color: rgba(0, 0, 0, 0.87);
+  background: #fff;
 }
 
 .card-raised {
-	box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.42), 0 4px 25px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2);
+  box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.42), 0 4px 25px 0px rgba(0, 0, 0, 0.12),
+    0 8px 10px -5px rgba(0, 0, 0, 0.2);
 }
 
 .page-title {
-	margin-top: 40px;
+  margin-top: 40px;
 }
 
 @media (min-width: 1200px) {
-	.container {
-		width: 100%;
-	}
+  .container {
+    width: 100%;
+  }
 }
 
 @media (min-width: 992px) {
-	.container {
-		width: 100%;
-	}
+  .container {
+    width: 100%;
+  }
 }
 
 @media (min-width: 768px) {
-	.container {
-		width: 100%;
-	}
+  .container {
+    width: 100%;
+  }
 }
 
 .container {
-	height: 100%;
-	position: relative;
-	z-index: 1;
+  height: 100%;
+  position: relative;
+  z-index: 1;
 }
 
 .card {
-	position: relative;
-	padding: 20px;
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	margin-top: 50px;
-	top: -50px;
-	-webkit-animation-name: card;
-	-moz-animation-name: card;
-	-o-animation-name: card;
-	animation-name: card;
-	-webkit-animation-duration: 600ms;
-	-moz-animation-duration: 600ms;
-	-o-animation-duration: 600ms;
-	animation-duration: 600ms;
-	-webkit-animation-fill-mode: forwards;
-	-moz-animation-fill-mode: forwards;
-	-o-animation-fill-mode: forwards;
-	animation-fill-mode: forwards;
+  position: relative;
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-top: 50px;
+  top: -50px;
+  -webkit-animation-name: card;
+  -moz-animation-name: card;
+  -o-animation-name: card;
+  animation-name: card;
+  -webkit-animation-duration: 600ms;
+  -moz-animation-duration: 600ms;
+  -o-animation-duration: 600ms;
+  animation-duration: 600ms;
+  -webkit-animation-fill-mode: forwards;
+  -moz-animation-fill-mode: forwards;
+  -o-animation-fill-mode: forwards;
+  animation-fill-mode: forwards;
 }
 
 @-webkit-keyframes card {
-	from {
-		top: -40px;
-	}
+  from {
+    top: -40px;
+  }
 
-	to {
-		top: 0;
-	}
+  to {
+    top: 0;
+  }
 }
 
 @keyframes card {
-	from {
-		top: -40px;
-	}
+  from {
+    top: -40px;
+  }
 
-	to {
-		top: 0;
-	}
+  to {
+    top: 0;
+  }
 }
 
 .card-header {
-	position: relative;
-	overflow: hidden;
-	top: -40px;
-	width: 100%;
-	min-height: 134px;
-	padding: 25px;
-	border-radius: 3px;
-	background: rgb(0, 112, 192);
-	display: flex;
-	flex-direction: column;
-	align-items: center;
+  position: relative;
+  overflow: hidden;
+  top: -50px;
+  width: 100%;
+  min-height: 200px;
+  padding: 25px;
+  border-radius: 3px;
+  background: rgb(0, 112, 192);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 }
 
 .card-header h4 {
-	font-weight: 400;
-	color: #fff;
-	margin-bottom: 25px;
-	margin-top: 5px;
+  font-weight: 400;
+  color: #fff;
+  margin-bottom: 25px;
+  margin-top: 5px;
+}
+
+.social-btns {
+  height: 6em;
 }
 
 .social-btns i {
-	font-size: 2.5em;
-	padding: 1em;
-	color: #fff;
+  font-size: 2.5em;
+  padding: 1em;
+  color: #fff;
 }
 
 .tip {
-	margin-top: -20px;
+  margin-top: -20px;
 }
 
 .form-row,
 .card-form,
 .mat-form-field {
-	width: 100%;
+  width: 100%;
 }
 
 .card-form {
-	padding: 5px;
+  padding: 5px;
 }
 
 .form-row {
-	position: relative;
-	display: flex;
-	align-items: center;
-	margin-top: 13px;
+  position: relative;
+  display: flex;
+  align-items: center;
+  margin-top: 13px;
 }
 
 .form-row i {
-	position: relative;
-	top: -5px;
-	margin-right: 15px;
-	color: #555;
+  position: relative;
+  top: -5px;
+  margin-right: 15px;
+  color: #555;
 }
 
 .card-footer {
@@ -156,59 +161,63 @@
 }
 
 .card-footer button {
-	color: #e91e63;
+  color: #e91e63;
 }
 
 .btn span.icon {
-	background: url(img/b2access_small.png) no-repeat;
-	float: left;
-	width: 45px;
-	height: 25px;
+  background: url(img/b2access_small.png) no-repeat;
+  float: left;
+  width: 45px;
+  height: 25px;
 }
 
 span.iconmedium {
-	background: url(img/b2access_medium.png) no-repeat;
-	float: left;
-	width: 100px;
-	height: 56px;
-	margin-left: 2em;
-	margin-right: 2em;
+  background: url(img/b2access_medium.png) no-repeat;
+  float: left;
+  width: 100px;
+  height: 56px;
+  margin-left: 2em;
+  margin-right: 2em;
 }
 
 span.orcidIconMedium {
-	background: url(img/ORCIDiD_medium.png) no-repeat;
-	background-position: center;
-	float: right;
-	width: 100px;
-	height: 56px;
-	margin-left: 2em;
-	margin-right: 2em;
+  background: url(img/ORCIDiD_medium.png) no-repeat;
+  background-position: center;
+  float: right;
+  width: 100px;
+  height: 56px;
+  margin-left: 2em;
+  margin-right: 2em;
 }
 
 .b2access-button {
-	margin-top: 10px;
-	width: fit-content;
+  margin-top: 10px;
+  width: fit-content;
 }
 
 .orcid-button {
-	margin-top: 10px;
-	width: fit-content;
+  margin-top: 10px;
+  width: fit-content;
 }
 
 .login-logo {
-	background: url(img/open-dmp.png) no-repeat;
-	width: 370px;
-	height: 300px;
-	background-size: cover;
-	margin-top: -10em;
+  background: url(img/open-dmp.png) no-repeat;
+  width: 370px;
+  height: 300px;
+  background-size: cover;
+  margin-top: -10em;
 }
 
 .login-bg {
-	background: url(img/login_bg.png) no-repeat;
-	background-size: cover;
+  background: url(img/login_bg.png) no-repeat;
+  background-size: cover;
 }
 
 .login-social-button {
-	width: auto;
-	height: auto;
+  width: auto;
+  height: auto;
+}
+
+.accesss-methods {
+  height: 5em;
 }