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

Merge pull request #3121 from crazyserver/MOBILE-3814 

Mobile 3814
main
Dani Palou 2022-02-16 14:24:02 +01:00 committed by GitHub
parent 2228b398fa f5918e08a7
commit b98e7d4d0a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
20 changed files with 201 additions and 156 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -22,19 +22,19 @@
</ion-item-divider>
<core-loading [hideUntil]="loaded" [fullscreen]="false">
<ion-row class="ion-no-padding ion-justify-content-between ion-align-items-center" *ngIf="hasCourses">
<ion-col size="auto" class="ion-no-padding" *ngIf="filters.enabled">
<ion-row class="ion-justify-content-between ion-align-items-center addon-block-myoverview-filter" *ngIf="hasCourses">
<ion-col size="auto" *ngIf="filters.enabled">
<core-combobox interface="modal" [label]="'core.courses.filtermycourses' | translate" (onChange)="filterOptionsChanged($event)"
icon="fas-filter" [badge]="filters.count" [modalOptions]="filterModalOptions">
</core-combobox>
</ion-col>
<ion-col class="ion-no-padding">
<ion-col>
<!-- Filter courses. -->
<ion-searchbar class="ion-hide-md-down" [(ngModel)]="textFilter" (ionInput)="filterTextChanged($event.target)"
(ionCancel)="filterTextChanged($event.target)" [placeholder]="'core.filter' | translate">
</ion-searchbar>
</ion-col>
<ion-col size="auto" class="ion-no-padding" *ngIf="sort.enabled">
<ion-col size="auto" *ngIf="sort.enabled">
<core-combobox [label]="'core.sortby' | translate" [selection]="sort.selected" (onChange)="sortCourses($event)"
icon="fas-sort-amount-down-alt">
<ion-select-option class="ion-text-wrap" value="fullname">
@ -48,7 +48,7 @@
</ion-select-option>
</core-combobox>
</ion-col>
<ion-col size="auto" class="ion-no-padding" *ngIf="isLayoutSwitcherAvailable">
<ion-col size="auto" *ngIf="isLayoutSwitcherAvailable">
<ion-button *ngIf="layout == 'card'" fill="outline" (click)="toggleLayout('list')"
[attr.aria-label]="'addon.block_myoverview.list' | translate">
<ion-icon slot="icon-only" name="fas-list"></ion-icon>
@ -59,8 +59,8 @@
</ion-button>
</ion-col>
</ion-row>
<ion-row class="ion-no-padding ion-hide-md-up" *ngIf="hasCourses">
<ion-col class="ion-no-padding">
<ion-row class="ion-hide-md-up addon-block-myoverview-filter" *ngIf="hasCourses">
<ion-col>
<!-- Filter courses. -->
<ion-searchbar [(ngModel)]="textFilter" (ionInput)="filterTextChanged($event.target)"
(ionCancel)="filterTextChanged($event.target)" [placeholder]="'core.filter' | translate">

21
src/addons/block/myoverview/components/myoverview/myoverview.scss 100644
View File

@ -0,0 +1,21 @@
:host {
ion-row.addon-block-myoverview-filter {
padding: 4px 8px 0px 8px;
ion-col {
padding: 0 2px;
}
ion-button,
core-combobox ::ng-deep ion-button {
margin: 0;
ion-icon {
font-size: 20px;
}
}
::ng-deep ion-searchbar {
padding: 0;
}
}
}

1
src/addons/block/myoverview/components/myoverview/myoverview.ts
View File

