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