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

MOBILE-3814 styles: Adapt width to home pages

main
Pau Ferrer Ocaña 2022-02-10 11:42:44 +01:00
parent 4b075f0e6d
commit 98fe7224b9
14 changed files with 68 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/addons/block/myoverview/components/myoverview/addon-block-myoverview.html
View File

@ -73,7 +73,8 @@
<!-- List of courses. -->
<div class="safe-area-padding" *ngIf="hasCourses">
<ion-grid class="ion-no-padding" [class.core-no-grid]="layouts.selected != 'card'">
<ion-grid class="ion-no-padding" [class.core-no-grid]="layouts.selected != 'card'"
[class.list-item-limited-width]="layouts.selected != 'card'">
<ion-row class="ion-no-padding">
<ion-col *ngFor="let course of filteredCourses" class="ion-no-padding" size="12" size-sm="6" size-md="6" size-lg="4"
size-xl="3">

2
src/core/features/course/components/format/core-course-format.html
View File

@ -69,7 +69,7 @@
class="core-course-module-list-wrapper" [id]="section.id">
<ion-item-divider class="course-section ion-text-wrap" [class.item-dimmed]="section.visible === 0 || section.uservisible === false">
<ion-label>
<h2 *ngIf="section.name">
<h2 *ngIf="section.name" class="big">
<core-format-text [text]="section.name" contextLevel="course" [contextInstanceId]="course.id">
</core-format-text>
</h2>

4
src/core/features/course/components/format/format.scss
View File

