MOBILE-3814 styles: Improve top logo management

src/core/features/courses/pages/my/my.html

@@ -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>

src/core/features/courses/pages/my/my.scss

@@ -1,5 +1,3 @@
-@import "~theme/globals";
-
 :host ::ng-deep ion-item-divider {
     display: none !important;
 }
@@ -16,17 +14,3 @@ core-block ::ng-deep ion-card.addon-block-myoverview {
     --background: transparent;
     margin: 0;
 }
-
-@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;
-    }
-}

src/core/features/mainmenu/pages/home/home.html

@@ -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>

src/core/features/mainmenu/pages/home/home.scss

@@ -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;
-    }
-}

src/core/features/mainmenu/pages/home/home.ts

@@ -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 {
 

src/theme/theme.base.scss

@@ -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 {
+// Header.
-    ion-back-button,
+ion-header {
-    .in-toolbar.button-clear {
+    z-index: 12; // To hide ion-slides on scroll.
-        --color: var(--core-header-toolbar-color);
-        --ion-toolbar-color: var(--core-header-toolbar-color);
-        --border-radius: var(--huge-radius);
-    }
 
-    .button.button-clear,
+    ion-toolbar {
-    .button.button-solid {
+        ion-spinner {
-        --background: transparent;
+            margin: 10px;
-        --color: var(--core-header-toolbar-color);
+        }
-        --primary: var(--core-header-toolbar-color);
-    }
 
-    .button.button-clear.button-has-icon-only,
+        ion-back-button,
-    .button.button-solid.button-has-icon-only {
+        .in-toolbar.button-clear {
-        --border-radius: var(--huge-radius);
+            --color: var(--core-header-toolbar-color);
-        width: var(--a11y-min-target-size);
+            --ion-toolbar-color: var(--core-header-toolbar-color);
-        height: var(--a11y-min-target-size);
+            --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 {
+        .core-navbar-button-hidden {
-        display: none !important;
+            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 {
@@ -474,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 {
@@ -955,6 +972,10 @@ ion-searchbar {
     .sc-ion-searchbar-ios.searchbar-input {
         @include padding-horizontal(48px);
     }
+
+    .searchbar-input {
+        @include padding-horizontal(48px);
+    }
 }
 
 // File uploader.

src/theme/theme.light.scss

@@ -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;
+    }
 }