Penry/CouchLog
1
0
Fork 0
Code Issues 12 Pull Requests Actions Packages Projects Releases 1 Wiki Activity

fix: fixed the Issue with long Names and adapted the count of Entity in a row

Browse Source
This commit is contained in:
Henry
2025-12-27 22:52:34 +01:00
parent 4e3eca0650
commit dd845f4be6
3 changed files with 38 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.gitignore vendored
View File

@@ -2,5 +2,7 @@
bin
Debug
/CouchLog/Data/CouchLog.db
/CouchLog/Data/CouchLog.db-shm
/CouchLog/Data/CouchLog.db-wal
#Migrations
obj

28
CouchLog/Components/Pages/GlobalList.razor
View File

@@ -43,10 +43,10 @@
</div>
<div class="mb-3">
<label for="Picture" class="form-label">Picture</label>
<InputFile OnChange="@LoadFiles" accept="image/*"/>
@if (!string.IsNullOrEmpty(ImagePreviewUrl))
<InputFile OnChange="@LoadImage" accept="image/*" />
@if (!string.IsNullOrEmpty(ImageString))
{
<img src="@ImagePreviewUrl" style="max-width: 256px; max-height: 256px;" />
<img src="@ImageString" style="max-width: 256px; max-height: 256px;" />
}
</div>
<div class="mb-3">
@@ -66,12 +66,12 @@
<!-- #endregion -->
<!-- #region Show Entitys -->
<div class="row">
<div class="row g-4">
@foreach (var Entity in GlobalEntities)
{
if (!Entity.IsPrivate || (Entity.IsPrivate && (Entity.CreatorId == AppUser.Id)))
{
<div name="Enity-Container" class="col-12 col-md-6 col-lg-3 mb-4 Entity-Container">
<div name="Enity-Container" class="col-6 col-md-4 col-lg-2 col-xl-2 mb-4 Entity-Container">
<div name="Entity-Container-Card" class="Entity-Container-Card">
<div class="Entity-Container-Menu-Button dropdown ms-1">
@@ -151,6 +151,7 @@
private bool isCollapseNewGlobalEntityOpen = false;
private int SelectedMediaTypeId;
private bool isPrivate = false;
private string ImageString;
/// <summary>
///
@@ -159,9 +160,9 @@
/// <exception cref="NotImplementedException"></exception>
protected override async Task OnInitializedAsync()
{
GlobalEntities = await CouchLogDB.GlobalEntities.OrderByDescending(Entity => Entity.Id).ToListAsync();
GlobalEntities = await CouchLogDB.GlobalEntities.OrderByDescending(Entity => Entity.Title).ToListAsync();
MediaTypes = await CouchLogDB.MediaType.OrderBy(Type => Type.Id).ToListAsync();
Genres = await CouchLogDB.Genres.OrderBy(Genre => Genre.Id).ToListAsync();
Genres = await CouchLogDB.Genres.OrderBy(Genre => Genre.Name).ToListAsync();
var AuthState = await AuthenticationStateProvider.GetAuthenticationStateAsync();
User = AuthState.User;
@@ -181,6 +182,19 @@
UserPrivateEntityIds = TempUserPrivateEntityIds.ToHashSet();
}
private async Task LoadImage(InputFileChangeEventArgs e)
{
Picture = e.File;
foreach(var file in e.GetMultipleFiles())
{
using var stream = file.OpenReadStream();
using var ms = new MemoryStream();
await stream.CopyToAsync(ms);
ImageString = $"data:{file.ContentType};base64,{Convert.ToBase64String(ms.ToArray())}";
}
}
/// <summary>
///
/// </summary>

31
CouchLog/Components/Pages/PrivateList.razor
View File

@@ -24,45 +24,44 @@
<div class="row g-4">
@foreach (var Entity in PrivateEntities)
{
/*
Hier bleiben wir bei col-lg-6 (halbe Bildschirmbreite),
wie du es im roten Kasten wolltest.
*/
<div class="col-12 col-lg-6 col-xxl-4">
<div class="card shadow-sm border-0 overflow-hidden private-entity-card">
<div class="row g-0 h-100">
<!-- BILD: col-auto sorgt dafür, dass sich die Breite nach CSS richtet -->
<div class="col-auto img-wrapper">
<!-- Feste Breite für das Bild, kein Umbruch -->
<div class="col-auto" style="flex: 0 0 auto; min-width: 120px; max-width: 150px;">
@if (!string.IsNullOrEmpty(Entity.GlobalEntity?.PicturePath))
{
<img src="/@Entity.GlobalEntity.PicturePath"
class="entity-img"
class="entity-img w-100 h-100"
style="object-fit: cover;"
alt="@Entity.GlobalEntity.Title">
}
else
{
<div class="d-flex align-items-center justify-content-center h-100 bg-light text-muted small px-2">
<div class="d-flex align-items-center justify-content-center h-100 bg-light text-muted small">
Kein Bild
</div>
}
</div>
<!-- INFO: 'col' nimmt automatisch den RESTLICHEN Platz ein -->
<div class="col">
<!-- Der Rest nimmt den verbleibenden Platz -->
<div class="col" style="min-width: 0;">
<div class="card-body d-flex flex-column h-100 py-2 px-3">
<!-- Header -->
<div class="d-flex justify-content-between align-items-start">
<div class="overflow-hidden">
<h5 class="card-title fw-bold mb-0 text-truncate">@Entity.GlobalEntity?.Title</h5>
<!-- Header mit besserer Text-Behandlung -->
<div class="d-flex justify-content-between align-items-start mb-2">
<div style="min-width: 0; flex: 1;">
<h5 class="card-title fw-bold mb-0" style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
@Entity.GlobalEntity?.Title
</h5>
<small class="text-muted meta-text">
@Entity.CreationTime.ToShortDateString()
</small>
</div>
<div class="dropdown ms-1">
<div class="dropdown ms-2" style="flex-shrink: 0;">
<button class="btn btn-link menu-btn" type="button" data-bs-toggle="modal" data-bs-target="#modal-@Entity.Id">
&#8942;
</button>
@@ -79,7 +78,7 @@
}
</select>
@if (Entity.GlobalEntity?.MediaType.Name == "Series")
@if (Entity.GlobalEntity?.MediaType.Name == "Series" || Entity.GlobalEntity?.MediaType.Name == "Anime")
{
<select class="form-select" value="@Entity.Season" @onchange="@(e => UpdateSeason(Entity, e.Value))">
@{