CIT/Vmeda.Online
3
0
Fork 1
forked from EVOgeek/Vmeda.Online
Code Pull Requests Activity

MOBILE-2773 dashboard: Fix small cards width and height

Browse Source
This commit is contained in:
Pau Ferrer Ocaña 2018-12-07 13:50:25 +01:00
parent bf87987b02
commit 4af45f06bc
3 changed files with 81 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/addon/block/recentlyaccesseditems/components/recentlyaccesseditems/recentlyaccesseditems.scss
View File

@ -1,11 +1,3 @@
ion-app.app-root addon-block-recentlyaccesseditems .core-horizontal-scroll .card { ion-app.app-root addon-block-recentlyaccesseditems .core-horizontal-scroll .card {
@include horizontal_scroll_item(80%, 250px, 300px); @include horizontal_scroll_item(80%, 250px, 300px);
[text-wrap] .label {
h2, p {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
} }

51
src/core/courses/components/course-progress/course-progress.scss
View File

@ -15,7 +15,7 @@ ion-app.app-root core-courses-course-progress {
} }
.core-course-thumb { .core-course-thumb {
height: 150px; padding-top: 40%;
width: 100%; width: 100%;
overflow: hidden; overflow: hidden;
cursor: pointer; cursor: pointer;
@ -49,10 +49,12 @@ ion-app.app-root core-courses-course-progress {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
flex-wrap: wrap;
} }
.core-course-title { .core-course-title {
margins: 6px 0; margin: 5px 0;
flex-grow: 1; flex-grow: 1;
max-width: calc(100% - 50px);
h2 ion-icon { h2 ion-icon {
margin-right: 4px; margin-right: 4px;
@ -70,6 +72,7 @@ ion-app.app-root core-courses-course-progress {
.item-button[icon-only] { .item-button[icon-only] {
min-width: 50px; min-width: 50px;
width: 50px;
} }
} }
.label { .label {
@ -93,7 +96,49 @@ ion-app.app-root core-courses-course-progress {
ion-app.app-root .core-horizontal-scroll core-courses-course-progress { ion-app.app-root .core-horizontal-scroll core-courses-course-progress {
@include horizontal_scroll_item(40%, 150px, 300px); @include horizontal_scroll_item(45%, 210px, 300px);
ion-card.card {
.core-course-thumb {
padding-top: 40%;
}
.core-course-link {
@include padding(4px, 0px, 4px, 8px);
.core-course-shortname {
font-size: 1.2rem;
}
.core-course-title {
margin: 3px 0;
max-width: calc(100% - 40px);
h2 {
font-size: 1.5rem;
ion-icon {
margin-right: 2px;
}
}
}
.core-button-spinner {
min-height: 40px;
min-width: 40px;
ion-spinner {
width: 20px;
height: 20px;
}
}
.item-button[icon-only] {
min-width: 40px;
width: 40px;
font-size: 1.5rem;
padding: 8px;
}
}
}
} }
body.version-3-1 .core-course-thumb{ body.version-3-1 .core-course-thumb{

39
src/theme/variables.scss
View File

@ -359,17 +359,44 @@ $core-question-state-incorrect-color: $red-light !default;
display: block; display: block;
&.card-md, .card-md { &.card-md, .card-md {
height: calc(100% - #{($card-md-margin-end + $card-md-margin-start)}); height: calc(100% - #{($card-md-margin-bottom + $card-md-margin-top)});
width: calc(100% - #{($card-md-margin-end + $card-md-margin-start)});
} }
&.card-ios, .card-ios { &.card-ios, .card-ios {
height: calc(100% - #{($card-ios-margin-end + $card-ios-margin-start)}); height: calc(100% - #{($card-ios-margin-bottom + $card-ios-margin-top)});
width: calc(100% - #{($card-md-margin-end + $card-md-margin-start)});
} }
&.card-wp, .card-wp { &.card-wp, .card-wp {
height: calc(100% - #{($card-wp-margin-end + $card-wp-margin-start)}); height: calc(100% - #{($card-wp-margin-bottom + $card-wp-margin-top)});
width: calc(100% - #{($card-md-margin-end + $card-md-margin-start)});
}
&.card-md {
margin-top: $card-md-margin-top;
margin-bottom: $card-md-margin-bottom;
}
&.card-ios {
margin-top: $card-ios-margin-top;
margin-bottom: $card-ios-margin-bottom;
}
&.card-wp {
margin-top: $card-wp-margin-top;
margin-bottom: $card-wp-margin-bottom;
}
&.card, .card {
@media (max-width: 360px) {
margin-left: 6px;
margin-right: 6px;
width: calc(100% - 12px);
}
}
[text-wrap] .label {
h2, p {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
} }
&.card {
margin-top: $card-md-margin-start;
margin-bottom: $card-md-margin-end;
} }
} }