@ -1,7 +1,3 @@
:host {
--item-divider-font-size: var(--item-divider-font-size-big);
}
.core-course-section-nav-buttons {
display: flex;
justify-content: space-between;

2
src/core/features/course/components/module/module.scss
View File

@ -1,7 +1,7 @@
@import "~theme/globals";
:host {
--horizontal-margin: 12px;
--horizontal-margin: 10px;
ion-card {
margin-left: var(--horizontal-margin);

2
src/core/features/courses/components/course-list-item/course-list-item.scss
View File

@ -101,6 +101,8 @@ ion-chip {
// List layout.
ion-card.core-course-list-item {
max-width: var(--list-item--max-width);
ion-icon.course-icon {
padding: 12px;
font-size: calc(var(--avatar-size) - 24px);

87
src/core/features/courses/pages/categories/categories.html
View File

@ -25,53 +25,56 @@
<ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
</ion-refresher>
<core-loading [hideUntil]="categoriesLoaded">
<ion-item *ngIf="currentCategory" class="ion-text-wrap">
<ion-icon name="fas-folder" slot="start" [attr.aria-label]="'core.category' | translate"></ion-icon>
<ion-label>
<p class="item-heading">
<core-format-text [text]="currentCategory.name" contextLevel="coursecat" [contextInstanceId]="currentCategory.id">
</core-format-text>
</p>
<p *ngIf="currentCategory.description">
<core-format-text [text]="currentCategory.description" [maxHeight]="120" contextLevel="coursecat"
[contextInstanceId]="currentCategory.id"></core-format-text>
</p>
</ion-label>
</ion-item>
<ng-container *ngIf="categories.length > 0">
<ion-item-divider>
<ion-list class="list-item-limited-width">
<ion-item *ngIf="currentCategory" class="ion-text-wrap">
<ion-icon name="fas-folder" slot="start" [attr.aria-label]="'core.category' | translate"></ion-icon>
<ion-label>
<h2>{{ 'core.courses.categories' | translate }}</h2>
<p class="item-heading">
<core-format-text [text]="currentCategory.name" contextLevel="coursecat" [contextInstanceId]="currentCategory.id">
</core-format-text>
</p>
<p *ngIf="currentCategory.description">
<core-format-text [text]="currentCategory.description" [maxHeight]="120" contextLevel="coursecat"
[contextInstanceId]="currentCategory.id"></core-format-text>
</p>
</ion-label>
</ion-item-divider>
<section *ngFor="let category of categories">
<ion-item button class="ion-text-wrap" (click)="openCategory(category.id)" [attr.aria-label]="category.name" detail="true">
<ion-icon name="fas-folder" slot="start" [attr.aria-label]="'core.category' | translate"></ion-icon>
</ion-item>
<ng-container *ngIf="categories.length > 0">
<ion-item-divider>
<ion-label>
<h2>
<core-format-text [text]="category.name" contextLevel="coursecat" [contextInstanceId]="category.id">
</core-format-text>
</h2>
<h2 class="big">{{ 'core.courses.categories' | translate }}</h2>
</ion-label>
<ion-badge slot="end" *ngIf="!showOnlyEnrolled && category.coursecount > 0" color="light">
<span aria-hidden="true">{{ category.coursecount }}</span>
<span class="sr-only">{{ 'core.courses.therearecourses' | translate:{ $a: category.coursecount } }}</span>
</ion-badge>
</ion-item>
</section>
</ng-container>
</ion-item-divider>
<ion-card *ngFor="let category of categories">
<ion-item button class="ion-text-wrap" (click)="openCategory(category.id)" [attr.aria-label]="category.name"
detail="true">
<ion-icon name="fas-folder" slot="start" [attr.aria-label]="'core.category' | translate"></ion-icon>
<ion-label>
<h2>
<core-format-text [text]="category.name" contextLevel="coursecat" [contextInstanceId]="category.id">
</core-format-text>
</h2>
</ion-label>
<ion-badge slot="end" *ngIf="!showOnlyEnrolled && category.coursecount > 0" color="light">
<span aria-hidden="true">{{ category.coursecount }}</span>
<span class="sr-only">{{ 'core.courses.therearecourses' | translate:{ $a: category.coursecount } }}</span>
</ion-badge>
</ion-item>
</ion-card>
</ng-container>
<ng-container *ngIf="courses.length > 0">
<ion-item-divider>
<ion-label>
<h2 *ngIf="!showOnlyEnrolled">{{ 'core.courses.courses' | translate }}</h2>
<h2 *ngIf="showOnlyEnrolled">{{ 'core.courses.mycourses' | translate }}</h2>
</ion-label>
</ion-item-divider>
<core-courses-course-list-item *ngFor="let course of courses" [course]="course" [showDownload]="downloadEnabled">
</core-courses-course-list-item>
</ng-container>
<ng-container *ngIf="courses.length > 0">
<ion-item-divider>
<ion-label>
<h2 *ngIf="!showOnlyEnrolled" class="big">{{ 'core.courses.courses' | translate }}</h2>
<h2 *ngIf="showOnlyEnrolled" class="big">{{ 'core.courses.mycourses' | translate }}</h2>
</ion-label>
</ion-item-divider>
<core-courses-course-list-item *ngFor="let course of courses" [course]="course" [showDownload]="downloadEnabled">
</core-courses-course-list-item>
</ng-container>
</ion-list>
<core-empty-box *ngIf="!categories.length && !courses.length" icon="fas-graduation-cap"
[message]="'core.courses.nocoursesyet' | translate">
</core-empty-box>

2
src/core/features/courses/pages/dashboard/dashboard.html
View File

@ -9,7 +9,7 @@
</ion-refresher>
<core-loading [hideUntil]="loaded">
<ion-list>
<ion-list class="list-item-limited-width">
<ng-container *ngFor="let block of blocks">
<core-block *ngIf="block.visible" [block]="block" contextLevel="user" [instanceId]="userId"></core-block>
</ng-container>

0
src/core/features/courses/pages/dashboard/dashboard.scss
View File

1
src/core/features/courses/pages/dashboard/dashboard.ts
View File

@ -31,7 +31,6 @@ import { CoreBlockDelegate } from '@features/block/services/block-delegate';
@Component({
selector: 'page-core-courses-dashboard',
templateUrl: 'dashboard.html',
styleUrls: ['dashboard.scss'],
})
export class CoreCoursesDashboardPage implements OnInit, OnDestroy {

6
src/core/features/courses/pages/list/list.html
View File

@ -37,8 +37,10 @@
</ion-item-divider>
</ng-container>
<core-courses-course-list-item *ngFor="let course of courses" [course]="course" [showDownload]="downloadEnabled">
</core-courses-course-list-item>
<ion-list class="list-item-limited-width">
<core-courses-course-list-item *ngFor="let course of courses" [course]="course" [showDownload]="downloadEnabled">
</core-courses-course-list-item>
</ion-list>
<core-infinite-loading [enabled]="canLoadMore" (action)="loadMoreCourses($event)" [error]="loadMoreError">
</core-infinite-loading>

2
src/core/features/courses/pages/my/my.html
View File

@ -24,7 +24,7 @@
<core-loading [hideUntil]="loaded">
<ion-item class="ion-text-wrap divider">
<ion-label>
<h2>{{ 'core.courses.mycourses' | translate }}</h2>
<h2 class="big">{{ 'core.courses.mycourses' | translate }}</h2>
</ion-label>
<div slot="end" class="flex-row">
<!-- Download all courses. -->

4
src/core/features/courses/pages/my/my.scss
View File

@ -1,9 +1,5 @@
@import "~theme/globals";
:host {
--item-divider-font-size: var(--item-divider-font-size-big);
}
:host ::ng-deep ion-item-divider {
display: none !important;
}

23
src/theme/theme.base.scss
View File

@ -743,19 +743,11 @@ ion-card {
}
ion-list.core-course-module-list-wrapper,
.list-item-limited-width,
.core-course-module-list-wrapper {
max-width: var(--module-list-width);
max-width: var(--list-item--max-width);
margin-left: auto;
margin-right: auto;
--padding-start: 12px;
--padding-end: 12px;
padding-left: var(--padding-start);
padding-right: var(--padding-end);
core-course-module {
--horizontal-margin: 0px;
}
}
ion-toolbar h1 img.core-bar-button-image,
@ -1262,12 +1254,15 @@ ion-item.item.divider {
border-bottom-width: var(--item-divider-border-width);
--border-width: var(--item-divider-border-width);
--inner-border-width: 0 0 var(--item-divider-border-width) 0;
font-size: var(--item-divider-font-size);
font-weight: medium;
h2, ion-label h2,
p.item-heading, ion-label p.item-heading {
ion-label h2,
ion-label p.item-heading {
font-size: var(--item-divider-font-size);
font-weight: 500;
line-height: 1.5;
}
ion-label h2.big {
font-size: var(--item-divider-font-size-big);
}
}

3
src/theme/theme.light.scss
View File

@ -71,7 +71,8 @@
--module-icon-size: 24px;
--module-icon-radius: var(--medium-radius);
--module-list-width: 768px;
--list-item--max-width: 768px;
--ion-background-color: var(--background-color);
--ion-background-color-rgb: #{$background-color-rgb};