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

MOBILE-2676 ux: Fix styles in horizontal with notch

main
Pau Ferrer Ocaña 2018-11-20 11:50:33 +01:00
parent 6d8f557ada
commit f171854ea9
16 changed files with 161 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/addon/block/myoverview/components/myoverview/addon-block-myoverview.html
View File

@ -9,7 +9,7 @@
<h2>{{ 'addon.block_myoverview.pluginname' | translate }}</h2>
</ion-item-divider>
<core-loading [hideUntil]="loaded" class="core-loading-center">
<div padding ion-row justify-content-end [hidden]="showFilter">
<div padding ion-row justify-content-end [hidden]="showFilter" class="safe-padding-horizontal">
<!-- "Time" selector. -->
<ion-col [hidden]="!showSelectorFilter">
<ion-select text-start [title]="'core.show' | translate" [(ngModel)]="selectedFilter" ion-col (ngModelChange)="selectedChanged()" interface="popover" class="core-button-select">
@ -43,7 +43,7 @@
<ion-searchbar #searchbar *ngIf="showFilter" [(ngModel)]="courses.filter" (ionInput)="filterChanged($event)" (ionCancel)="filterChanged()" [placeholder]="'core.courses.filtermycourses' | translate">
</ion-searchbar>
<!-- List of courses. -->
<div>
<div class="safe-area-page">
<ion-grid no-padding>
<ion-row no-padding>
<ion-col *ngFor="let course of filteredCourses" no-padding col-12 col-sm-6 col-md-6 col-lg-4 col-xl-4 align-self-stretch>

16
src/addon/block/recentlyaccessedcourses/components/recentlyaccessedcourses/addon-block-recentlyaccessedcourses.html
View File

@ -11,11 +11,13 @@
<core-loading [hideUntil]="loaded" class="core-loading-center">
<core-empty-box *ngIf="courses.length == 0" image="assets/img/icons/courses.svg" [message]="'addon.block_recentlyaccessedcourses.nocourses' | translate"></core-empty-box>
<!-- List of courses. -->
<ion-grid no-padding>
<ion-row no-padding>
<ion-col *ngFor="let course of courses" no-padding col-12 col-sm-6 col-md-6 col-lg-4 col-xl-4 align-self-stretch>
<core-courses-course-progress [course]="course" class="core-recentlyaccessedcourses"></core-courses-course-progress>
</ion-col>
</ion-row>
</ion-grid>
<div class="safe-area-page">
<ion-grid no-padding>
<ion-row no-padding>
<ion-col *ngFor="let course of courses" no-padding col-12 col-sm-6 col-md-6 col-lg-4 col-xl-4 align-self-stretch>
<core-courses-course-progress [course]="course" class="core-recentlyaccessedcourses"></core-courses-course-progress>
</ion-col>
</ion-row>
</ion-grid>
</div>
</core-loading>

16
src/addon/block/starredcourses/components/starredcourses/addon-block-starredcourses.html
View File

@ -11,11 +11,13 @@
<core-loading [hideUntil]="loaded" class="core-loading-center">
<core-empty-box *ngIf="courses.length == 0" image="assets/img/icons/courses.svg" [message]="'addon.block_starredcourses.nocourses' | translate"></core-empty-box>
<!-- List of courses. -->
<ion-grid no-padding>
<ion-row no-padding>
<ion-col *ngFor="let course of courses" no-padding col-12 col-sm-6 col-md-6 col-lg-4 col-xl-4 align-self-stretch>
<core-courses-course-progress [course]="course" class="core-block_starredcourses"></core-courses-course-progress>
</ion-col>
</ion-row>
</ion-grid>
<div class="safe-area-page">
<ion-grid no-padding>
<ion-row no-padding>
<ion-col *ngFor="let course of courses" no-padding col-12 col-sm-6 col-md-6 col-lg-4 col-xl-4 align-self-stretch>
<core-courses-course-progress [course]="course" class="core-block_starredcourses"></core-courses-course-progress>
</ion-col>
</ion-row>
</ion-grid>
</div>
</core-loading>

22
src/addon/block/timeline/components/timeline/addon-block-timeline.html
View File

