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

MOBILE-3103 style: Fix on safe area measures

main
Pau Ferrer Ocaña 2021-10-06 13:06:00 +02:00
parent 492627d326
commit f1f94228b7
46 changed files with 207 additions and 115 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/addons/block/activitymodules/components/activitymodules/addon-block-activitymodules.html
View File

@ -3,7 +3,7 @@
<h2>{{ 'addon.block_activitymodules.pluginname' | translate }}</h2>
</ion-label>
</ion-item-divider>
<core-loading [hideUntil]="loaded" [fullscreen]="false" class="margin">
<core-loading [hideUntil]="loaded" [fullscreen]="false">
<ion-item class="ion-text-wrap item-media" *ngFor="let entry of entries" detail="true" button
(click)="gotoCoureListModType(entry)">
<core-mod-icon slot="start" [modicon]="entry.icon" [modname]="entry.modName" [showAlt]="false">

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

@ -39,8 +39,8 @@
</core-context-menu>
</div>
</ion-item-divider>
<core-loading [hideUntil]="loaded" [fullscreen]="false" class="margin">
<div class="safe-padding-horizontal" [hidden]="showFilter || !showSelectorFilter">
<core-loading [hideUntil]="loaded" [fullscreen]="false">
<div class="safe-area-padding-horizontal" [hidden]="showFilter || !showSelectorFilter">
<!-- "Time" selector. -->
<core-combobox [label]="'core.show' | translate" [selection]="selectedFilter" (onChange)="selectedChanged($event)">
<ion-select-option class="ion-text-wrap" value="allincludinghidden" *ngIf="showFilters.allincludinghidden != 'hidden'">
@ -87,7 +87,7 @@
</core-empty-box>
<!-- List of courses. -->
<div class="safe-area-page">
<div class="safe-area-padding">
<ion-grid class="ion-no-padding">
<ion-row class="ion-no-padding">
<ion-col *ngFor="let course of filteredCourses" class="ion-no-padding"

4
src/addons/block/recentlyaccessedcourses/components/recentlyaccessedcourses/addon-block-recentlyaccessedcourses.html
View File

@ -21,7 +21,7 @@
</core-horizontal-scroll-controls>
</div>
</ion-item-divider>
<core-loading [hideUntil]="loaded" [fullscreen]="false" class="safe-area-page margin">
<core-loading [hideUntil]="loaded" [fullscreen]="false">
<core-empty-box *ngIf="courses.length == 0" image="assets/img/icons/courses.svg" inline="true"
[message]="'addon.block_recentlyaccessedcourses.nocourses' | translate"></core-empty-box>
<!-- List of courses. -->
@ -31,10 +31,12 @@
(scroll)="scrollControls.updateScrollPosition()"
>
<div (onResize)="scrollControls.updateScrollPosition()" class="flex-row">
<div class="safe-area-pseudo-padding-start"></div>
<ng-container *ngFor="let course of courses">
<core-courses-course-progress [course]="course" class="core-recentlyaccessedcourses"
[showDownload]="downloadCourseEnabled && downloadEnabled"></core-courses-course-progress>
</ng-container>
<div class="safe-area-pseudo-padding-end"></div>
</div>
</div>
</core-loading>

6
src/addons/block/recentlyaccesseditems/components/recentlyaccesseditems/addon-block-recentlyaccesseditems.html
View File

@ -5,7 +5,7 @@
</core-horizontal-scroll-controls>
</div>
</ion-item-divider>
<core-loading [hideUntil]="loaded" [fullscreen]="false" class="safe-area-page">
<core-loading [hideUntil]="loaded" [fullscreen]="false">
<div
[id]="scrollElementId"
[hidden]="!items || items.length === 0"
@ -13,7 +13,8 @@
(scroll)="scrollControls.updateScrollPosition()"
>
<div *ngIf="items" (onResize)="scrollControls.updateScrollPosition()" class="flex-row">
<div *ngFor="let item of items">
<div class="safe-area-pseudo-padding-start"></div>
<div *ngFor="let item of items" class="core-horizontal-scroll-item">
<ion-card>
<ion-item class="core-course-module-handler item-media ion-text-wrap" detail="false" (click)="action($event, item)"
button>
@ -35,6 +36,7 @@
</ion-item>
</ion-card>
</div>
<div class="safe-area-pseudo-padding-end"></div>
</div>
</div>

