Layouting

Pages/CaritasServiceFundVeloFoundConclusion.razor

 <div class="row px-3 h-100">
     <div class="row no-gutters align-items-start justify-content-center w-100">
         <MatHeadline3 Style="font-family:Ubuntu;padding-top:1em">@i18n["Confirmation"]</MatHeadline3>
+    </div>
+    <div class="row no-gutters align-items-start justify-content-center w-100">
         <MatHeadline6 Style="font-family:Ubuntu">@i18n["FinishedTextFound"]</MatHeadline6>
-
+    </div>
+    <div class="row no-gutters align-items-start justify-content-center w-100">
         <Animate Animation="Animations.ZoomIn" Delay="TimeSpan.FromSeconds(0.5)" Duration="TimeSpan.FromSeconds(2.5)">
             <Animate Animation="Animations.FadeIn" Delay="TimeSpan.FromSeconds(0.5)" Duration="TimeSpan.FromSeconds(2.5)">
                 <DoneImage></DoneImage>
             </Animate>
         </Animate>
-
     </div>
     <div class="row no-gutters align-items-end justify-content-center w-100" style="padding-bottom:2em;padding-top:2em">
         <div class="col w-100 text-center">

Pages/CaritasServiceFundVeloKeyDataPage.razor

                         </MatCard>
                     </div>
                 </div>
-                <div class="mat-layout-grid-cell mat-layout-grid-cell-span-4">
-                    <MatButton Class="btn btn-light w-100 mdc-text-field--outlined" @onclick="OpenModal">
-                        <div style="background-color:@color" class="buttonColor"></div> @i18n["Color"]
-                    </MatButton>
-                    <ColorPicker Title="My Blazor ColorPicker" IsOpened="isOpened" Closed="ClosedEvent" MyColor="@color">
-                    </ColorPicker>
-                </div>
-                <div class="mat-layout-grid-cell mat-layout-grid-cell-span-4">
-                    <MatStringField Class="w-100 form-check-label" Label="@i18n["Brand"]" Outlined="true" type="text"></MatStringField>
-                </div>
-                <div class="mat-layout-grid-cell mat-layout-grid-cell-span-4">
-                    <MatSelect Class="w-100" Label="@i18n["Type"]" @bind-Value="value">
-                        <MatOptionString></MatOptionString>
-                        <MatOptionString Value="Mountain-Bike">Mountain-Bike</MatOptionString>
-                        <MatOptionString Value="City-Bike">City-Bike</MatOptionString>
-                        <MatOptionString Value="Child-Bike">Child-Bike</MatOptionString>
-                    </MatSelect>
+                <div class="mat-layout-grid-cell mat-layout-grid-cell-span-4-phone mat-layout-grid-cell-span-8-tablet mat-layout-grid-cell-span-4-desktop">
+                    <div class="mat-layout-grid-inner">
+                        <div class="mat-layout-grid-cell mat-layout-grid-cell-span-12-phone mat-layout-grid-cell-span-4-tablet mat-layout-grid-cell-span-12-desktop">
+                            <MatButton Class="btn btn-light w-100 mdc-text-field--outlined" @onclick="OpenModal">
+                                <div style="background-color:@color" class="buttonColor"></div> @i18n["Color"]
+                            </MatButton>
+                            <ColorPicker Title="My Blazor ColorPicker" IsOpened="isOpened" Closed="ClosedEvent" MyColor="@color">
+                            </ColorPicker>
+                        </div>
+                        <div class="mat-layout-grid-cell mat-layout-grid-cell-span-12-phone mat-layout-grid-cell-span-4-tablet mat-layout-grid-cell-span-12-desktop">
+                            <MatStringField Class="w-100 form-check-label" Label="@i18n["Brand"]" Outlined="true" type="text"></MatStringField>
+                        </div>
+                        <div class="mat-layout-grid-cell mat-layout-grid-cell-span-12-phone mat-layout-grid-cell-span-4-tablet mat-layout-grid-cell-span-12-desktop">
+                            <MatSelect Class="w-100" Label="@i18n["Type"]" @bind-Value="value">
+                                <MatOptionString></MatOptionString>
+                                <MatOptionString Value="Mountain-Bike">Mountain-Bike</MatOptionString>
+                                <MatOptionString Value="City-Bike">City-Bike</MatOptionString>
+                                <MatOptionString Value="Child-Bike">Child-Bike</MatOptionString>
+                            </MatSelect>
+                        </div>
+                    </div>
                 </div>
             </div>
         </div>

Pages/CaritasServiceFundVeloMissingConclusion.razor

 <div class="row px-3 h-100">
     <div class="row no-gutters align-items-start justify-content-center w-100">
         <MatHeadline3 Style="font-family:Ubuntu;padding-top:1em">@i18n["Info"]</MatHeadline3>
