Skip to content

Commit

Permalink
final changes
Browse files Browse the repository at this point in the history
  • Loading branch information
Daniele Ciminieri committed Nov 15, 2024
1 parent df49185 commit a494daf
Show file tree
Hide file tree
Showing 8 changed files with 68 additions and 45 deletions.
54 changes: 29 additions & 25 deletions src/lib/components/ExperienceProject.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,15 @@
<script>
import ProjectDetails from './ProjectDetails.svelte';
import { urlFor, getVideoUrl } from '$lib/sanityClient';
const { project } = $props();
let videoElement = $state(null);
let showPlayButton = $state(true);
$effect(() => {
console.log(project);
showPlayButton = true;
});
function playVideo() {
if (videoElement) {
videoElement.play();
Expand All @@ -19,11 +23,6 @@
</script>

{#if project}
<!--<div class="container-fluid">
<div class="row">
<ProjectDetails {project} />
</div>
</div>-->
<div class="container-fluid mt-3">
<div class="row">
<div class="col-md-12">
Expand All @@ -34,9 +33,6 @@
</div>
</div>
<div class="container-fluid my-5">
<!--
<ProjectDetails {project} />
-->
<div class="row">
<div class="col-md-3 offset-md-3 col-sm-12">
<div>
Expand Down Expand Up @@ -84,24 +80,32 @@
<div class="col-md-7 col-xs-12">
{#if project.video}
<div class="ratio ratio-16x9 position-relative">
<!-- svelte-ignore a11y_media_has_caption -->
<video bind:this={videoElement} onended={handleVideoEnded} controls>
<source src={getVideoUrl(project.video)} type="video/mp4" />
Your browser does not support the video tag.
</video>
{#if showPlayButton}
<div
class="position-absolute top-0 start-0 w-100 h-100 d-flex justify-content-center align-items-center"
{#key project.video}
<!-- svelte-ignore a11y_media_has_caption -->
<video
bind:this={videoElement}
onended={handleVideoEnded}
poster={urlFor(project?.immagini?.[3]).url()}
controls
>
<button
class="d-flex justify-content-center align-items-center bg-white rounded-circle border-0"
style="width: 80px; height: 80px;"
onclick={playVideo}
<source src={getVideoUrl(project.video)} type="video/mp4" />

Your browser does not support the video tag.
</video>
{#if showPlayButton}
<div
class="position-absolute top-0 start-0 w-100 h-100 d-flex justify-content-center align-items-center"
>
<i class="bi bi-play-fill text-black fs-1"></i>
</button>
</div>
{/if}
<button
class="d-flex justify-content-center align-items-center bg-white rounded-circle border-0"
style="width: 80px; height: 80px;"
onclick={playVideo}
>
<i class="bi bi-play-fill text-black fs-1"></i>
</button>
</div>
{/if}
{/key}
</div>
{:else if project.immagini && project.immagini.length > 4}
<img
Expand Down
5 changes: 3 additions & 2 deletions src/lib/cursorEffect.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,14 +35,15 @@ export function createSquareAtMouse(x, y) {
square.style.pointerEvents = 'none'; // Ensure it doesn't interfere with other elements
square.style.transition = 'all ' + ANIMATION_DURATION / 1000 + 's ease-out'; // Add transition for fading effect
square.style.filter = 'blur(0px)';
//square.style.borderRadius = '40px';
square.dataset.x = cellX; // Add data attributes to identify the square's position
square.dataset.y = cellY;

if (BORDER_ONLY) {
square.style.border = '3px solid rgba(0, 0, 255, 0.8)'; // Blue border with 80% opacity
square.style.border = '3px solid rgba(255, 255, 255, 0.8)'; // Blue border with 80% opacity
square.style.backgroundColor = 'transparent'; // Transparent background
} else {
square.style.backgroundColor = 'rgba(0, 0, 255, 0.8)'; // Use blue with 80% opacity
square.style.backgroundColor = 'rgba(255, 255, 255, 0.8)'; // Use blue with 80% opacity
}

// Add the square to the document
Expand Down
2 changes: 1 addition & 1 deletion src/lib/sanityQueries.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ export const getGruppi = (slug) => {
studenti[]->{
nome,
cognome,
},
} | order(cognome asc),
"prev": *[_type == "gruppo" && corso->_id == ^.corso->_id && nome < ^.nome] | order(nome desc)[0] {
nome,
slug
Expand Down
29 changes: 19 additions & 10 deletions src/routes/+page.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,10 @@
const home = $derived(page.data.home);
let firstContainer;
let firstParagraph = $derived([home.descrizione[0]]);
let remainingParagraphs = $derived(home.descrizione.slice(1));
$inspect(home);
$effect(() => {
if (!firstContainer) return;
Expand All @@ -28,26 +32,31 @@
});
</script>

<div class="container-fluid mt-2 flex-grow-1" bind:this={firstContainer}>
<div class="row justify-content-between">
<div class="col-md-7 col-sm-12 home-main">
<PortableText value={home.descrizione} />
<div class="container-fluid my-4 flex-grow-1" bind:this={firstContainer}>
<div class="row">
<div class="col-12 fs-1">
<PortableText value={firstParagraph} />
</div>
<div class="col-md-4 col-sm-12 mt-2 sidebar">
</div>
<div class="row my-4">
<div class="col-md-3 col-sm-12 mb-4 mt-2 sidebar">
<PortableText value={home.info} />
</div>
<div class="col-md-8 col-sm-12 home-main">
<PortableText value={remainingParagraphs} />
</div>
</div>
</div>

<div class="container-fluid mt-4" id="course-list">
<div class="container-fluid my-4" id="course-list">
{#each corsi as corso, index}
<div
class="row py-2"
class:border-top={index !== 0}
class:border-bottom={index !== corsi.length - 1}
>
<div class="col-12">
<h1 class="d-flex align-items-center gap-3">
<h1 class="d-flex align-items-start gap-3">
<a href="{base}/corsi/{corso.slug.current}" class="text-decoration-none text-white">
<span
class="course-title fs-big fw-normal text-uppercase"
Expand All @@ -56,7 +65,7 @@
>
</a>
<span
class="fw-semibold badge rounded-pill text-white fs-6 mt-2"
class="fw-semibold badge rounded-pill text-white fs-6 mt-3 py-1 px-2"
style="box-shadow: inset 0 0 4px 2px {'#' + corso.colore}, 0 0 4px 2px {'#' +
corso.colore};
border: 1px solid {'#' + corso.colore}; background-color: {'#' + corso.colore}">{corso.anno}</span
Expand All @@ -72,7 +81,7 @@
font-size: 1.25rem;
}
.home-main :global(p) {
font-size: 1.75rem;
font-size: 1.5rem;
}
.sidebar :global(ul) {
list-style: none;
Expand All @@ -90,7 +99,7 @@
}
.sidebar :global(h5) {
font-size: 1rem;
margin-top: 1.5em;
margin-top: 2em;
}
.sidebar :global(h6) {
font-size: 1rem;
Expand Down
1 change: 1 addition & 0 deletions src/routes/corsi/[slug]/+page.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ export async function load({ params, fetch }) {
const { slug } = params;
const response = await fetch(`${base}/api/corso/${slug}`);
const corso = await response.json();
console.log(corso);

return { corso };
}
12 changes: 8 additions & 4 deletions src/routes/corsi/[slug]/+page.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,17 +1,19 @@
<script>
import { base } from '$app/paths';
import { PortableText } from '@portabletext/svelte';
const { data } = $props();
$inspect(data);
</script>

<div class="flex-grow-1 d-flex flex-column justify-content-between">
{#if data.corso}
<div class="container-fluid mt-1 sticky-top bg-blur">
<div class="row">
<div class="col-md-12 border-2 border-bottom border-white py-1">
<h1 class="d-flex align-items-center gap-3">
<h1 class="d-flex align-items-start gap-3">
<span class="fw-normal text-uppercase">{data.corso.titolo}</span>
<span
class="badge fw-semibold rounded-pill text-white fs-6 mt-0"
class="badge fw-semibold rounded-pill text-white fs-6 mt-2 py-1 px-2"
style="box-shadow: inset 0 0 4px 2px {'#' + data.corso.colore}, 0 0 4px 2px {'#' +
data.corso.colore};
border: 1px solid {'#' + data.corso.colore}; background-color: {'#' + data.corso.colore}"
Expand All @@ -23,8 +25,10 @@
</div>
<div class="container-fluid mt-4 flex-grow-1">
<div class="row">
<div class="col-md-6 col-sm-12">
<p class="fs-4 fw-semibold">{data.corso.descrizione}</p>
<div class="col-md-12 col-sm-12">
<p class="fs-4 fw-semibold">
<PortableText value={data.corso.descrizione} />
</p>
</div>
</div>
</div>
Expand Down
10 changes: 7 additions & 3 deletions src/routes/gruppi/[slug]/+page.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,9 @@
import ExperienceProject from '$lib/components/ExperienceProject.svelte';
import BlurredIconButton from '$lib/components/BlurredIconButton.svelte';
import { goto } from '$app/navigation';
import { PortableText } from '@portabletext/svelte';
const { data } = $props();
$inspect(data);
const sortedProjects = $derived(
data.gruppo.progetti.sort((a, b) => {
Expand Down Expand Up @@ -50,15 +52,15 @@
<div class="container-fluid mt-1">
<div class="row">
<div class="col-md-12 border-2 border-bottom border-white py-1">
<h1 class="d-flex align-items-center gap-3">
<h1 class="d-flex align-items-start gap-3">
<a
href="{base}/corsi/{data.gruppo.corso.slug.current}"
class="text-decoration-none text-white"
>
<span class="fw-normal text-uppercase">{data.gruppo.corso.titolo}</span>
</a>
<span
class="fw-semibold badge rounded-pill text-white fs-6 mt-0"
class="fw-semibold badge rounded-pill text-white fs-6 mt-2 py-1 px-2"
style="box-shadow: inset 0 0 4px 2px {'#' +
data.gruppo.corso.colore}, 0 0 4px 2px {'#' + data.gruppo.corso.colore};
border: 1px solid {'#' + data.gruppo.corso.colore}; background-color: {'#' +
Expand All @@ -78,7 +80,9 @@
<div class="container-fluid">
<div class="row">
<div class="col-md-12 py-3">
<p style="font-weight: 500;" class="fs-4">{data.gruppo.descrizione}</p>
<p style="font-weight: 500;" class="fs-4">
<PortableText value={data.gruppo.descrizione} />
</p>
</div>
</div>
<div class="row mt-5 border-bottom border-white pb-2">
Expand Down
Binary file modified static/favicon.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit a494daf

Please sign in to comment.