@ -2,7 +2,7 @@
<h2>{{ 'addon.block_timeline.pluginname' | translate }}</h2>
</ion-item-divider>
<core-loading [hideUntil]="loaded" class="core-loading-center">
<div padding ion-row>
<div padding ion-row class="safe-padding-horizontal">
<ion-col>
<ion-select text-start [(ngModel)]="filter" (ngModelChange)="switchFilter()" interface="popover" class="core-button-select">
<ion-option value="all">{{ 'core.all' | translate }}</ion-option>
@ -25,15 +25,17 @@
<addon-block-timeline-events [events]="timeline.events" showCourse="true" [canLoadMore]="timeline.canLoadMore" (loadMore)="loadMoreTimeline()" [from]="dataFrom" [to]="dataTo"></addon-block-timeline-events>
</core-loading>
<core-loading [hideUntil]="timelineCourses.loaded" [hidden]="sort != 'sortbycourses'" class="core-loading-center">
<ion-grid no-padding>
<ion-row no-padding>
<ion-col *ngFor="let course of timelineCourses.courses" no-padding col-12 col-md-6>
<core-courses-course-progress [course]="course">
<addon-block-timeline-events [events]="course.events" [canLoadMore]="course.canLoadMore" (loadMore)="loadMoreCourse(course)" [from]="dataFrom" [to]="dataTo"></addon-block-timeline-events>
</core-courses-course-progress>
</ion-col>
</ion-row>
</ion-grid>
<div class="safe-area-page">
<ion-grid no-padding>
<ion-row no-padding>
<ion-col *ngFor="let course of timelineCourses.courses" no-padding col-12 col-md-6>
<core-courses-course-progress [course]="course">
<addon-block-timeline-events [events]="course.events" [canLoadMore]="course.canLoadMore" (loadMore)="loadMoreCourse(course)" [from]="dataFrom" [to]="dataTo"></addon-block-timeline-events>
</core-courses-course-progress>
</ion-col>
</ion-row>
</ion-grid>
</div>
<core-empty-box *ngIf="timelineCourses.courses.length == 0" image="assets/img/icons/courses.svg" [message]="'addon.block_timeline.nocoursesinprogress' | translate"></core-empty-box>
</core-loading>
</core-loading>

6
src/addon/files/pages/list/list.html
View File

@ -10,7 +10,7 @@
<core-loading [hideUntil]="filesLoaded" *ngIf="showPrivateFiles || showSiteFiles">
<!-- Allow selecting the files to see: private or site. -->
<div padding *ngIf="showPrivateFiles && showSiteFiles && !path">
<div padding *ngIf="showPrivateFiles && showSiteFiles && !path" class="safe-padding-horizontal">
<ion-select [(ngModel)]="root" (ngModelChange)="rootChanged()" interface="popover" class="core-button-select">
<ion-option value="my">{{ 'addon.files.privatefiles' | translate }}</ion-option>
<ion-option value="site">{{ 'addon.files.sitefiles' | translate }}</ion-option>
@ -22,13 +22,13 @@
<!-- List of files. -->
<ion-list *ngIf="files && files.length > 0">
<div *ngFor="let file of files">
<ng-container *ngFor="let file of files">
<a *ngIf="file.isdir" ion-item class="item-media" [navPush]="'AddonFilesListPage'" [navParams]="{path: file.link, title: file.filename}">
<img [src]="file.imgPath" alt="" role="presentation" item-start>
<p>{{file.filename}}</p>
</a>
<core-file *ngIf="!file.isdir" [file]="file" [component]="component" [componentId]="file.contextid"></core-file>
</div>
</ng-container>
</ion-list>
<!-- Message telling there are no files. -->

2
src/addon/messages/pages/discussion/discussion.html
View File

@ -16,7 +16,7 @@
<core-loading [hideUntil]="loaded">
<!-- Load previous messages. -->
<core-infinite-loading [enabled]="canLoadMore" (action)="loadPrevious($event)" position="top" [error]="loadMoreError"></core-infinite-loading>
<ion-list class="addon-messages-discussion-container" [attr.aria-live]="polite">
<ion-list class="addon-messages-discussion-container safe-area-page" [attr.aria-live]="polite">
<ng-container *ngFor="let message of messages; index as index; last as last">
<ion-chip *ngIf="showDate(message, messages[index - 1])" class="addon-messages-date" color="light">
<ion-label>{{ message.timecreated | coreFormatDate: "LL" }}</ion-label>

2
src/addon/notifications/pages/settings/settings.html
View File

