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,22 +15,27 @@
     <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">
+<!-- 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 href="/cocktails/@c.Id">
-                    <div class="card" style="width: 18rem;">
+            <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" src="@($"/{c.ImageURL}")" alt="@c.Name">
+                        <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 mh-50" src="@($"/img/cocktail-default.jpg")" alt="@c.Name">
+                
+                        <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-body">
+                    <div class="card-footer">
                         <h5 class="card-title">@c.Name</h5>
                         <!--<p class="card-text">
                             Testy
@@ -40,6 +45,5 @@
             </a>
         </div>
     }
-    </div>
-</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>