From e387ed152c0c1dba2b4aeab9f573ae97b83d4ccf Mon Sep 17 00:00:00 2001
From: apapachristou <apapachristou@cite.gr>
Date: Wed, 8 May 2019 16:29:52 +0300
Subject: [PATCH] Css merge files, dataset listing fixing style

---
 .../listing/dataset-listing.component.html    |   4 +-
 .../listing/dataset-listing.component.scss    |  57 +++----
 .../dataset-listing-item.component.html       |  15 +-
 .../dataset-listing-item.component.scss       |  36 ----
 .../ui/dmp/listing/dmp-listing.component.html |   7 +-
 .../ui/dmp/listing/dmp-listing.component.scss |  74 ++++-----
 .../dmp-listing-item.component.html           |  16 +-
 .../dmp-listing-item.component.scss           |  42 -----
 dmp-frontend/src/styles.scss                  | 154 +++++++++++++++++-
 9 files changed, 229 insertions(+), 176 deletions(-)

diff --git a/dmp-frontend/src/app/ui/dataset/listing/dataset-listing.component.html b/dmp-frontend/src/app/ui/dataset/listing/dataset-listing.component.html
index ebe4b05fd..7dae39185 100644
--- a/dmp-frontend/src/app/ui/dataset/listing/dataset-listing.component.html
+++ b/dmp-frontend/src/app/ui/dataset/listing/dataset-listing.component.html
@@ -13,7 +13,7 @@
 				</div>
 			</div>
 			<div class="card-body table-responsive">
-				<div class="dmp-listing row">
+				<div class="listing row">
 					<div class="col-3">
 						<app-dataset-criteria-component></app-dataset-criteria-component>
 					</div>
@@ -28,4 +28,4 @@
 			</div>
 		</div>
 	</div>
-</div>
\ No newline at end of file
+</div>
diff --git a/dmp-frontend/src/app/ui/dataset/listing/dataset-listing.component.scss b/dmp-frontend/src/app/ui/dataset/listing/dataset-listing.component.scss
index 5617efa83..4ab0480b4 100644
--- a/dmp-frontend/src/app/ui/dataset/listing/dataset-listing.component.scss
+++ b/dmp-frontend/src/app/ui/dataset/listing/dataset-listing.component.scss
@@ -1,43 +1,36 @@
-@import "../../dmp/listing/dmp-listing.component.scss";
+// .mat-table {
+//   margin: 24px;
+// }
 
-.mat-table {
-  margin: 24px;
-}
+// .mat-fab-bottom-right {
+//   float: right;
+//   z-index: 5;
+// }
 
-.mat-fab-bottom-right {
-  // top: auto !important;
-  // right: 20px !important;
-  // bottom: 10px !important;
-  // left: auto !important;
-  // position: fixed !important;
-  float: right;
-  z-index: 5;
-}
+// .full-width {
+//   width: 100%;
+// }
 
-.full-width {
-  width: 100%;
-}
+// .mat-card {
+//   margin: 16px 0;
+// }
 
-.mat-card {
-  margin: 16px 0;
-}
+// .mat-row {
+//   cursor: pointer;
+// }
 
-.mat-row {
-  cursor: pointer;
-}
-
-mat-row:hover {
-  background-color: lightgray;
-}
+// mat-row:hover {
+//   background-color: lightgray;
+// }
 
 // mat-row:nth-child(even){
 //     background-color:red;
 //     }
 
-mat-row:nth-child(odd) {
-  background-color: #eef0fb;
-}
+// mat-row:nth-child(odd) {
+//   background-color: #eef0fb;
+// }
 
