TopRow ist jetzt Komponente, Experimente mit Cards

CocktailWeb/Pages/Cocktails.razor

@@ -1,12 +1,20 @@
 @page "/cocktails"
 @using CocktailWeb.Data
+@using Microsoft.AspNetCore.Components.Sections
 @using Microsoft.EntityFrameworkCore
 @inject IDbContextFactory<DbDataContext> DataContextFactory;
 @inject IWebHostEnvironment env;
+@layout SideScrollLayout
 <!--<h3>Cocktails</h3>-->
-<a href="/cocktails/add">Cocktail hinzufügen</a>
-
 
+<SectionContent SectionId="TopRow.Title">
+    <label>Cocktails</label>
+</SectionContent>
+<!--
+<p>
+    <a href="/cocktails/add">Cocktail hinzufügen</a>
+</p>
+-->
 <div class="container py-2 border border-5 overflow-auto d-inline-block">
     <div class="row flex-nowrap">
         @foreach (Cocktail c in CocktailListe)
@@ -20,7 +28,7 @@
                         }
                         else
                         {
-                            <img class="card-img-top" src="@($"/img/cocktail-default.jpg")" alt="@c.Name">
+                            <img class="card-img-top mh-50" src="@($"/img/cocktail-default.jpg")" alt="@c.Name">
                         }
                         <div class="card-body">
                             <h5 class="card-title">@c.Name</h5>

CocktailWeb/Shared/MainLayout.razor

@@ -8,26 +8,11 @@
         <NavMenu />
     </div>
     -->
-    
 
     <main>
-        <div class="top-row px-4">
+        <TopRow />
-            <div class="dropdown show">
-                <a class="btn btn-secondary dropdown-toggle" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
-                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-gear-fill" viewBox="0 0 16 16">
-                        <path d="M9.405 1.05c-.413-1.4-2.397-1.4-2.81 0l-.1.34a1.464 1.464 0 0 1-2.105.872l-.31-.17c-1.283-.698-2.686.705-1.987 1.987l.169.311c.446.82.023 1.841-.872 2.105l-.34.1c-1.4.413-1.4 2.397 0 2.81l.34.1a1.464 1.464 0 0 1 .872 2.105l-.17.31c-.698 1.283.705 2.686 1.987 1.987l.311-.169a1.464 1.464 0 0 1 2.105.872l.1.34c.413 1.4 2.397 1.4 2.81 0l.1-.34a1.464 1.464 0 0 1 2.105-.872l.31.17c1.283.698 2.686-.705 1.987-1.987l-.169-.311a1.464 1.464 0 0 1 .872-2.105l.34-.1c1.4-.413 1.4-2.397 0-2.81l-.34-.1a1.464 1.464 0 0 1-.872-2.105l.17-.31c.698-1.283-.705-2.686-1.987-1.987l-.311.169a1.464 1.464 0 0 1-2.105-.872zM8 10.93a2.929 2.929 0 1 1 0-5.86 2.929 2.929 0 0 1 0 5.858z" />
-                    </svg>
-                    Einstellungen
-                </a>
-                <div class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuLink">
-                    <a class="dropdown-item" href="/flaschen">Zutaten</a>
-                    <a class="dropdown-item" href="/cocktails">Cocktails</a>
-                </div>
-            </div>
-        </div>
 
-           
+        <article class="content px-4 vh-100" style="margin-top: 3.5rem">
-        <article class="content px-4">
             @Body
         </article>
     </main>

CocktailWeb/Shared/MainLayout.razor.css