2
src/addons/block/recentlyaccesseditems/components/recentlyaccesseditems/recentlyaccesseditems.scss
View File

@ -1,7 +1,7 @@
@import "~theme/globals";
:host {
.core-horizontal-scroll > div > div {
.core-horizontal-scroll div.core-horizontal-scroll-item {
@include horizontal_scroll_item(80%, 250px, 300px);
}

2
src/addons/block/sitemainmenu/components/sitemainmenu/addon-block-sitemainmenu.html
View File

@ -3,7 +3,7 @@
<h2>{{ 'addon.block_sitemainmenu.pluginname' | translate }}</h2>
</ion-label>
</ion-item-divider>
<core-loading [hideUntil]="loaded" [fullscreen]="false" class="margin">
<core-loading [hideUntil]="loaded" [fullscreen]="false">
<ng-container *ngIf="mainMenuBlock">
<ion-item class="ion-text-wrap" *ngIf="mainMenuBlock.summary">
<ion-label>

4
src/addons/block/starredcourses/components/starredcourses/addon-block-starredcourses.html
View File

@ -21,7 +21,7 @@
</core-horizontal-scroll-controls>
</div>
</ion-item-divider>
<core-loading [hideUntil]="loaded" [fullscreen]="false" class="safe-area-page margin">
<core-loading [hideUntil]="loaded" [fullscreen]="false">
<core-empty-box *ngIf="courses.length == 0" image="assets/img/icons/courses.svg" inline="true"
[message]="'addon.block_starredcourses.nocourses' | translate"></core-empty-box>
<!-- List of courses. -->
@ -32,10 +32,12 @@
(scroll)="scrollControls.updateScrollPosition()"
>
<div (onResize)="scrollControls.updateScrollPosition()" class="flex-row">
<div class="safe-area-pseudo-padding-start"></div>
<ng-container *ngFor="let course of courses">
<core-courses-course-progress [course]="course" class="core-block_starredcourses"
[showDownload]="downloadCourseEnabled && downloadEnabled"></core-courses-course-progress>
</ng-container>
<div class="safe-area-pseudo-padding-end"></div>
</div>
</div>
</core-loading>

8
src/addons/block/timeline/components/timeline/addon-block-timeline.html
View File

@ -9,8 +9,8 @@
</core-context-menu-item>
</core-context-menu>
</ion-item-divider>
<core-loading [hideUntil]="loaded" [fullscreen]="false" class="margin">
<div class="safe-padding-horizontal">
<core-loading [hideUntil]="loaded" [fullscreen]="false">
<div class="safe-area-padding-horizontal">
<core-combobox [selection]="filter" (onChange)="switchFilter($event)">
<ion-select-option class="ion-text-wrap" value="all">
{{ 'core.all' | translate }}
@ -35,12 +35,12 @@
</ion-select-option>
</core-combobox>
</div>
<core-loading [hideUntil]="timeline.loaded" [hidden]="sort != 'sortbydates'" [fullscreen]="false" class="margin">
<core-loading [hideUntil]="timeline.loaded" [hidden]="sort != 'sortbydates'" [fullscreen]="false">
<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'"
[fullscreen]="false" class="safe-area-page margin">
[fullscreen]="false" class="safe-area-padding">
<ion-grid class="ion-no-padding">
<ion-row class="ion-no-padding">
<ion-col *ngFor="let course of timelineCourses.courses" class="ion-no-padding" size="12" size-md="6">

2
src/addons/calendar/components/calendar/addon-calendar-calendar.html
View File

@ -8,7 +8,7 @@
</core-context-menu>
</core-navbar-buttons>
<core-loading [hideUntil]="loaded" class="safe-area-page">
<core-loading [hideUntil]="loaded" class="safe-area-padding">
<!-- Period name and arrows to navigate. -->
<ion-grid class="ion-no-padding addon-calendar-navigation">
<ion-row class="ion-align-items-center">

4
src/addons/calendar/pages/day/day.html
View File

@ -26,7 +26,7 @@
</ion-refresher>
<!-- Period name and arrows to navigate. -->
<ion-grid class="ion-no-padding safe-area-page">
<ion-grid class="ion-no-padding safe-area-padding">
<ion-row class="ion-align-items-center">
<ion-col class="ion-text-start" *ngIf="currentMoment">
<ion-button fill="clear" (click)="loadPrevious()" [attr.aria-label]="'addon.calendar.dayprev' | translate">
@ -44,7 +44,7 @@
</ion-row>
</ion-grid>
<core-loading [hideUntil]="loaded" class="safe-area-page">
<core-loading [hideUntil]="loaded" class="safe-area-padding">
<!-- There is data to be synchronized -->
<ion-card class="core-warning-card" *ngIf="hasOffline">
<ion-item>

6
src/addons/messages/pages/discussion/discussion.html
View File

@ -60,7 +60,7 @@
</core-navbar-buttons>
</ion-header>
<ion-content class="has-footer" (ionScroll)="scrollFunction()">
<core-loading [hideUntil]="loaded" class="safe-area-page">
<core-loading [hideUntil]="loaded" class="safe-area-padding-horizontal">
<!-- Load previous messages. -->
<core-infinite-loading [enabled]="canLoadMore" (action)="loadPrevious($event)" position="top" [error]="loadMoreError">
</core-infinite-loading>
@ -138,8 +138,8 @@
</ion-fab-button>
</ion-fab>
</ion-content>
<ion-footer color="light" class="footer-adjustable" *ngIf="loaded && (!conversationId || conversation)">
<ion-toolbar color="light">
<ion-footer class="footer-adjustable" *ngIf="loaded && (!conversationId || conversation)">
<ion-toolbar [color]="footerType == 'message' ? 'contrast' : 'light'">
<p *ngIf="footerType == 'unable'" class="ion-text-center ion-margin-horizontal">
{{ 'addon.messages.unabletomessage' | translate }}
</p>

2
src/addons/mod/assign/components/submission/addon-mod-assign-submission.html
View File

@ -1,4 +1,4 @@
<core-loading [hideUntil]="loaded" class="margin">
<core-loading [hideUntil]="loaded">
<!-- User and status of the submission. -->
<ion-item class="ion-text-wrap" *ngIf="!blindMarking && user" core-user-link [userId]="submitId" [courseId]="courseId"

2
src/addons/mod/book/components/index/addon-mod-book-index.html
View File

@ -38,7 +38,7 @@
</ion-item>
</ion-card>
<div class="ion-padding safe-padding-horizontal">
<div class="ion-padding safe-area-padding-horizontal">
<core-navigation-bar *ngIf="displayNavBar" [previous]="previousChapter?.id"
[previousTitle]="previousNavBarTitle" [next]="nextChapter?.id" [nextTitle]="nextNavBarTitle"
(action)="changeChapter($event)">

2
src/addons/mod/chat/components/index/addon-mod-chat-index.html
View File

@ -24,7 +24,7 @@
</core-navbar-buttons>
<!-- Content. -->
<core-loading [hideUntil]="loaded" class="safe-area-page">
<core-loading [hideUntil]="loaded" class="safe-area-padding">
<!-- Activity info. -->
<core-course-module-info *ngIf="showCompletion" [module]="module" [showManualCompletion]="true"

6
src/addons/mod/chat/pages/chat/chat.html
View File

@ -15,7 +15,7 @@
</ion-toolbar>
</ion-header>
<ion-content class="has-footer">
<core-loading [hideUntil]="loaded" class="safe-area-page">
<core-loading [hideUntil]="loaded" class="safe-area-padding">
<ion-list class="addon-messages-discussion-container" aria-live="polite">
<ng-container *ngFor="let message of messages; index as index; last as last">
@ -109,8 +109,8 @@
</core-empty-box>
</core-loading>
</ion-content>
<ion-footer color="light" class="footer-adjustable">
<ion-toolbar color="light">
<ion-footer class="footer-adjustable">
<ion-toolbar [color]="isOnline && polling && loaded ? 'contrast' : 'light'">
<p class="ion-text-center" *ngIf="!isOnline">
{{ 'addon.mod_chat.mustbeonlinetosendmessages' | translate }}
</p>

2
src/addons/mod/chat/pages/session-messages/session-messages.html
View File

@ -10,7 +10,7 @@
<ion-refresher slot="fixed" [disabled]="!loaded" (ionRefresh)="refreshMessages($event.target)">
<ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
</ion-refresher>
<core-loading [hideUntil]="loaded" class="safe-area-page">
<core-loading [hideUntil]="loaded" class="safe-area-padding">
<ion-list class="addon-messages-discussion-container">
<ng-container *ngFor="let message of messages; index as index;">

2
src/addons/mod/forum/components/post-options-menu/post-options-menu.html
View File

@ -1,4 +1,4 @@
<core-loading [hideUntil]="loaded" [fullscreen]="false" class="margin">
<core-loading [hideUntil]="loaded" [fullscreen]="false">
<ion-item button class="ion-text-wrap" (click)="editPost()" *ngIf="offlinePost || (canEdit && isOnline)" detail="false">
<ion-icon name="fas-pen" slot="start" aria-hidden="true"></ion-icon>
<ion-label>

2
src/addons/mod/h5pactivity/components/index/addon-mod-h5pactivity-index.html
View File

@ -34,7 +34,7 @@
</core-navbar-buttons>
<!-- Content. -->
<core-loading [hideUntil]="loaded" class="safe-area-page">
<core-loading [hideUntil]="loaded" class="safe-area-padding">
<!-- Activity info. -->
<core-course-module-info *ngIf="showCompletion" [module]="module" [showManualCompletion]="true"

2
src/addons/mod/imscp/components/index/addon-mod-imscp-index.html
View File

@ -26,7 +26,7 @@
</core-navbar-buttons>
<!-- Content. -->
<core-loading [hideUntil]="loaded" class="safe-area-page">
<core-loading [hideUntil]="loaded" class="safe-area-padding">
<!-- Activity info. -->
<core-course-module-info *ngIf="showCompletion" [module]="module" [showManualCompletion]="true"

2
src/addons/mod/lti/components/index/addon-mod-lti-index.html
View File

@ -17,7 +17,7 @@
</core-navbar-buttons>
<!-- Content. -->
<core-loading [hideUntil]="loaded" class="safe-area-page">
<core-loading [hideUntil]="loaded" class="safe-area-padding">
<!-- Activity info. -->
<core-course-module-info *ngIf="showCompletion" [module]="module" [showManualCompletion]="true"

2
src/addons/mod/page/components/index/addon-mod-page-index.html
View File

@ -23,7 +23,7 @@
</core-navbar-buttons>
<!-- Content. -->
<core-loading [hideUntil]="loaded" class="safe-area-page">
<core-loading [hideUntil]="loaded" class="safe-area-padding">
<!-- Activity info. -->
<core-course-module-info *ngIf="showCompletion" [module]="module" [showManualCompletion]="true"

2
src/addons/mod/resource/components/index/addon-mod-resource-index.html
View File

@ -18,7 +18,7 @@
</core-navbar-buttons>
<!-- Content. -->
<core-loading [hideUntil]="loaded" class="safe-area-page core-loading-fullheight">
<core-loading [hideUntil]="loaded" class="safe-area-padding core-loading-fullheight">
<!-- Activity info. -->
<core-course-module-info *ngIf="showCompletion" [module]="module" [showManualCompletion]="true"

2
src/addons/mod/scorm/components/index/addon-mod-scorm-index.html
View File

@ -26,7 +26,7 @@
</core-navbar-buttons>
<!-- Content. -->
<core-loading [hideUntil]="loaded">
<core-loading [hideUntil]="loaded" class="safe-area-padding">
<!-- Activity info. -->
<core-course-module-info *ngIf="showCompletion" [module]="module" [showManualCompletion]="true"

2
src/addons/mod/survey/components/index/addon-mod-survey-index.html
View File

@ -27,7 +27,7 @@
</core-navbar-buttons>
<!-- Content. -->
<core-loading [hideUntil]="loaded" class="safe-area-page">
<core-loading [hideUntil]="loaded" class="safe-area-padding">
<!-- Activity info. -->
<core-course-module-info *ngIf="showCompletion" [module]="module" [showManualCompletion]="true"

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

@ -2,6 +2,7 @@
:host {
max-width: 100%;
@include margin-horizontal(var(--ion-safe-area-left), var(--ion-safe-area-right));
ion-select,
ion-button {

12
src/core/components/loading/loading.scss
View File

@ -74,6 +74,18 @@
flex-direction: row;
}
}
&.safe-area-padding:not(.core-loading-inline) .core-loading-content,
&.safe-area-padding-horizontal:not(.core-loading-inline) .core-loading-content {
@include safe-area-padding-horizontal(0px, 0px);
}
&.safe-area-padding:not(.core-loading-inline) .core-loading-content {
padding-bottom: var(--ion-safe-area-bottom);
> * {
--ion-safe-area-bottom: 0px;
}
}
}
:host-context(ion-item) {

9
src/core/components/show-password/show-password.scss
View File

@ -1,3 +1,5 @@
@import "~theme/globals";
:host {
display: contents;
@ -5,7 +7,7 @@
background: transparent;
padding: 0 calc(var(--padding-start) / 2);
position: absolute;
right: 0;
@include safe-area-position(null, 0px, null, null);
margin-top: 0;
margin-bottom: 0;
z-index: 3;
@ -16,11 +18,6 @@
--padding-end: 47px !important;
}
:host-context([dir="rtl"]) ion-button {
left: 0;
right: unset;
}
:host-context(.md.item-label.stacked) ion-button {
bottom: 0;
}

8
src/core/components/split-view/split-view.scss
View File

@ -64,18 +64,18 @@
}
:host(.menu-only) {
--menu-min-width: 0;
--menu-min-width: 0px;
--menu-max-width: 100%;
--content-display: none;
--menu-border-width: 0;
--menu-border-width: 0px;
--menu-box-shadow: none;
--menu-z: 0;
--menu-z: 0px;
--selected-item-color: transparent;
}
:host(.content-only) {
--menu-display: none;
--menu-border-width: 0;
--menu-border-width: 0px;
}
:host(.outlet-activated) {

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

@ -15,8 +15,8 @@
ion-tab-bar.core-tabs-bar {
position: relative;
width: 100%;
background: var(--tabs-background);
@include safe-area-padding-end(null, 0px);
height: var(--height);
color: var(--tabs-color);
-webkit-filter: drop-shadow(0px 3px 3px rgba(var(--drop-shadow)));

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

@ -3,7 +3,7 @@
</div>
<div *ngIf="blocks && blocks.length > 0 && !hideBlocks" [class.core-hide-blocks]="hideBottomBlocks" class="core-course-blocks-side">
<core-loading [hideUntil]="dataLoaded" [fullscreen]="false" class="margin">
<core-loading [hideUntil]="dataLoaded" [fullscreen]="false">
<ion-list>
<!-- Course expand="block"s. -->
<ng-container *ngFor="let block of blocks">

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

@ -16,6 +16,8 @@
box-shadow: none !important;
flex-grow: 1;
max-width: 100%;
--ion-safe-area-right: 0px;
}
div.core-course-blocks-side {

2
src/core/features/block/components/pre-rendered-block/core-block-pre-rendered.html
View File

@ -7,7 +7,7 @@
</h2>
</ion-label>
</ion-item-divider>
<core-loading [hideUntil]="loaded" [fullscreen]="false" class="margin">
<core-loading [hideUntil]="loaded" [fullscreen]="false">
<ion-item *ngIf="block.contents?.content" class="ion-text-wrap core-block-content">
<ion-label>
<core-format-text [text]="block.contents?.content" contextLevel="block" [contextInstanceId]="block.instanceid"

2
src/core/features/comments/components/comments/core-comments.html
View File

@ -1,5 +1,5 @@
<ng-container *ngIf="!disabled">
<core-loading *ngIf="!showItem" [hideUntil]="commentsLoaded" [fullscreen]="false" class="margin">
<core-loading *ngIf="!showItem" [hideUntil]="commentsLoaded" [fullscreen]="false">
<button *ngIf="!countError" (click)="openComments($event)" class="as-link">
{{ 'core.comments.commentscount' | translate : {'$a': commentsCount} }}
</button>

4
src/core/features/comments/pages/viewer/viewer.html
View File

@ -119,8 +119,8 @@
</core-loading>
</ion-content>
<ion-footer color="light" class="footer-adjustable" *ngIf="commentsLoaded && canAddComments">
<ion-toolbar color="light">
<ion-footer class="footer-adjustable" *ngIf="commentsLoaded && canAddComments">
<ion-toolbar color="contrast">
<core-send-message-form [sendDisabled]="sending" [message]="newComment"
(onSubmit)="addComment($event)" [placeholder]="'core.comments.addcomment' | translate">
</core-send-message-form>

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

@ -98,7 +98,7 @@
<core-infinite-loading [enabled]="canLoadMore" (action)="showMoreActivities($event)"></core-infinite-loading>
</div>
<ion-buttons class="ion-padding core-course-section-nav-buttons safe-padding-horizontal"
<ion-buttons class="ion-padding core-course-section-nav-buttons safe-area-padding-horizontal"
*ngIf="displaySectionSelector && sections?.length">
<ion-button *ngIf="previousSection" (click)="sectionChanged(previousSection)" fill="outline" color="primary"
[attr.aria-label]="('core.previous' | translate) + ': ' + previousSection.name">

6
src/core/features/course/components/module-info/course-module-info.scss 100644
View File

@ -0,0 +1,6 @@
@import '~theme/globals.scss';
:host {
display: block;
@include padding-horizontal(var(--ion-safe-area-left), var(--ion-safe-area-right));
}

1
src/core/features/course/components/module-info/module-info.ts
View File

@ -21,6 +21,7 @@ import { CoreCourseModule, CoreCourseModuleCompletionData } from '@features/cour
@Component({
selector: 'core-course-module-info',
templateUrl: 'core-course-module-info.html',
styleUrls: ['course-module-info.scss'],
})
export class CoreCourseModuleInfoComponent {

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

@ -37,7 +37,7 @@
<ion-searchbar #searchbar *ngIf="courses && courses.length > 5" [(ngModel)]="filter" (ionInput)="filterChanged($event)"
(ionCancel)="filterChanged()" [placeholder]="'core.courses.filtermycourses' | translate">
</ion-searchbar>
<ion-grid class="ion-no-padding safe-area-page">
<ion-grid class="ion-no-padding safe-area-padding">
<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="4">

2
src/core/features/grades/pages/course/course.html
View File

@ -11,7 +11,7 @@
<ion-refresher slot="fixed" [disabled]="!grades.loaded" (ionRefresh)="refreshGrades($event.target)">
<ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
</ion-refresher>
<core-loading [hideUntil]="grades.loaded" class="safe-area-page">
<core-loading [hideUntil]="grades.loaded" class="safe-area-padding">
<core-empty-box *ngIf="grades.empty" icon="fas-chart-bar" [message]="'core.grades.nogradesreturned' | translate">
</core-empty-box>
<div *ngIf="!grades.empty" class="core-grades-container">

2
src/core/features/h5p/components/h5p-iframe/core-h5p-iframe.html
View File

@ -1,4 +1,4 @@
<core-loading [hideUntil]="iframeSrc" [fullscreen]="false" class="safe-area-page">
<core-loading [hideUntil]="iframeSrc" [fullscreen]="false" class="safe-area-padding">
<core-iframe *ngIf="iframeSrc" [src]="iframeSrc" iframeHeight="auto" [allowFullscreen]="true" (loaded)="iframeLoaded()">
</core-iframe>
<script *ngIf="resizeScript && iframeSrc" type="text/javascript" [src]="resizeScript"></script>

9
src/core/features/mainmenu/pages/menu/menu.scss
View File

@ -51,12 +51,14 @@
ion-tab-bar {
order: -1;
width: var(--menutabbar-size);
height: 100%;
height: calc(100% - var(--ion-safe-area-top) - var(--ion-safe-area-bottom));
flex-direction: column;
@include border-end(var(--border));
box-shadow: 3px 0 3px rgba(var(--drop-shadow));
border-top: 0;
@include padding(var(--ion-safe-area-top), 0px, var(--ion-safe-area-bottom), var(--ion-safe-area-left));
ion-tab-button {
width: 100%;
height: auto;
@ -68,6 +70,7 @@
}
.core-network-message {
--network-message-height: 16px;
position: absolute;
bottom: 0;
left: 0;
@ -80,6 +83,7 @@
height: 0;
transition: all 500ms ease-in-out;
opacity: .8;
z-index: 12;
}
.core-online-message,
@ -100,7 +104,8 @@
.core-network-message {
visibility: visible;
height: 16px;
height: var(--network-message-height);
padding-bottom: calc(var(--ion-safe-area-bottom, 0px) + var(--network-message-height));
pointer-events: none;
}
}

2
src/core/features/siteplugins/components/plugin-content/core-siteplugins-plugin-content.html
View File

@ -1,4 +1,4 @@
<core-loading [hideUntil]="dataLoaded" [fullscreen]="false" class="margin">
<core-loading [hideUntil]="dataLoaded" [fullscreen]="false">
<core-compile-html [text]="content" [javascript]="javascript" [jsData]="jsData" [forceCompile]="forceCompile" #compile>
</core-compile-html>
</core-loading>

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

@ -10,7 +10,7 @@
<ion-refresher slot="fixed" [disabled]="!loaded" (ionRefresh)="refreshData($event.target)">
<ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
</ion-refresher>
<ion-grid class="safe-area-page">
<ion-grid class="safe-area-padding">
<ion-row>
<ion-col size="12" [attr.col-sm-6]="collections && collections.length > 1 ? '' : null">
<core-search-box (onSubmit)="searchTags($event)" (onClear)="searchTags('')" [initialSearch]="query"
@ -28,7 +28,7 @@
</ion-col>
</ion-row>
</ion-grid>
<core-loading [hideUntil]="loaded && !searching" class="safe-area-page">
<core-loading [hideUntil]="loaded && !searching" class="safe-area-padding">
<core-empty-box *ngIf="!cloud || !cloud!.tags || !cloud!.tags.length" icon="fas-tags"
[message]="'core.tag.notagsfound' | translate: {$a: query}"></core-empty-box>

2
src/core/features/viewer/components/text/text.html
View File

@ -18,7 +18,7 @@
<core-file *ngFor="let file of files" [file]="file" [component]="component" [componentId]="componentId"></core-file>
</ion-card>
</ion-content>
<ion-footer color="light" *ngIf="displayCopyButton">
<ion-footer *ngIf="displayCopyButton">
<ion-button expand="block" color="light" (click)="copyText()">
<ion-icon name="fas-copy" aria-hidden="true" slot="start"></ion-icon>
{{ 'core.copytoclipboard' | translate }}

93
src/theme/globals.mixins.scss
View File

@ -50,100 +50,93 @@
}
@mixin border-start($px, $type: null, $color: null) {
@include ltr() {
border-left: $px $type $color;
}
border-left: $px $type $color;
@include rtl() {
border-left: unset;
border-right: $px $type $color;
}
}
@mixin border-end($px, $type: null, $color: null) {
@include ltr() {
border-right: $px $type $color;
}
border-right: $px $type $color;
@include rtl() {
border-right: unset;
border-left: $px $type $color;
}
}
@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});
$safe-area-position: calc(var(--ion-safe-area-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);
}
@include border-start($safe-area-position, $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});
$safe-area-position: calc(var(--ion-safe-area-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);
}
@include border-end($safe-area-position, $type, $color);
}
@mixin safe-area-margin-horizontal($start, $end: $start) {
$safe-area-end: null;
$safe-area-start: null;
$safe-area-start-env: null;
$safe-area-end-env: null;
@if ($end) {
$safe-area-end: calc(constant(safe-area-inset-right) + #{$end});
$safe-area-end-env: calc(env(safe-area-inset-right) + #{$end});
$safe-area-end: calc(var(--ion-safe-area-right) + #{$end});
}
@if ($start) {
$safe-area-start: calc(constant(safe-area-inset-left) + #{$start});
$safe-area-start-env: calc(env(safe-area-inset-left) + #{$start});
$safe-area-start: calc(var(--ion-safe-area-left) + #{$start});
}
@include margin-horizontal($start, $end);
@include margin-horizontal($safe-area-start, $safe-area-end);
}
@media screen and (orientation: landscape) {
@include margin-horizontal($safe-area-start, $safe-area-end);
@include margin-horizontal($safe-area-start-env, $safe-area-end-env);
@mixin safe-area-margin-start($start, $end) {
$safe-area-start: calc(var(--ion-safe-area-left) + #{$start});
@include margin-horizontal($safe-area-start, $end);
}
@mixin safe-area-margin-end($start, $end) {
$safe-area-end: calc(var(--ion-safe-area-right) + #{$end});
@include margin-horizontal($start, $safe-area-end);
}
@mixin safe-area-padding-horizontal($start, $end: $start) {
$safe-area-end: null;
$safe-area-start: null;
@if ($end) {
$safe-area-end: calc(var(--ion-safe-area-right) + #{$end});
}
@if ($start) {
$safe-area-start: calc(var(--ion-safe-area-left) + #{$start});
}
@include padding-horizontal($safe-area-start, $safe-area-end);
}
@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});
$safe-area-start: calc(var(--ion-safe-area-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);
}
@include padding-horizontal($safe-area-start, $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});
$safe-area-end: calc(var(--ion-safe-area-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);
}
@include padding-horizontal($start, $safe-area-end);
}
@mixin safe-area-position($top: null, $end: null, $bottom: null, $start: null) {
@include position-horizontal($start, $end);
@include safe-position-horizontal($start, $end);
top: $top;
bottom: $bottom;
$safe-area-start: calc(var(--ion-safe-area-left) + #{$start});
$safe-area-end: calc(var(--ion-safe-area-right) + #{$end});
@include position($top, $safe-area-end, $bottom, $safe-area-start);
}
@mixin core-headings() {

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

@ -234,6 +234,10 @@ ion-header ion-toolbar {
}
}
ion-footer ion-toolbar.ion-color-contrast {
background-color: var(--contrast-background);
}
// Ionic icon.
ion-icon {
position: relative;
@ -374,6 +378,44 @@ ion-list.list-md {
padding: 0;
}
// Safe areas
.safe-area-padding,
.safe-area-padding-horizontal {
@include padding-horizontal(var(--ion-safe-area-left), var(--ion-safe-area-right));
}
.safe-area-margin,
.safe-margin-horizontal {
@include margin-horizontal(var(--ion-safe-area-left), var(--ion-safe-area-right));
}
.ion-padding.safe-area-padding-horizontal {
@include safe-area-padding-horizontal(16px, 16px);
}
.ion-margin.safe-margin-horizontal {
@include safe-area-margin-horizontal(16px, 16px);
}
ion-tabs.placement-side .tabs-inner {
--ion-safe-area-left: 0px;
}
ion-tabs.placement-bottom .tabs-inner {
--ion-safe-area-bottom: 0px;
}
core-split-view.menu-and-content {
.menu {
--ion-safe-area-right: 0px;
}
.content-outlet {
--ion-safe-area-left: 0px;
}
}
// Header.
ion-header {
z-index: 12; // To hide ion-slides on scroll.
@ -393,6 +435,17 @@ body.core-iframe-fullscreen ion-router-outlet {
ion-tab-bar.mainmenu-tabs {
display: none;
// Restore original safe area.
.tabs-inner {
@supports (padding-left: constant(safe-area-inset-left)) {
--ion-safe-area-left: constant(safe-area-inset-left);
}
@supports (padding-left: env(safe-area-inset-left)) {
--ion-safe-area-left: env(safe-area-inset-left);
}
}
}
--core-header-toolbar-height: 48px;
@ -411,9 +464,12 @@ body.core-iframe-fullscreen ion-router-outlet {
.ion-page {
flex-direction: row-reverse;
ion-header {
width: var(--core-header-toolbar-height);
width: calc(var(--core-header-toolbar-height), var(--ion-safe-area-right));
@include safe-area-padding-horizontal(null, 0px);
background: var(--core-header-toolbar-background);
ion-toolbar {
padding: 0;
height: 100%;
--padding-start: 0px;
--padding-end: 0px;
@ -442,6 +498,8 @@ body.core-iframe-fullscreen ion-router-outlet {
@media only screen and (min-height: 400px) and (min-width: 300px) {
.core-modal-lateral {
--ion-safe-area-left: 0px;
--ion-safe-area-right: 0px;
.modal-wrapper {
position: absolute;
@ -478,6 +536,13 @@ body.core-iframe-fullscreen ion-router-outlet {
[aria-current="page"],
.item.item-current {
@include safe-area-border-start(var(--selected-item-border-width), solid, var(--selected-item-color));
> * {
--ion-safe-area-left: 0px;
}
&::part(native) {
--ion-safe-area-left: 0px;
}
}
.item.item-file {
@ -727,10 +792,14 @@ core-block ion-item-divider .core-button-spinner {
// Horizontal scrolling elements
.core-horizontal-scroll {
display: flex;
flex-flow: nowrap;
display: block;
overflow-x: scroll;
flex-direction: row;
.safe-area-pseudo-padding-start {
@include padding-horizontal(var(--ion-safe-area-left), 0px);
}
.safe-area-pseudo-padding-end {
@include padding-horizontal(0px, var(--ion-safe-area-right));
}
}
// Text formats.