Photo camera call, info button calls an external link to www.caritas.ch

CaritasPWA.csproj.user

@@ -5,7 +5,7 @@
   </PropertyGroup>
   <PropertyGroup>
     <ActiveDebugProfile>CaritasPWA</ActiveDebugProfile>
-    <NameOfLastUsedPublishProfile>IISProfile</NameOfLastUsedPublishProfile>
+    <NameOfLastUsedPublishProfile>D:\Work\Caritas\CaritasPWA\Properties\PublishProfiles\IISProfile.pubxml</NameOfLastUsedPublishProfile>
   </PropertyGroup>
   <ItemGroup>
     <EmbeddedResource Update="Shared\ResourceFiles\Resources.it.resx">

Pages/CaritasServiceFundVeloKeyDataPage.razor

@@ -23,13 +23,25 @@
         <div class="mat-layout-grid w-100">
             <div class="mat-layout-grid-inner">
                 <div class="mat-layout-grid-cell mat-layout-grid-cell-span-1 justify-content-center" style="text-align: center">
-                    <MatIconButton Class="mat-icon-large" Icon="photo_camera" />
+                    <div>
+                        <InputFile class="inputFile" id="camera" type="file" name="camera" accept="image/*" capture="user"  OnChange="@OnFileSelection"/>
+                        <MatRipple class="inputfile-mat-ripple" Color="@MatRippleColor.Default">
+                            <label for="camera">
+                                <svg xmlns="http://www.w3.org/2000/svg" width="48px" height="48px" viewBox="0 0 24 24" fill="#000000">
+                                    <path d="M0 0h21v21H0V0z" fill="none" />
+                                    <path d="M20 6h-4.05l-1.83-2H9.88L8.05 6H4v12h16V6zm-8 11c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5z" opacity=".3" />
+                                    <path d="M4 20h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2h-3.17L15 2H9L7.17 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2zM4 6h4.05l1.83-2h4.24l1.83 2H20v12H4V6zm8 1c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zm0 8c-1.65 0-3-1.35-3-3s1.35-3 3-3 3 1.35 3 3-1.35 3-3 3z" />
+                                </svg>
+                            </label>
+                        </MatRipple>
+                    </div>
                     <div style="margin-top:1rem">
                         <InputFile id="file" type="file" name="file" accept="image/x-png,image/jpeg,image/gif" class="inputFile" OnChange="@OnFileSelection" />
                         <MatRipple class="inputfile-mat-ripple" Color="@MatRippleColor.Default">
                             <label for="file">
-                                <svg xmlns="http://www.w3.org/2000/svg" width="42" height="42" viewBox="0 0 21 21">
-                                    <path d="M10 0l-5.2 4.9h3.3v5.1h3.8v-5.1h3.3l-5.2-4.9zm9.3 11.5l-3.2-2.1h-2l3.4 2.6h-3.5c-.1 0-.2.1-.2.1l-.8 2.3h-6l-.8-2.2c-.1-.1-.1-.2-.2-.2h-3.6l3.4-2.6h-2l-3.2 2.1c-.4.3-.7 1-.6 1.5l.6 3.1c.1.5.7.9 1.2.9h16.3c.6 0 1.1-.4 1.3-.9l.6-3.1c.1-.5-.2-1.2-.7-1.5z" />
+                                <svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" width="48px" height="48px" viewBox="0 0 24 24" fill="#000000">
+                                    <g><rect fill="none" height="24" width="24" /></g>
+                                    <g><g><path d="M13,4H6v16h12V9h-5V4z M16,15h-3v4h-2v-4H8l4.01-4L16,15z" opacity=".3" /><path d="M14,2H6C4.9,2,4.01,2.9,4.01,4L4,20c0,1.1,0.89,2,1.99,2H18c1.1,0,2-0.9,2-2V8L14,2z M18,20H6V4h7v5h5V20z" /><polygon points="8,15 11,15 11,19 13,19 13,15 16,15 12.01,11" /></g></g>
                                 </svg>
                             </label>
                         </MatRipple>

