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

MOBILE-3814 styles: Improve top logo management

main
Pau Ferrer Ocaña 2022-02-16 12:58:54 +01:00
parent 72541486f6
commit b40bbef46b
8 changed files with 116 additions and 115 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/img/top_logo.png 100644
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 16 KiB

3
src/core/features/courses/pages/my/my.html
View File

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

16
src/core/features/courses/pages/my/my.scss
View File

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

3
src/core/features/mainmenu/pages/home/home.html
View File

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

15
src/core/features/mainmenu/pages/home/home.scss
View File

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

1
src/core/features/mainmenu/pages/home/home.ts
View File

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

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

@ -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 {
ion-back-button,
.in-toolbar.button-clear {
--color: var(--core-header-toolbar-color);
--ion-toolbar-color: var(--core-header-toolbar-color);
--border-radius: var(--huge-radius);
}
// Header.
ion-header {
z-index: 12; // To hide ion-slides on scroll.
.button.button-clear,
.button.button-solid {
--background: transparent;
--color: var(--core-header-toolbar-color);
--primary: var(--core-header-toolbar-color);
}
ion-toolbar {
ion-spinner {
margin: 10px;
}
.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-back-button,
.in-toolbar.button-clear {
--color: var(--core-header-toolbar-color);
--ion-toolbar-color: var(--core-header-toolbar-color);
--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 {
display: none !important;
.core-navbar-button-hidden {
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.

10
src/theme/theme.light.scss
View File

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