yaso_meth/mih-project
2
4
Fork 2
Code Issues 8 Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Merge pull request #21 from yaso-meth/Splash-Screen-Fix-on-android-app

Browse Source 
enhance splash screen for android display
This commit is contained in:
yaso-meth
2024-12-06 10:47:39 +02:00
committed by GitHub
parent 3a7959172a 4c9189edb4
commit 0e6cf28735
13 changed files with 34 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
Frontend/android/app/src/main/res/drawable-hdpi/android12splash.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 16 KiB

After

Width:  |  Height:  |  Size: 24 KiB

BIN
Frontend/android/app/src/main/res/drawable-mdpi/android12splash.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 9.6 KiB

After

Width:  |  Height:  |  Size: 15 KiB

BIN
Frontend/android/app/src/main/res/drawable-night-hdpi/android12splash.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 16 KiB

After

Width:  |  Height:  |  Size: 24 KiB

BIN
Frontend/android/app/src/main/res/drawable-night-mdpi/android12splash.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 9.6 KiB

After

Width:  |  Height:  |  Size: 15 KiB

BIN
Frontend/android/app/src/main/res/drawable-night-xhdpi/android12splash.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 19 KiB

After

Width:  |  Height:  |  Size: 31 KiB

BIN
Frontend/android/app/src/main/res/drawable-night-xxhdpi/android12splash.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 30 KiB

After

Width:  |  Height:  |  Size: 51 KiB

BIN
Frontend/android/app/src/main/res/drawable-night-xxxhdpi/android12splash.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 38 KiB

After

Width:  |  Height:  |  Size: 63 KiB

BIN
Frontend/android/app/src/main/res/drawable-xhdpi/android12splash.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 19 KiB

After

Width:  |  Height:  |  Size: 31 KiB

BIN
Frontend/android/app/src/main/res/drawable-xxhdpi/android12splash.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 30 KiB

After

Width:  |  Height:  |  Size: 51 KiB

BIN
Frontend/android/app/src/main/res/drawable-xxxhdpi/android12splash.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 38 KiB

After

Width:  |  Height:  |  Size: 63 KiB

BIN
Frontend/images/splash_screen/splash_screen_icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 59 KiB

3
Frontend/pubspec.yaml
View File

@@ -96,6 +96,7 @@ flutter:
- images/ - images/
- images/loyalty_cards/ - images/loyalty_cards/
- images/app_icon/ - images/app_icon/
- images/splash_screen/
# - images/a_dot_ham.jpeg # - images/a_dot_ham.jpeg
# An image asset can refer to one or more resolution-specific "variants", see # An image asset can refer to one or more resolution-specific "variants", see
@@ -182,7 +183,7 @@ flutter_native_splash:
# 640 pixels in diameter. # 640 pixels in diameter.
# App icon without an icon background: This should be 1152×1152 pixels, and fit within a circle # App icon without an icon background: This should be 1152×1152 pixels, and fit within a circle
# 768 pixels in diameter. # 768 pixels in diameter.
image: images\logo_light.png image: images/splash_screen/splash_screen_icon.png
# Splash screen background color. # Splash screen background color.
color: "#3A4454" color: "#3A4454"

76
Frontend/web/index.html
View File

