Design aktualisiert

CocktailWeb/Pages/Cocktails.razor

@@ -4,7 +4,7 @@
 @using Microsoft.EntityFrameworkCore
 @inject IDbContextFactory<DbDataContext> DataContextFactory;
 @inject IWebHostEnvironment env;
-@layout SideScrollLayout
+<!--layout SideScrollLayout-->
 <!--<h3>Cocktails</h3>-->
 
 <SectionContent SectionId="TopRow.Title">
@@ -15,31 +15,35 @@
     <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)
-        {
-            <div class="col">
-                <a href="/cocktails/@c.Id">
-                    <div class="card" style="width: 18rem;">
-                        @if (c.ImageURL != null && File.Exists(Path.Join(env.WebRootPath, c.ImageURL)))
-                        {
-                            <img class="card-img-top" src="@($"/{c.ImageURL}")" alt="@c.Name">
-                        }
-                        else
-                        {
-                            <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>
-                            <!--<p class="card-text">
-                                Testy
-                            </p>-->
-                        </div>
-                    </div>
-                </a>
-            </div>
-        }
-    </div>
-</div>
+<!-- Flex Container für Horizontalen Scroll - klappt aber nicht so richtig->
+<!--<div class="container py-2 border border-5 overflow-auto d-inline-block">
+    <div class="row flex-nowrap">-->
 
+<div class="card-group gap-3 flex-nowrap">
+    @foreach (Cocktail c in CocktailListe)
+    {
+        <div class="col">
+            <a class="text-decoration-none text-black;" href="/cocktails/@c.Id">
+                <div class="card" style="width: 20vw; min-width:15rem; max-height:350px; ">
+                    
+                @if (c.ImageURL != null && File.Exists(Path.Join(env.WebRootPath, c.ImageURL)))
+                {
+                        <img class="card-img-top" style="width:100%; min-height:70vh; object-fit:cover;" src="@($"/{c.ImageURL}")" alt="@c.Name">
+                }
+                else
+                {
+                
+                        <img class="card-img-top" style="width:100%; min-height:70vh; object-fit:cover;" src="@($"/img/cocktail-default.jpg")" alt="@c.Name">
+                    }
+                    <div class="card-footer">
+                        <h5 class="card-title">@c.Name</h5>
+                        <!--<p class="card-text">
+                            Testy
+                        </p>-->
+                    </div>
+                </div>
+            </a>
+        </div>
+    }
+
+</div>

CocktailWeb/Shared/MainLayout.razor

@@ -12,7 +12,7 @@
     <main>
         <TopRow />
 
-        <article class="content px-4 vh-100" style="margin-top: 3.5rem">
+        <article class="content px-4 " style="margin-top: 3.5rem; max-height:calc(100vh - 3.5rem);">
             @Body
         </article>
     </main>