-h3 {
-  margin-top: 0px;
-}
+// h3 {
+//   margin-top: 0px;
+// }
diff --git a/dmp-frontend/src/app/ui/dataset/listing/listing-item/dataset-listing-item.component.html b/dmp-frontend/src/app/ui/dataset/listing/listing-item/dataset-listing-item.component.html
index ee1329651..8da3e109c 100644
--- a/dmp-frontend/src/app/ui/dataset/listing/listing-item/dataset-listing-item.component.html
+++ b/dmp-frontend/src/app/ui/dataset/listing/listing-item/dataset-listing-item.component.html
@@ -1,19 +1,22 @@
-<div class="dataset-listing-item row" (click)="itemClicked()">
+<div class="listing-item row" (click)="itemClicked()">
 	<div class="col-auto">
 		<mat-icon *ngIf="draft" class="draft-bookmark">bookmark</mat-icon>
 		<mat-icon *ngIf="!draft" class="finalized-bookmark">bookmark</mat-icon>
 	</div>
 	<div class="col">
-		<h4>{{ dataset.label }}</h4>
+		<h4 *ngIf="draft"><span>DRAFT:</span> {{ dataset.label }}</h4>
+		<h4 *ngIf="!draft">{{ dataset.label }}</h4>
 		<p>{{ dataset.description }}</p>
-		<div class="dataset-info">
+		<div class="info">
 			<h6>{{ dataset.dmp }}</h6>
 			<p>{{ dataset.project }}</p>
 		</div>
-		<div class="template-name"><p>{{ dataset.profile }}</p></div>
+		<div class="row" style="margin-left: 0px !important">
+			<div class="chip"><p>{{ dataset.profile }}</p></div>
+		</div>
 	</div>
 	<!-- <div class="col-auto">
-		<mat-icon>more_horiz</mat-icon>
-	</div> -->
+			<mat-icon>more_horiz</mat-icon>
+		</div> -->
 </div>
 <mat-divider *ngIf="showDivider"></mat-divider>
diff --git a/dmp-frontend/src/app/ui/dataset/listing/listing-item/dataset-listing-item.component.scss b/dmp-frontend/src/app/ui/dataset/listing/listing-item/dataset-listing-item.component.scss
index f765f9c59..e69de29bb 100644
--- a/dmp-frontend/src/app/ui/dataset/listing/listing-item/dataset-listing-item.component.scss
+++ b/dmp-frontend/src/app/ui/dataset/listing/listing-item/dataset-listing-item.component.scss
@@ -1,36 +0,0 @@
-@import "../../../dmp/listing/listing-item/dmp-listing-item.component.scss";
-
-.dataset-info {
-  background-color: #f6f6f6;
-  padding: 8px 15px;
-}
-
-.dataset-info p {
-  margin-bottom: 0px;
-  color: rgb(37, 35, 140);
-  font-weight: 600;
-}
-
-.template-name {
-  padding-left: 0px;
-  border: 1px solid rgb(218, 227, 243);
-  color: rgb(43, 104, 209);
-  background-color: rgb(236, 241, 249);
-  border-radius: 10em;
-  justify-content: center;
-  text-transform: uppercase;
-  display: flex;
-  width: 25em;
-  height: 1.8em;
-  margin-top: 15px;
-  font-size: 13px;
-  font-weight: 500;
-}
-
-.draft-bookmark {
-  color: #e7e6e6;
-}
-
-.finalized-bookmark {
-  color: #92d050;
-}
diff --git a/dmp-frontend/src/app/ui/dmp/listing/dmp-listing.component.html b/dmp-frontend/src/app/ui/dmp/listing/dmp-listing.component.html
index bbcdcf058..917c63a33 100644
--- a/dmp-frontend/src/app/ui/dmp/listing/dmp-listing.component.html
+++ b/dmp-frontend/src/app/ui/dmp/listing/dmp-listing.component.html
@@ -13,14 +13,13 @@
 				</div>
 			</div>
 			<div class="card-body table-responsive">
-				<div class="dmp-listing row">
+				<div class="listing row">
 					<div class="col-3">
 						<app-dmp-criteria-component [showProject]="showProject" class="col-auto"></app-dmp-criteria-component>
 					</div>
 					<div class="col-9">
