Skip to content

Commit

Permalink
several grapgic fixes
Browse files Browse the repository at this point in the history
  • Loading branch information
Daniele Ciminieri committed Sep 20, 2024
1 parent a2c1cc7 commit d0719df
Show file tree
Hide file tree
Showing 8 changed files with 76 additions and 57 deletions.
10 changes: 5 additions & 5 deletions src/lib/components/DataProject.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -76,16 +76,16 @@
</script>

{#if project}
<div class="container-fluid border-bottom border-white mt-3 pb-5">
<div class="container-fluid border-bottom border-white pb-5">
<ProjectDetails {project} />
<div class="row">
<div class="col-md-6 col-sm-12" style="min-height:600px;">
<div class="d-flex flex-column align-items-start justify-content-around h-100">
<div class="d-flex flex-column align-items-start h-100">
<p class="fs-5">
{project.descrizione}
</p>
<button
class="btn rounded-pill hover-effect text-white"
class="btn rounded-pill hover-effect text-white mt-5"
style="--corso-color: #{corsoColor}; background-color: #{corsoColor};"
onclick={handleViewProject}>Vedi il progetto</button
>
Expand Down Expand Up @@ -163,15 +163,15 @@
class="btn d-none d-md-flex align-items-center justify-content-center hover-effect bg-black text-white position-absolute"
style="--corso-color: #{corsoColor}; width: 60px; height: 60px; border-radius: 50%; left: 10px; top: 50%; transform: translateY(-50%);"
onclick={prevMedia}
class:opacity-0={currentMediaIndex === 0}
disabled={currentMediaIndex === 0}
>
<i class="bi bi-arrow-left"></i>
</button>
<button
class="btn d-none d-md-flex align-items-center justify-content-center hover-effect bg-black text-white position-absolute"
style="--corso-color: #{corsoColor}; width: 60px; height: 60px; border-radius: 50%; right: 10px; top: 50%; transform: translateY(-50%);"
onclick={nextMedia}
class:opacity-0={currentMediaIndex === project.immagini.length - 1}
disabled={currentMediaIndex === project.immagini.length - 1}
>
<i class="bi bi-arrow-right"></i>
</button>
Expand Down
20 changes: 11 additions & 9 deletions src/lib/components/ExperienceProject.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,14 +16,10 @@
function handleVideoEnded() {
showPlayButton = true;
}
function handleVideoPause() {
showPlayButton = true;
}
</script>

{#if project}
<div class="container-fluid mt-3">
<div class="container-fluid">
<div class="row">
<ProjectDetails {project} />
</div>
Expand All @@ -38,19 +34,19 @@
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="row gx-0" style="margin-top: 20px;">
{#if project?.immagini?.[0]}
<div class="col-md-4 col-xs-12 mt-2">
<div class="exp-img col-md-4 col-xs-12">
<img class="w-100" src={urlFor(project?.immagini?.[0]).url()} alt={project?.titolo} />
</div>
{/if}
{#if project?.immagini?.[1]}
<div class="col-md-4 col-xs-12 mt-2">
<div class="exp-img col-md-4 col-xs-12">
<img class="w-100" src={urlFor(project?.immagini?.[1]).url()} alt={project?.titolo} />
</div>
{/if}
{#if project?.immagini?.[2]}
<div class="col-md-4 col-xs-12 mt-2">
<div class="exp-img col-md-4 col-xs-12">
<img class="w-100" src={urlFor(project?.immagini?.[2]).url()} alt={project?.titolo} />
</div>
{/if}
Expand Down Expand Up @@ -96,3 +92,9 @@
</div>
</div>
{/if}

<style>
.exp-img {
padding: 0 10px 0 10px;
}
</style>
2 changes: 1 addition & 1 deletion src/lib/components/Header.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@

<div
bind:this={headerElement}
class="container-fluid bg-black header sticky-top border-0 border-bottom"
class="container-fluid bg-black header sticky-top border-2 border-bottom"
>
<div class="row d-flex justify-content-between align-items-center h-100">
<div class="col-auto">
Expand Down
50 changes: 26 additions & 24 deletions src/lib/components/ImageGallery.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,6 @@
<script>
import { urlFor } from '$lib/sanityClient.js';
import { browser } from '$app/environment';
import { slide } from 'svelte/transition';
import { cubicInOut } from 'svelte/easing';
let isMobile = $state(false);
Expand Down Expand Up @@ -103,31 +101,28 @@
{/each}
</div>

{#if currentIndex > 0}
<button
class="btn me-2 ms-2 d-flex align-items-center justify-content-center position-absolute top-50 start-0 translate-middle-y gallery-button"
style="--hover-color: #{color};"
onclick={prevImage}
>
<i class="bi bi-arrow-left"></i>
</button>
{/if}

{#if currentIndex < images.length - 1}
<button
class="btn ms-2 me-2 d-flex align-items-center justify-content-center position-absolute top-50 end-0 translate-middle-y gallery-button"
style="--hover-color: #{color};"
onclick={nextImage}
>
<i class="bi bi-arrow-right"></i>
</button>
{/if}
<button
class="btn-slide btn me-2 ms-2 d-flex align-items-center justify-content-center position-absolute top-50 start-0 translate-middle-y gallery-button"
style="--hover-color: #{color};"
onclick={prevImage}
disabled={currentIndex === 0}
>
<i class="bi bi-arrow-left"></i>
</button>
<button
class="btn ms-2 me-2 d-flex align-items-center justify-content-center position-absolute top-50 end-0 translate-middle-y gallery-button"
style="--hover-color: #{color};"
onclick={nextImage}
disabled={currentIndex === images.length - 1}
>
<i class="bi bi-arrow-right"></i>
</button>
{/if}
</div>

<style>
.image-gallery {
height: 550px;
height: auto;
overflow: hidden;
position: relative;
touch-action: pan-y;
Expand All @@ -150,6 +145,7 @@
height: 100%;
object-fit: contain;
cursor: pointer;
object-position: top;
}
.gallery-button {
Expand All @@ -159,13 +155,19 @@
background-color: black;
color: white;
transition:
background-color 0.3s,
color 0.3s;
background-color 0.1s,
color 0.1s;
}
.gallery-button:hover {
background-color: white;
color: var(--hover-color);
border: none;
}
.gallery-button:disabled {
border: none !important;
outline: none !important;
}
@media (max-width: 768px) {
Expand Down
2 changes: 1 addition & 1 deletion src/lib/components/ProjectDetails.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
const { project } = $props();
</script>

<div class="row">
<div class="row mt-3" style="margin-bottom: 100px;">
<div class="col-md-6 col-sm-12">
<h5 class="text-uppercase">{project.titolo}</h5>
</div>
Expand Down
17 changes: 11 additions & 6 deletions src/routes/+page.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,11 +34,16 @@
Il laboratorio di Information Design, sviluppato su due moduli integrati, ha l'obiettivo di
introdurre gli studenti alla progettazione di artefatti comunicativi che hanno lo scopo di
veicolare temi e informazioni complesse e offrire una visione ampia sul valore, sulle
potenzialità e i limiti dei dati. Gli studenti, organizzati in gruppi di lavoro, partiranno
dalla selezione di un tema di ricerca che svilupperanno tramite la selezione e l'analisi
visuale di set di dati che ne rappresentano alcune dimensioni. Dopo una prima fase di
analisi, gli studenti dovranno sviluppare un progetto composto da tre elementi: una
pubblicazione digitale in grado di presentare il tema e i dati analizzati;
potenzialità e i limiti dei dati.
</p>
<p class="fw-semibold fs-3">
Gli studenti, organizzati in gruppi di lavoro, partiranno dalla selezione di un tema di
ricerca che svilupperanno tramite la selezione e l'analisi visuale di set di dati che ne
rappresentano alcune dimensioni.
</p>
<p class="fw-semibold fs-3">
Dopo una prima fase di analisi, gli studenti dovranno sviluppare un progetto composto da tre
elementi: una pubblicazione digitale in grado di presentare il tema e i dati analizzati;
un'installazione/campagna di comunicazione capace di riportare l'esperienza digitale in uno
spazio fisico; un video che racconta l'intera esperienza in tutte le sue fasi significative.
</p>
Expand Down Expand Up @@ -80,7 +85,7 @@
<span class="fw-normal text-uppercase">{corso.titolo}</span>
</a>
<span
class="badge rounded-pill text-white border border-white fs-6 mt-2"
class="fw-semibold badge rounded-pill text-white border border-white fs-6 mt-2"
style="background-color: {'#' + corso.colore}">{corso.anno}</span
>
</h1>
Expand Down
18 changes: 14 additions & 4 deletions src/routes/corsi/[slug]/+page.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,11 +6,11 @@
{#if data.corso}
<div class="container-fluid mt-1 sticky-top bg-blur">
<div class="row">
<div class="col-md-12 border-bottom border-white py-2">
<div class="col-md-12 border-2 border-bottom border-white py-1">
<h1 class="d-flex align-items-center gap-3">
<span class="fw-normal text-uppercase">{data.corso.titolo}</span>
<span
class="badge rounded-pill text-white border border-white fs-6 mt-2"
class="badge fw-semibold rounded-pill text-white border border-white fs-6 mt-0"
style="background-color: {'#' + data.corso.colore}">{data.corso.anno}</span
>
</h1>
Expand All @@ -30,12 +30,13 @@
<div class="col-12">
{#each data.corso.gruppi as gruppo, index}
<div
class="border-white p-3"
class="border-white px-3 py-1 group-item"
class:border-top={index !== 0}
class:border-bottom={index !== data.corso.gruppi.length - 1}
style="--corso-color: #{data.corso.colore};"
>
<a href="{base}/gruppi/{gruppo.slug.current}" class="text-decoration-none text-white">
<h1 class="fw-normal text-uppercase" style="font-size: 4rem;">{gruppo.nome}</h1>
<p class="fw-normal text-uppercase fw-big my-0">{gruppo.nome}</p>
</a>
</div>
{/each}
Expand All @@ -44,3 +45,12 @@
</div>
{/if}
{/if}

<style>
.group-item:hover {
background-color: var(--corso-color);
}
.fw-big {
font-size: 4rem;
}
</style>
14 changes: 7 additions & 7 deletions src/routes/gruppi/[slug]/+page.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@
{#if data.gruppo}
<div class="container-fluid mt-1">
<div class="row">
<div class="col-md-12 border-bottom border-white py-2">
<div class="col-md-12 border-2 border-bottom border-white py-1">
<h1 class="d-flex align-items-center gap-3">
<a
href="{base}/corsi/{data.gruppo.corso.slug.current}"
Expand All @@ -40,24 +40,24 @@
<span class="fw-normal text-uppercase">{data.gruppo.corso.titolo}</span>
</a>
<span
class="badge rounded-pill text-white border border-white fs-6 mt-2"
class="fw-semibold badge rounded-pill text-white border border-white fs-6 mt-0"
style="background-color: {'#' + data.gruppo.corso.colore}"
>{data.gruppo.corso.anno}</span
>
</h1>
</div>
</div>
</div>
<div class="container-fluid sticky-top bg-blur">
<div class="container-fluid sticky-top bg-blur" style="background-color: rgba(0, 0, 0, 0.2);">
<div class="row">
<div class="col-md-12 border-bottom border-white pt-3 pb-2">
<h1 class="fs-big fw-normal text-uppercase">{data.gruppo.nome}</h1>
<div class="col-md-12 border-2 border-bottom border-white py-1">
<h1 class="mb-0 fs-big fw-normal text-uppercase">{data.gruppo.nome}</h1>
</div>
</div>
</div>
<div class="container-fluid mt-4">
<div class="container-fluid">
<div class="row">
<div class="col-md-12 py-2">
<div class="col-md-12 py-3">
<p class="fs-4">{data.gruppo.descrizione}</p>
</div>
</div>
Expand Down

0 comments on commit d0719df

Please sign in to comment.