diff --git a/src/MijnBesluit.Web/Components/Onderdelen/AppDownload.razor b/src/MijnBesluit.Web/Components/Onderdelen/AppDownload.razor new file mode 100644 index 0000000..9b5e38d --- /dev/null +++ b/src/MijnBesluit.Web/Components/Onderdelen/AppDownload.razor @@ -0,0 +1,48 @@ +@inject IConfiguration Instellingen +@inject IWebHostEnvironment Omgeving + +@* De "Download in de App Store" en "Ontdek het op Google Play"-knoppen. + + Elke knop verschijnt pas als er twee dingen zijn: een adres in appsettings.json (Apps:AppStoreUrl + en Apps:GooglePlayUrl, leeg zolang de app daar niet staat) en het officiƫle plaatje van de winkel + in wwwroot/badges. De plaatjes tekenen we niet zelf na: Apple en Google leveren ze kant-en-klaar + aan en eisen dat ze onaangepast worden gebruikt. Zie wwwroot/badges/LEESMIJ.txt. *@ + +@if (_knoppen.Count > 0) +{ +
+ @foreach (var knop in _knoppen) + { + + @knop.Titel + + } +
+} + +@code { + private readonly List<(string Adres, string Plaatje, string Titel)> _knoppen = new(); + + protected override void OnInitialized() + { + Voeg("Apps:AppStoreUrl", "app-store", "Download in de App Store"); + Voeg("Apps:GooglePlayUrl", "google-play", "Ontdek het op Google Play"); + } + + private void Voeg(string instelling, string bestandsnaam, string titel) + { + var adres = Instellingen[instelling]; + if (string.IsNullOrWhiteSpace(adres)) return; + + // Het plaatje mag .svg of .png zijn, wat je van de winkel hebt gekregen. + foreach (var extensie in new[] { "svg", "png" }) + { + var pad = $"badges/{bestandsnaam}.{extensie}"; + if (Omgeving.WebRootFileProvider.GetFileInfo(pad).Exists) + { + _knoppen.Add((adres, "/" + pad, titel)); + return; + } + } + } +} diff --git a/src/MijnBesluit.Web/Components/Pages/Home.razor b/src/MijnBesluit.Web/Components/Pages/Home.razor index 6e8421d..fe67452 100644 --- a/src/MijnBesluit.Web/Components/Pages/Home.razor +++ b/src/MijnBesluit.Web/Components/Pages/Home.razor @@ -216,6 +216,9 @@ + + @* De knoppen voor de app in de winkels; zie AppDownload.razor. *@ + diff --git a/src/MijnBesluit.Web/Components/Pages/Inloggen.razor b/src/MijnBesluit.Web/Components/Pages/Inloggen.razor index c73a569..5f27f64 100644 --- a/src/MijnBesluit.Web/Components/Pages/Inloggen.razor +++ b/src/MijnBesluit.Web/Components/Pages/Inloggen.razor @@ -93,6 +93,8 @@

Wat is MijnBesluit?

Ik ben nieuw en wil een account aanmaken

Ik wil adverteren op MijnBesluit

+ + @code { diff --git a/src/MijnBesluit.Web/Components/Pages/WatIsMijnBesluit.razor b/src/MijnBesluit.Web/Components/Pages/WatIsMijnBesluit.razor index abd5bb7..b56b8e8 100644 --- a/src/MijnBesluit.Web/Components/Pages/WatIsMijnBesluit.razor +++ b/src/MijnBesluit.Web/Components/Pages/WatIsMijnBesluit.razor @@ -15,5 +15,7 @@ Inloggen

+ +

Terug naar inloggen

diff --git a/src/MijnBesluit.Web/appsettings.json b/src/MijnBesluit.Web/appsettings.json index 5fcc4c8..e02ae70 100644 --- a/src/MijnBesluit.Web/appsettings.json +++ b/src/MijnBesluit.Web/appsettings.json @@ -11,6 +11,10 @@ "Site": { "Url": "https://localhost:7014" }, + "Apps": { + "GooglePlayUrl": "https://play.google.com/store/apps/details?id=nl.mijnbesluit.app", + "AppStoreUrl": "" + }, "Smtp": { "Host": "localhost", "Port": 587, diff --git a/src/MijnBesluit.Web/wwwroot/app.css b/src/MijnBesluit.Web/wwwroot/app.css index 2e83487..ec6a861 100644 --- a/src/MijnBesluit.Web/wwwroot/app.css +++ b/src/MijnBesluit.Web/wwwroot/app.css @@ -575,3 +575,9 @@ hr { border: none; border-top: 1px solid var(--rand); margin: 1.25rem 0; } .voet { text-align: center; margin-top: 2rem; font-size: .9rem; } .voet a { color: var(--inkt-zacht); } + +/* Download-knoppen van de winkels (AppDownload.razor). De plaatjes zelf blijven onaangepast; + we bepalen alleen de hoogte en de ruimte eromheen. */ +.appknoppen { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-top: 1.25rem; } +.appknoppen a { display: inline-block; line-height: 0; } +.appknoppen img { height: 44px; width: auto; display: block; } diff --git a/src/MijnBesluit.Web/wwwroot/badges/LEESMIJ.txt b/src/MijnBesluit.Web/wwwroot/badges/LEESMIJ.txt new file mode 100644 index 0000000..58d0776 --- /dev/null +++ b/src/MijnBesluit.Web/wwwroot/badges/LEESMIJ.txt @@ -0,0 +1,11 @@ +Hier horen de officiele knoppen van de winkels: + + app-store.svg (of .png) "Download in de App Store" - Apple + google-play.svg (of .png) "Ontdek het op Google Play" - Google + +Haal ze zelf op bij de winkels en pas ze niet aan (kleur, vorm, tekst): + Apple: developer.apple.com/app-store/marketing/guidelines (sectie "Download on the App Store", Nederlandse versie) + Google: play.google.com/intl/nl/badges (Nederlandse knop) + +Een knop verschijnt op de inlogpagina pas als zijn bestand hier staat EN het adres in +appsettings.json is ingevuld (Apps:AppStoreUrl, Apps:GooglePlayUrl).