From af6a6fa9bb00fcf68ecf31a934b37273c15f95ce Mon Sep 17 00:00:00 2001 From: Edouard DUPIN Date: Mon, 10 Feb 2020 23:52:27 +0100 Subject: [PATCH] [DEV] big rework in the display --- front/angular.json | 2 + .../element-group.component.html | 6 +- .../element-group.component.less | 6 +- .../element-saison.component.html | 13 +- .../element-saison.component.less | 32 ++--- .../element-saison.component.ts | 16 ++- .../element-type/element-type.component.html | 8 +- .../element-type/element-type.component.less | 8 +- .../element-video.component.html | 6 +- .../element-video.component.less | 6 +- .../src/app/scene/group/group.component.html | 21 ++- .../src/app/scene/group/group.component.less | 33 ----- front/src/app/scene/group/group.component.ts | 31 ++++- front/src/app/scene/home/home.component.html | 10 +- front/src/app/scene/home/home.component.less | 12 +- .../app/scene/saison/saison.component.html | 17 ++- .../app/scene/saison/saison.component.less | 33 ----- .../src/app/scene/saison/saison.component.ts | 36 +++++ front/src/app/scene/type/type.component.html | 20 ++- front/src/app/scene/type/type.component.less | 47 ------- front/src/app/scene/type/type.component.ts | 10 ++ front/src/app/scene/univers/univers.html | 5 +- front/src/app/service/group.service.ts | 2 +- front/src/app/service/saison.service.ts | 15 +++ front/src/environments/environment.prod.ts | 2 +- front/src/generic_page.less | 127 ++++++++++++++++++ front/src/styles.less | 59 ++++++++ 27 files changed, 393 insertions(+), 190 deletions(-) create mode 100644 front/src/generic_page.less diff --git a/front/angular.json b/front/angular.json index 7eeb3be..f239404 100644 --- a/front/angular.json +++ b/front/angular.json @@ -22,6 +22,7 @@ ], "styles": [ "src/styles.less", + "src/generic_page.less", "src/theme.color.blue.less", "src/theme.checkbox.less", "src/theme.modal.less" @@ -75,6 +76,7 @@ "scripts": [], "styles": [ "src/styles.less", + "src/generic_page.less", "src/theme.color.blue.less", "src/theme.checkbox.less", "src/theme.modal.less" diff --git a/front/src/app/component/element-group/element-group.component.html b/front/src/app/component/element-group/element-group.component.html index 53f7a93..7182787 100644 --- a/front/src/app/component/element-group/element-group.component.html +++ b/front/src/app/component/element-group/element-group.component.html @@ -1,5 +1,5 @@
-
+
@@ -7,11 +7,11 @@
-
+
{{name}}
diff --git a/front/src/app/component/element-group/element-group.component.less b/front/src/app/component/element-group/element-group.component.less index b1a81e6..8c2e4ac 100644 --- a/front/src/app/component/element-group/element-group.component.less +++ b/front/src/app/component/element-group/element-group.component.less @@ -1,5 +1,5 @@ -.imgContainer { +.imgContainer-small { text-align: center; width: 200px; margin: 0 auto; @@ -19,7 +19,7 @@ } } -.title { +.title-small { height: 40px; width: 200px; font-size: 17px; @@ -31,7 +31,7 @@ border-radius: 7px; } -.description { +.description-small { height: 30px; font-size: 12px; overflow:hidden; diff --git a/front/src/app/component/element-saison/element-saison.component.html b/front/src/app/component/element-saison/element-saison.component.html index 430a87e..23f7c8d 100644 --- a/front/src/app/component/element-saison/element-saison.component.html +++ b/front/src/app/component/element-saison/element-saison.component.html @@ -1,12 +1,15 @@ -
+
-
- -
+
+ +
-
+
Saison {{numberSaison}} +
+
+ {{count}} Episodes
\ No newline at end of file diff --git a/front/src/app/component/element-saison/element-saison.component.less b/front/src/app/component/element-saison/element-saison.component.less index b1a81e6..b94368d 100644 --- a/front/src/app/component/element-saison/element-saison.component.less +++ b/front/src/app/component/element-saison/element-saison.component.less @@ -1,37 +1,33 @@ -.imgContainer { +.imgContainer-small { text-align: center; - width: 200px; - margin: 0 auto; - height: 250px; + width: 100px; + margin: 4px 15px 4px 10px; + height: 100px; img { - //width: 100%; - max-height: 250px; - max-width: 200px; + max-height: 100px; + max-width: 100px; } .noImage { - height: 245px; - width: 195px; + height: 95px; + width: 95px; //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; } + float: left; } -.title { +.title-small { height: 40px; - width: 200px; - font-size: 17px; - overflow:hidden; + //width: 100%; + font-size: 28px; display:inline-block; - text-align: center; - padding:auto; - background: rgba(256, 256, 256, 0.3); - border-radius: 7px; + font-weight: bold; } -.description { +.description-small { height: 30px; font-size: 12px; overflow:hidden; diff --git a/front/src/app/component/element-saison/element-saison.component.ts b/front/src/app/component/element-saison/element-saison.component.ts index 4e9333d..bf48be7 100644 --- a/front/src/app/component/element-saison/element-saison.component.ts +++ b/front/src/app/component/element-saison/element-saison.component.ts @@ -22,10 +22,12 @@ export class ElementSaisonComponent implements OnInit { // input parameters @Input() id_saison:number = -1; - error:string = "" - numberSaison:number = -1 + error:string = ""; + numberSaison:number = -1; + count:number = null; cover:string = ""; covers:Array = []; + description:string = ""; constructor(private router: Router, private saisonService: SaisonService) { @@ -37,7 +39,8 @@ export class ElementSaisonComponent implements OnInit { this.saisonService.get(this.id_saison) .then(function(response) { self.error = ""; - self.numberSaison = response.number + self.numberSaison = response.number; + self.description = response.description; if (response.covers == undefined || response.covers == null || response.covers.length == 0) { self.cover = null; //self.covers = []; @@ -52,6 +55,13 @@ export class ElementSaisonComponent implements OnInit { self.numberSaison = -1 self.cover = null; self.covers = []; + self.description = ""; + }); + this.saisonService.countVideo(this.id_saison) + .then(function(response) { + self.count = response; + }).catch(function(response) { + self.count = null; }); } } diff --git a/front/src/app/component/element-type/element-type.component.html b/front/src/app/component/element-type/element-type.component.html index ede24b9..eb8a92c 100644 --- a/front/src/app/component/element-type/element-type.component.html +++ b/front/src/app/component/element-type/element-type.component.html @@ -1,13 +1,13 @@
-
+
- type image + type image
-
+
{{name}}
-
+
{{description}}
\ No newline at end of file diff --git a/front/src/app/component/element-type/element-type.component.less b/front/src/app/component/element-type/element-type.component.less index 0a02a71..8efb049 100644 --- a/front/src/app/component/element-type/element-type.component.less +++ b/front/src/app/component/element-type/element-type.component.less @@ -1,25 +1,25 @@ -.imgContainer { +.imgContainer-small { text-align: center; margin: 15px 0 0 0; } -img.miniature { +img.miniature-small { width: 80px; height: 80px; //border-radius: 50%; } -.title { +.title-small { height: 60px; font-size: 24px; overflow:hidden; vertical-align: middle; } -.description { +.description-small { height: 30px; font-size: 12px; overflow:hidden; diff --git a/front/src/app/component/element-video/element-video.component.html b/front/src/app/component/element-video/element-video.component.html index 1361e35..95061d9 100644 --- a/front/src/app/component/element-video/element-video.component.html +++ b/front/src/app/component/element-video/element-video.component.html @@ -1,5 +1,5 @@
-
+
@@ -7,11 +7,11 @@
-
+
{{episode_display}} {{name}}
diff --git a/front/src/app/component/element-video/element-video.component.less b/front/src/app/component/element-video/element-video.component.less index b1a81e6..7f6127f 100644 --- a/front/src/app/component/element-video/element-video.component.less +++ b/front/src/app/component/element-video/element-video.component.less @@ -1,5 +1,5 @@ -.imgContainer { +.videoImgContainer { text-align: center; width: 200px; margin: 0 auto; @@ -19,7 +19,7 @@ } } -.title { +.title-small { height: 40px; width: 200px; font-size: 17px; @@ -31,7 +31,7 @@ border-radius: 7px; } -.description { +.description-small { height: 30px; font-size: 12px; overflow:hidden; diff --git a/front/src/app/scene/group/group.component.html b/front/src/app/scene/group/group.component.html index 70b346d..b91d5d1 100644 --- a/front/src/app/scene/group/group.component.html +++ b/front/src/app/scene/group/group.component.html @@ -1,12 +1,25 @@ -
-
-
+
+
+ {{name}} +
+
+ +
+
+ {{description}} +
+
+
Saisons:
+
+
-
+
+
Videos:
+
\ No newline at end of file diff --git a/front/src/app/scene/group/group.component.less b/front/src/app/scene/group/group.component.less index 3c448aa..e69de29 100644 --- a/front/src/app/scene/group/group.component.less +++ b/front/src/app/scene/group/group.component.less @@ -1,33 +0,0 @@ -.item { - font-size: 20px; - padding: 1px; - height: 290px; - width: 200px; - margin: 5px; - padding: 0; - overflow: hidden; - line-height: normal; - border: none; - font-family: "Roboto","Helvetica","Arial",sans-serif; - font-weight: 500; - will-change: box-shadow; - outline: none; - cursor: pointer; - transition-duration: 0.4s; - float:left; - display:block; - &:hover { - box-shadow: 2px 2px 4px 3px rgba(0, 0, 0, 0.7); - } - .material-icons { - vertical-align: middle; - } - .material-icons { - position: absolute; - top: 50%; - left: 50%; - transform: ~"translate(-12px,-12px)"; - line-height: 24px; - width: 24px; - } -} \ No newline at end of file diff --git a/front/src/app/scene/group/group.component.ts b/front/src/app/scene/group/group.component.ts index f35eba9..61b83fe 100644 --- a/front/src/app/scene/group/group.component.ts +++ b/front/src/app/scene/group/group.component.ts @@ -25,10 +25,14 @@ export class GroupComponent implements OnInit { //id_type = -1; //id_univers = -1; id_group = -1; - saisons_error = ""; - saisons = []; - videos_error = ""; - videos = []; + name: string = ""; + description: string = ""; + cover: string = "" + covers: Array = [] + saisons_error: string = ""; + saisons: Array = []; + videos_error: string = ""; + videos: Array = []; constructor(private route: ActivatedRoute, private router: Router, private locate: Location, @@ -43,6 +47,25 @@ export class GroupComponent implements OnInit { this.id_group = parseInt(this.route.snapshot.paramMap.get('group_id')); console.log let self = this; + this.groupService.get(this.id_group) + .then(function(response) { + self.name = response.name; + self.description = response.description; + if (response.covers == undefined || response.covers == null || response.covers.length == 0) { + self.cover = null; + self.covers = []; + } else { + self.cover = self.groupService.getCoverUrl(response.covers[0]); + for (let iii=0; iii -
-
+
+
+ Karideo +
+
+
+
\ No newline at end of file diff --git a/front/src/app/scene/home/home.component.less b/front/src/app/scene/home/home.component.less index adf374d..0770ce8 100644 --- a/front/src/app/scene/home/home.component.less +++ b/front/src/app/scene/home/home.component.less @@ -1,18 +1,10 @@ -.fill-all{ - width:100%; - height:100%; - margin:0; - padding:0; - border:0; - background-color:#0F0; -} -.item { +.item-home { background-color: rgba(200, 200, 200, 0.5); font-size: 20px; height: 190px; 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); diff --git a/front/src/app/scene/saison/saison.component.html b/front/src/app/scene/saison/saison.component.html index bb962d2..6bf21fa 100644 --- a/front/src/app/scene/saison/saison.component.html +++ b/front/src/app/scene/saison/saison.component.html @@ -1,7 +1,20 @@ -
-
+
+
+ {{group_name}} +
+
+ Saison {{name}} +
+
+ +
+
+ {{description}} +
+
+
\ No newline at end of file diff --git a/front/src/app/scene/saison/saison.component.less b/front/src/app/scene/saison/saison.component.less index 3c448aa..e69de29 100644 --- a/front/src/app/scene/saison/saison.component.less +++ b/front/src/app/scene/saison/saison.component.less @@ -1,33 +0,0 @@ -.item { - font-size: 20px; - padding: 1px; - height: 290px; - width: 200px; - margin: 5px; - padding: 0; - overflow: hidden; - line-height: normal; - border: none; - font-family: "Roboto","Helvetica","Arial",sans-serif; - font-weight: 500; - will-change: box-shadow; - outline: none; - cursor: pointer; - transition-duration: 0.4s; - float:left; - display:block; - &:hover { - box-shadow: 2px 2px 4px 3px rgba(0, 0, 0, 0.7); - } - .material-icons { - vertical-align: middle; - } - .material-icons { - position: absolute; - top: 50%; - left: 50%; - transform: ~"translate(-12px,-12px)"; - line-height: 24px; - width: 24px; - } -} \ No newline at end of file diff --git a/front/src/app/scene/saison/saison.component.ts b/front/src/app/scene/saison/saison.component.ts index 673bf20..638d9f4 100644 --- a/front/src/app/scene/saison/saison.component.ts +++ b/front/src/app/scene/saison/saison.component.ts @@ -10,6 +10,7 @@ import { Location } from '@angular/common'; import { fadeInAnimation } from '../../_animations/index'; import { SaisonService } from '../../service/saison.service'; +import { GroupService } from '../../service/group.service'; import { ArianeService } from '../../service/ariane.service'; import { environment } from 'environments/environment'; @@ -22,6 +23,12 @@ import { environment } from 'environments/environment'; }) export class SaisonComponent implements OnInit { + name: string = ""; + group_name: string = ""; + description: string = ""; + group_id: number = null; + cover: string = "" + covers: Array = [] id_saison = -1; videos_error = ""; videos = []; @@ -29,6 +36,7 @@ export class SaisonComponent implements OnInit { private router: Router, private locate: Location, private saisonService: SaisonService, + private groupService: GroupService, private arianeService: ArianeService) { } @@ -37,6 +45,34 @@ export class SaisonComponent implements OnInit { this.id_saison = parseInt(this.route.snapshot.paramMap.get('saison_id')); this.arianeService.setSaison(this.id_saison); let self = this; + this.saisonService.get(this.id_saison) + .then(function(response) { + self.name = response.number; + self.group_id = response.group_id; + self.description = response.description; + if (response.covers == undefined || response.covers == null || response.covers.length == 0) { + self.cover = null; + self.covers = []; + } else { + self.cover = self.groupService.getCoverUrl(response.covers[0]); + for (let iii=0; iii - +
+
+ {{name}} +
+
+ +
+
+ {{description}} +
+
- +
+
+
- +
+
\ No newline at end of file diff --git a/front/src/app/scene/type/type.component.less b/front/src/app/scene/type/type.component.less index 570edcc..e69de29 100644 --- a/front/src/app/scene/type/type.component.less +++ b/front/src/app/scene/type/type.component.less @@ -1,47 +0,0 @@ - -.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:red; -} - -.item { - font-size: 20px; - padding: 1px; - height: 290px; - width: 200px; - margin: 5px; - padding: 0; - overflow: hidden; - line-height: normal; - border: none; - font-family: "Roboto","Helvetica","Arial",sans-serif; - font-weight: 500; - will-change: box-shadow; - outline: none; - cursor: pointer; - transition-duration: 0.4s; - float:left; - display:block; - &:hover { - box-shadow: 2px 2px 4px 3px rgba(0, 0, 0, 0.7); - } - .material-icons { - vertical-align: middle; - } - .material-icons { - position: absolute; - top: 50%; - left: 50%; - transform: ~"translate(-12px,-12px)"; - line-height: 24px; - width: 24px; - } -} \ No newline at end of file diff --git a/front/src/app/scene/type/type.component.ts b/front/src/app/scene/type/type.component.ts index 4ba20df..dadc4c4 100644 --- a/front/src/app/scene/type/type.component.ts +++ b/front/src/app/scene/type/type.component.ts @@ -23,6 +23,8 @@ import { environment } from 'environments/environment'; export class TypeComponent implements OnInit { type_id = -1; + name: string = ""; + description: string = ""; groups_error = ""; groups = []; videos_error = ""; @@ -46,6 +48,14 @@ export class TypeComponent implements OnInit { this.type_id = parseInt(this.route.snapshot.paramMap.get('type_id')); let self = this; console.log("get parameter id: " + this.type_id); + this.typeService.get(this.type_id) + .then(function(response) { + self.name = response.name; + self.description = response.description; + }).catch(function(response) { + self.name = "???"; + self.description = ""; + }); this.typeService.getSubGroup(this.type_id) .then(function(response) { self.groups_error = ""; diff --git a/front/src/app/scene/univers/univers.html b/front/src/app/scene/univers/univers.html index bb962d2..d152f7e 100644 --- a/front/src/app/scene/univers/univers.html +++ b/front/src/app/scene/univers/univers.html @@ -1,7 +1,8 @@ -
-
+
+
+
\ No newline at end of file diff --git a/front/src/app/service/group.service.ts b/front/src/app/service/group.service.ts index 012a475..325aed5 100644 --- a/front/src/app/service/group.service.ts +++ b/front/src/app/service/group.service.ts @@ -66,7 +66,7 @@ export class GroupService { return new Promise((resolve, reject) => { self.bdd.getVideo() .then(function(response) { - let data = response.gets_where([["==", "group_id", _id], ["==", "saison_id", null]], ["id"], ["name"]) + let data = response.gets_where([["==", "group_id", _id], ["==", "saison_id", null]], ["id"], ["episode", "name"]) resolve(data); }).catch(function(response) { reject(response); diff --git a/front/src/app/service/saison.service.ts b/front/src/app/service/saison.service.ts index fef3544..3832822 100644 --- a/front/src/app/service/saison.service.ts +++ b/front/src/app/service/saison.service.ts @@ -50,6 +50,21 @@ export class SaisonService { }); }); }; + countVideo(_id:number):any { + if (environment.localBdd != true) { + return this.http.get_specific(this.serviceName, _id, "video"); + } + let self = this; + return new Promise((resolve, reject) => { + self.bdd.getVideo() + .then(function(response) { + let data = response.gets_where([["==", "saison_id", _id]], ["id"], ["episode", "name"]) + resolve(data.length); + }).catch(function(response) { + reject(response); + }); + }); + }; put(_id:number, _data:any):any { let ret = this.http.put_specific(this.serviceName, _id, _data); if (environment.localBdd != true) { diff --git a/front/src/environments/environment.prod.ts b/front/src/environments/environment.prod.ts index 6ddff88..1342d07 100644 --- a/front/src/environments/environment.prod.ts +++ b/front/src/environments/environment.prod.ts @@ -4,7 +4,7 @@ // The list of which env maps to which file can be found in `.angular-cli.json`. export const environment = { - production: false, + production: true, // URL of development API apiUrl: 'http://192.168.1.157/karideo/api', frontBaseUrl: 'karideo', diff --git a/front/src/generic_page.less b/front/src/generic_page.less new file mode 100644 index 0000000..ca26637 --- /dev/null +++ b/front/src/generic_page.less @@ -0,0 +1,127 @@ +.generic-page { + .title { + //background-color: green; + font-size: 45px; + font-weight: bold; + line-height: 60px; + width:100%; + align: center; + height: 50px; + text-align: center; + vertical-align: middle; + margin: 10px 0 10px 0; + text-shadow: 1px 1px 2px white, 0 0 1em white, 0 0 0.2em white; + text-transform: uppercase; + font-family: "Roboto","Helvetica","Arial",sans-serif; + } + .sub-title-main { + font-size: 33px; + font-weight: bold; + line-height: 40px; + width:100%; + align: center; + height: 40px; + text-align: center; + vertical-align: middle; + margin: 10px 0 10px 0; + font-family: "Roboto","Helvetica","Arial",sans-serif; + } + .sub-title { + font-size: 33px; + font-weight: bold; + line-height: 40px; + width:100%; + align: left; + height: 40px; + text-align: left; + vertical-align: middle; + margin: 10px 0 10px 0; + font-family: "Roboto","Helvetica","Arial",sans-serif; + } + + .cover { + width: 30%; + margin: 0 auto; + img { + width: 100%; + } + } + + .description { + //background-color: orange; + font-size: 24px; + width: ~"calc(100% - 40px * 2 - 14px * 2)"; + text-align: left; + vertical-align: middle; + margin: 0 40px 10px 40px; + background: rgba(256, 256, 256, 0.3); + border-radius: 7px; + padding: 14px; + font-family: "Roboto","Helvetica","Arial",sans-serif; + } + + .item { + font-size: 20px; + padding: 1px; + height: 290px; + width: 200px; + margin: 5px; + padding: 0; + overflow: hidden; + line-height: normal; + border: none; + font-family: "Roboto","Helvetica","Arial",sans-serif; + font-weight: 500; + will-change: box-shadow; + outline: none; + cursor: pointer; + transition-duration: 0.4s; + float:left; + //display:inline; + &:hover { + box-shadow: 2px 2px 4px 3px rgba(0, 0, 0, 0.7); + } + .material-icons { + vertical-align: middle; + } + .material-icons { + position: absolute; + top: 50%; + left: 50%; + transform: ~"translate(-12px,-12px)"; + line-height: 24px; + width: 24px; + } + } + + .item-list { + font-size: 20px; + padding: 1px; + height: 110px; + width: 80%; + margin: 5px auto 5px auto; + padding: 5px; + overflow: hidden; + line-height: normal; + border: none; + font-family: "Roboto","Helvetica","Arial",sans-serif; + font-weight: 500; + will-change: box-shadow; + outline: none; + cursor: pointer; + background: rgba(256, 256, 256, 0.3); + border-radius: 7px; + .material-icons { + vertical-align: middle; + } + .material-icons { + position: absolute; + top: 50%; + left: 50%; + transform: ~"translate(-12px,-12px)"; + line-height: 24px; + width: 24px; + } + } +} + diff --git a/front/src/styles.less b/front/src/styles.less index 48a9be2..8ed1eb2 100644 --- a/front/src/styles.less +++ b/front/src/styles.less @@ -19,6 +19,65 @@ .xmobile{display:block;} } +@media all and (min-width: 1520px) { + .colomn_mutiple { + width: ~"calc(210px * 7)"; + margin: auto; + //height: 20px; + //background-color: red; + } +} + +@media all and (min-width: 1310px) and (max-width: 1520px) { + .colomn_mutiple { + width: ~"calc(210px * 6)"; + margin: auto; + //height: 20px; + //background-color: green; + } +} + +@media all and (min-width: 1100px) and (max-width: 1310px) { + .colomn_mutiple { + width: ~"calc(210px * 5)"; + margin: auto; + //height: 20px; + //background-color: blue; + } +} + +@media all and (min-width: 890px) and (max-width: 1100px) { + .colomn_mutiple { + width: ~"calc(210px * 4)"; + margin: auto; + //height: 20px; + //background-color: purple; + } +} + +@media all and (min-width: 680px) and (max-width: 890px) { + .colomn_mutiple { + width: ~"calc(210px * 3)"; + margin: auto; + //height: 20px; + //background-color: cyan; + } +} + +@media all and (max-width: 680px) { + .colomn_mutiple { + width: ~"calc(210px * 2)"; + margin: auto; + //height: 20px; + //background-color: red; + } +} + +.clear { + clear: both; + text-align: center; +} + html { font-size: 24px;