Add carousel to company logos, fixes #19

This commit is contained in:
2020-08-06 00:52:18 +01:00
parent ecdbff9c60
commit 34ff03aca1
3 changed files with 31 additions and 26 deletions

View File

@@ -2,7 +2,7 @@
<Project Sdk="Microsoft.NET.Sdk.Web">
<PropertyGroup>
<TargetFramework>netcoreapp3.1</TargetFramework>
<Version>4.0.0.1767</Version>
<Version>4.0.0.1784</Version>
<Company>Canary Islands Computer Museum</Company>
<Copyright>Copyright © 2003-2020 Natalia Portillo</Copyright>
<Product>Canary Islands Computer Museum Website</Product>

View File

@@ -65,19 +65,15 @@
}
</p>
<div class="row">
@{
_carrouselActive = "active";
}
@if (_logos != null &&
_logos.Count > 1)
{
// TODO: Carousel
<div class="col-3">
<div class="carousel slide" data-ride="carousel" id="logosCarousel">
<div class="carousel-inner">
@foreach (var logo in _logos.Where(logo => File.Exists(Path.Combine(Host.WebRootPath, "assets/logos", logo.Guid + ".svg"))))
{
<div class="carousel-item @_carrouselActive">
<Carousel @bind-SelectedSlide="@_selectedSlide" ShowIndicators="true" ShowControls="true">
@foreach(var logo in _logos.Where(logo => File.Exists(Path.Combine(Host.WebRootPath, "assets/logos", logo.Guid + ".svg"))))
{
<CarouselSlide Name="@logo.Guid.ToString()">
<div style="width: 256px; height: 256px; margin: auto;">
<picture>
<source type="image/svg+xml" srcset="/assets/logos/@(logo.Guid).svg">
<source type="image/webp" srcset="/assets/logos/webp/1x/@(logo.Guid).webp,
@@ -88,21 +84,9 @@
/assets/logos/png/1x/@(logo.Guid).webp 3x" src="/assets/logos/png/1x/@(logo.Guid).png" alt="" height="auto" width="auto" style="max-height: 256px; max-width: 256px" />
</picture>
</div>
_carrouselActive = null;
}
</div>
<a class="carousel-control-prev" data-slide="prev" href="#logosCarousel" role="button">
<span aria-hidden="true" class="carousel-control-prev-icon">
</span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" data-slide="next" href="#logosCarousel" role="button">
<span aria-hidden="true" class="carousel-control-next-icon">
</span>
<span class="sr-only">Next</span>
</a>
</div>
</CarouselSlide>
}
</Carousel>
</div>
}
<div class="col-6">
@@ -391,3 +375,19 @@
</div>
}
</div>
<style>
.carousel-indicators {
position: absolute;
bottom: -50px;
}
.carousel-indicators li {
background-color: black;
}
.carousel-control-prev,
.carousel-control-next {
filter: sepia(100%) saturate(200%) brightness(0%) hue-rotate(330deg);
}
</style>

View File

@@ -24,6 +24,7 @@
*******************************************************************************/
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Threading.Tasks;
using Marechai.Database;
@@ -35,7 +36,6 @@ namespace Marechai.Pages.Companies
{
public partial class View
{
string _carrouselActive;
CompanyViewModel _company;
List<Machine> _computers;
List<Machine> _consoles;
@@ -43,6 +43,7 @@ namespace Marechai.Pages.Companies
int _id;
bool _loaded;
List<CompanyLogo> _logos;
string _selectedSlide;
Company _soldTo;
[Parameter]
@@ -84,6 +85,10 @@ namespace Marechai.Pages.Companies
_soldTo = await Service.GetSoldToAsync(_company.SoldToId);
_logos = await CompanyLogosService.GetByCompany(Id);
_selectedSlide = _logos.
FirstOrDefault(logo => File.Exists(Path.Combine(Host.WebRootPath, "assets/logos",
logo.Guid + ".svg")))?.Guid.ToString();
_loaded = true;
StateHasChanged();
}