diff --git a/CocktailWeb/Pages/Cocktails.razor b/CocktailWeb/Pages/Cocktails.razor index 791aece..73d242c 100644 --- a/CocktailWeb/Pages/Cocktails.razor +++ b/CocktailWeb/Pages/Cocktails.razor @@ -1,12 +1,20 @@ @page "/cocktails" @using CocktailWeb.Data +@using Microsoft.AspNetCore.Components.Sections @using Microsoft.EntityFrameworkCore @inject IDbContextFactory DataContextFactory; @inject IWebHostEnvironment env; +@layout SideScrollLayout -Cocktail hinzufügen - + + + +
@foreach (Cocktail c in CocktailListe) @@ -20,7 +28,7 @@ } else { - @c.Name + @c.Name }
@c.Name
diff --git a/CocktailWeb/Shared/MainLayout.razor b/CocktailWeb/Shared/MainLayout.razor index 5439797..dc961c4 100644 --- a/CocktailWeb/Shared/MainLayout.razor +++ b/CocktailWeb/Shared/MainLayout.razor @@ -8,26 +8,11 @@
--> -
-
-
- -
- Zutaten - Cocktails -
-
-
+ - -
+
@Body
diff --git a/CocktailWeb/Shared/MainLayout.razor.css b/CocktailWeb/Shared/MainLayout.razor.css index 7f273c0..88f6753 100644 --- a/CocktailWeb/Shared/MainLayout.razor.css +++ b/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; } } + **/ \ No newline at end of file diff --git a/CocktailWeb/Shared/SideScrollLayout.razor b/CocktailWeb/Shared/SideScrollLayout.razor new file mode 100644 index 0000000..1281eb5 --- /dev/null +++ b/CocktailWeb/Shared/SideScrollLayout.razor @@ -0,0 +1,68 @@ +@inherits LayoutComponentBase + +CocktailWeb + +
+
+ + +
+ Row 1 +
+
+
+ +
+ Test +
+
Testcocktail
+
+
+ +
+
+ Test +
+
+
Testcocktail
Testzwei
+
+
+ +
+ Test +
+
Testcocktail
Testzwei
+
+
+ +
+ Test +
+
Testcocktail
Testzwei
+
+
+ +
+ Test +
+
Testcocktail
Testzwei
+
+
+ +
+ Test +
+
Testcocktail
Testzwei
+
+
+
+
+ +
+
+ +@code { + + +} + diff --git a/CocktailWeb/Shared/TopRow.razor b/CocktailWeb/Shared/TopRow.razor new file mode 100644 index 0000000..7d77838 --- /dev/null +++ b/CocktailWeb/Shared/TopRow.razor @@ -0,0 +1,25 @@ +@using Microsoft.AspNetCore.Components.Sections + + +
+

+ +

+
+ +
+ Zutaten + Cocktails +
+
+
+ + +@code { + public static SectionOutlet Title = new(); +}