EVOgeek
/
Vmeda.Online
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #2046 from crazyserver/MOBILE-3025 

MOBILE-3025 blocks: Adapt blocks size to small screens
main
Juan Leyva 2019-08-06 13:48:11 +02:00 committed by GitHub
parent d34adba029 b5cbd5abaf
commit e0e7a9ba91
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 18 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/core/block/components/course-blocks/course-blocks.scss
View File

@ -1,3 +1,6 @@
$core-side-blocks-max-small-width: 300px;
$core-side-blocks-min-small-width: 25%;
$core-side-blocks-max-width: 320px;
$core-side-blocks-min-width: 30%;
@ -30,8 +33,8 @@ ion-app.app-root core-block-course-blocks {
flex-wrap: nowrap;
.core-course-blocks-content {
min-width: calc(100% - #{($core-side-blocks-max-width)});
max-width: calc(100% - #{($core-side-blocks-min-width)});
min-width: calc(100% - #{($core-side-blocks-max-small-width)});
max-width: calc(100% - #{($core-side-blocks-min-small-width)});
z-index: 0;
flex: 1;
box-shadow: none !important;
@ -42,9 +45,21 @@ ion-app.app-root core-block-course-blocks {
position: sticky;
@include position(0, 0, 0, auto);
z-index: 30;
max-width: $core-side-blocks-max-small-width;
min-width: $core-side-blocks-min-small-width;
@include border-start(1px, solid, $list-md-border-color);
}
}
@include media-breakpoint-up(lg) {
.core-course-blocks-content {
min-width: calc(100% - #{($core-side-blocks-max-width)});
max-width: calc(100% - #{($core-side-blocks-min-width)});
}
ion-content.core-course-blocks-side {
max-width: $core-side-blocks-max-width;
min-width: $core-side-blocks-min-width;
@include border-start(1px, solid, $list-md-border-color);
}
}