[DEV] better display

front/src/app/app.component.less

@@ -22,6 +22,7 @@
 
 .main-content {
 	position: absolute;
+	//width: ~"calc(calc(100% / 5 ) * 5)";
 	width: 100%;
 	height: ~"calc(100% - 56px)";
 	top: 56px;
@@ -32,12 +33,14 @@
 	position: fixed;
 	overflow-y: auto;
 	//background-color:#FF0;
+	/*
 	.main-reduce {
-		width: 80%;
+		width: 40%;
 		height: 100%;
 		margin: 0;
 		padding: 0px 10% 0px 10%;
 		display: block;
 		overflow-y:scroll;
 	}
+	*/
 }

front/src/app/component/element-group/element-group.component.html

@@ -3,11 +3,16 @@
 		<div *ngIf="cover">
 			<img src="{{cover}}"/>
 		</div>
+		<div *ngIf="!cover" class="noImage">
+			
+		</div>
 	</div>
 	<div class="title">
 		{{name}}
 	</div>
+	<!--
 	<div class="description" *ngIf="description">
-		{{description}}rt
+		{{description}}
 	</div>
+	-->
 </div>

front/src/app/component/element-group/element-group.component.less

@@ -1,21 +1,34 @@
 
 .imgContainer {
 	text-align: center;
-	width: 80%;
+	width: 200px;
 	margin: 0 auto;
-	height: 180px;
+	height: 250px;
 	img {
 		//width: 100%;
-		max-height: 180px;
+		max-height: 250px;
+		max-width: 200px;
+	}
+	.noImage {
+		height: 245px;
+		width: 195px;
+		//box-shadow: 0px 2px 4px 0 rgba(0, 0, 0, 0.7);
+		border: solid 1px;
+		border-color: rgba(0, 0, 0, 0.7);
+		margin: auto;
 	}
 }
 
