Fixed: PWA Manifest with URL base

(cherry picked from commit aedcd046fc4fc621dae4b231cc80d4b269a69177)

Closes #5203

Fixed: PWA Manifest images

(cherry picked from commit da7d17f5e826d5273dba0b4f73227ffc8ed8a6c7)

Closes #5030
This commit is contained in:
Mark McDowall 2024-08-18 18:58:29 -07:00 committed by Bogdan
parent ca23ac3011
commit 0c2ede48e8
11 changed files with 138 additions and 89 deletions

View file

@ -134,6 +134,12 @@ module.exports = (env) => {
{
source: 'frontend/src/Content/robots.txt',
destination: path.join(distFolder, 'Content/robots.txt')
},
// manifest.json and browserconfig.xml
{
source: 'frontend/src/Content/*.(json|xml)',
destination: path.join(distFolder, 'Content')
}
]
}

View file

@ -1,9 +0,0 @@
<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
<msapplication>
<tile>
<square150x150logo src="/Content/Images/Icons/mstile-150x150.png"/>
<TileColor>#00ccff</TileColor>
</tile>
</msapplication>
</browserconfig>

View file

@ -1,19 +0,0 @@
{
"name": "Lidarr",
"icons": [
{
"src": "android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "android-chrome-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"start_url": "../../../../",
"theme_color": "#3a3f51",
"background_color": "#3a3f51",
"display": "standalone"
}

View file

@ -0,0 +1,11 @@
<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
<msapplication>
<tile>
<square150x150logo src="__URL_BASE__/Content/Images/Icons/mstile-150x150.png" />
<TileColor>
#00ccff
</TileColor>
</tile>
</msapplication>
</browserconfig>

View file

@ -0,0 +1,19 @@
{
"name": "Lidarr",
"icons": [
{
"src": "__URL_BASE__/Content/Images/Icons/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "__URL_BASE__/Content/Images/Icons/android-chrome-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"start_url": "__URL_BASE__/",
"theme_color": "#3a3f51",
"background_color": "#3a3f51",
"display": "standalone"
}

View file

@ -33,7 +33,7 @@
sizes="16x16"
href="/Content/Images/Icons/favicon-16x16.png"
/>
<link rel="manifest" href="/Content/Images/Icons/manifest.json" crossorigin="use-credentials" />
<link rel="manifest" href="/Content/manifest.json" crossorigin="use-credentials" />
<link
rel="mask-icon"
href="/Content/Images/Icons/safari-pinned-tab.svg"
@ -47,7 +47,7 @@
/>
<meta
name="msapplication-config"
content="/Content/Images/Icons/browserconfig.xml"
content="/Content/browserconfig.xml"
/>
<link rel="stylesheet" type="text/css" href="/Content/Fonts/fonts.css">

View file

@ -11,8 +11,11 @@
<!-- Android/Apple Phone -->
<meta name="mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="format-detection" content="telephone=no">
<meta
name="apple-mobile-web-app-status-bar-style"
content="black-translucent"
/>
<meta name="format-detection" content="telephone=no" />
<meta name="description" content="Lidarr" />
@ -33,7 +36,11 @@
sizes="16x16"
href="/Content/Images/Icons/favicon-16x16.png"
/>
<link rel="manifest" href="/Content/Images/Icons/manifest.json" crossorigin="use-credentials" />
<link
rel="manifest"
href="/Content/manifest.json"
crossorigin="use-credentials"
/>
<link
rel="mask-icon"
href="/Content/Images/Icons/safari-pinned-tab.svg"
@ -45,10 +52,7 @@
href="/favicon.ico"
data-no-hash
/>
<meta
name="msapplication-config"
content="/Content/Images/Icons/browserconfig.xml"
/>
<meta name="msapplication-config" content="/Content/browserconfig.xml" />
<link rel="stylesheet" type="text/css" href="/Content/styles.css" />
<link rel="stylesheet" type="text/css" href="/Content/Fonts/fonts.css" />
@ -59,7 +63,7 @@
body {
background-color: var(--pageBackground);
color: var(--textColor);
font-family: "Roboto", "open sans", "Helvetica Neue", Helvetica, Arial,
font-family: 'Roboto', 'open sans', 'Helvetica Neue', Helvetica, Arial,
sans-serif;
}
@ -209,9 +213,7 @@
</div>
<div class="panel-body">
<div class="sign-in">
SIGN IN TO CONTINUE
</div>
<div class="sign-in">SIGN IN TO CONTINUE</div>
<form
role="form"
@ -230,8 +232,8 @@
pattern=".{1,}"
required
title="User name is required"
autoFocus="true"
autoCapitalize="false"
autofocus="true"
autocapitalize="false"
/>
</div>
@ -282,16 +284,16 @@
</body>
<script type="text/javascript">
var yearSpan = document.getElementById("year");
yearSpan.innerHTML = "2017-" + new Date().getFullYear();
var yearSpan = document.getElementById('year');
yearSpan.innerHTML = '2017-' + new Date().getFullYear();
var copyDiv = document.getElementById("copy");
copyDiv.classList.remove("hidden");
var copyDiv = document.getElementById('copy');
copyDiv.classList.remove('hidden');
if (window.location.search.indexOf("loginFailed=true") > -1) {
var loginFailedDiv = document.getElementById("login-failed");
if (window.location.search.indexOf('loginFailed=true') > -1) {
var loginFailedDiv = document.getElementById('login-failed');
loginFailedDiv.classList.remove("hidden");
loginFailedDiv.classList.remove('hidden');
}
var light = {
@ -311,7 +313,7 @@
primaryHoverBorderColor: '#1D563D',
failedColor: '#f05050',
forgotPasswordColor: '#909fa7',
forgotPasswordAltColor: '#748690'
forgotPasswordAltColor: '#748690',
};
var dark = {
@ -331,21 +333,16 @@
primaryHoverBorderColor: '#1D563D',
failedColor: '#f05050',
forgotPasswordColor: '#737d83',
forgotPasswordAltColor: '#546067'
forgotPasswordAltColor: '#546067',
};
var theme = "_THEME_";
var theme = '_THEME_';
var defaultDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
var finalTheme = theme === 'dark' || (theme === 'auto' && defaultDark) ?
dark :
light;
var finalTheme =
theme === 'dark' || (theme === 'auto' && defaultDark) ? dark : light;
Object.entries(finalTheme).forEach(([key, value]) => {
document.documentElement.style.setProperty(
`--${key}`,
value
);
document.documentElement.style.setProperty(`--${key}`, value);
});
</script>
</html>