{{count}} Episode
\ No newline at end of file
diff --git a/front/src/app/component/element-season/element-season.less b/front/src/app/component/element-season/element-season.less
index 3ead7a9..5ac942e 100644
--- a/front/src/app/component/element-season/element-season.less
+++ b/front/src/app/component/element-season/element-season.less
@@ -20,16 +20,16 @@
}
.title-small {
- height: 40px;
+ height: 50px;
//width: 100%;
- font-size: 28px;
+ font-size: 35px;
display:inline-block;
font-weight: bold;
}
.description-small {
height: 30px;
- font-size: 12px;
+ font-size: 16px;
overflow:hidden;
vertical-align: middle;
}
\ No newline at end of file
diff --git a/front/src/app/component/element-season/element-season.ts b/front/src/app/component/element-season/element-season.ts
index 43cb173..ab59e2d 100644
--- a/front/src/app/component/element-season/element-season.ts
+++ b/front/src/app/component/element-season/element-season.ts
@@ -24,7 +24,7 @@ export class ElementSeasonComponent implements OnInit {
error:string = "";
numberSeason:number = -1;
- count:number = null;
+ count:number = 0;
cover:string = "";
covers:Array
-
- {{series_name}}
+
+
-
+
+
+ 
+
+
+
+ {{series_name}}
+
+
+ Season {{name}}
+
+
+ {{description}}
+
+
- Season {{name}}
-
-
-
-
-
-
-
- {{description}}
-
-
+
+
+
Videos:
+ Video:
-
- {{name}}
+
+
-
+
+
+
+
+
+
+ {{name}}
+
+
+ {{description}}
+
+
-
-
-
-
-
- {{description}}
-
-
-
Seasons:
+
+
+
- Seasons:
+ Season:
-
\ No newline at end of file
diff --git a/front/src/app/scene/series/series.less b/front/src/app/scene/series/series.less
index 5c740c1..e69de29 100644
--- a/front/src/app/scene/series/series.less
+++ b/front/src/app/scene/series/series.less
@@ -1,15 +0,0 @@
-
-.cover {
- width: 400px;
- margin: 0 auto;
- img {
- width: 100%;
- }
-}
-.no-cover {
- width: 400px;
- height: 500px;
- margin: 0 auto;
- border: solid 5px;
- border-color: rgba(0, 0, 0, 0.7);
-}
diff --git a/front/src/app/scene/series/series.ts b/front/src/app/scene/series/series.ts
index 538be25..e9a3cf6 100644
--- a/front/src/app/scene/series/series.ts
+++ b/front/src/app/scene/series/series.ts
@@ -21,8 +21,6 @@ import { ArianeService } from '../../service/ariane';
})
export class SeriesScene implements OnInit {
- //id_type = -1;
- //id_universe = -1;
id_series = -1;
name: string = "";
description: string = "";
@@ -71,7 +69,7 @@ export class SeriesScene implements OnInit {
self.name = "???";
self.cover = null;
self.covers = [];
- // no check jusp ==> an error occured on season
+ // no check just ==> an error occured on season
});
console.log("get parameter id: " + this.id_series);
this.seriesService.getSeason(this.id_series, ["id", "name"])
@@ -119,7 +117,7 @@ export class SeriesScene implements OnInit {
if (this.seasons.length !== 1) {
return;
}
- this.arianeService.navigateSeason(this.seasons[0].id, false, false);
+ this.arianeService.navigateSeason(this.seasons[0].id, false, false, true);
}
}
diff --git a/front/src/app/scene/type/type.html b/front/src/app/scene/type/type.html
index 99bfac9..3821ed3 100644
--- a/front/src/app/scene/type/type.html
+++ b/front/src/app/scene/type/type.html
@@ -1,23 +1,30 @@
Videos:
+
+
+
+
Videos:
+ Video:
-
- {{name}}
+
+
-
+
+
+
+
+
+
+ {{name}}
+
+
+ {{description}}
+
+
-
-
-
- {{description}}
-
-
+
+
-
+
\ No newline at end of file
diff --git a/front/src/app/scene/video/video.less b/front/src/app/scene/video/video.less
index 9197c71..ab9483f 100644
--- a/front/src/app/scene/video/video.less
+++ b/front/src/app/scene/video/video.less
@@ -30,13 +30,13 @@
margin: 0 auto;
}
.cover-full {
- position:relative;
+ position:relative;
width: 100%;
height: 500px;
margin: 0 auto;
overflow:hidden;
.cover {
- position:relative;
+ position:relative;
width: 400px;
height: 500px;
margin: 0 auto;
diff --git a/front/src/app/service/ariane.ts b/front/src/app/service/ariane.ts
index 8e2af95..1cee3ab 100644
--- a/front/src/app/service/ariane.ts
+++ b/front/src/app/service/ariane.ts
@@ -310,8 +310,18 @@ export class ArianeService {
getVideoName():string {
return this.video_name;
}
-
- genericNavigate(_destination:string, _universeId:number, _typeId:number, _seriesId:number, _seasonId:number, _videoId:number, _newWindows:boolean):void {
+ /**
+ * Generic navigation on the browser.
+ * @param _destination - new destination url
+ * @param _universeId - univers ID
+ * @param _typeId - type IF
+ * @param _seriesId - series real ID
+ * @param _seasonId - season ID
+ * @param _videoId - Video ID
+ * @param _newWindows - open in a new windows
+ * @param replaceCurrentPage - consider the curent page is removed from history
+ */
+ genericNavigate(_destination:string, _universeId:number, _typeId:number, _seriesId:number, _seasonId:number, _videoId:number, _newWindows:boolean = false, replaceCurrentPage: boolean = false):void {
let addressOffset = _destination + '/' + _universeId + '/' + _typeId + '/' + _seriesId + '/' + _seasonId + '/' + _videoId;
if(_newWindows==true) {
if (environment.frontBaseUrl === undefined || environment.frontBaseUrl === null || environment.frontBaseUrl === "") {
@@ -320,7 +330,7 @@ export class ArianeService {
window.open("/" + environment.frontBaseUrl + '/' + addressOffset);
}
} else {
- this.router.navigate([addressOffset]);
+ this.router.navigate([addressOffset], { replaceUrl: replaceCurrentPage });
}
}
@@ -350,18 +360,17 @@ export class ArianeService {
navigateSeriesEdit(_id:number, _newWindows:boolean):void {
this.genericNavigate('series-edit', this.universe_id, this.type_id, _id, null, null, _newWindows);
}
- navigateSeason(_id:number, _newWindows:boolean, _ctrl:boolean = false):void {
+ navigateSeason(_id:number, _newWindows:boolean, _ctrl:boolean = false, replaceCurrentPage: boolean = false):void {
if (_ctrl == true) {
this.navigateSeasonEdit(_id, _newWindows);
return;
}
- this.genericNavigate('season', this.universe_id, this.type_id, this.series_id, _id, null, _newWindows);
+ this.genericNavigate('season', this.universe_id, this.type_id, this.series_id, _id, null, _newWindows, replaceCurrentPage);
}
navigateSeasonEdit(_id:number, _newWindows:boolean):void {
this.genericNavigate('season-edit', this.universe_id, this.type_id, this.series_id, _id, null, _newWindows);
}
navigateVideo(_id:number, _newWindows:boolean, _ctrl:boolean = false):void {
- console.log("======================================" + _ctrl);
if (_ctrl == true) {
this.navigateVideoEdit(_id, _newWindows);
return;
diff --git a/front/src/generic_page.less b/front/src/generic_page.less
index ebf948a..5d3d728 100644
--- a/front/src/generic_page.less
+++ b/front/src/generic_page.less
@@ -1,130 +1,561 @@
-.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;
+
+
+// landscape
+@media screen and (orientation:landscape) {
+ .clear {
+ display: block;
+ float: left;
+ width: 100%;
}
- .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%;
+ .generic-page {
+ .fill-title {
+ display:block;
+ position:fixed;
+ left: 0px;
+ top: 50px;
+ width: 400px;
+ float: left;
+ //height: 400px;
+ padding: 1%;
+ .cover-area {
+ //position:relative;
+ float: right;
+ //right: 0px;
+ width: 100%;
+ //height: 100%;
+ .cover {
+ align: center;
+ width: 60%;
+ margin: 0 auto;
+ img {
+ width: 100%;
+ }
+ }
+ }
+ .description-area-cover {
+ width: 100%;
+ }
+ .description-area-no-cover {
+ width: 100%;
+ }
+ .description-area {
+ //position: sticky;
+ float: left;
+ //height: 100%;
+ //margin: 0;
+ //border: solid 1px;
+ //border-color: rgba(255, 0, 0, 0.7);
+
+ .title {
+ background-color: green;
+ font-size: 45px;
+ font-weight: bold;
+ line-height: 60px;
+ width:100%;
+ align: left;
+ text-align: left;
+ 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;
+ text-align: left;
+ 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;
+ text-align: left;
+ vertical-align: middle;
+ margin: 10px 0 10px 0;
+ font-family: "Roboto","Helvetica","Arial",sans-serif;
+ }
+ .description {
+ //background-color: orange;
+ font-size: 24px;
+ width: ~"calc(100% - 14px * 2)";//calc(100% - 40px * 2 - 14px * 2);
+ text-align: left;
+ vertical-align: middle;
+ //margin: 0 40px 10px 40px;
+ background: rgba(150, 150, 150, 0.9);
+ //border-radius: 7px;
+ padding: 14px;
+ font-family: "Roboto","Helvetica","Arial",sans-serif;
+ }
+ }
}
- }
-
- .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);
+ .fill-content {
+ display:block;
+ //position:relative;
+ margin: 0 0 0 430px;
+ padding: 0px;
+ float: left;
+ .title {
+ font-size: 33px;
+ font-weight: bold;
+ line-height: 40px;
+ width:100%;
+ align: left;
+ text-align: left;
+ vertical-align: middle;
+ margin: 10px 0 10px 0;
+ 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;
+ }
+ }
}
- .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;
+ .cover {
+ width: 30%;
+ //margin: 0 auto;
+ img {
+ width: 100%;
+ }
}
}
}
+@media all and (min-width: 3910px) and (orientation:landscape) {
+ .colomn_mutiple {
+ width: ~"calc(210px * 15)";
+ margin: auto;
+ }
+}
+
+@media all and (min-width: 3700px) and (max-width: 3910px) and (orientation:landscape){
+ .colomn_mutiple {
+ width: ~"calc(210px * 15)";
+ margin: auto;
+ }
+
+}
+@media all and (min-width: 3390px) and (max-width: 3700px) and (orientation:landscape){
+ .colomn_mutiple {
+ width: ~"calc(210px * 14)";
+ margin: auto;
+ }
+}
+@media all and (min-width: 3180px) and (max-width: 3390px) and (orientation:landscape) {
+ .colomn_mutiple {
+ width: ~"calc(210px * 13)";
+ margin: auto;
+ }
+}
+@media all and (min-width: 2970px) and (max-width: 3180px) and (orientation:landscape){
+ .colomn_mutiple {
+ width: ~"calc(210px * 12)";
+ margin: auto;
+ }
+}
+@media all and (min-width: 2760px) and (max-width: 2970px) and (orientation:landscape) {
+ .colomn_mutiple {
+ width: ~"calc(210px * 11)";
+ margin: auto;
+ }
+}
+@media all and (min-width: 2550px) and (max-width: 2760px) and (orientation:landscape) {
+ .colomn_mutiple {
+ width: ~"calc(210px * 10)";
+ margin: auto;
+ }
+}
+@media all and (min-width: 2340px) and (max-width: 2550px) and (orientation:landscape) {
+ .colomn_mutiple {
+ width: ~"calc(210px * 9)";
+ margin: auto;
+ }
+}
+
+@media all and (min-width: 2130px) and (max-width: 2340px) and (orientation:landscape) {
+ .colomn_mutiple {
+ width: ~"calc(210px * 8)";
+ margin: auto;
+ }
+}
+
+@media all and (min-width: 1920px) and (max-width: 2130px) and (orientation:landscape) {
+ .colomn_mutiple {
+ width: ~"calc(210px * 7)";
+ margin: auto;
+ }
+}
+
+@media all and (min-width: 1710px) and (max-width: 1920px) and (orientation:landscape) {
+ .colomn_mutiple {
+ width: ~"calc(210px * 6)";
+ margin: auto;
+ }
+}
+
+@media all and (min-width: 1500px) and (max-width: 1710px) and (orientation:landscape) {
+ .colomn_mutiple {
+ width: ~"calc(210px * 5)";
+ }
+}
+
+@media all and (min-width: 1290px) and (max-width: 1500px) and (orientation:landscape) {
+ .colomn_mutiple {
+ width: ~"calc(210px * 4)";
+ margin: auto;
+ }
+}
+
+@media all and (min-width: 1080px) and (max-width: 1290px) and (orientation:landscape) {
+ .colomn_mutiple {
+ width: ~"calc(210px * 3)";
+ margin: auto;
+ }
+}
+
+@media all and (max-width: 1080px) and (orientation:landscape) {
+ .colomn_mutiple {
+ width: ~"calc(210px * 2)";
+ margin: auto;
+ }
+}
+
+// portrait
+@media screen and (orientation:portrait) {
+ .clear {
+ clear: both;
+ text-align: center;
+ }
+
+ .generic-page {
+ .fill-title {
+ display:block;
+ position:relative;
+ //width: 100%;
+ //height: 400px;
+ padding: 1%;
+ .cover-area {
+ //position:relative;
+ float: right;
+ //right: 0px;
+ width: 300px;
+ //height: 100%;
+ .cover {
+ width: 100%;
+ margin: auto;
+ img {
+ width: 100%;
+ }
+ }
+ }
+ .description-area-cover {
+ width: ~"calc( 100% - 302px)";
+ }
+ .description-area-no-cover {
+ width: 100%;
+ }
+ .description-area {
+ //position: sticky;
+ float: left;
+ //height: 100%;
+ //margin: 0;
+ //border: solid 1px;
+ //border-color: rgba(255, 0, 0, 0.7);
+
+ .title {
+ //background-color: green;
+ font-size: 45px;
+ font-weight: bold;
+ line-height: 60px;
+ width:100%;
+ align: left;
+ text-align: left;
+ 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;
+ text-align: left;
+ 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;
+ text-align: left;
+ vertical-align: middle;
+ margin: 10px 0 10px 0;
+ font-family: "Roboto","Helvetica","Arial",sans-serif;
+ }
+ .description {
+ //background-color: orange;
+ font-size: 24px;
+ text-align: left;
+ width: ~"calc(100% - 14px * 2)";//calc(100% - 40px * 2 - 14px * 2);
+ vertical-align: middle;
+ //margin: 0 40px 10px 40px;
+ background: rgba(150, 150, 150, 0.9);
+ //border-radius: 7px;
+ padding: 14px;
+ font-family: "Roboto","Helvetica","Arial",sans-serif;
+ }
+ }
+ }
+ .fill-content {
+ .title {
+ font-size: 33px;
+ font-weight: bold;
+ line-height: 40px;
+ width:100%;
+ align: left;
+ text-align: left;
+ vertical-align: middle;
+ margin: 10px 0 10px 0;
+ 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: 95%;
+ 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;
+ }
+ }
+ }
+ .cover {
+ width: 30%;
+ //margin: 0 auto;
+ img {
+ width: 100%;
+ }
+ }
+ }
+}
+@media all and (min-width: 3510px) and (orientation:portrait) {
+ .colomn_mutiple {
+ width: ~"calc(210px * 15)";
+ margin: auto;
+ }
+}
+
+@media all and (min-width: 3300px) and (max-width: 3510px) and (orientation:portrait) {
+ .colomn_mutiple {
+ width: ~"calc(210px * 15)";
+ margin: auto;
+ }
+}
+@media all and (min-width: 2990px) and (max-width: 3300px) and (orientation:portrait) {
+ .colomn_mutiple {
+ width: ~"calc(210px * 14)";
+ margin: auto;
+ }
+}
+@media all and (min-width: 2780px) and (max-width: 2990px) and (orientation:portrait) {
+ .colomn_mutiple {
+ width: ~"calc(210px * 13)";
+ margin: auto;
+ }
+}
+@media all and (min-width: 2570px) and (max-width: 2780px) and (orientation:portrait) {
+ .colomn_mutiple {
+ width: ~"calc(210px * 12)";
+ margin: auto;
+ }
+}
+@media all and (min-width: 2360px) and (max-width: 2570px) and (orientation:portrait) {
+ .colomn_mutiple {
+ width: ~"calc(210px * 11)";
+ margin: auto;
+ }
+}
+@media all and (min-width: 2150px) and (max-width: 2360px) and (orientation:portrait) {
+ .colomn_mutiple {
+ width: ~"calc(210px * 10)";
+ margin: auto;
+ }
+}
+@media all and (min-width: 1940px) and (max-width: 2150px) and (orientation:portrait) {
+ .colomn_mutiple {
+ width: ~"calc(210px * 9)";
+ margin: auto;
+ }
+}
+@media all and (min-width: 1730px) and (max-width: 1940px) and (orientation:portrait) {
+ .colomn_mutiple {
+ width: ~"calc(210px * 8)";
+ margin: auto;
+ }
+}
+@media all and (min-width: 1520px) and (max-width: 1730px) and (orientation:portrait) {
+ .colomn_mutiple {
+ width: ~"calc(210px * 7)";
+ margin: auto;
+ }
+}
+@media all and (min-width: 1310px) and (max-width: 1520px) and (orientation:portrait) {
+ .colomn_mutiple {
+ width: ~"calc(210px * 6)";
+ margin: auto;
+ }
+}
+@media all and (min-width: 1100px) and (max-width: 1310px) and (orientation:portrait) {
+ .colomn_mutiple {
+ width: ~"calc(210px * 5)";
+ margin: auto;
+ }
+}
+@media all and (min-width: 890px) and (max-width: 1100px) and (orientation:portrait) {
+ .colomn_mutiple {
+ width: ~"calc(210px * 4)";
+ margin: auto;
+ }
+}
+@media all and (min-width: 680px) and (max-width: 890px) and (orientation:portrait) {
+ .colomn_mutiple {
+ width: ~"calc(210px * 3)";
+ margin: auto;
+ }
+}
+@media all and (max-width: 680px) and (orientation:portrait) {
+ .colomn_mutiple {
+ width: ~"calc(210px * 2)";
+ margin: auto;
+ }
+}
+
+
.edit-page {
.title {
//background-color: green;
diff --git a/front/src/styles.less b/front/src/styles.less
index dbf0b14..8f57779 100644
--- a/front/src/styles.less
+++ b/front/src/styles.less
@@ -19,59 +19,6 @@
.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;
+
+