-
 .title {
-	height: 60px;
+	height: 40px;
-	font-size: 24px;
+	width: 200px;
+	font-size: 17px;
 	overflow:hidden;
-	vertical-align: middle;
+	display:inline-block;
+	text-align: center;
+	padding:auto;
+	background: rgba(256, 256, 256, 0.3);
+	border-radius: 7px;
 }
 
 .description {

front/src/app/component/element-saison/element-saison.component.html

@@ -3,6 +3,9 @@
 	<div *ngIf="cover">
 		<img src="{{cover}}"/>
 	</div>
+		<div *ngIf="!cover" class="noImage">
+			
+		</div>
 </div>
 <div class="saison">
 	Saison {{numberSaison}}

front/src/app/component/element-saison/element-saison.component.less

@@ -1,18 +1,39 @@
 
 .imgContainer {
 	text-align: center;
-	width: 80%;
+	width: 200px;
 	margin: 0 auto;
-	height: 180px;
+	height: 250px;
 	img {
 		//width: 100%;
-		max-height: 180px;
+		max-height: 250px;
+		max-width: 200px;
+	}
+	.noImage {
+		height: 245px;
+		width: 195px;
+		//box-shadow: 0px 2px 4px 0 rgba(0, 0, 0, 0.7);
+		border: solid 1px;
+		border-color: rgba(0, 0, 0, 0.7);
+		margin: auto;
 	}
 }
 
-.saison {
+.title {
-	height: 60px;
+	height: 40px;
-	font-size: 24px;
+	width: 200px;
+	font-size: 17px;
+	overflow:hidden;
+	display:inline-block;
+	text-align: center;
+	padding:auto;
+	background: rgba(256, 256, 256, 0.3);
+	border-radius: 7px;
+}
+
+.description {
+	height: 30px;
+	font-size: 12px;
 	overflow:hidden;
 	vertical-align: middle;
-}
+}

front/src/app/component/element-video/element-video.component.html

@@ -3,14 +3,16 @@
 		<div *ngIf="cover">
 			<img src="{{cover}}"/>
 		</div>
-	</div>
+		<div *ngIf="!cover" class="noImage">
-	<div *ngIf="episode" class="description">
+			
-		{{episode}}
+		</div>
 	</div>
 	<div class="title">
-		{{name}}
+		{{episode_display}} {{name}}
 	</div>
+	<!--
 	<div class="description" *ngIf="description">
 		{{description}}
 	</div>
+	-->
 </div>

front/src/app/component/element-video/element-video.component.less

@@ -1,20 +1,34 @@
 
 .imgContainer {
 	text-align: center;
-	width: 80%;
+	width: 200px;
 	margin: 0 auto;
-	height: 180px;
+	height: 250px;
 	img {
 		//width: 100%;
-		max-height: 180px;
+		max-height: 250px;
+		max-width: 200px;
+	}
+	.noImage {
+		height: 245px;
+		width: 195px;
+		//box-shadow: 0px 2px 4px 0 rgba(0, 0, 0, 0.7);
+		border: solid 1px;
+		border-color: rgba(0, 0, 0, 0.7);
+		margin: auto;
 	}
 }
 
 .title {
-	height: 60px;
+	height: 40px;
-	font-size: 24px;
+	width: 200px;
+	font-size: 17px;
 	overflow:hidden;
-	vertical-align: middle;
+	display:inline-block;
+	text-align: center;
+	padding:auto;
+	background: rgba(256, 256, 256, 0.3);
+	border-radius: 7px;
 }
 
 .description {

front/src/app/component/element-video/element-video.component.ts

@@ -38,6 +38,7 @@ export class ElementVideoComponent implements OnInit {
 	video_source:string = "";
 	video_enable:boolean = false;
 	imageSource:string = null;
+	episode_display:string = "";
 	
 	cover:string = "";
 	covers:Array<string> = [];
@@ -47,6 +48,10 @@ export class ElementVideoComponent implements OnInit {
 	            private httpService: HttpWrapperService) {
 		
 	}
+	OnDestroy() {
+		this.video_source = "";
+		this.video_enable = false;
+	}
 	ngOnInit() {
 		this.name = "ll " +  this.id_video
 		let self = this;
@@ -58,6 +63,11 @@ export class ElementVideoComponent implements OnInit {
 				self.name = response.name;
 				self.description = response.description;
 				self.episode = response.episode;
+				if (response.episode === undefined || response.episode === null || response.episode == '') {
+					self.episode_display = "";
+				} else {
+					self.episode_display = response.episode + " - ";
+				}
 				self.group_id = response.group_id;
 				self.saison_id = response.saison_id;
 				self.data_id = response.data_id;
@@ -86,6 +96,7 @@ export class ElementVideoComponent implements OnInit {
 				self.name = "";
 				self.description = "";
 				self.episode = undefined;
+				self.episode_display = "";
 				self.group_id = undefined;
 				self.saison_id = undefined;
 				self.data_id = -1;

front/src/app/scene/group/group.component.less

@@ -1,51 +1,27 @@
-.fill-all{
-	width:100%;
-	height:100%;
-	margin:0;
-	padding:0;
-	border:0;
-	background-color:#0F0;
-}
-
 .item {
-	background-color: rgba(200, 200, 200, 0.5);
 	font-size: 20px;
-	height: 21%;
+	padding: 1px;
-	width: 23%;
+	height: 290px;
-	margin: 1%;
+	width: 200px;
+	margin: 5px;
 	padding: 0;
 	overflow: hidden;
-	//box-shadow: 0 1px 1.5px 0 rgba(0,0,0,.12),0 1px 1px 0 rgba(0,0,0,.24);
-	box-shadow: 0px 2px 4px 0 rgba(0, 0, 0, 0.6);
 	line-height: normal;
 	border: none;
 	font-family: "Roboto","Helvetica","Arial",sans-serif;
 	font-weight: 500;
-	text-transform: uppercase;
-	letter-spacing: 0;
 	will-change: box-shadow;
 	outline: none;
 	cursor: pointer;
-	text-decoration: none;
-	text-align: center;
-	vertical-align: middle;
 	transition-duration: 0.4s;
 	float:left;
 	display:block;
-	
-	h1 {
-		font-size: 24px;
-	}
-	
 	&:hover {
-		background-color: rgba(200, 200, 200, 1);
+		box-shadow: 2px 2px 4px 3px rgba(0, 0, 0, 0.7);
-		//box-shadow: 0px 2px 4px 0 rgba(255, 0, 0, 0.6);
 	}
-	
 	.material-icons {
 		vertical-align: middle;
 	}
-	
 	.material-icons {
 		position: absolute;
 		top: 50%;
@@ -54,11 +30,4 @@
 		line-height: 24px;
 		width: 24px;
 	}
-}
+}
-
-.item-video {
-	&:hover {
-		background-color: #0F0;
-	}
-}
-

front/src/app/scene/saison/saison.component.less

@@ -1,50 +1,27 @@
-.fill-all{
-	width:100%;
-	height:100%;
-	margin:0;
-	padding:0;
-	border:0;
-	background-color:#0F0;
-}
-
 .item {
-	background-color: rgba(200, 200, 200, 0.5);
 	font-size: 20px;
-	height: 21%;
+	padding: 1px;
-	width: 23%;
+	height: 290px;
-	margin: 1%;
+	width: 200px;
+	margin: 5px;
 	padding: 0;
 	overflow: hidden;
-	//box-shadow: 0 1px 1.5px 0 rgba(0,0,0,.12),0 1px 1px 0 rgba(0,0,0,.24);
-	box-shadow: 0px 2px 4px 0 rgba(0, 0, 0, 0.6);
 	line-height: normal;
 	border: none;
 	font-family: "Roboto","Helvetica","Arial",sans-serif;
 	font-weight: 500;
-	text-transform: uppercase;
-	letter-spacing: 0;
 	will-change: box-shadow;
 	outline: none;
 	cursor: pointer;
-	text-decoration: none;
-	text-align: center;
-	vertical-align: middle;
 	transition-duration: 0.4s;
 	float:left;
 	display:block;
-	
-	h1 {
-		font-size: 24px;
-	}
-	
 	&:hover {
-		background-color: #F00;
+		box-shadow: 2px 2px 4px 3px rgba(0, 0, 0, 0.7);
 	}
-	
 	.material-icons {
 		vertical-align: middle;
 	}
-	
 	.material-icons {
 		position: absolute;
 		top: 50%;
@@ -53,11 +30,4 @@
 		line-height: 24px;
 		width: 24px;
 	}
-}
+}
-
-.item-video {
-	&:hover {
-		background-color: #0F0;
-	}
-}
-

front/src/app/scene/type/type.component.html

@@ -1,12 +1,11 @@
 <div class="main-reduce">
-	<div class="fill-all">
+
 		<div *ngFor="let data of groups" class="item" (click)="onSelectGroup($event, data)" (auxclick)="onSelectGroup($event, data)">
 			<app-element-group [id_type]="type_id" [id_group]="data"></app-element-group>
 		</div>
-	</div>
+
-	<div class="fill-all">
 		<div *ngFor="let data of videos" class="item item-video" (click)="onSelectVideo($event, data)" (auxclick)="onSelectVideo($event, data)">
 			<app-element-video [id_video]="data"></app-element-video>
 		</div>
-	</div>
+
 </div>

front/src/app/scene/type/type.component.less

@@ -1,51 +1,41 @@
-.fill-all{
+
-	width:100%;
+.fill-all333{
+	//margin-left:width/210px/2;
+	//*-justify-content: center;
+	//align:center;
+	background:red;
+	width:calc(100% / 210px*3);
 	height:100%;
 	margin:0;
 	padding:0;
 	border:0;
-	background-color:#0F0;
+	background-color:red;
 }
 
 .item {
-	background-color: rgba(200, 200, 200, 0.5);
 	font-size: 20px;
-	height: 280px;
+	padding: 1px;
+	height: 290px;
 	width: 200px;
-	margin: 1%;
+	margin: 5px;
 	padding: 0;
 	overflow: hidden;
-	//box-shadow: 0 1px 1.5px 0 rgba(0,0,0,.12),0 1px 1px 0 rgba(0,0,0,.24);
-	box-shadow: 0px 2px 4px 0 rgba(0, 0, 0, 0.6);
 	line-height: normal;
 	border: none;
 	font-family: "Roboto","Helvetica","Arial",sans-serif;
 	font-weight: 500;
-	text-transform: uppercase;
-	letter-spacing: 0;
 	will-change: box-shadow;
 	outline: none;
 	cursor: pointer;
-	text-decoration: none;
-	text-align: center;
-	vertical-align: middle;
 	transition-duration: 0.4s;
 	float:left;
 	display:block;
-	
-	h1 {
-		font-size: 24px;
-	}
-	
 	&:hover {
-		background-color: rgba(200, 200, 200, 1);
+		box-shadow: 2px 2px 4px 3px rgba(0, 0, 0, 0.7);
-		//box-shadow: 0px 2px 4px 0 rgba(255, 0, 0, 0.6);
 	}
-	
 	.material-icons {
 		vertical-align: middle;
 	}
-	
 	.material-icons {
 		position: absolute;
 		top: 50%;
@@ -54,11 +44,4 @@
 		line-height: 24px;
 		width: 24px;
 	}
-}
+}
-
-.item-video {
-	&:hover {
-		background-color: #0F0;
-	}
-}
-

front/src/environments/environment.ts

@@ -6,8 +6,8 @@
 export const environment = {
 	production: false,
 	// URL of development API
-	apiUrl: 'http://localhost:15080',
+	//apiUrl: 'http://localhost:15080',
-	//apiUrl: 'http://192.168.1.157/karideo/api',
+	apiUrl: 'http://192.168.1.157/karideo/api',
 	frontBaseUrl: '',
 	//apiMode: "QUERRY"
 	apiMode: "REWRITE",