Pages/InfoPage.razor

@@ -1,67 +1,71 @@
 @page "/info"
+
 @using CaritasPWA.Shared.Services;
 @inject NavigationManager NavigationManager;
 @inject IStringLocalizer<Resources> i18n
 @inject PageHistoryManager PageHistoryManager
+@inject IJSRuntime JSRuntime;
 
-<div class="row px-3 h-100">
-    <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" 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" style="max-width:500px">@i18n["Learnmore"]</MatButton>
-                </td>
-            </tr>
-            <tr>
-                <td class="text-center">
-                    <MatCaption Style="font-family:Ubuntu">Version: 0.0.1</MatCaption>
-                </td>
-            </tr>
-        </table>
+    <div class="row px-3 h-100">
+        <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" 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" style="max-width:500px">@i18n["Learnmore"]</MatButton>
+                    </td>
+                </tr>
+                <tr>
+                    <td class="text-center">
+                        <MatCaption Style="font-family:Ubuntu">Version: 0.0.1</MatCaption>
+                    </td>
+                </tr>
+            </table>
+        </div>
+        <div class="row no-gutters align-items-end w-100">
+            <table class="w-100">
+                <tr>
+                    <td class="text-right">
+                        <MatCaption Style="font-family:Ubuntu">@i18n["DevelopedBy"]</MatCaption>
+                    </td>
+                </tr>
+                <tr>
+                    <td class="text-right">
+                        <img src="./images/integrate_logo.png" style="max-width:200px" />
+                    </td>
+                </tr>
+                <tr>
+                    <td class="text-right">
+                        <MatCaption Style="font-family:Ubuntu">Platz 10, Business Village Luzern</MatCaption>
+                    </td>
+                </tr>
+                <tr>
+                    <td class="text-right">
+                        <MatCaption Style="font-family:Ubuntu">CH-6039 Root D4</MatCaption>
+                    </td>
+                </tr>
+            </table>
+        </div>
     </div>
-    <div class="row no-gutters align-items-end w-100">
-        <table class="w-100">
-            <tr>
-                <td class="text-right">
-                    <MatCaption Style="font-family:Ubuntu">@i18n["DevelopedBy"]</MatCaption>
-                </td>
-            </tr>
-            <tr>
-                <td class="text-right">
-                    <img src="./images/integrate_logo.png" style="max-width:200px" />
-                </td>
-            </tr>
-            <tr>
-                <td class="text-right">
-                    <MatCaption Style="font-family:Ubuntu">Platz 10, Business Village Luzern</MatCaption>
-                </td>
-            </tr>
-            <tr>
-                <td class="text-right">
-                    <MatCaption Style="font-family:Ubuntu">CH-6039 Root D4</MatCaption>
-                </td>
-            </tr>
-        </table>
-    </div>
-</div>
 
 
-@code {
+    @code {
 
-    protected override void OnInitialized() {
-        PageHistoryManager.AddPageToHistory(NavigationManager.Uri);
-        base.OnInitialized();
-    }
+        protected override void OnInitialized() {
+            PageHistoryManager.AddPageToHistory(NavigationManager.Uri);
+            base.OnInitialized();
+        }
 
-    private void ShowCaritasWebpage() {
-        NavigationManager.NavigateTo("http://www.caritas.ch");
+        private async void ShowCaritasWebpage() {
+            // NavigationManager.NavigateTo("http://www.caritas.ch");
+            //NavigationManager.open("http://google.com", "_blank");
+            await JSRuntime.InvokeAsync<string>("open", $"https://www.caritas.ch", "_blank");
+        }
     }
-}

wwwroot/css/app.css

@@ -38,7 +38,7 @@ a:hover {
     -moz-border-radius: 24px;
     -webkit-border-radius: 24px;
     border-radius: 24px;
-    align-items: center;
+    align-items: baseline;
     justify-content: center;
     display: inline-flex;
 }