@@ -1,14 +1,10 @@
<!DOCTYPE html> <!DOCTYPE html><html><head>
<html>
<head>
<base href="/"> <base href="/">
<!-- APP Description --> <!-- APP Description -->
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta content="IE=Edge" http-equiv="X-UA-Compatible"> <meta content="IE=Edge" http-equiv="X-UA-Compatible">
<meta name="description" <meta name="description" content="Digitizing Mzansi one process at a time. Discover essential Mzansi apps to streamline your personal and professional life. Simplify your daily tasks with our user-friendly solutions.">
content="Digitizing Mzansi one process at a time. Discover essential Mzansi apps to streamline your personal and professional life. Simplify your daily tasks with our user-friendly solutions.">
<!-- iOS meta tags & icons --> <!-- iOS meta tags & icons -->
<meta name="mobile-web-app-capable" content="yes"> <meta name="mobile-web-app-capable" content="yes">
@@ -31,7 +27,15 @@
<!-- Splash screen --> <!-- Splash screen -->
<style id="splash-screen-style" defer>
<script src="install_pwa.js" defer=""></script>
<!-- Splash screen -->
<!-- <script>
var dartPdfJsBaseUrl = "https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.2.146/";
</script> -->
<!--------------------->
<style id="splash-screen-style">
html { html {
height: 100% height: 100%
} }
@@ -40,7 +44,7 @@
margin: 0; margin: 0;
min-height: 100%; min-height: 100%;
background-color: #3A4454; background-color: #3A4454;
background-size: 100% 100%; background-size: 100% 100%;
} }
.center { .center {
@@ -53,22 +57,19 @@
} }
.contain { .contain {
display: block; display:block;
width: 100%; width:100%; height:100%;
height: 100%;
object-fit: contain; object-fit: contain;
} }
.stretch { .stretch {
display: block; display:block;
width: 100%; width:100%; height:100%;
height: 100%;
} }
.cover { .cover {
display: block; display:block;
width: 100%; width:100%; height:100%;
height: 100%;
object-fit: cover; object-fit: cover;
} }
@@ -92,40 +93,28 @@
right: 0; right: 0;
} }
</style> </style>
<script id="splash-screen-script" defer> <script id="splash-screen-script">
function removeSplashFromWeb() { function removeSplashFromWeb() {
document.getElementById("splash")?.remove(); document.getElementById("splash")?.remove();
document.getElementById("splash-branding")?.remove(); document.getElementById("splash-branding")?.remove();
document.body.style.background = "transparent"; document.body.style.background = "transparent";
} }
</script> </script>
<script src="install_pwa.js" defer></script>
<!-- Splash screen -->
<!-- <script>
var dartPdfJsBaseUrl = "https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.2.146/";
</script> -->
<!--------------------->
</head> </head>
<body> <body>
<picture id="splash-branding"> <picture id="splash-branding">
<source <source srcset="splash/img/branding-1x.png 1x, splash/img/branding-2x.png 2x, splash/img/branding-3x.png 3x, splash/img/branding-4x.png 4x" media="(prefers-color-scheme: light)">
srcset="splash/img/branding-1x.png 1x, splash/img/branding-2x.png 2x, splash/img/branding-3x.png 3x, splash/img/branding-4x.png 4x" <source srcset="splash/img/branding-dark-1x.png 1x, splash/img/branding-dark-2x.png 2x, splash/img/branding-dark-3x.png 3x, splash/img/branding-dark-4x.png 4x" media="(prefers-color-scheme: dark)">
media="(prefers-color-scheme: light)">
<source
srcset="splash/img/branding-dark-1x.png 1x, splash/img/branding-dark-2x.png 2x, splash/img/branding-dark-3x.png 3x, splash/img/branding-dark-4x.png 4x"
media="(prefers-color-scheme: dark)">
<img class="bottom" aria-hidden="true" src="splash/img/branding-1x.png" alt=""> <img class="bottom" aria-hidden="true" src="splash/img/branding-1x.png" alt="">
</picture> </picture>
<picture id="splash"> <picture id="splash">
<source <source srcset="splash/img/light-1x.png 1x, splash/img/light-2x.png 2x, splash/img/light-3x.png 3x, splash/img/light-4x.png 4x" media="(prefers-color-scheme: light)">
srcset="splash/img/light-1x.png 1x, splash/img/light-2x.png 2x, splash/img/light-3x.png 3x, splash/img/light-4x.png 4x" <source srcset="splash/img/dark-1x.png 1x, splash/img/dark-2x.png 2x, splash/img/dark-3x.png 3x, splash/img/dark-4x.png 4x" media="(prefers-color-scheme: dark)">
media="(prefers-color-scheme: light)"> <img class="center" aria-hidden="true" src="splash/img/light-1x.png" alt="">
<source
srcset="splash/img/dark-1x.png 1x, splash/img/dark-2x.png 2x, splash/img/dark-3x.png 3x, splash/img/dark-4x.png 4x"
media="(prefers-color-scheme: dark)">
<img class="center" aria-hidden="true" src="splash/img/light-1x.png" alt="">
</picture> </picture>
<!-- Versioning --> <!-- Versioning -->
<!-- <script src="flutter.js" defer></script> --> <!-- <script src="flutter.js" defer></script> -->
@@ -149,7 +138,7 @@
}); });
</script> --> </script> -->
<script defer> <script defer="">
var serviceWorkerVersion = '{{flutter_service_worker_version}}'; var serviceWorkerVersion = '{{flutter_service_worker_version}}';
var scriptLoaded = false; var scriptLoaded = false;
function loadMainDartJs() { function loadMainDartJs() {
@@ -257,11 +246,10 @@
</script> </script>
</body>
<!-- File Picker & PDF viewer -->
<script id="pdfjs-lib" src="//cdnjs.cloudflare.com/ajax/libs/pdf.js/3.2.146/pdf.min.js" defer></script> <script id="pdfjs-lib" src="//cdnjs.cloudflare.com/ajax/libs/pdf.js/3.2.146/pdf.min.js" defer=""></script>
<script id="pdfjs-worker" type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/pdf.js/3.2.146/pdf.worker.min.js" <script id="pdfjs-worker" type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/pdf.js/3.2.146/pdf.worker.min.js" defer=""></script>
defer></script>
<!---------------------> <!--------------------->
</html> </body><!-- File Picker & PDF viewer --></html>