-                <MatHeadline6 Style="font-family:Ubuntu">@i18n["FinishedTextMissing"]</MatHeadline6>
-</div>
+    </div>
+    <div class="row no-gutters align-items-start justify-content-center w-100">
+        <MatHeadline6 Style="font-family:Ubuntu">@i18n["FinishedTextMissing"]</MatHeadline6>
+    </div>
     <div class="row no-gutters align-items-end justify-content-center w-100" style="padding-bottom:2em;padding-top:2em">
         <div class="col w-100 text-center">
             <MatButton Class="w-50" Raised="true" @onclick="Finished">@i18n["Finished"]</MatButton>

Pages/CaritasServicesPage.razor

     <div class="row no-gutters align-items-center w-100">
         <div class="mat-layout-grid w-100">
             <div class="mat-layout-grid-inner">
-                <div class="mat-layout-grid-cell mat-layout-grid-cell-span-2">
+                <div class="mat-layout-grid-cell mat-layout-grid-cell-span-2-phone mat-layout-grid-cell-span-3-tablet mat-layout-grid-cell-span-4-desktop">
                     <MatCard class="demo-mat-card">
                         <MatCardContent>
                             <MatCardMedia Square="true" ImageUrl="/images/batch_kulturlegi.png"></MatCardMedia>
                         </MatCardContent>
                     </MatCard>
                 </div>
-                <div class="mat-layout-grid-cell mat-layout-grid-cell-span-2">
+                <div class="mat-layout-grid-cell mat-layout-grid-cell-span-2-phone mat-layout-grid-cell-span-3-tablet mat-layout-grid-cell-span-4-desktop">
                     <MatCard class="demo-mat-card">
                         <MatCardContent>
                             <MatCardMedia Square="true" ImageUrl="/images/batch_markt.png"></MatCardMedia>
                     </MatCard>
 
                 </div>
-                <div class="mat-layout-grid-cell mat-layout-grid-cell-span-2">
+                <div class="mat-layout-grid-cell mat-layout-grid-cell-span-2-phone mat-layout-grid-cell-span-3-tablet mat-layout-grid-cell-span-4-desktop">
                     <MatCard class="demo-mat-card">
                         <MatCardContent>
                             <MatCardMedia Square="true" ImageUrl="/images/batch_fundvelo.png" @onclick="Next"></MatCardMedia>

Pages/IndexPage.razor

 @inject AppState AppState;
 @inject IStringLocalizer<Resources> i18n
 
-<div class="row h-100">
-    <div class="row d-flex align-items-start px-4">
-        <img src="/images/caritas_logo.png" width="100%" style="padding:1em" />
+<div class="row h-100 justify-content-center">
+    <div class="row d-flex align-items-center justify-content-center px-4 w-100">
+        <img src="/images/caritas_logo.png" style="padding:1em;max-width:320px" class="w-100">
     </div>
 
     <div class="row align-items-center vw-100 h-75">

Pages/InfoPage.razor

 @inject IStringLocalizer<Resources> i18n
 
 <div class="row px-3 h-100">
-    <div class="align-items-center justify-content-start">
-        <img src="/images/caritas_logo.png" width="100%" style="padding:1em" />
+    <div class="text-center w-100">
+        <img class="w-100" src="/images/caritas_logo.png" style="padding:1em;max-width:320px" />
     </div>
     <div class="row no-gutters align-items-center w-100">
         <table class="w-100">
             <tr>
                 <td class="text-center">
-                    <p class="text-left">@i18n["Abouttext"]</p>
+                    <p class="text-left" style="max-width: 500px;display:inline-block">@i18n["Abouttext"]</p>
                 </td>
             </tr>
             <tr>
                 <td class="text-center">
-                    <MatButton Raised="true" Class="w-100" @onclick="ShowCaritasWebpage">@i18n["Learnmore"]</MatButton>
+                    <MatButton Raised="true" Class="w-100" @onclick="ShowCaritasWebpage" style="max-width:500px">@i18n["Learnmore"]</MatButton>
                 </td>
             </tr>
             <tr>
-                <td>
-                    <MatCaption Style="font-family:Ubuntu">Version: 0.1.0</MatCaption>
+                <td class="text-center">
+                    <MatCaption Style="font-family:Ubuntu">Version: 0.0.1</MatCaption>
                 </td>
             </tr>
         </table>
             </tr>
             <tr>
                 <td class="text-right">
-                    <img src="/images/integrate_logo.png" width="80%" />
+                    <img src="/images/integrate_logo.png" style="max-width:200px"/>
                 </td>
             </tr>
             <tr>

wwwroot/service-worker.js

 
 // activate event
 self.addEventListener('activate', evt => {
-    //console.log("Service-Worker has been activated.");
     evt.waitUntil(
         caches.keys().then(keys => {
             return Promise.all(keys