notkaramel/ECSESS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

small style fix

Browse Source
This commit is contained in:
zzzmlssqnzzz
2025-07-07 18:50:19 -04:00
parent 258d1fd483
commit 2bf2d849fe
4 changed files with 98 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
src/components/CouncilCard.svelte
View File

@@ -1,50 +1,49 @@
<script>
/**
* Schemas for Council Members:
* {
* email,
* name,
* position,
* positionDescription,
* yearProgram,
* image // CDN URL from Sanity CMS
* }
*/
let { name, position, email, positionDescription, yearProgram, image } = $props();
import placeholder from 'assets/placeholderAvatar.png';
let { onViewProfile, name, position, image } = $props();
import placeholder from 'assets/placeholderAvatar.png';
import Button from 'components/Button.svelte';
</script>
<style lang="postcss">
@reference '../app.css';
.card {
@apply flex items-center gap-4 bg-transparent rounded-2xl p-6 text-ecsess-800 border-transparent max-w-[450px] h-[250px];
background-image: linear-gradient(to bottom right, #E8FFD9, #97C583);
}
.card {
@apply flex items-center gap-4 bg-transparent p-6 rounded-lg text-ecsess-200 max-w-[400px];
}
.profile-img {
@apply w-32 h-32 shadow-md overflow-hidden rounded-lg;
}
.profile-img {
@apply size-[100px] rounded-full overflow-hidden;
}
.profile-img :global(img) {
@apply w-full h-full object-cover;
}
.profile-img :global(img) {
@apply object-cover size-full;
}
.info {
@apply flex-1;
}
.name {
@apply text-xl font-bold;
}
.role {
@apply text-ecsess-200 mb-2;
}
</style>
<div class="card">
<!-- <img class="size-4/5" src={placeholder} alt="Placeholder"> -->
<!-- <Avatar src={placeholder} {name} /> -->
<div class="avatar-container justify-left">
<div class="profile-img justify-center">
<img src={image || placeholder} alt={name} />
</div>
<span class="yearProgram text-sm justify-center"> {yearProgram} </span>
</div>
<div class="content">
<p class="pb-2 text-xl font-bold">{name} </p>
<p class="py-2 text-base">{position}</p>
<p class="pb-2 text-xs">{positionDescription}</p>
<a href="mailto:{email}" class="py-2 text-sm underline">{email}</a>
<div class="profile-img">
<img src={image || placeholder} alt={name} />
</div>
<div class="info">
<div class="name">{name}</div>
<div class="role">{position}</div>
<!-- <button class="button" onclick={onViewProfile}>View Profile</button> -->
<Button onclick={onViewProfile}>View Profile</Button>
</div>
</div>

49
src/components/CouncilCardBase.svelte
View File

@@ -1,49 +0,0 @@
<script>
let { onViewProfile, name, position, image } = $props();
import placeholder from 'assets/placeholderAvatar.png';
import Button from 'components/Button.svelte';
</script>
<style lang="postcss">
@reference '../app.css';
.card {
@apply flex items-center gap-4 bg-transparent p-6 rounded-lg text-ecsess-200 max-w-[400px];
}
.profile-img {
@apply size-[100px] rounded-full overflow-hidden;
}
.profile-img :global(img) {
@apply object-cover size-full;
}
.info {
@apply flex-1;
}
.name {
@apply text-xl font-bold;
}
.role {
@apply text-ecsess-200 mb-2;
}
</style>
<div class="card">
<div class="profile-img">
<img src={image || placeholder} alt={name} />
</div>
<div class="info">
<div class="name">{name}</div>
<div class="role">{position}</div>
<!-- <button class="button" onclick={onViewProfile}>View Profile</button> -->
<Button onclick={onViewProfile}>View Profile</Button>
</div>
</div>

54
src/components/CouncilCardPopUp.svelte Normal file
View File

@@ -0,0 +1,54 @@
<script>
/**
* Schemas for Council Members:
* {
* email,
* name,
* position,
* positionDescription,
* yearProgram,
* image // CDN URL from Sanity CMS
* }
*/
let { name, position, email, positionDescription, yearProgram, image } = $props();
import placeholder from 'assets/placeholderAvatar.png';
</script>
<style lang="postcss">
@reference '../app.css';
.card {
@apply flex items-center gap-4 bg-transparent rounded-2xl p-6 text-ecsess-800 border-transparent max-w-[450px] h-[250px];
background-image: linear-gradient(to bottom right, #E8FFD9, #97C583);
}
.profile-img {
@apply w-32 h-32 shadow-md overflow-hidden rounded-lg;
}
.profile-img :global(img) {
@apply w-full h-full object-cover;
}
.name {
@apply text-xl font-bold;
}
</style>
<div class="card">
<!-- <img class="size-4/5" src={placeholder} alt="Placeholder"> -->
<!-- <Avatar src={placeholder} {name} /> -->
<div class="avatar-container justify-left">
<div class="profile-img justify-center">
<img src={image || placeholder} alt={name} />
</div>
<span class="yearProgram text-sm justify-center"> {yearProgram} </span>
</div>
<div class="content">
<p class="name">{name} </p>
<p class="py-2 text-base">{position}</p>
<p class="pb-2 text-xs">{positionDescription}</p>
<a href="mailto:{email}" class="py-2 text-sm underline">{email}</a>
</div>
</div>