Key data page completed

Pages/CaritasServiceFundVeloKeyDataPage.razor

@@ -1,11 +1,72 @@
 @page "/keydata/{FromRoute}"
+@using BlazorColorPicker 
 @inject NavigationManager NavigationManager
 
 <div class="row px-3 h-100">
+    <div class="row no-gutters align-items-center justify-content-center w-100" style="padding-top:1em">
+        @if ("Found".Equals(FromRoute)) {
+            <h1>Gefundenes Velo</h1>
+        } else {
+            <h1>Vermisstes Velo</h1>
+        }
+    </div>
     <div class="row no-gutters align-items-center justify-content-center w-100">
-        <h1>@FromRoute</h1>
+
+        <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">
+                    <div>
+                        <MatIconButton Class="mat-icon-large" Icon="photo_camera" />
+                    </div>
+                    <div>
+                        <MatIconButton Class="mat-icon-large" Icon="unarchive" />
+                    </div>
+                </div>
+                <div class="mat-layout-grid-cell mat-layout-grid-cell-span-3">
+                    <div>
+                        <MatCard Class="demo-mat-card">
+                            <MatCardContent>
+                                <MatCardMedia Square="true" Class="" />
+                            </MatCardContent>
+                        </MatCard>
+                    </div>                </div>
+                <div class="mat-layout-grid-cell mat-layout-grid-cell-span-1">
+                    <div>
+                        <MatIconButton Class="mat-icon-large" Icon="location_on" />
+                    </div>
+                </div>
+                <div class="mat-layout-grid-cell mat-layout-grid-cell-span-3">
+                    <div>
+                        <MatCard Class="demo-mat-card">
+                            <MatCardContent>
+                                <MatCardMedia Square="true" Class="" />
+                            </MatCardContent>
+                        </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> Farbe
+                    </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="Marke" Outlined="true" type="text"></MatStringField>
+                </div>
+                <div class="mat-layout-grid-cell mat-layout-grid-cell-span-4">
+                    <MatSelect Class="w-100" Label="Typ" @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 class="row no-gutters align-items-end justify-content-center w-100" style="padding-bottom:2em">
+
+    <div class="row no-gutters align-items-end justify-content-center w-100" style="padding-bottom:2em;padding-top:2em">
         <div class="col" style="padding-right:0.5em">
             <MatButton Class="w-100" Outlined="true" @onclick="Cancel">Abbrechen</MatButton>
         </div>
@@ -20,6 +81,20 @@
     [Parameter]
     public string FromRoute { get; set; }
 
+    string value;
+
+    bool isOpened = false;
+    string color = "#F1F7E9";
+
+    void OpenModal() {
+        isOpened = true;
+    }
+
+    void ClosedEvent(string value) {
+        color = value;
+        isOpened = false;
+    }
+
     private void Next() {
         NavigationManager.NavigateTo("account/" + @FromRoute);
     }

Pages/CaritasServiceFundVeloLostFoundPage.razor

@@ -8,7 +8,7 @@
                 <div class="mat-layout-grid-cell mat-layout-grid-cell-span-1">
                 </div>
                 <div class="mat-layout-grid-cell mat-layout-grid-cell-span-2">
-                    <MatCard class="demo-mat-card">
+                    <MatCard Class="demo-mat-card">
                         <MatCardContent>
                             <MatCardMedia Square="true" ImageUrl="/images/batch_found.png" @onclick="Found"></MatCardMedia>
                         </MatCardContent>
@@ -19,7 +19,7 @@
                 <div class="mat-layout-grid-cell mat-layout-grid-cell-span-1">
                 </div>
                 <div class="mat-layout-grid-cell mat-layout-grid-cell-span-2">
-                    <MatCard class="demo-mat-card">
+                    <MatCard Class="demo-mat-card">
                         <MatCardContent>
                             <MatCardMedia Square="true" ImageUrl="/images/batch_missing.png" @onclick="Missing"></MatCardMedia>
                         </MatCardContent>

wwwroot/css/app.css

@@ -73,6 +73,20 @@ a, .btn-link {
 .demo-mat-card {
     border-radius:20px;
 }
+
+.mat-icon-large {
+    height: 64px !important;
+    width: 64px !important;
+    font-size: 48px !important;
+}
+
+button.mat-icon-large > i {
+    height: 48px !important;
+    width: 48px !important;
+    font-size: 48px !important;
+    margin-left: -5px;
+    display:block;
+}
 /*
 .content {
     padding-top: 1.1rem;

wwwroot/css/united/_variables.scss

@@ -52,3 +52,4 @@ $font-family-sans-serif:      Ubuntu, -apple-system, BlinkMacSystemFont, "Segoe
 
 $table-dark-bg:               $dark !default;
 $table-dark-border-color:     darken($dark, 5%) !default;
+

wwwroot/index.html

@@ -8,6 +8,8 @@
     <base href="/" />
     <script src="_content/BlazorAnimate/blazorAnimateInterop.js"></script>
     <script src="_content/MatBlazor/dist/matBlazor.js"></script>
+    <script src="_content/BlazorColorPicker/colorpicker.js"></script>
+    <link href="_content/BlazorColorPicker/colorpicker.css" rel="stylesheet" />
     <link href="_content/MatBlazor/dist/matBlazor.css" rel="stylesheet" />
     <link href="css/united/bootstrap.min.css" rel="stylesheet" />
     <link href="css/united/_bootswatch.min.css" rel="stylesheet" />