@@ -1,3 +1,4 @@
+/**
 .page {
     position: relative;
     display: flex;
@@ -8,44 +9,22 @@ main {
     flex: 1;
 }
 
+
 .sidebar {
     background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
 }
-
+*/
 .top-row {
     background-color: #f7f7f7;
     border-bottom: 1px solid #d6d5d5;
-    justify-content: flex-end;
     height: 3.5rem;
-    display: flex;
     align-items: center;
+    /**position: sticky; */
+    top: 0;
+    z-index: 1;
 }
 
 /**
-    .top-row ::deep a, .top-row .btn-link {
-        white-space: nowrap;
-        margin-left: 1.5rem;
-    }
-
-    .top-row a:first-child {
-        overflow: hidden;
-        text-overflow: ellipsis;
-    }
-    */
-@media (max-width: 640.98px) {
-    .top-row:not(.auth) {
-        display: none;
-    }
-
-    .top-row.auth {
-        justify-content: space-between;
-    }
-    /*
-    .top-row a, .top-row .btn-link {
-        margin-left: 0;
-    }
-        */
-}
 
 @media (min-width: 641px) {
     .page {
@@ -70,3 +49,4 @@ main {
         padding-right: 1.5rem !important;
     }
 }
+    **/

CocktailWeb/Shared/SideScrollLayout.razor

@@ -0,0 +1,68 @@
+@inherits LayoutComponentBase
+
+<PageTitle>CocktailWeb</PageTitle>
+
+<div>
+    <main class="bg-info">
+
+        <container class="d-flex flex-column vh-100">
+            <div style="height:56px">
+                Row 1
+            </div>
+            <div class="flex-fill d-flex align-items-stretch bg-warning container-fluid overflow-auto p-3 px-4">
+                <div class="row flex-nowrap gap-3 align-items-center">
+                    <!--<div class="col bg-light border border-3 border-success" style="max-width:18rem;">-->
+                    <div class="card" style="max-width:18rem; height:200px; ">
+                        <img class="card-img-top" src="@($"/img/cocktail-default.jpg")" alt="Test">
+                        <div class="card-body">
+                            <h5 class="card-title">Testcocktail</h5>
+                        </div>
+                    </div>
+
+                    <div class="card text-bg-info p-0" style="max-width:18rem; height:200px;">
+                        <div class="card-img-top text-center" style="max-height:100%;">
+                            <img class="img-fluid" style="max-height:100%; width:auto;" src="@($"/img/cocktail-default.jpg")" alt="Test">
+                        </div>
+                        <div class="card-body">
+                            <h5 class="card-title">Testcocktail<br />Testzwei</h5>
+                        </div>
+                    </div>
+
+                    <div class="card text-bg-info p-0" style="max-width:18rem; height:200px;">
+                        <img class="card-img-top img-fluid" src="@($"/img/cocktail-default.jpg")" alt="Test">
+                        <div class="card-body">
+                            <h5 class="card-title">Testcocktail<br />Testzwei</h5>
+                        </div>
+                    </div>
+
+                    <div class="card text-bg-info" style="max-width:18rem; height:200px;">
+                        <img class="card-img-top img-fluid" src="@($"/img/cocktail-default.jpg")" alt="Test">
+                        <div class="card-body">
+                            <h5 class="card-title">Testcocktail<br />Testzwei</h5>
+                        </div>
+                    </div>
+
+                    <div class="card text-bg-info" style="max-width:18rem; height:200px;">
+                        <img class="card-img-top img-fluid" src="@($"/img/cocktail-default.jpg")" alt="Test">
+                        <div class="card-body">
+                            <h5 class="card-title">Testcocktail<br />Testzwei</h5>
+                        </div>
+                    </div>
+
+                    <div class="card text-bg-info" style="max-width:18rem; height:200px;">
+                        <img class="card-img-top img-fluid" src="@($"/img/cocktail-default.jpg")" alt="Test">
+                        <div class="card-body">
+                            <h5 class="card-title">Testcocktail<br />Testzwei</h5>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </container>
+    </main>
+</div>
+
+@code {
+
+
+}
+

CocktailWeb/Shared/TopRow.razor

@@ -0,0 +1,25 @@
+@using Microsoft.AspNetCore.Components.Sections
+
+
+<div class="d-flex fixed-top justify-content-between px-4" style="background-color: #f7f7f7;  border-bottom: 1px solid #d6d5d5;  height: 56px;  align-items: center; top: 0; z-index: 1;">
+    <h3>
+        <SectionOutlet SectionId="Title" />
+    </h3>
+    <div class="dropdown show">
+        <a class="btn btn-secondary dropdown-toggle" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
+            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-gear-fill" viewBox="0 0 16 16">
+                <path d="M9.405 1.05c-.413-1.4-2.397-1.4-2.81 0l-.1.34a1.464 1.464 0 0 1-2.105.872l-.31-.17c-1.283-.698-2.686.705-1.987 1.987l.169.311c.446.82.023 1.841-.872 2.105l-.34.1c-1.4.413-1.4 2.397 0 2.81l.34.1a1.464 1.464 0 0 1 .872 2.105l-.17.31c-.698 1.283.705 2.686 1.987 1.987l.311-.169a1.464 1.464 0 0 1 2.105.872l.1.34c.413 1.4 2.397 1.4 2.81 0l.1-.34a1.464 1.464 0 0 1 2.105-.872l.31.17c1.283.698 2.686-.705 1.987-1.987l-.169-.311a1.464 1.464 0 0 1 .872-2.105l.34-.1c1.4-.413 1.4-2.397 0-2.81l-.34-.1a1.464 1.464 0 0 1-.872-2.105l.17-.31c.698-1.283-.705-2.686-1.987-1.987l-.311.169a1.464 1.464 0 0 1-2.105-.872zM8 10.93a2.929 2.929 0 1 1 0-5.86 2.929 2.929 0 0 1 0 5.858z" />
+            </svg>
+            Einstellungen
+        </a>
+        <div class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuLink">
+            <a class="dropdown-item" href="/flaschen">Zutaten</a>
+            <a class="dropdown-item" href="/cocktails">Cocktails</a>
+        </div>
+    </div>
+</div>
+
+
+@code {
+    public static SectionOutlet Title = new();
+}