Use SVG logo in installer/upgrader (#12922)

* Use SVG logo in upgrader

* Adjust logo in app header and boot failed as well

* Remove width and height from CSS

* Update sizes

* Set image size

* Disable draggable of logo
This commit is contained in:
Bjarne Fyrstenborg
2022-09-02 15:28:39 +02:00
committed by GitHub
parent 17d72f9436
commit 8f4d8d60b0
4 changed files with 33 additions and 46 deletions

View File

@@ -16,7 +16,7 @@
<body ng-class="{loading:installer.loading}" ng-controller="Umbraco.InstallerController" id="umbracoInstallPageBody">
<img src="assets/img/application/logo_white.png" id="logo" />
<img src="assets/img/application/umbraco_logomark_white.svg" width="32" height="32" alt="Umbraco" draggable="false" id="logo" />
<umb-loader position="bottom"
class="umb-installer-loader"

View File

@@ -5,18 +5,13 @@
max-width: 100%;
height: @appHeaderHeight;
padding: 0 20px;
&__logo {
margin-right: 30px;
flex-shrink: 0;
}
}
.umb-app-header__logo {
margin-right: 30px;
flex-shrink: 0;
button {
img {
height: 30px;
}
}
}
@media (max-width: 1279px) {
.umb-app-header__logo {
display: none;
@@ -29,16 +24,13 @@
top: 50px;
left: 17px;
font-size: 13px;
border-radius: 6px;
width: 160px;
padding: 20px 20px;
background-color:@white;
color: @blueExtraDark;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .14), 0 1px 6px 1px rgba(0, 0, 0, .14);
text-decoration: none;
text-align: center;
&::before {
@@ -55,7 +47,6 @@
img {
display: block;
height: auto;
width: 120px;
margin-left: auto;
margin-right: auto;
margin-bottom: 3px;

View File

@@ -1,40 +1,36 @@
<div>
<div class="umb-app-header">
<div class="umb-app-header__logo" ng-if="hideBackofficeLogo !== true">
<button
type="button"
class="btn-reset"
ng-click="toggleLogoModal()"
>
<img
src="assets/img/application/umbraco_logomark_white.svg"
alt="Umbraco"
/>
<button type="button"
class="btn-reset"
ng-click="toggleLogoModal()">
<img src="assets/img/application/umbraco_logomark_white.svg"
alt="Umbraco"
width="30"
height="30"
draggable="false" />
</button>
<div
tabindex="0"
class="umb-app-header__logo-modal"
on-outside-click="hideLogoModal()"
ng-click="stopClickEvent($event)"
ng-focus="keepLogoModal()"
ng-blur="hideLogoModal()"
class="umb-app-header__logo-modal"
ng-if="logoModal.show"
>
<img
src="assets/img/application/umbraco_logo_large_blue.svg"
alt="Umbraco — The Friendly CMS"
/>
ng-if="logoModal.show">
<img src="assets/img/application/umbraco_logo_large_blue.svg"
alt="Umbraco — The Friendly CMS"
width="120"
draggable="false" />
<small> {{logoModal.text}} </small>
<br /><br />
<a
href="https://umbraco.com"
title="Umbraco website"
target="_blank"
rel="noopener"
ng-focus="keepLogoModal()"
ng-blur="hideLogoModal()"
>Umbraco.com</a
>
<a href="https://umbraco.com"
title="Umbraco website"
target="_blank"
rel="noopener"
ng-focus="keepLogoModal()"
ng-blur="hideLogoModal()">
Umbraco.com</a>
</div>
</div>

View File

@@ -45,8 +45,6 @@
position: absolute;
top: 22px;
left: 25px;
width: 30px;
height: 30px;
z-index: 1;
}
.error-container {
@@ -71,10 +69,12 @@
</head>
<body>
<main class="error-container">
<img
src="/umbraco/assets/img/application/umbraco_logomark_white.svg"
class="logo"
/>
<img src="/umbraco/assets/img/application/umbraco_logomark_white.svg"
alt="Umbraco"
width="30"
height="30"
draggable="false"
class="logo" />
<div class="error">
<h1>Boot Failed</h1>
<p>