feat: improve scanner design

manuel-rw · Jan 27, 2024 · 8e64079 · 8e64079
1 parent 0f533f6
commit 8e64079
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 42 deletions.
diff --git a/GrocyScanner.Service/Pages/Scanner.razor b/GrocyScanner.Service/Pages/Scanner.razor
@@ -11,58 +11,61 @@
 
 <PageTitle>Scanner • Grocy Scanner</PageTitle>
 
-<div class="position-relative mb-5">
-    <MudStack Class="mb-3">
+<div class="d-flex flex-column gap-2 h-100">
+    <MudStack>
         <MudToggleGroup
             T="ScannerMode"
             SelectionMode="SelectionMode.SingleSelection"
             @bind-Value="ScannerMode"
             Color="Color.Primary"
             CheckMark
             FixedContent>
-            <MudToggleItem Value="@ScannerMode.Purchase" Text="Purchase"/>
-            <MudToggleItem Value="@ScannerMode.Consume" Text="Consume"/>
-            <MudToggleItem Value="@ScannerMode.ConsumeSpoiled" Text="Consume (spoiled)"/>
+            <MudToggleItem SelectedIcon="@Icons.Material.Filled.ShoppingCart" Value="@ScannerMode.Purchase" Text="Purchase"/>
+            <MudToggleItem SelectedIcon="@Icons.Material.Filled.Restaurant" Value="@ScannerMode.Consume" Text="Consume"/>
+            <MudToggleItem SelectedIcon="@Icons.Material.Filled.AutoDelete" Value="@ScannerMode.ConsumeSpoiled" Text="Consume (spoiled)"/>
         </MudToggleGroup>
     </MudStack>
-    <MudTextField
-        @bind-Value="Barcode"
-        T="string"
-        Margin="Margin.Dense"
-        Label="Filled"
-        Variant="Variant.Filled"
-        Required="true"
-        RequiredError="'Barcode is required'"
-        TextChanged="OnInternalValueChanged">
-    </MudTextField>
-</div>
-
-<div class="d-flex gap-2 mt-4">
-    <MudSelect
-        ValueChanged="OnSelectedCameraChanged"
-        Margin="Margin.Dense"
-        T="CameraNotification"
-        Label="Available Cameras"
-        AnchorOrigin="Origin.BottomCenter"
-        Variant="Variant.Filled">
-        @foreach (CameraNotification camera in AvailableCameras)
-        {
-            <MudSelectItem
-                Value="@camera">
-                @camera.Label
-            </MudSelectItem>
-        }
-    </MudSelect>
-    <MudButton
-        OnClick="OnRefreshAvailableCameras"
-        Variant="Variant.Filled"
-        Color="Color.Secondary"
-        Class="my-1">
-        Refresh
-    </MudButton>
+    <div>
+        <MudTextField
+            @bind-Value="Barcode"
+            T="string"
+            Margin="Margin.Dense"
+            Label="GTIN Barcode"
+            Variant="Variant.Filled"
+            Required="true"
+            RequiredError="'Barcode is required'"
+            TextChanged="OnInternalValueChanged">
+        </MudTextField>
+    </div>
+
+    <div class="bg-dark rounded overflow-hidden flex-grow-1 w-100" id="reader" style="height: 400px;"></div>
+
+    <div class="d-flex gap-2">
+        <MudSelect
+            ValueChanged="OnSelectedCameraChanged"
+            Margin="Margin.Dense"
+            T="CameraNotification"
+            Label="Available Cameras"
+            AnchorOrigin="Origin.BottomCenter"
+            Variant="Variant.Filled">
+            @foreach (CameraNotification camera in AvailableCameras)
+            {
+                <MudSelectItem
+                    Value="@camera">
+                    @camera.Label
+                </MudSelectItem>
+            }
+        </MudSelect>
+        <MudButton
+            OnClick="OnRefreshAvailableCameras"
+            Variant="Variant.Filled"
+            Color="Color.Primary"
+            Class="my-1">
+            Look for cameras
+        </MudButton>
+    </div>
 </div>
 
-<div id="reader" style="width: 600px; height: 400px;"></div>
 
 <FullScreenToggle/>
 

diff --git a/GrocyScanner.Service/Shared/MainLayout.razor b/GrocyScanner.Service/Shared/MainLayout.razor
@@ -19,7 +19,7 @@
         </MudNavMenu>
     </MudDrawer>
     <MudMainContent>
-        <div class="position-relative px-3 py-2 mx-auto" style="max-width: 900px;">
+        <div class="position-relative px-3 py-2 mx-auto h-100" style="max-width: 900px;">
             @Body
         </div>
     </MudMainContent>

diff --git a/GrocyScanner.Service/wwwroot/css/site.css b/GrocyScanner.Service/wwwroot/css/site.css
@@ -66,3 +66,7 @@ a, .btn-link {
     .blazor-error-boundary::after {
         content: "An error has occurred."
     }
+
+html, html body, html body .mud-layout .mud-main-content {
+    height: 100%;
+}