@ -39,6 +39,7 @@ const FILTER_PRIORITY: AddonBlockMyOverviewTimeFilters[] = ['all', 'inprogress',
@Component({
selector: 'addon-block-myoverview',
templateUrl: 'addon-block-myoverview.html',
styleUrls: ['myoverview.scss'],
})
export class AddonBlockMyOverviewComponent extends CoreBlockBaseComponent implements OnInit, OnDestroy {

36
src/addons/mod/lesson/pages/player/player.html
View File

@ -36,20 +36,24 @@
<!-- Retake and ongoing score. -->
<ion-item class="ion-text-wrap" *ngIf="showRetake && !eolData && !processData">
<p>{{ 'addon.mod_lesson.attempt' | translate:{$a: retake} }}</p>
<ion-label>
<p>{{ 'addon.mod_lesson.attempt' | translate:{$a: retake} }}</p>
</ion-label>
</ion-item>
<ion-item *ngIf="pageData && pageData.ongoingscore && !eolData && !processData"
class="addon-mod_lesson-ongoingscore ion-text-wrap">
{{ pageData.ongoingscore }}
<ion-label>{{ pageData.ongoingscore }}</ion-label>
</ion-item>
<!-- Page content. -->
<ion-card *ngIf="!eolData && !processData">
<!-- Content page. -->
<ion-item class="ion-text-wrap" *ngIf="!question && pageContent">
<core-format-text [component]="component" [componentId]="lesson.coursemodule" [text]="pageContent" contextLevel="module"
[contextInstanceId]="lesson.coursemodule" [courseId]="courseId">
</core-format-text>
<ion-label>
<core-format-text [component]="component" [componentId]="lesson.coursemodule" [text]="pageContent"
contextLevel="module" [contextInstanceId]="lesson.coursemodule" [courseId]="courseId">
</core-format-text>
</ion-label>
</ion-item>
<!-- Question page. -->
@ -71,20 +75,24 @@
<!-- Short answer. -->
<ion-item class="ion-text-wrap" *ngSwitchCase="'shortanswer'">
<ion-input [type]="question.input!.type" placeholder="{{ 'addon.mod_lesson.youranswer' | translate }}"
[id]="question.input!.id" [formControlName]="question.input!.name" autocorrect="off"
[maxlength]="question.input!.maxlength">
</ion-input>
<ion-label>
<ion-input [type]="question.input!.type" placeholder="{{ 'addon.mod_lesson.youranswer' | translate }}"
[id]="question.input!.id" [formControlName]="question.input!.name" autocorrect="off"
[maxlength]="question.input!.maxlength">
</ion-input>
</ion-label>
</ion-item>
<!-- Essay. -->
<ng-container *ngSwitchCase="'essay'">
<ion-item *ngIf="question.textarea">
<core-rich-text-editor placeholder="{{ 'addon.mod_lesson.youranswer' | translate }}"
[control]="question.control" [component]="component" [componentId]="lesson?.coursemodule"
[autoSave]="true" contextLevel="module" [contextInstanceId]="lesson?.coursemodule"
elementId="answer_editor">
</core-rich-text-editor>
<ion-label>
<core-rich-text-editor placeholder="{{ 'addon.mod_lesson.youranswer' | translate }}"
[control]="question.control" [component]="component" [componentId]="lesson?.coursemodule"
[autoSave]="true" contextLevel="module" [contextInstanceId]="lesson?.coursemodule"
elementId="answer_editor">
</core-rich-text-editor>
</ion-label>
</ion-item>
<ion-item class="ion-text-wrap" *ngIf="!question.textarea && question.useranswer">
<ion-label>

8
src/addons/storagemanager/pages/courses-storage/courses-storage.html
View File

@ -10,11 +10,11 @@
</ion-header>
<ion-content>
<core-loading [hideUntil]="loaded">
<div class="ion-padding-horizontal ion-text-wrap" *ngIf="downloadedCourses.length">
<div class="ion-padding-horizontal ion-text-wrap" *ngIf="spaceUsage">
<h2>{{ 'addon.storagemanager.alldata' | translate }}</h2>
</div>
<ion-card>
<ion-item class="ion-text-wrap total" *ngIf="spaceUsage">
<ion-card *ngIf="spaceUsage">
<ion-item class="ion-text-wrap total">
<ion-label>
<p class="item-heading ion-text-wrap">{{ 'addon.storagemanager.totalspaceusage' | translate }}</p>
<ion-badge color="light" *ngIf="spaceUsage.spaceUsage">{{ spaceUsage.spaceUsage | coreBytesToSize }}</ion-badge>
@ -27,7 +27,7 @@
</ion-item>
</ion-card>
<div class="ion-padding-horizontal ion-text-wrap" *ngIf="downloadedCourses.length">
<div class="ion-padding-horizontal ion-text-wrap">
<h2>{{ 'addon.storagemanager.downloadedcourses' | translate }}</h2>
</div>
<ion-card>

2
src/assets/img/icons/empty.svg
View File

@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" preserveAspectRatio="xMinYMid meet" overflow="visible"/> height="16" viewBox="0 0 16 16" preserveAspectRatio="xMinYMid meet" overflow="visible"></svg>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" preserveAspectRatio="xMinYMid meet" overflow="visible"/>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 214 B

After

Width:  |  Height:  |  Size: 120 B

BIN
src/assets/img/top_logo.png 100644
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 16 KiB

2
src/core/components/combobox/combobox.scss
View File

@ -7,7 +7,7 @@
ion-select,
ion-button {
--icon-margin: 0 8px;
--icon-margin: 0 4px;
--background: var(--core-combobox-background);
--background-hover: black;
--background-activated: black;

4
src/core/features/course/components/module-navigation/core-course-module-navigation.html
View File

@ -1,6 +1,6 @@
<core-loading [hideUntil]="loaded" [fullscreen]="false">
<ion-row class="ion-justify-content-between ion-align-items-center ion-no-padding ion-wrap" *ngIf="previousModule || nextModule">
<ion-col size="auto" class="ion-no-padding">
<ion-col size="auto" class="ion-no-padding core-course-module-navigation-arrow">
<ion-button fill="clear" class="core-course-previous-module" *ngIf="previousModule" (click)="goToActivity(false)"
[attr.aria-label]="'core.course.gotopreviousactivity' | translate">
<ion-icon name="fas-arrow-left" slot="icon-only" aria-hidden="true"></ion-icon>
@ -13,7 +13,7 @@
[moduleId]="currentModule.id" [showManualCompletion]="true" (completionChanged)="completionChanged.emit($event)">
</core-course-module-completion>
</ion-col>
<ion-col size="auto" class="ion-no-padding">
<ion-col size="auto" class="ion-no-padding core-course-module-navigation-arrow">
<ion-button fill="clear" class="core-course-next-module" *ngIf="nextModule" (click)="goToActivity(true)"
[attr.aria-label]="'core.course.gotonextactivity' | translate">
<ion-icon name="fas-arrow-right" slot="icon-only" aria-hidden="true"></ion-icon>

4
src/core/features/course/components/module-navigation/module-navigation.scss
View File

@ -25,6 +25,10 @@
margin-top: var(--button-vertical-margin);
margin-bottom: var(--button-vertical-margin);
}
.core-course-module-navigation-arrow {
min-width: 48px;
}
}
:host-context(.core-iframe-fullscreen) {

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

@ -5,7 +5,8 @@
</ion-buttons>
<ion-title>
<h1>
<core-format-text [text]="siteName" contextLevel="system" [contextInstanceId]="0"></core-format-text>
<core-format-text [text]="siteName" contextLevel="system" [contextInstanceId]="0" class="core-header-sitename">
</core-format-text>
<img src="assets/img/top_logo.png" class="core-header-logo" [alt]="siteName">
</h1>
</ion-title>

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

@ -1,5 +1,3 @@
@import "~theme/globals";
:host ::ng-deep ion-item-divider {
display: none !important;
}
@ -14,18 +12,5 @@
core-block ::ng-deep ion-card.addon-block-myoverview {
--border-width: 0;
--background: transparent;
}
@if ($core-dashboard-logo) {
.in-toolbar h1 .core-header-logo {
max-height: calc(var(--core-header-toolbar-height) - 24px);
}
.in-toolbar h1 core-format-text {
display: none;
}
} @else {
.in-toolbar h1 .core-header-logo {
display: none;
}
margin: 0;
}

2
src/core/features/mainmenu/components/user-menu-button/user-menu-button.scss
View File

@ -8,5 +8,5 @@ core-user-avatar {
:host-context(ion-toolbar) core-user-avatar ::ng-deep img,
:host-context(ion-tab-bar) core-user-avatar ::ng-deep img {
padding: 2px !important;
padding: 6px !important;
}

3
src/core/features/mainmenu/pages/home/home.html
View File

@ -5,7 +5,8 @@
</ion-buttons>
<ion-title>
<h1>
<core-format-text [text]="siteName" contextLevel="system" [contextInstanceId]="0"></core-format-text>
<core-format-text [text]="siteName" contextLevel="system" [contextInstanceId]="0" class="core-header-sitename">
</core-format-text>
<img src="assets/img/top_logo.png" class="core-header-logo" [alt]="siteName">
</h1>
</ion-title>

15
src/core/features/mainmenu/pages/home/home.scss
View File

@ -1,15 +0,0 @@
@import "~theme/globals";
@if ($core-dashboard-logo) {
.in-toolbar h1 .core-header-logo {
max-height: calc(var(--core-header-toolbar-height) - 24px);
}
.in-toolbar h1 core-format-text {
display: none;
}
} @else {
.in-toolbar h1 .core-header-logo {
display: none;
}
}

1
src/core/features/mainmenu/pages/home/home.ts
View File

@ -29,7 +29,6 @@ import { CoreMainMenuDeepLinkManager } from '@features/mainmenu/classes/deep-lin
@Component({
selector: 'page-core-mainmenu-home',
templateUrl: 'home.html',
styleUrls: ['home.scss'],
})
export class CoreMainMenuHomePage implements OnInit {

4
src/core/features/search/components/search-box/search-box.scss
View File

@ -2,14 +2,14 @@
min-height: var(--a11y-min-target-size);
display: block;
position: relative;
margin: 8px;
ion-card {
position: absolute;
left: 0;
right: 0;
z-index: 4;
margin-top: 8px;
margin-bottom: 8px;
margin: 0;
--border-color: var(--core-search-box-border-color);
--border-radius: var(--core-search-box-border-radius);
--background: var(--core-search-box-background);

6
src/core/features/tag/pages/search/search.html
View File

@ -16,12 +16,12 @@
<ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
</ion-refresher>
<ion-grid class="safe-area-padding">
<ion-row>
<ion-col size="12" [attr.col-sm-6]="collections && collections.length > 1 ? '' : null">
<ion-row class="ion-no-padding ion-wrap">
<ion-col class="ion-no-padding" size="12" size-sm="6" [attr.col-sm-6]="collections && collections.length > 1 ? '' : null">
<core-search-box (onSubmit)="searchTags($event)" (onClear)="searchTags('')" [initialSearch]="query" [disabled]="searching"
autocorrect="off" [spellcheck]="false" [autoFocus]="false" [lengthCheck]="0" searchArea="CoreTag"></core-search-box>
</ion-col>
<ion-col size="12" size-sm="6" *ngIf="collections && collections.length > 1">
<ion-col class="ion-no-padding" size="12" size-sm="6" *ngIf="collections && collections.length > 1">
<core-combobox [selection]="collectionId" (onChange)="searchTags($event)" [disabled]="searching">
<ion-select-option class="ion-text-wrap" [value]="0">
{{ 'core.tag.inalltagcoll' | translate }}

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

@ -119,53 +119,6 @@ body {
}
}
ion-header ion-title{
h1, h2, .subheading {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
margin: 0;
}
.filter_mathjaxloader_equation div {
display: inline !important;
}
}
ion-app.md ion-header ion-title{
@include padding(0, 20px);
h1, h2, .subheading {
font-size: 20px;
font-weight: 500;
letter-spacing: .0125em;
}
h1 + h2,
h1 + .subheading {
font-size: 14px;
font-weight: 400;
}
}
ion-app.ios ion-header ion-title {
display: flex;
flex-direction: column;
justify-content: center;
h1, h2, .subheading {
font-size: 17px;
font-weight: 600;
}
h1 + h2,
h1 + .subheading {
font-size: 14px;
font-weight: 400;
}
}
// Correctly inherit ion-text-wrap onto labels.
.item ion-label core-format-text .core-format-text-content > *,
.fake-ion-item core-format-text .core-format-text-content > * {
@ -196,32 +149,109 @@ ion-toolbar {
--min-height: var(--core-header-toolbar-height);
}
ion-header ion-toolbar {
ion-back-button,
.in-toolbar.button-clear {
--color: var(--core-header-toolbar-color);
--ion-toolbar-color: var(--core-header-toolbar-color);
--border-radius: var(--huge-radius);
}
// Header.
ion-header {
z-index: 12; // To hide ion-slides on scroll.
.button.button-clear,
.button.button-solid {
--background: transparent;
--color: var(--core-header-toolbar-color);
--primary: var(--core-header-toolbar-color);
}
ion-toolbar {
ion-spinner {
margin: 10px;
}
.button.button-clear.button-has-icon-only,
.button.button-solid.button-has-icon-only {
--border-radius: var(--huge-radius);
width: 48px;
height: 48px;
}
ion-back-button,
.in-toolbar.button-clear {
--color: var(--core-header-toolbar-color);
--ion-toolbar-color: var(--core-header-toolbar-color);
--border-radius: var(--huge-radius);
}
.button.button-clear,
.button.button-solid {
--background: transparent;
--color: var(--core-header-toolbar-color);
--primary: var(--core-header-toolbar-color);
}
.button.button-clear.button-has-icon-only,
.button.button-solid.button-has-icon-only {
--border-radius: var(--huge-radius);
width: var(--a11y-min-target-size);
height: var(--a11y-min-target-size);
ion-icon {
font-size: 24px;
}
}
.core-navbar-button-hidden {
display: none !important;
.core-navbar-button-hidden {
display: none !important;
}
}
ion-title {
@include padding(0, 16px);
h1, h2, .subheading {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
margin: 0;
}
.filter_mathjaxloader_equation div {
display: inline !important;
}
h1 {
.core-header-logo {
max-height: var(--core-mainpage-headerlogo-maxheight);
display: var( --core-mainpage-headerlogo-display);
}
.core-header-sitename {
display: var(--core-mainpage-sitename-display);
}
}
h1, h2, .subheading {
font-size: 20px;
font-weight: 500;
letter-spacing: .0125em;
text-align: start;
padding: 0;
}
h1 + h2,
h1 + .subheading {
font-size: 14px;
font-weight: 400;
}
&.ios {
position: static;
width: auto;
height: auto;
left: auto;
right: auto;
top: auto;
text-align: start;
h1, h2, .subheading {
font-size: 17px;
font-weight: 600;
}
h1 + h2,
h1 + .subheading {
font-size: 14px;
font-weight: 400;
}
}
}
}
ion-tabs.hide-header ion-header {
display: none;
}
ion-footer ion-toolbar.ion-color-contrast {
@ -310,6 +340,10 @@ ion-button ion-spinner {
--color: inherit !important;
}
ion-button.button-has-icon-only {
margin: 2px;
}
ion-button:not(.button-has-icon-only):not(.button-small) > ion-icon {
min-width: 20px;
}
@ -470,19 +504,6 @@ core-split-view.menu-and-content {
}
}
// Header.
ion-header {
z-index: 12; // To hide ion-slides on scroll.
}
ion-tabs.hide-header ion-header {
display: none;
}
ion-toolbar {
ion-spinner {
margin: 10px;
}
}
// Iframe fullscreen manage.
// Using router outlet to avoid changing styles on modals.
body.core-iframe-fullscreen ion-router-outlet {
@ -944,7 +965,16 @@ ion-searchbar {
top: 4px;
}
.searchbar-search-icon.md {
top: 12px;
}
.searchbar-input,
.sc-ion-searchbar-md.searchbar-input,
.sc-ion-searchbar-ios.searchbar-input {
@include padding-horizontal(48px);
}
.searchbar-input {
@include padding-horizontal(48px);
}
}

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

@ -111,7 +111,7 @@
--core-bottom-tabs-background-selected: transparent;
--core-bottom-tabs-badge-color: var(--brand);
--core-bottom-tabs-badge-text-color: var(--brand-contrast);
--bottom-tabs-size: 56px;
--bottom-tabs-size: 48px;
ion-tab-bar.mainmenu-tabs {
--background: var(--core-bottom-tabs-background);
--color: var(--core-bottom-tabs-color);
@ -126,12 +126,12 @@
--core-header-toolbar-button-image-size: var(--a11y-min-target-size);
--core-header-toolbar-background: var(--white);
--core-header-toolbar-border-width: 1px;
--core-header-toolbar-border-width: 0px;
--core-header-toolbar-border-color: var(--stroke);
--core-header-toolbar-color: var(--gray-900);
--core-header-toolbar-height: 56px;
--core-header-toolbar-height: 48px;
html.ios {
--core-header-toolbar-height: 54px;
--core-header-toolbar-height: 48px;
}
ion-header ion-toolbar {
@ -220,7 +220,7 @@
--core-tab-color-active: var(--dark);
--core-tab-border-color-active: var(--brand);
--core-tab-font-weight-active: normal;
--core-tabs-height: 56px;
--core-tabs-height: 48px;
core-tabs, core-tabs-outlet {
ion-slide {
--background: var(--core-tab-background);
@ -363,4 +363,14 @@
@each $type, $value in $activity-icon-colors {
--activity#{$type}: #{$value};
}
--core-mainpage-sitename-display: none;
--core-mainpage-headerlogo-display: none;
--core-mainpage-headerlogo-maxheight: calc(var(--core-header-toolbar-height) - 16px);
@if ($core-dashboard-logo) {
--core-mainpage-headerlogo-display: inline;
} @else {
--core-mainpage-sitename-display: inline;
}
}