@ -34,7 +34,7 @@
</ion-card>
<!-- Show processor selector. -->
<div padding>
<div padding class="safe-padding-horizontal">
<ion-select *ngIf="preferences && preferences.processors && preferences.processors.length > 0" [ngModel]="currentProcessor.name" (ngModelChange)="changeProcessor($event)" interface="popover" class="core-button-select">
<ion-option *ngFor="let processor of preferences.processors" [value]="processor.name">{{ processor.displayname }}</ion-option>
</ion-select>

31
src/app/app.scss
View File

@ -742,7 +742,8 @@ ion-app.app-root {
}
.core-#{$color-name}-selected-item {
@include border-start(5px, solid, $color-base);
@include safe-area-border-start(5px, solid, $color-base);
&.item-md {
@include padding(null, null, null, $item-md-padding-start - 5px);
}
@ -752,7 +753,11 @@ ion-app.app-root {
&.item-wp {
@include padding(null, null, null, $item-wp-padding-start - 5px);
}
}
}
.split-pane-main .core-#{$color-name}-selected-item {
@include border-start(5px, solid, $color-base);
}
.core-#{$color-name}-circle {
margin: 0 4px;
@ -989,6 +994,28 @@ body.keyboard-is-open {
}
}
.safe-padding-horizontal,
[padding].safe-padding-horizontal,
ion-app.ios [padding].safe-padding-horizontal {
@include safe-area-padding-horizontal(0px, 0px);
}
ion-app.ios .split-pane-side,
.split-pane-side {
.safe-padding-horizontal,
[padding].safe-padding-horizontal {
@include safe-area-padding-start(0px, $content-padding);
}
}
ion-app.ios .split-pane-main,
.split-pane-main {
.safe-padding-horizontal,
[padding].safe-padding-horizontal {
@include safe-area-padding-end($content-padding, 0px);
}
}
// Fix iframes in fullscreen mode.
//
// Ionic sets "contain: strict" to some elements. This enables paint containment,

5
src/components/search-box/search-box.scss
View File

@ -6,4 +6,9 @@ ion-app.app-root core-search-box {
.item.item-input.item-block .item-inner ion-input {
border-bottom: 0;
}
.item-inner {
padding-right: 0 !important;
padding-left: 0 !important;
}
}

38
src/components/split-view/split-view.scss
View File

@ -21,7 +21,8 @@ ion-app.app-root core-split-view {
.split-pane-side .core-split-item-selected {
background-color: $gray-lighter;
@include border-start(5px, solid, $core-splitview-selected);
@include safe-area-border-start(5px, solid, $core-splitview-selected);
&.item-md {
@include padding(null, null, null, $item-md-padding-start - 5px);
}
@ -32,6 +33,12 @@ ion-app.app-root core-split-view {
@include padding(null, null, null, $item-wp-padding-start - 5px);
}
}
.item-ios[detail-push] .item-inner,
button.item-ios:not([detail-none]) .item-inner,
a.item-ios:not([detail-none]) .item-inner {
@include background-position(end, $item-ios-padding-end - 2, center);
}
}
ion-header {
display: none;
@ -40,3 +47,32 @@ ion-app.app-root core-split-view {
padding-top: 0 !important;
}
}
.safe-area-page {
@include safe-area-padding-horizontal(0px, 0px);
}
ion-app.app-root .split-pane-visible .split-pane-side {
.safe-area-page {
@include safe-area-padding-start(0px, 0px);
.core-split-item-selected {
@include border-start(5px, solid, $core-splitview-selected);
}
}
// Disable safe area padding.
.item-ios.item-block .item-inner {
@include padding-horizontal(null, $item-ios-padding-end / 2);
}
}
ion-app.app-root .split-pane-visible .split-pane-main {
.safe-area-page {
@include safe-area-padding-end(0px, 0px);
}
.toolbar {
@include safe-area-padding-end(0px, 0px);
}
}

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

@ -10,7 +10,7 @@
<core-loading [hideUntil]="loaded">
<!-- Section selector. -->
<core-dynamic-component [component]="sectionSelectorComponent" [data]="data">
<div text-wrap *ngIf="displaySectionSelector && sections && sections.length" padding class="clearfix" ion-row justify-content-between>
<div text-wrap *ngIf="displaySectionSelector && sections && sections.length" padding class="clearfix" ion-row justify-content-between class="safe-padding-horizontal">
<button float-start ion-button icon-start icon-end (click)="showSectionSelector($event)" color="light" class="core-button-select button-no-uppercase" ion-col>
<core-icon name="fa-folder"></core-icon>
<span class="core-section-selector-text">{{selectedSection && (selectedSection.formattedName || selectedSection.name) || 'core.course.sections' | translate }}</span>

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

