Skip to content

Commit d47990b

Browse files
brandonscholtenbrandonscholten
committed
Add IBM Fall Fest page
1 parent 6552f58 commit d47990b

File tree

4 files changed

+158
-3
lines changed

4 files changed

+158
-3
lines changed

‎public/information-photos/..gitkeep‎

Whitespace-only changes.

‎server/upload.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ export default function setUpUpload(app){
4343
withoutEnlargement: true,
4444
}).toBuffer();
4545
await sharp(buffer).toFile(req.file.path);
46-
res.send('/${infoFolderName}/'+req.file.filename);
46+
res.send(`/${infoFolderName}/`+req.file.filename);
4747
});
4848

4949
const eventFolderName = "event-photos";

‎src/components/InformationCard.vue‎

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
<template>
2+
<div class="information-container">
3+
<div class="information-photo" v-if="information.photo">
4+
<img class="information-image" :src="information.photo" alt="">
5+
</div>
6+
<div class="information">
7+
<component class="information-title" :is="information.link ? 'a' : 'span'" :href="information.link" target="_blank" style="color:white">
8+
<img class="external-link" v-if="information.link.startsWith('https://github.com')"
9+
style="height: 30px" src="@/assets/images/github-white.svg" />
10+
<img v-else-if="information.link" style="height: 26px;margin-right:10px" src="@/assets/external-link.svg" />
11+
<h2>{{ information.title }}</h2>
12+
</component>
13+
<div class="event-text" v-if="information.descriptionHTML" v-html="information.descriptionHTML"></div>
14+
</div>
15+
</div>
16+
</template>
17+
18+
<script setup>
19+
defineProps(["information"]);
20+
</script>
21+
22+
<style scoped lang="scss">
23+
.information-container {
24+
background: linear-gradient(90deg, rgb(155, 76, 187) 0%, rgb(157, 77, 185) 24%, rgb(161, 78, 194) 32%, rgb(171, 82, 203) 100%);
25+
opacity: 0.975;
26+
border-radius: 15px;
27+
display: flex;
28+
flex-direction: row-reverse;
29+
justify-content: left;
30+
margin: 0 auto 40px auto;
31+
&:first-of-type {
32+
margin-top: 50px;
33+
}
34+
max-width: 1000px;
35+
box-shadow: 4px 6px 4px rgba(0, 0, 0, 0.15);
36+
padding-bottom: 0px;
37+
overflow: hidden;
38+
text-align: left;
39+
40+
// allow this item to shrink to less than its natural height when necessary;
41+
// the .event-text element inside the .event element will then shrink and
42+
// become scrollable due to tose elements' css
43+
min-height: 0;
44+
flex-shrink: 1;
45+
}
46+
.information {
47+
&>* {
48+
padding: 0 24px;
49+
}
50+
display: flex;
51+
flex-direction: column;
52+
53+
// allow this item to shrink to less than its natural height when necessary;
54+
// the .event-text element will shrink and become scrollable due to its css
55+
min-height: 0;
56+
flex-shrink: 1;
57+
58+
min-width: 60%;
59+
font-size: 1rem;
60+
&:deep(a:visited), &:deep(a) {
61+
color: white;
62+
}
63+
h2 {
64+
display: inline;
65+
font-size: 1.5rem;
66+
margin: 0;
67+
}
68+
}
69+
.information-photo {
70+
max-width: 40%;
71+
height: auto;
72+
background-repeat: no-repeat;
73+
background-position: center;
74+
}
75+
76+
.information-image{
77+
width: 100%; /* Set the width to 35% of the container */
78+
height: 100%;
79+
background-repeat: no-repeat;
80+
background-position: center;
81+
object-fit: cover;
82+
}
83+
84+
.information-title {
85+
margin: 12px 0 8px;
86+
// text-decoration: none;
87+
display: flex;
88+
align-items: center;
89+
}
90+
.information-text {
91+
scrollbar-width: thin;
92+
&::-webkit-scrollbar {
93+
width: 6px;
94+
}
95+
// allow this element to shrink when necessary, causing the text inside it
96+
// to scroll
97+
min-height: 0;
98+
flex-shrink: 1;
99+
}
100+
.external-link {
101+
margin-right: 10px;
102+
}
103+
strong {
104+
font-weight: 600;
105+
}
106+
</style>

‎src/views/FallFest.vue‎

Lines changed: 51 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,54 @@
11
<template>
2-
2+
<div class="container">
3+
<h1 style="margin: auto; text-align: center;">IBM Fall Fest!</h1>
4+
<InformationCard v-for="information, j in informations" :key="information.id" ref="informations"
5+
:information="information"/>
6+
</div>
37
</template>
48
<script setup>
5-
</script>
9+
import { onMounted, ref } from 'vue';
10+
import { remult } from 'remult';
11+
import { Information } from "../../db/entities.js";
12+
import InformationCard from "../components/InformationCard.vue"
13+
14+
const informations = ref([]);
15+
const repo = remult.repo(Information);
16+
onMounted(() => {
17+
repo.find().then(e => (informations.value = e));
18+
});
19+
</script>
20+
<style scoped lang="scss">
21+
* {
22+
box-sizing: border-box;
23+
}
24+
25+
.information{
26+
background-color: lightgrey;
27+
color: darkslategrey;
28+
width: 100%;
29+
padding: 15px 15px 15px 15px;
30+
display: flex;
31+
align-items: center;
32+
margin-bottom: 30px;
33+
max-width: 850px;
34+
h2 {
35+
margin: 5px 0;
36+
}
37+
&:deep(p) {
38+
margin: 5px 0;
39+
}
40+
}
41+
42+
.container{
43+
background: linear-gradient(to top left, #35c982, #4683FF);
44+
max-width: 1600px;
45+
background-repeat: repeat;
46+
min-height: 50vh;
47+
padding: 100px;
48+
@media (max-width: 1000px){
49+
padding: 100px 10px;
50+
}
51+
overflow: auto;
52+
}
53+
54+
</style>

0 commit comments

Comments
 (0)