Imperial-MEng/drp-48
1
0
Fork 0
Code Issues 17 Pull Requests Actions Packages Projects Releases Wiki Activity

feat: initial uploads and single study space view #31

Merged
gk1623 merged 4 commits from feat/initial-study-space-view into master 2025-06-04 17:20:21 +00:00
Conversation 6 Commits 4 Files Changed 18 +498 -87
18 changed files with 498 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 94be1793cb - Show all commits

194
src/routes/space/[id]/+page.svelte
View File

@@ -1,97 +1,97 @@
<script lang="ts"> <script lang="ts">
import Navbar from "$lib/components/Navbar.svelte"; import Navbar from "$lib/components/Navbar.svelte";
import crossUrl from "$lib/assets/cross.svg"; import crossUrl from "$lib/assets/cross.svg";
import placeholder from "$lib/assets/study_space.png"; import placeholder from "$lib/assets/study_space.png";
const { data } = $props(); const { data } = $props();
const { space, supabase } = $derived(data); const { space, supabase } = $derived(data);
const imgUrl = $derived( const imgUrl = $derived(
space.study_space_images.length > 0 space.study_space_images.length > 0
? supabase.storage ? supabase.storage
.from("files_bucket") .from("files_bucket")
.getPublicUrl(space.study_space_images[0].image_path).data.publicUrl .getPublicUrl(space.study_space_images[0].image_path).data.publicUrl
: placeholder : placeholder
); );
</script> </script>
<Navbar> <Navbar>
<a href="/"> <a href="/">
<img src={crossUrl} alt="close" /> <img src={crossUrl} alt="close" />
</a> </a>
</Navbar> </Navbar>
<main> <main>
<img src={imgUrl} alt="the study space" /> <img src={imgUrl} alt="the study space" />
<div class="nameContainer"> <div class="nameContainer">
{space.location} {space.location}
</div> </div>
<p class="descContainer"> <p class="descContainer">
{space.description} {space.description}
</p> </p>
<hr /> <hr />
<div class="whereSubtitle">Where it is:</div> <div class="whereSubtitle">Where it is:</div>
<p class="addrContainer"> <p class="addrContainer">
{space.building_address} {space.building_address}
</p> </p>
</main> </main>
<style> <style>
main { main {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: 0 0 1rem 0; padding: 0 0 1rem 0;
max-width: 32rem; max-width: 32rem;
margin: 0 auto; margin: 0 auto;
} }
img { img {
display: block; display: block;
width: 100%; width: 100%;
aspect-ratio: 1/0.8; aspect-ratio: 1/0.8;
object-fit: cover; object-fit: cover;
object-position: center; object-position: center;
} }
hr { hr {
height: 2px; height: 2px;
background-color: #2e3c42; background-color: #2e3c42;
width: 70%; width: 70%;
border: none; border: none;
margin: 0 auto; margin: 0 auto;
} }
.nameContainer { .nameContainer {
display: block; display: block;
width: 100%; width: 100%;
padding: 0.6rem; padding: 0.6rem;
margin-top: -0.5rem; margin-top: -0.5rem;
object-position: center; object-position: center;
background-color: #49bd85; background-color: #49bd85;
border-radius: 8px; border-radius: 8px;
font-size: 2.8rem; font-size: 2.8rem;
font-weight: bold; font-weight: bold;
color: #ffffff; color: #ffffff;
} }
.descContainer { .descContainer {
display: block; display: block;
width: 100%; width: 100%;
padding: 1.4rem; padding: 1.4rem;
margin-top: -0.5rem; margin-top: -0.5rem;
object-position: center; object-position: center;
border-radius: 8px; border-radius: 8px;
font-size: 1.2rem; font-size: 1.2rem;
} }
.whereSubtitle { .whereSubtitle {
font-size: 1.2rem; font-size: 1.2rem;
font-weight: bold; font-weight: bold;
color: #ffffff; color: #ffffff;
padding: 1.4rem; padding: 1.4rem;
} }
.addrContainer { .addrContainer {
font-size: 1.2rem; font-size: 1.2rem;
padding: 0rem 1.4rem; padding: 0rem 1.4rem;
} }
</style> </style>