-						<div class="row" *ngFor="let item of listingItems; let last = last">
-							<app-dmp-listing-item-component *ngIf="!last" class="col-12" [dmp]="item" (onClick)="rowClicked($event)"></app-dmp-listing-item-component>
-							<app-dmp-listing-item-component *ngIf="last" class="col-12" [showDivider]="false" [dmp]="item" (onClick)="rowClicked($event)"></app-dmp-listing-item-component>
+						<div class="row" *ngFor="let item of listingItems; let i = index">
+							<app-dmp-listing-item-component class="col-12" [showDivider]="i != (listingItems.length - 1)" [dmp]="item" (onClick)="rowClicked($event)"></app-dmp-listing-item-component>
 						</div>
 						<mat-paginator #paginator [length]="totalCount" [pageSizeOptions]="[10, 25, 100]"></mat-paginator>
 					</div>
diff --git a/dmp-frontend/src/app/ui/dmp/listing/dmp-listing.component.scss b/dmp-frontend/src/app/ui/dmp/listing/dmp-listing.component.scss
index 2b06d6aac..f03235e1a 100644
--- a/dmp-frontend/src/app/ui/dmp/listing/dmp-listing.component.scss
+++ b/dmp-frontend/src/app/ui/dmp/listing/dmp-listing.component.scss
@@ -1,45 +1,45 @@
-.dmp-listing {
-  .mat-card {
-    margin: 1em 0;
-  }
+// .listing {
+//   .mat-card {
+//     margin: 1em 0;
+//   }
 
-  .col-9 {
-	display: flex;
-	flex-direction: column;
-  }
-}
+//   .col-9 {
+// 	display: flex;
+// 	flex-direction: column;
+//   }
+// }
 
-::ng-deep .mat-paginator {
-  margin-top: auto;
-}
+// ::ng-deep .mat-paginator {
+//   margin-top: auto;
+// }
 
-::ng-deep .mat-paginator-container {
-  flex-direction: row-reverse !important;
-  justify-content: space-between !important;
-  background-color: #f6f6f6;
-  height: 30px;
-  min-height: 30px !important;
-}
+// ::ng-deep .mat-paginator-container {
+//   flex-direction: row-reverse !important;
+//   justify-content: space-between !important;
+//   background-color: #f6f6f6;
+//   height: 30px;
+//   min-height: 30px !important;
+// }
 
-::ng-deep .mat-paginator-page-size {
-  height: 43px;
-}
+// ::ng-deep .mat-paginator-page-size {
+//   height: 43px;
+// }
 
-::ng-deep .mat-icon-button {
-  height: 30px !important;
-  font-size: 12px !important;
-}
+// ::ng-deep .mat-icon-button {
+//   height: 30px !important;
+//   font-size: 12px !important;
+// }
 
-::ng-deep .mat-paginator-range-label {
-  margin: 15px 32px 0 24px !important;
-}
+// ::ng-deep .mat-paginator-range-label {
+//   margin: 15px 32px 0 24px !important;
+// }
 
-::ng-deep .mat-paginator-range-actions {
-  width: 55% !important;
-  min-height: 43px !important;
-  justify-content: space-between;
-}
+// ::ng-deep .mat-paginator-range-actions {
+//   width: 55% !important;
+//   min-height: 43px !important;
+//   justify-content: space-between;
+// }
 
-::ng-deep .mat-paginator-navigation-previous {
-  margin-left: auto !important;
-}
+// ::ng-deep .mat-paginator-navigation-previous {
+//   margin-left: auto !important;
+// }
diff --git a/dmp-frontend/src/app/ui/dmp/listing/listing-item/dmp-listing-item.component.html b/dmp-frontend/src/app/ui/dmp/listing/listing-item/dmp-listing-item.component.html
index e4910718e..f8aabc150 100644
--- a/dmp-frontend/src/app/ui/dmp/listing/listing-item/dmp-listing-item.component.html
+++ b/dmp-frontend/src/app/ui/dmp/listing/listing-item/dmp-listing-item.component.html
@@ -1,4 +1,4 @@
-<div class="dmp-listing-item row">
+<div class="listing-item row">
 	<div class="col-auto">
 		<mat-icon>lock</mat-icon>
 	</div>
