arrange style for detail
This commit is contained in:
@@ -9,21 +9,22 @@
|
||||
<div class="detail-container">
|
||||
<h1 class="header-1 expand-col-2">@Game.Title</h1>
|
||||
<div class="description">@Game.Description</div>
|
||||
<div class="medias grd-col-2"></div>
|
||||
<div class="medias"></div>
|
||||
|
||||
<div class="properties-tags expand-col-2">
|
||||
<h2 class="header-2"></h2>
|
||||
<div class="category-container">
|
||||
<div class="properties-container">
|
||||
|
||||
<h2 class="header-2 grd-col-1">@ResourcesKey.Properties</h2>
|
||||
@foreach (var property in Game.Properties ?? [])
|
||||
{
|
||||
<div class="pill prop-tag">@property.Label</div>
|
||||
<div class="pill body-lg">@property.Label</div>
|
||||
}
|
||||
</div>
|
||||
<h2 class="header-2"></h2>
|
||||
<div class="category-container">
|
||||
<div class="tags-container">
|
||||
<h2 class="header-2">@ResourcesKey.Tags</h2>
|
||||
@foreach (var property in Game.Tags ?? [])
|
||||
{
|
||||
<div class="pill prop-tag">@property.Label</div>
|
||||
<div class="pill body-lg">@property.Label</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
@@ -40,17 +41,17 @@
|
||||
<span class="body-sm">@ResourcesKey.Platforms</span>
|
||||
@foreach (var platform in Game.Platforms ?? [])
|
||||
{
|
||||
<a class="pill" href="@platform.Url">@platform.Label</a>
|
||||
<a class="body-lg" href="@platform.Url">@platform.Label</a>
|
||||
}
|
||||
</div>
|
||||
<div class="information">
|
||||
<span class="body-sm">@ResourcesKey.Platforms</span>
|
||||
<span class="pill">@Game.Developer</span>
|
||||
<span class="body-sm">@ResourcesKey.Developer</span>
|
||||
<span class="body-lg">@Game.Developer?.Name</span>
|
||||
</div>
|
||||
|
||||
<div class="information">
|
||||
<span class="body-sm">@ResourcesKey.Platforms</span>
|
||||
<span class="pill">@Game.Publisher</span>
|
||||
<span class="body-sm">@ResourcesKey.Publisher</span>
|
||||
<span class="body-lg">@Game.Publisher?.Name</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -1 +1,12 @@
|
||||
|
||||
.detail-container, .properties-tags {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
|
||||
.medias {
|
||||
grid-column: 2
|
||||
}
|
||||
|
||||
.properties {
|
||||
display: flex;
|
||||
}
|
||||
@@ -22,13 +22,13 @@
|
||||
<InputNumber TValue="double?" class="storage" @bind-Value=GameDto.StorageSpace />
|
||||
</div>
|
||||
<div class="input-game">
|
||||
<div class="label">@ResourcesKey.Developers :</div>
|
||||
<div class="label">@ResourcesKey.Developer :</div>
|
||||
<SelectSearch TItem="DeveloperDto" Theme="Theme" GetLabel="@(i => i.Name)" QuickAdd=true
|
||||
Items="Categories?.Developers" ValuesChanged="HandleDeveloperChanged"
|
||||
AddItem="@(str => new DeveloperDto() { Name = str })" SelectType="SelectType.Single" />
|
||||
</div>
|
||||
<div class="input-game">
|
||||
<div class="label">@ResourcesKey.Publishers :</div>
|
||||
<div class="label">@ResourcesKey.Publisher :</div>
|
||||
<SelectSearch TItem="PublisherDto" Theme="Theme" GetLabel="@(i => i.Name)" QuickAdd=true
|
||||
Items="Categories?.Publishers" ValuesChanged="HandlePublisherChanged"
|
||||
AddItem="@(str => new PublisherDto() { Name = str })" SelectType="SelectType.Single" />
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
<div class="row">
|
||||
<img class="icon" src="~/icon.png" />
|
||||
|
||||
<a class="title" href="@($"/Games/Detail/{GameDto.Id}")">@GameDto.Title</a>
|
||||
<a class="title" href="@($"/Detail/{GameDto.Id}")">@GameDto.Title</a>
|
||||
|
||||
<span class="release-date">@(GameDto.ReleaseDate?.ToShortDateString() ?? @ResourcesKey.Unknown)</span>
|
||||
|
||||
|
||||
@@ -16,10 +16,10 @@
|
||||
<SelectSearch TItem="PropertyDto" Placeholder="@ResourcesKey.Properties" GetLabel="@(p => p.Label)"
|
||||
@bind-Values=GameFilter.Properties @bind-Values:after=HandleValueChanged Theme="Theme" Items="Categories?.Properties" />
|
||||
|
||||
<SelectSearch TItem="DeveloperDto" Placeholder="@ResourcesKey.Developers" GetLabel="@(p => p.Name)"
|
||||
<SelectSearch TItem="DeveloperDto" Placeholder="@ResourcesKey.Developer" GetLabel="@(p => p.Name)"
|
||||
@bind-Values=GameFilter.Developers @bind-Values:after=HandleValueChanged Theme="Theme" Items="Categories?.Developers" />
|
||||
|
||||
<SelectSearch TItem="PublisherDto" Placeholder="@ResourcesKey.Publishers" GetLabel="@(p => p.Name)"
|
||||
<SelectSearch TItem="PublisherDto" Placeholder="@ResourcesKey.Publisher" GetLabel="@(p => p.Name)"
|
||||
@bind-Values=GameFilter.Publishers @bind-Values:after=HandleValueChanged Theme="Theme" Items="Categories?.Publishers" />
|
||||
|
||||
<SelectSearch TItem="int" Placeholder="@ResourcesKey.ReleaseDate" GetLabel="@(p => p.ToString())"
|
||||
|
||||
@@ -132,6 +132,31 @@ code {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.expand-col-2 {
|
||||
grid-column: 1 / 3;
|
||||
}
|
||||
|
||||
.expand-row-2 {
|
||||
grid-row: 1 / 3;
|
||||
}
|
||||
|
||||
.body-sm {
|
||||
color: #ccc
|
||||
}
|
||||
|
||||
.body-lg {
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.header-1, .header-2, span, a {
|
||||
color: var(--white);
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
|
||||
@keyframes fade-in {
|
||||
0% {opacity: 0}
|
||||
100% {opacity: 1}
|
||||
|
||||
@@ -17,8 +17,8 @@ public class Translations (TranslationService translationService)
|
||||
public string Research => translationService.Translate(nameof(Research));
|
||||
public string Platforms => translationService.Translate(nameof(Platforms));
|
||||
public string Tags => translationService.Translate(nameof(Tags));
|
||||
public string Publishers => translationService.Translate(nameof(Publishers));
|
||||
public string Developers => translationService.Translate(nameof(Developers));
|
||||
public string Publisher => translationService.Translate(nameof(Publisher));
|
||||
public string Developer => translationService.Translate(nameof(Developer));
|
||||
public string StorageSize => translationService.Translate(nameof(StorageSize));
|
||||
public string StorageSizeMo => translationService.Translate(nameof(StorageSizeMo));
|
||||
public string LastModification => translationService.Translate(nameof(LastModification));
|
||||
@@ -91,8 +91,8 @@ public static class ResourcesKey
|
||||
public static string Research => _instance?.Research ?? throw new InvalidOperationException("ResourcesKey.Research is not initialized.");
|
||||
public static string Platforms => _instance?.Platforms ?? throw new InvalidOperationException("ResourcesKey.Platforms is not initialized.");
|
||||
public static string Tags => _instance?.Tags ?? throw new InvalidOperationException("ResourcesKey.Tags is not initialized.");
|
||||
public static string Publishers => _instance?.Publishers ?? throw new InvalidOperationException("ResourcesKey.Publishers is not initialized.");
|
||||
public static string Developers => _instance?.Developers ?? throw new InvalidOperationException("ResourcesKey.Developers is not initialized.");
|
||||
public static string Publisher => _instance?.Publisher ?? throw new InvalidOperationException("ResourcesKey.Publisher is not initialized.");
|
||||
public static string Developer => _instance?.Developer ?? throw new InvalidOperationException("ResourcesKey.Developer is not initialized.");
|
||||
public static string StorageSize => _instance?.StorageSize ?? throw new InvalidOperationException("ResourcesKey.StorageSize is not initialized.");
|
||||
public static string StorageSizeMo => _instance?.StorageSizeMo ?? throw new InvalidOperationException("ResourcesKey.StorageSizeMo is not initialized.");
|
||||
public static string LastModification => _instance?.LastModification ?? throw new InvalidOperationException("ResourcesKey.LastModification is not initialized.");
|
||||
|
||||
@@ -13,8 +13,8 @@
|
||||
"Research": "Rechercher",
|
||||
"Platforms": "Plateformes",
|
||||
"Tags": "Genres",
|
||||
"Publishers": "Editeurs",
|
||||
"Developers": "Développeurs",
|
||||
"Publisher": "Editeur",
|
||||
"Developer": "Développeur",
|
||||
"StorageSize": "Taille d'espace",
|
||||
"StorageSizeMo": "Taille d'espace en Mo",
|
||||
"LastModification": "Dernière modifications",
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
using AutoMapper;
|
||||
using GameIdeas.Shared.Constants;
|
||||
using GameIdeas.Shared.Dto;
|
||||
using GameIdeas.Shared.Exceptions;
|
||||
using GameIdeas.Shared.Model;
|
||||
|
||||
Reference in New Issue
Block a user