This commit is contained in:
2020-10-13 17:34:48 +00:00
parent b33742a40a
commit fcfad814dd
14 changed files with 51 additions and 29 deletions

View File

@@ -2,27 +2,34 @@
@@@@@@@@@@@@@@@ ROADMAP STAGE 4 - REPORTING / DASHBOARD / KPI
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
todo: manifest / favicon convert to green/blue shirt from yellow
files need to go into C:\data\code\raven-client\ayanova\public\img\icons
https://github.com/onderceylan/pwa-asset-generator
https://realfavicongenerator.net/
have all the icons I need generated in temp folder
replace existing, add apple ones as seems to make sense, update manifest and index.HTML
any used need to be copied to server graphics folder for backup as well
Finally, test with devops and iPad and all devices to confirm
To try:
msft pwa stuff
It uses one of the additional icon24 or 48 for the task bar icon when running as an app
still has the 16px tiny one on the desktop
android from chrome is white background
android from ff is same color green as the shirt background! fuck!
maybe becuase it doesn't have a "maskable icon" see below
https://developers.google.com/web/fundamentals/design-and-ux/browser-customization
https://stackoverflow.com/questions/48956465/favicon-standard-2020-svg-ico-png-and-dimensions
remove the favico.ico completely as a test
ISSUES AFTER CHANGING ICON:
tiny icon used in windows when chrome install used
no image at all used in Android when chrome install used
todo: needs a maskable icon according to lighthouse:
The icons array must contain one object with a purpose property, and the value of that purpose property must include maskable.
https://web.dev/maskable-icon/
todo: for some reason the 32px icon is being surrounded by an if statement in the generated index.html page in dist folder
I think I tried commenting out the 32bit null one to see what would happen but haven't built yet to compare
May require a manual step for release of removing the comment if I can't find a way to turn that shit off, no idea what part of the build process is responsible, maybe workbox stuff?
TODO: tiny icon used in windows when chrome install to desktop used
Issue on github: https://github.com/RealFaviconGenerator/realfavicongenerator/issues/446
todo: figure out which tool and get rid of this added to index.html on build:
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
todo: client build, turn off generating manifest.json as I have a static one already
todo: service workers for monaco going in root of website folder, must be a config setting to move it into the proper place (not there)
couldn't find anything about it, may need to post to ask, it's not the end of the world but kind of stupid looking as all the rest of the js is in subfolder
todo: login, large view, branded logo and footer text not centered equally?

Binary file not shown.

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 4.1 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 39 KiB

After

Width:  |  Height:  |  Size: 14 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 9.2 KiB

After

Width:  |  Height:  |  Size: 3.8 KiB

View File

@@ -2,7 +2,8 @@
<browserconfig>
<msapplication>
<tile>
<square150x150logo src="/mstile-150x150.png"/>
<square310x310logo src="/mstile-310x310.png?v=81a"/>
<wide310x150logo src="/mstile-310x150.png?v=81a"/>
<TileColor>#ffc40d</TileColor>
</tile>
</msapplication>

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.1 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.7 KiB

After

Width:  |  Height:  |  Size: 1.5 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 15 KiB

View File

@@ -1,13 +1,23 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#00205b" />
<meta charset="utf-8" />
<meta
name="viewport"
content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0"
/>
<link
rel="apple-touch-icon"
sizes="180x180"
href="/apple-touch-icon.png?v=81a"
/>
<link
rel="icon"
type="image/png"
sizes="32x32"
href="/favicon-32x32.png?v=81a"
/>
<link rel="mask-icon" href="/safari-pinned-tab.svg?v=81a" color="#5bbad5" />
<title>AyaNova</title>
</head>
<body>

View File

@@ -3,18 +3,22 @@
"short_name": "AyaNova",
"icons": [
{
"src": "/android-chrome-192x192.png",
"src": "/android-chrome-192x192.png?v=81a",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/android-chrome-512x512.png",
"src": "/android-chrome-512x512.png?v=81a",
"sizes": "512x512",
"type": "image/png"
},
{
"src": "/favicon-32x32.png?v=81a",
"sizes": "32x32"
}
],
"start_url": "/",
"theme_color": "#7f9fda",
"background_color": "#7f9fda",
"theme_color": "#ffffff",
"background_color": "#ffffff",
"display": "standalone"
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.6 KiB

View File

@@ -1,4 +1,4 @@
export default {
version: "8.0.0-alpha.78",
version: "8.0.0-alpha.81",
copyright: "© 1999-2020, Ground Zero Tech-Works Inc."
};

View File

@@ -40,7 +40,7 @@ module.exports = {
//disable automatic icons, they have the wrong ones basically, use this guide https://developers.google.com/web/fundamentals/design-and-ux/browser-customization
//and put them directly into the index.html in the public folder as it's the source one used
//and https://realfavicongenerator.net/
favicon32: null,
//favicon32: null,
favicon16: null,
appleTouchIcon: null,
maskIcon: null,