@@ -11,7 +11,7 @@
 			<mat-icon class="col-auto type-icon">storage</mat-icon>
 			<h4 class="col-auto m-2 p-1">{{dmp.associatedProfiles.length}}</h4>
 			<div class="row" *ngFor="let profile of dmp.associatedProfiles">
-				<div class="col-auto dmp-chip ml-3 mr-5">{{profile.label}}</div>
+				<div class="col-auto chip ml-3 mr-5">{{profile.label}}</div>
 			</div>
 		</div>
 		<div class="row d-flex align-items-center my-1">
@@ -20,12 +20,12 @@
 		</div>
 		<div class="row d-flex align-items-center my-1">
 			<mat-icon class="col-auto type-icon">group</mat-icon>
-			<div class="col-auto dmp-squared-chip mr-2">JOHN DOE</div>
-			<div class="col-auto dmp-squared-chip mr-2">JOHN DOE</div>
-			<div class="col-auto dmp-squared-chip mr-2">JOHN DOE</div>
-			<div class="col-auto dmp-squared-chip mr-2">JOHN DOE</div>
-			<div class="col-auto dmp-squared-chip mr-2">JOHN DOE</div>
-			<div class="col-auto dmp-squared-chip mr-2">JOHN DOE</div>
+			<div class="col-auto squared-chip mr-2">JOHN DOE</div>
+			<div class="col-auto squared-chip mr-2">JOHN DOE</div>
+			<div class="col-auto squared-chip mr-2">JOHN DOE</div>
+			<div class="col-auto squared-chip mr-2">JOHN DOE</div>
+			<div class="col-auto squared-chip mr-2">JOHN DOE</div>
+			<div class="col-auto squared-chip mr-2">JOHN DOE</div>
 		</div>
 	</div>
 	<div class="col-auto">
diff --git a/dmp-frontend/src/app/ui/dmp/listing/listing-item/dmp-listing-item.component.scss b/dmp-frontend/src/app/ui/dmp/listing/listing-item/dmp-listing-item.component.scss
index 3982eaa82..e69de29bb 100644
--- a/dmp-frontend/src/app/ui/dmp/listing/listing-item/dmp-listing-item.component.scss
+++ b/dmp-frontend/src/app/ui/dmp/listing/listing-item/dmp-listing-item.component.scss
@@ -1,42 +0,0 @@
-.dmp-listing-item {
-	margin-top: 2em;
-	margin-bottom: 2em;
-	cursor: pointer;
-
-	.title {
-		color: black;
-	}
-
-	.project-title {
-		color: rgb(93, 125, 173);
-	}
-
-	.type-icon {
-		color: rgb(191, 191, 191);
-	}
-
-	.dmp-chip {
-		padding: 0.1em 1em;
-		border: 0.1em solid rgb(236, 241, 249);
-		border-radius: 10em;
-		background-color: rgb(236, 241, 249);
-		color: rgb(68, 114, 196);
-	}
-
-	.dmp-squared-chip {
-		padding: 0.1em 1em;
-		border: 0.1em solid rgb(236, 241, 249);
-		border-radius: 0.5em;
-		background-color: rgb(246, 246, 246);
-		color: rgb(127, 127, 127);
-	}
-
-	mat-icon {
-		width: auto;
-		height: auto;
-	}
-
-	.mr-5 {
-		margin-right: 2rem !important;
-	}
-}
diff --git a/dmp-frontend/src/styles.scss b/dmp-frontend/src/styles.scss
index 042d4af51..93b5a3bb8 100644
--- a/dmp-frontend/src/styles.scss
+++ b/dmp-frontend/src/styles.scss
@@ -4,28 +4,164 @@
 //Material-Bootstrap configuration
 @import "assets/scss/bootstrap-material";
 
-@import '~@angular/material/theming';
-@import '~@covalent/core/theming/all-theme';
+@import "~@angular/material/theming";
+@import "~@covalent/core/theming/all-theme";
 @include mat-core();
 // Define a theme.
 $primary: mat-palette($mat-indigo);
