From c55d443ea20eb885cdb690a56dd563238b9deaa7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Wed, 22 May 2024 15:34:30 +0200
Subject: [PATCH 1/5] MOBILE-4470 quiz: Reduce feedback font size

---
 src/core/features/question/question.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/core/features/question/question.scss b/src/core/features/question/question.scss
index 3ab801280..fe5726aa2 100644
--- a/src/core/features/question/question.scss
+++ b/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 {

From 413dbef14216ecb4fb87fd253275e391190dd647 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Wed, 22 May 2024 16:00:24 +0200
Subject: [PATCH 2/5] MOBILE-4470 refresh: Fix some spinner colors and hidden

---
 src/theme/components/collapsible-header.scss | 4 ++++
 src/theme/components/ion-loading.scss        | 3 ++-
 src/theme/components/ion-spinner.scss        | 2 --
 3 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/theme/components/collapsible-header.scss b/src/theme/components/collapsible-header.scss
index b587f82e2..7196c833c 100644
--- a/src/theme/components/collapsible-header.scss
+++ b/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 {
diff --git a/src/theme/components/ion-loading.scss b/src/theme/components/ion-loading.scss
index 1316c2906..64e600894 100644
--- a/src/theme/components/ion-loading.scss
+++ b/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);
 
diff --git a/src/theme/components/ion-spinner.scss b/src/theme/components/ion-spinner.scss
index f3b667b6f..dda00a929 100644
--- a/src/theme/components/ion-spinner.scss
+++ b/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);
 }

From 64cc206e19292c6dd225693d3b638bee793ae3f8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Wed, 22 May 2024 16:48:23 +0200
Subject: [PATCH 3/5] MOBILE-4470 data: Improve styles applied in database

---
 .../mod/data/components/index/addon-mod-data-index.html       | 4 ++--
 src/addons/mod/data/data.scss                                 | 2 +-
 src/addons/mod/data/pages/edit/edit.html                      | 4 ++--
 src/addons/mod/data/pages/entry/entry.html                    | 2 +-
 src/core/components/style/style.ts                            | 2 +-
 5 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/addons/mod/data/components/index/addon-mod-data-index.html b/src/addons/mod/data/components/index/addon-mod-data-index.html
index ac4cf7ce9..ebf61e0a1 100644
--- a/src/addons/mod/data/components/index/addon-mod-data-index.html
+++ b/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">
-        <core-style [css]="database.csstemplate" prefix=".addon-data-entries-{{database.id}}" />
+    <div class="addon-data-contents addon-data-entries addon-data-entries-{{database.id}}" *ngIf="!isEmpty && database">
+        <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>
diff --git a/src/addons/mod/data/data.scss b/src/addons/mod/data/data.scss
index 043e327a3..70ceb7dd0 100644
--- a/src/addons/mod/data/data.scss
+++ b/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;
diff --git a/src/addons/mod/data/pages/edit/edit.html b/src/addons/mod/data/pages/edit/edit.html
index f4916f20f..df520ec87 100644
--- a/src/addons/mod/data/pages/edit/edit.html
+++ b/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">
-            <core-style [css]="database.csstemplate" prefix=".{{cssClass}}" />
+        <div class="addon-data-contents addon-data-edit-entry {{cssClass}}" *ngIf="database">
+            <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" />
diff --git a/src/addons/mod/data/pages/entry/entry.html b/src/addons/mod/data/pages/entry/entry.html
index 0c2b27f8e..0c8d7026e 100644
--- a/src/addons/mod/data/pages/entry/entry.html
+++ b/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>
diff --git a/src/core/components/style/style.ts b/src/core/components/style/style.ts
index e831151f5..0cdefbe04 100644
--- a/src/core/components/style/style.ts
+++ b/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);

From 4da3e650e0247b1ebfe45503f38141a8c55618c5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Wed, 22 May 2024 16:48:47 +0200
Subject: [PATCH 4/5] MOBILE-4470 sites: Add ellipsis to sites list

---
 src/core/components/sites-list/sites-list.html | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/core/components/sites-list/sites-list.html b/src/core/components/sites-list/sites-list.html
index 7ac9a9149..429820659 100644
--- a/src/core/components/sites-list/sites-list.html
+++ b/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-label>
+    <ion-item-divider sticky="true" *ngIf="site" class="core-sites-list-sitename ion-text-nowrap">
+        <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}" />

From f53800471ddcde676cec89e2c2114310ea813e0d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Wed, 22 May 2024 17:15:28 +0200
Subject: [PATCH 5/5] MOBILE-4470 format-text: Make image viewer button always
 round

---
 src/theme/components/format-text.scss | 54 +++++++++++++--------------
 1 file changed, 27 insertions(+), 27 deletions(-)

diff --git a/src/theme/components/format-text.scss b/src/theme/components/format-text.scss
index d7e304b63..5cce7f8f1 100644
--- a/src/theme/components/format-text.scss
+++ b/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 {
-        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;
+        .core-image-viewer-icon {
             position: absolute;
-            left: 0;
-            right: 0;
-        }
+            @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;
 
-        &:hover {
-            opacity: .7;
-        }
+            width: var(--a11y-sizing-minTargetSize);
+            height: var(--a11y-sizing-minTargetSize);
+            max-width: var(--a11y-sizing-minTargetSize);
+            font-size: var(--mdl-typography-icon-fontSize-lg);
 
-        &.hidden {
-            display: none;
+            ion-icon {
+                flex: 1;
+                align-self: center;
+                /** Fix iOS icon size */
+                margin: 0 auto;
+                position: absolute;
+                left: 0;
+                right: 0;
+            }
+
+            &:hover {
+                opacity: .7;
+            }
+
+            &.hidden {
+                display: none;
+            }
         }
     }