fix: layout fixes for entry details (padding, margin, data tables)

kaltura · Nov 7, 2017 · 3fdea43 · 3fdea43
1 parent c10f9cc
commit 3fdea43
Show file tree

Hide file tree

Showing 17 changed files with 41 additions and 27 deletions.
diff --git a/...ations/content-entries-app/entry/entry-access-control/entry-access-control.component.scss b/...ations/content-entries-app/entry/entry-access-control/entry-access-control.component.scss
@@ -1,16 +1,19 @@
 @import 'app-theme/_variables.scss';
 
 .kAccessControl{
+	padding: 8px;
 	padding-left: 12px;
 	width: 100%;
 	.kTitle{
+		padding-left: 16px;
 		color: $kGrayscale1;
 		font-size: 20px;
 		font-weight: 700;
 	}
 	.kAccessControlDetails{
-		padding-left: 12px;
-		padding-right: 12px;
+		box-sizing: border-box;
+		padding-left: 20px;
+		padding-right: 20px;
 		width: 100%;
 		.kRow{
 			display: flex;

diff --git a/src/applications/content-entries-app/entry/entry-captions/entry-captions.component.html b/src/applications/content-entries-app/entry/entry-captions/entry-captions.component.html
@@ -4,7 +4,7 @@
 		<button type="button" class="kButtonDefault" pButton label="{{'applications.content.entryDetails.captions.add' | translate}}" (click)="_addCaption()"></button>
 		<div class="kTable">
 			<p-dataTable [value]="(_widgetService._captions$ | async)?.items" scrollable="true" scrollHeight="100%" [rowStyleClass]="_widgetService._getRowStyle">
-				<p-column field="label" header="{{'applications.content.entryDetails.captions.label' | translate}}">
+				<p-column field="label" header="{{'applications.content.entryDetails.captions.label' | translate}}" [style]="{'padding-left': '24px'}">
 				</p-column>
 				<p-column field="format" header="{{'applications.content.entryDetails.captions.type' | translate}}">
 					<ng-template let-col let-caption="rowData" pTemplate="body">

diff --git a/src/applications/content-entries-app/entry/entry-captions/entry-captions.component.scss b/src/applications/content-entries-app/entry/entry-captions/entry-captions.component.scss
@@ -1,12 +1,13 @@
 @import 'app-theme/_variables.scss';
 
 .kCaptions{
-	padding-left: 12px;
 	button{
 		font-weight: 400;
 		height: 32px;
+		margin-left: 24px;
 	}
 	.kTitle{
+		padding-left: 24px;
 		color: $kGrayscale1;
 		font-size: 20px;
 		font-weight: 700;

diff --git a/src/applications/content-entries-app/entry/entry-clips/entry-clips.component.html b/src/applications/content-entries-app/entry/entry-clips/entry-clips.component.html
@@ -4,7 +4,7 @@
 
 		<div class="kTable">
 			<p-dataTable [value]="(_widgetService.entries$ | async)?.items" scrollable="true" [sortField]="_widgetService.sortBy" [sortOrder]="_convertSortValue(_widgetService.sortAsc)" (onSort)="_onSortChanged($event)">
-				<p-column field="id" header="{{'applications.content.entryDetails.clips.id' | translate}}" [style]="{'width':'90px'}">
+				<p-column field="id" header="{{'applications.content.entryDetails.clips.id' | translate}}" [style]="{'width':'120px','padding-left': '24px'}">
 					<ng-template let-col let-entry="rowData" pTemplate="body">
 						<a (click)="_widgetService.navigateToEntry(entry.id)">{{entry.id}}</a>
 					</ng-template>

diff --git a/src/applications/content-entries-app/entry/entry-clips/entry-clips.component.scss b/src/applications/content-entries-app/entry/entry-clips/entry-clips.component.scss
@@ -1,13 +1,16 @@
 @import 'app-theme/_variables.scss';
 
 .kClips{
-	padding-left: 12px;
 	.kTitle{
 		color: $kGrayscale1;
 		font-size: 20px;
 		font-weight: 700;
+		padding-left: 24px;
 	}
 	.kTable{
 		margin-top: 24px;
 	}
 }
+:host /deep/ .ui-paginator {
+	padding-right: 12px;
+}
diff --git a/src/applications/content-entries-app/entry/entry-flavours/entry-flavours.component.html b/src/applications/content-entries-app/entry/entry-flavours/entry-flavours.component.html
@@ -12,7 +12,7 @@
 
 		<div class="kTable">
 			<p-dataTable [value]="(_widgetService._flavors$ | async)?.items" scrollable="true" scrollHeight="100%">
-				<p-column field="name" header="{{'applications.content.entryDetails.flavours.flavour' | translate}}" [style]="{'width':'120px'}">
+				<p-column field="name" header="{{'applications.content.entryDetails.flavours.flavour' | translate}}" [style]="{'width':'144px', 'padding-left': '24px'}">
 					<ng-template let-col let-flavor="rowData" pTemplate="body">
 						<span class="kFlavorName" [class.kConvertedFlavor]="flavor.status === '2'">{{flavor.name}}</span>
 					</ng-template>

diff --git a/src/applications/content-entries-app/entry/entry-flavours/entry-flavours.component.scss b/src/applications/content-entries-app/entry/entry-flavours/entry-flavours.component.scss
@@ -2,7 +2,6 @@
 
 
 .kFlavours{
-	padding-left: 12px;
 	width: 100%;
 	height: 100%;
 	display: flex;
@@ -12,11 +11,13 @@
 		height: 32px;
 	}
 	.kTitle{
+		padding-left: 24px;
 		color: $kGrayscale1;
 		font-size: 20px;
 		font-weight: 700;
 	}
 	.kEntryStatus{
+		padding-left: 24px;
 		margin-top: 12px;
 		margin-bottom: 24px;
 		span{

diff --git a/src/applications/content-entries-app/entry/entry-metadata/entry-metadata.component.scss b/src/applications/content-entries-app/entry/entry-metadata/entry-metadata.component.scss
@@ -5,7 +5,8 @@ hr{
 }
 .jumpTo{
 	position: absolute;
-	right: 0px;
+	right: 8px;
+	top: 8px;
 	button{
 		font-weight: 400;
 		height: 34px;
@@ -19,14 +20,15 @@ hr{
 	}
 }
 .kMetadataDetails{
-	padding-left: 12px;
-	padding-right: 130px;
-	padding-top: 18px;
+	padding-bottom: 8px;
+	padding-left: 24px;
+	padding-right: 138px;
+	padding-top: 30px;
 	width: 100%;
 
 	.kSchemaTitle{
 		color: $kGrayscale1;
-		font-size: 18px;
+		font-size: 20px;
 		font-weight: 700;
 		padding-top: 30px;
 		padding-bottom: 12px;

diff --git a/src/applications/content-entries-app/entry/entry-metadata/entry-metadata.component.ts b/src/applications/content-entries-app/entry/entry-metadata/entry-metadata.component.ts
@@ -180,7 +180,7 @@ export class EntryMetadata implements AfterViewInit, OnInit, OnDestroy {
         let pageScrollInstance: PageScrollInstance = PageScrollInstance.newInstance({
          document : this.document,
             scrollTarget : element,
-            pageScrollOffset: 130
+            pageScrollOffset: 105
         });
         this._pageScrollService.start(pageScrollInstance);
     }

diff --git a/src/applications/content-entries-app/entry/entry-related/entry-related.component.html b/src/applications/content-entries-app/entry/entry-related/entry-related.component.html
@@ -5,7 +5,7 @@
 		<button type="button" class="kButtonDefault" (click)="fileDialog.open($event)" pButton label="{{'applications.content.entryDetails.related.add' | translate}}"></button>
 		<div class="kTable">
 			<p-dataTable [value]="(_widgetService._relatedFiles$ | async)?.items" scrollable="true" scrollHeight="100%" [rowStyleClass]="_relatedTableRowStyle" >
-				<p-column field="filename" header="{{'applications.content.entryDetails.related.name' | translate}}">
+				<p-column field="filename" header="{{'applications.content.entryDetails.related.name' | translate}}" [style]="{'padding-left': '24px'}">
 				</p-column>
 				<p-column header="{{'applications.content.entryDetails.related.type' | translate}}" [style]="{'width':'140px', 'overflow':'visible'}">
 					<ng-template let-col let-file="rowData" pTemplate="body">

diff --git a/src/applications/content-entries-app/entry/entry-related/entry-related.component.scss b/src/applications/content-entries-app/entry/entry-related/entry-related.component.scss
@@ -1,18 +1,18 @@
 @import 'app-theme/_variables.scss';
 
 .kRelated{
-	padding-left: 12px;
 	position: relative;
 	height: 100%;
-  	margin: 12px;
 	button{
 		font-weight: 400;
 		height: 32px;
+		margin-left: 24px;
 	}
 	.kTitle{
 		color: $kGrayscale1;
 		font-size: 20px;
 		font-weight: 700;
+		padding-left: 24px;
 	}
 	.kTable{
 		margin-top: 24px;

diff --git a/src/applications/content-entries-app/entry/entry-scheduling/entry-scheduling.component.scss b/src/applications/content-entries-app/entry/entry-scheduling/entry-scheduling.component.scss
@@ -1,7 +1,7 @@
 @import 'app-theme/_variables.scss';
 
 .kScheduling{
-	padding-left: 12px;
+	padding: 20px;
 	p{
 		height: 30px;
 	}

diff --git a/src/applications/content-entries-app/entry/entry-thumbnails/entry-thumbnails.component.html b/src/applications/content-entries-app/entry/entry-thumbnails/entry-thumbnails.component.html
@@ -1,11 +1,13 @@
 <k-area-blocker [showLoader]="_widgetService.showSectionLoader" [message]="_widgetService.sectionBlockerMessage">
 	<kFileDialog #fileDialog [filter]="'image/*'" (onFileSelected)="_widgetService._onFileSelected($event)"></kFileDialog>
 	<div class="kThumbnails" #thumbnails>
-		<p class="kTitle">{{'applications.content.entryDetails.thumbnails.thumbnails' | translate}}</p>
-		<p><button pButton class="kButtonDefault" (click)="fileDialog.open($event)" icon="kIconupload" label="{{'applications.content.entryDetails.thumbnails.upload' | translate}}"></button></p>
+		<div class="kHeader">
+			<p class="kTitle">{{'applications.content.entryDetails.thumbnails.thumbnails' | translate}}</p>
+			<p><button pButton class="kButtonDefault" (click)="fileDialog.open($event)" icon="kIconupload" label="{{'applications.content.entryDetails.thumbnails.upload' | translate}}"></button></p>
+		</div>
 		<div class="kTable">
 			<p-dataTable [value]="(_widgetService._thumbnails$ | async)?.items" scrollable="true" scrollHeight="100%" [rowStyleClass]="_widgetService._getRowStyle" sortField="width" [sortOrder]="-1">
-				<p-column field="url" header="{{'applications.content.entryDetails.thumbnails.thumbnail' | translate}}" [style]="{'width':'100px'}">
+				<p-column field="url" header="{{'applications.content.entryDetails.thumbnails.thumbnail' | translate}}" [style]="{'width':'124px', 'padding-left': '24px'}">
 					<ng-template let-col let-thumb="rowData" pTemplate="body">
 						<div class="kThumbnailHolder"><img src="{{thumb[col.field]}}" onError="this.onerror=null;this.style.display='none'"></div>
 					</ng-template>

diff --git a/src/applications/content-entries-app/entry/entry-thumbnails/entry-thumbnails.component.scss b/src/applications/content-entries-app/entry/entry-thumbnails/entry-thumbnails.component.scss
@@ -1,7 +1,9 @@
 @import 'app-theme/_variables.scss';
 
 .kThumbnails{
-	padding-left: 12px;
+	.kHeader{
+		padding-left: 24px;
+	}
 	.kTitle{
 		color: $kGrayscale1;
 		font-size: 20px;

diff --git a/src/applications/content-entries-app/entry/entry-users/entry-users.component.scss b/src/applications/content-entries-app/entry/entry-users/entry-users.component.scss
@@ -5,8 +5,8 @@ form{
 }
 
 .kUsers {
-	padding-left: 12px;
-	padding-right: 12px;
+	padding-left: 24px;
+	padding-right: 24px;
 	width: 100%;
 	box-sizing: border-box;
 	.kTitle {

diff --git a/src/shared/content-shared/scheduling/scheduling.component.scss b/src/shared/content-shared/scheduling/scheduling.component.scss
@@ -1,5 +1,6 @@
 .kScheduling {
-  padding-left: 12px;
+  padding-left: 30px;
+  padding-top: 6px;
   p {
     line-height: 30px;
     padding-left: 0px;

diff --git a/src/styles/app-theme/styles.scss b/src/styles/app-theme/styles.scss
@@ -175,11 +175,10 @@ $spinner-colors: rgb(218, 31, 38), rgb(6, 168, 133), rgb(0, 147, 68), rgb(248, 1
         width: 100%;
         height: 100%;
         background-color: #ffffff;
-        border: 1px solid #ffffff;
+        border: 0px solid #ffffff;
         border-radius: 3px;
         flex: 1 1 auto;
         margin-left: 28px;
-        padding: 8px;
       }
     }
   }