@ -7,7 +7,7 @@ ion-app.app-root core-course-module {
min-height: 52px;
&.item .item-inner {
@include padding(null, 0, null, null);
@include safe-area-padding(null, 0px, null, null);
}
.label {
@include margin(0, 0, 0, null);

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

@ -34,8 +34,7 @@ ion-app.app-root core-courses-course-progress {
}
.core-course-link {
padding-top: 8px;
padding-bottom: 8px;
@include padding(8px, 0px, 8px, 16px);
.item-inner {
@include padding(null, 0, null, null);
}

2
src/core/grades/components/course/core-grades-course.html
View File

@ -6,7 +6,7 @@
<core-empty-box *ngIf="!gradesTable" icon="stats" [message]="'core.grades.nogradesreturned' | translate">
</core-empty-box>
<div *ngIf="gradesTable" class="core-grades-container">
<div *ngIf="gradesTable" class="core-grades-container safe-area-page">
<table cellspacing="0" cellpadding="0" class="core-grades-table">
<thead>
<tr>

5
src/core/sharedfiles/pages/list/list.html
View File

@ -15,16 +15,15 @@
</ion-refresher>
<!-- Allow selecting the site to view. -->
<core-site-picker [hidden]="!filesLoaded" [initialSite]="siteId" (siteSelected)="changeSite($event)"></core-site-picker>
<ion-item-divider color="light"></ion-item-divider>
<core-loading [hideUntil]="filesLoaded">
<ion-list *ngIf="files && files.length > 0">
<div *ngFor="let file of files; let idx = index">
<ng-container *ngFor="let file of files; let idx = index">
<core-local-file *ngIf="file.isFile" [file]="file" [manage]="manage" [overrideClick]="pick" (onClick)="filePicked(file)" (onDelete)="fileDeleted(idx)" (onRename)="fileRenamed(idx, $event)"></core-local-file>
<a ion-item text-wrap class="item-media" *ngIf="!file.isFile" (click)="openFolder(file)">
<img src="assets/img/files/folder-64.png" alt="{{ 'core.folder' | translate }}" role="presentation" item-start>
<p>{{ file.name }}</p>
</a>
</div>
</ng-container>
</ion-list>
<core-empty-box *ngIf="files && !files.length && manage" icon="folder" [message]="'core.sharedfiles.nosharedfiles' | translate"></core-empty-box>
<core-empty-box *ngIf="files && !files.length && !manage" icon="folder" [message]="'core.sharedfiles.nosharedfilestoupload' | translate"></core-empty-box>

47
src/theme/variables.scss
View File

@ -291,6 +291,53 @@ $core-question-state-incorrect-color: $red-light !default;
}
}
@mixin safe-area-border-start($px, $type, $color) {
$safe-area-position: calc(constant(safe-area-inset-left) + #{$px});
$safe-area-position-env: calc(env(safe-area-inset-left) + #{$px});
@include border-start($px, $type, $color);
@media screen and (orientation: landscape) {
@include border-start($safe-area-position, $type, $color);
@include border-start($safe-area-position-env, $type, $color);
}
}
@mixin safe-area-border-end($px, $type, $color) {
$safe-area-position: calc(constant(safe-area-inset-right) + #{$px});
$safe-area-position-env: calc(env(safe-area-inset-right) + #{$px});
@include border-end($px, $type, $color);
@media screen and (orientation: landscape) {
@include border-end($safe-area-position, $type, $color);
@include border-end($safe-area-position-env, $type, $color);
}
}
@mixin safe-area-padding-start($start, $end) {
$safe-area-start: calc(constant(safe-area-inset-left) + #{$start});
$safe-area-start-env: calc(env(safe-area-inset-left) + #{$start});
@include padding-horizontal($start, $end);
@media screen and (orientation: landscape) {
@include padding-horizontal($safe-area-start, $end);
@include padding-horizontal($safe-area-start-env, $end);
}
}
@mixin safe-area-padding-end($start, $end) {
$safe-area-end: calc(constant(safe-area-inset-right) + #{$end});
$safe-area-end-env: calc(env(safe-area-inset-right) + #{$end});
@include padding-horizontal($start, $end);
@media screen and (orientation: landscape) {
@include padding-horizontal($start, $safe-area-end);
@include padding-horizontal($start, $safe-area-end-env);
}
}
// Font Awesome
$fa-font-path: $font-path;
@import "font-awesome";