-$accent : mat-palette($mat-pink, A200, A100, A400);
+$accent: mat-palette($mat-pink, A200, A100, A400);
 $theme: mat-light-theme($primary, $accent);
 // Include all theme styles for the components.
 @include angular-material-theme($theme);
 // @include covalent-theme($theme);
 
 .snackbar-warning {
-	background-color: #F39010;
-	color: #F3EFEF;
+  background-color: #f39010;
+  color: #f3efef;
 }
 
 .snackbar-success {
-	background-color: #109204;
-	color: #F3EFEF;
+  background-color: #109204;
+  color: #f3efef;
 }
 
 .snackbar-error {
-	background-color: #CF1407;
-	color: #111010;
+  background-color: #cf1407;
+  color: #111010;
+}
+
+.listing-item {
+  margin-top: 2em;
+  margin-bottom: 2em;
+  cursor: pointer;
+
+  .title {
+    color: black;
+  }
+
+  .project-title {
+    color: rgb(93, 125, 173);
+  }
+
+  .type-icon {
+    color: rgb(191, 191, 191);
+  }
+
+  .chip {
+	padding: 0.1em 1em;
+    border: 0.1em solid rgb(218, 227, 243);
+    border-radius: 10em;
+    background-color: rgb(236, 241, 249);
+	color: rgb(68, 114, 196);
+	text-transform: uppercase;
+	font-weight: 500;
+  }
+
+  .squared-chip {
+    padding: 0.1em 1em;
+    border: 0.1em solid rgb(236, 241, 249);
+    border-radius: 0.5em;
+    background-color: rgb(246, 246, 246);
+    color: rgb(127, 127, 127);
+  }
+
+  mat-icon {
+    width: auto;
+    height: auto;
+  }
+
+  .mr-5 {
+    margin-right: 2rem !important;
+  }
+
+  .info {
+    background-color: #f6f6f6;
+	padding: 8px 15px;
+	margin-bottom: 15px;
+  }
+
+  .info p {
+    margin-bottom: 0px;
+    color: rgb(37, 35, 140);
+    font-weight: 600;
+  }
+
+  .chip p {
+    margin-bottom: 0px;
+  }
+
+//   .template-name {
+//     padding-left: 0px;
+//     border: 1px solid rgb(218, 227, 243);
+//     color: rgb(43, 104, 209);
+//     background-color: rgb(236, 241, 249);
+//     border-radius: 10em;
+//     justify-content: center;
+//     text-transform: uppercase;
+//     display: flex;
+//     width: 25em;
+//     height: 1.8em;
+//     margin-top: 15px;
+//     font-size: 13px;
+//     font-weight: 500;
+//   }
+
+  .draft-bookmark {
+    color: #e7e6e6;
+  }
+
+  .finalized-bookmark {
+    color: #92d050;
+  }
+
+  h4 span {
+    color: #0070c0;
+    font-weight: 600;
+  }
+}
+
+.listing {
+  .mat-card {
+    margin: 1em 0;
+  }
+
+  .col-9 {
+    display: flex;
+    flex-direction: column;
+  }
+
+  ::ng-deep .mat-paginator {
+    margin-top: auto;
+  }
+
+  ::ng-deep .mat-paginator-container {
+    flex-direction: row-reverse !important;
+    justify-content: space-between !important;
+    background-color: #f6f6f6;
+    height: 30px;
+    min-height: 30px !important;
+  }
+
+  ::ng-deep .mat-paginator-page-size {
+    height: 43px;
+  }
+
+  ::ng-deep .mat-icon-button {
+    height: 30px !important;
+    font-size: 12px !important;
+  }
+
+  ::ng-deep .mat-paginator-range-label {
+    margin: 15px 32px 0 24px !important;
+  }
+
+  ::ng-deep .mat-paginator-range-actions {
+    width: 55% !important;
+    min-height: 43px !important;
+    justify-content: space-between;
+  }
+
+  ::ng-deep .mat-paginator-navigation-previous {
+    margin-left: auto !important;
+  }
 }