Merge pull request #4060 from crazyserver/MOBILE-4470

Mobile 4470

src/addons/mod/data/components/index/addon-mod-data-index.html

@@ -74,8 +74,8 @@
         </ion-card>
     </ng-container>
 
-    <div class="addon-data-contents addon-data-entries-{{database.id}}" *ngIf="!isEmpty && database">
+    <div class="addon-data-contents addon-data-entries addon-data-entries-{{database.id}}" *ngIf="!isEmpty && database">
-        <core-style [css]="database.csstemplate" prefix=".addon-data-entries-{{database.id}}" />
+        <core-style [css]="database.csstemplate" prefix="div.addon-data-entries.addon-data-entries-{{database.id}}" />
 
         <core-compile-html [text]="entriesRendered" [jsData]="jsData" [extraImports]="extraImports" />
     </div>

src/addons/mod/data/data.scss

@@ -16,7 +16,7 @@ $grid-column-paddings: (
     --border-color: var(--stroke);
 }
 
-.addon-data-contents {
+.addon-data-edit-entry {
     overflow: visible;
     white-space: normal;
     word-break: break-word;

src/addons/mod/data/pages/edit/edit.html

@@ -20,8 +20,8 @@
         <core-group-selector [groupInfo]="groupInfo" [(selected)]="selectedGroup" (selectedChange)="setGroup(selectedGroup)"
             [courseId]="database?.course" />
 
-        <div class="addon-data-contents {{cssClass}}" *ngIf="database">
+        <div class="addon-data-contents addon-data-edit-entry {{cssClass}}" *ngIf="database">
-            <core-style [css]="database.csstemplate" prefix=".{{cssClass}}" />
+            <core-style [css]="database.csstemplate" prefix="div.addon-data-edit-entry.{{cssClass}}" />
 
             <form (ngSubmit)="save($event)" [formGroup]="editForm" #editFormEl>
                 <core-compile-html [text]="editFormRender" [jsData]="jsData" [extraImports]="extraImports" />

src/addons/mod/data/pages/entry/entry.html

@@ -28,7 +28,7 @@
             [courseId]="courseId" />
 
         <div class="addon-data-contents addon-data-entry addon-data-entries-{{database.id}}" *ngIf="database && entry">
-            <core-style [css]="database.csstemplate" prefix=".addon-data-entries-{{database.id}}" />
+            <core-style [css]="database.csstemplate" prefix="div.addon-data-entry.addon-data-entries-{{database.id}}" />
 
             <core-compile-html [text]="entryHtml" [jsData]="jsData" [extraImports]="extraImports" (compiling)="setRenderingEntry($event)" />
         </div>

src/core/components/sites-list/sites-list.html

@@ -21,8 +21,8 @@
 
 <!-- Template to render the header of a site card. -->
 <ng-template #siteCardHeader let-site="site" let-isCurrentSite="isCurrentSite">
-    <ion-item-divider sticky="true" *ngIf="site" class="core-sites-list-sitename">
+    <ion-item-divider sticky="true" *ngIf="site" class="core-sites-list-sitename ion-text-nowrap">
-        <ion-label>
+        <ion-label class="ion-text-nowrap">
             <h2>
                 <core-format-text [text]="site.siteName" clean="true" [siteId]="site.id" />
             </h2>
@@ -42,7 +42,7 @@
 
         <core-user-avatar [site]="site" slot="start" [linkProfile]="false" [siteId]="site.id" />
 
-        <ion-label>
+        <ion-label class="ion-text-nowrap">
             <p class="item-heading">{{site.fullname}}</p>
             <ng-container *ngIf="siteLabelTemplate" [ngTemplateOutlet]="siteLabelTemplate"
                 [ngTemplateOutletContext]="{site: site, isCurrentSite: isCurrentSite}" />

src/core/components/style/style.ts

@@ -41,7 +41,7 @@ export class CoreStyleComponent implements OnChanges {
     ngOnChanges(): void {
         if (this.element && this.element.nativeElement) {
             const style = document.createElement('style');
-            style.innerText = this.prefixCSS(this.css, this.prefix);
+            style.innerHTML = this.prefixCSS(this.css, this.prefix);
 
             this.element.nativeElement.innerHTML = '';
             this.element.nativeElement.appendChild(style);

src/core/features/question/question.scss

@@ -37,6 +37,7 @@
         background-color: var(--core-question-feedback-background-color);
 
         .specificfeedback, .rightanswer, .im-feedback, .feedback, .generalfeedback {
+            font: var(--mdl-typography-body-font-md);
             margin: 0 0 .5em;
 
             p {

src/theme/components/collapsible-header.scss

@@ -93,6 +93,10 @@ body:not(.core-iframe-fullscreen) .collapsible-header-page {
 
         ion-content {
             --offset-top: var(--collapsible-header-collapsed-height) !important;
+
+            > ion-refresher {
+                z-index: 1;
+            }
         }
 
         .collapsible-header-expanded {

src/theme/components/format-text.scss

@@ -69,37 +69,37 @@ core-format-text {
         position: relative;
         display: inline-block;
         max-width: 100%;
-    }
 
-    .core-image-viewer-icon {
+        .core-image-viewer-icon {
-        position: absolute;
-        @include position(null, 10px, 10px, null);
-        color: var(--ion-text-color);
-        border-radius: var(--mdl-shape-borderRadius-xl);
-        background-color: var(--core-format-text-viewer-icon-background);
-        display: flex;
-
-        width: var(--a11y-sizing-minTargetSize);
-        height: var(--a11y-sizing-minTargetSize);
-        max-width: var(--a11y-sizing-minTargetSize);
-        font-size: var(--mdl-typography-icon-fontSize-lg);
-
-        ion-icon {
-            flex: 1;
-            align-self: center;
-            /** Fix iOS icon size */
-            margin: 0 auto;
             position: absolute;
-            left: 0;
+            @include position(null, 10px, 10px, null);
-            right: 0;
+            color: var(--ion-text-color);
-        }
+            border-radius: var(--mdl-shape-borderRadius-xl);
+            background-color: var(--core-format-text-viewer-icon-background);
+            display: flex;
 
-        &:hover {
+            width: var(--a11y-sizing-minTargetSize);
-            opacity: .7;
+            height: var(--a11y-sizing-minTargetSize);
-        }
+            max-width: var(--a11y-sizing-minTargetSize);
+            font-size: var(--mdl-typography-icon-fontSize-lg);
 
-        &.hidden {
+            ion-icon {
-            display: none;
+                flex: 1;
+                align-self: center;
+                /** Fix iOS icon size */
+                margin: 0 auto;
+                position: absolute;
+                left: 0;
+                right: 0;
+            }
+
+            &:hover {
+                opacity: .7;
+            }
+
+            &.hidden {
+                display: none;
+            }
         }
     }
 

src/theme/components/ion-loading.scss

@@ -1,4 +1,5 @@
-ion-loading {
+ion-loading.ios,
+ion-loading.md {
     --spinner-color: var(--core-loading-spinner);
     --border-radius: var(--modal-radius);
 

src/theme/components/ion-spinner.scss

@@ -1,6 +1,4 @@
 ion-spinner,
 ion-refresher {
-    --ion-color-base: var(--core-loading-spinner);
-    --ion-color-primary: var(--core-loading-spinner);
     --color: var(--core-loading-spinner);
 }