wombat/cocktailweb
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

TopRow ist jetzt Komponente, Experimente mit Cards

Browse Source
This commit is contained in:
BuildTools 2024-01-16 20:57:54 +01:00
parent 897211d6f1
commit 16a63c6a8c
5 changed files with 113 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
CocktailWeb/Pages/Cocktails.razor
View File

@ -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>-->
<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>

19
CocktailWeb/Shared/MainLayout.razor
View File

@ -9,25 +9,10 @@
</div>
-->
<main>
<div class="top-row px-4">
<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>
<TopRow />
<article class="content px-4">
<article class="content px-4 vh-100" style="margin-top: 3.5rem">
@Body
</article>
</main>

34
CocktailWeb/Shared/MainLayout.razor.css
View File

@ -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;
}
}
**/

68
CocktailWeb/Shared/SideScrollLayout.razor Normal file
View File

@ -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 {
}

25
CocktailWeb/Shared/TopRow.razor Normal file
View File

@ -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();
}