Skip to content

Commit

Permalink
Schedule & live (#521)
Browse files Browse the repository at this point in the history 
* schedule is now with a toggle button and also created the temporal schedule

* schedule is now with a toggle button and also created the temporal schedule

* fix live in mobile and desktop

* fix live in mobile and desktop

* schedule is now corrected

* background should not repeat

* header with full screen and panels in mobile are bigger

* header with full screen and panels in mobile are bigger

* feedback
  • Loading branch information
@carlotacb
carlotacb authored Apr 6, 2024
1 parent 8cbd870 commit 7a89b1a
Show file tree
Hide file tree
Showing 14 changed files with 640 additions and 277 deletions.
2 changes: 1 addition & 1 deletion src/App.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ body {
background-color: $bg-color;
background-image: url('@/assets/img/stars.jpeg');
background-position: center / 640px;
background-repeat: repeat;
background-repeat: no-repeat;
cursor: url('assets/img/rocket.png'), auto;
font-family: Montserrat, system-ui, -apple-system, BlinkMacSystemFont,
'Segoe UI', Roboto, 'Open Sans', 'Helvetica Neue', sans-serif;
Expand Down
22 changes: 20 additions & 2 deletions src/components/AppHeader.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,9 @@ const isActive = (page: string): boolean => {
<div class="title-container">
<h1 id="title">Live</h1>
</div>
<div class="countdown-text" @click="goToFullscreen">
<span>Full screen</span>
</div>
</div>
</header>
<!--Aside menu for small screens-->
Expand All @@ -80,8 +83,8 @@ const isActive = (page: string): boolean => {
Home</RouterLink
>
</li>
<li :class="{ selected: isActive('/live') }">
<RouterLink to="/live" @click="closeAsideMenu"
<li :class="{ selected: isActive('/schedule') }">
<RouterLink to="/schedule" @click="closeAsideMenu"
><FontAwesomeIcon
icon="calendar-days"
size="sm"
Expand Down Expand Up @@ -408,6 +411,21 @@ $fade-time: 300ms;
}
}
.countdown-text {
position: absolute;
top: 0;
right: 5px;
display: flex;
width: 50px;
height: 100%;
align-items: center;
margin-right: 10px;
color: #fff;
cursor: url('../assets/img/rocket-fire.png'), auto;
font-size: 15px;
text-align: center;
}
.open-aside-btn {
position: absolute;
display: flex;
Expand Down
22 changes: 22 additions & 0 deletions src/components/Countdown.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -161,4 +161,26 @@ const handleClick = (): void => {
border-radius: 100%;
}
}
@media (max-width: 720px) {
.countdown {
&--fullscreen {
top: 40px;
left: 59vw;
width: 33.333vw;
height: 33.333vw;
}
&--fullscreen &__time {
font-size: 6vw;
}
}
.countdown__bg {
top: auto;
right: auto;
bottom: auto;
left: auto;
}
}
</style>
118 changes: 57 additions & 61 deletions src/views/Live.vue → src/components/LiveView.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -82,13 +82,18 @@ const events = computed<(TimelineEventItem | TimelineEventTitle)[]>(() => {
eventIndex < day.events.length
) {
const event = day.events[eventIndex]
let haveEnd = true
if (event.start === event.end) {
haveEnd = false
}
hourEvents.push({
type: 'event',
id: event.id,
startTmsp: i,
endTmsp,
startHour: formatDate('time', event.start),
endHour: formatDate('time', event.end),
endHour: haveEnd ? formatDate('time', event.end) : '',
title: event.title,
isSubscribed: notificationsStore.subscriptions.includes(event.id),
})
Expand Down Expand Up @@ -116,51 +121,53 @@ const events = computed<(TimelineEventItem | TimelineEventTitle)[]>(() => {
</script>

<template>
<div id="live" class="container-live">
<div
class="events-fancy"
:class="{ 'events-fancy--fullscreen': fullscreen }"
>
<ul>
<template v-for="event in events">
<li
v-if="event.type === 'title'"
:key="`${event.title}-${event.startTmsp}`"
>
<h1>{{ event.title }}</h1>
</li>
<li
v-else-if="event.type === 'item'"
:key="`${event.startTmsp}`"
:class="{ happening: event.isHappening }"
>
<ArrowNarrowRightIcon
v-if="event.isHappening"
class="event__arrow"
/>
<div
v-for="hourEvent in event.hourEvents"
:key="hourEvent.id"
class="event"
:class="{ subscribed: hourEvent.isSubscribed }"
:data-event-id="hourEvent.id"
@click="notificationsStore.toggleSubscription(hourEvent.id)"
<div>
<div class="container-live">
<div
class="events-fancy"
:class="{ 'events-fancy--fullscreen': fullscreen }"
>
<ul>
<template v-for="event in events">
<li
v-if="event.type === 'title'"
:key="`${event.title}-${event.startTmsp}`"
>
<div class="event__hour">
<div>{{ hourEvent.startHour }}</div>
<div class="event__end-hour">{{ hourEvent.endHour }}</div>
</div>
<div class="title">
{{ hourEvent.title }}
<VolumeOffIcon
v-if="!hourEvent.isSubscribed"
class="event__subscribed-icon"
/>
<h1>{{ event.title }}</h1>
</li>
<li
v-else-if="event.type === 'item'"
:key="`${event.startTmsp}`"
:class="{ happening: event.isHappening }"
>
<ArrowNarrowRightIcon
v-if="event.isHappening"
class="event__arrow"
/>
<div
v-for="hourEvent in event.hourEvents"
:key="hourEvent.id"
class="event"
:class="{ subscribed: hourEvent.isSubscribed }"
:data-event-id="hourEvent.id"
@click="notificationsStore.toggleSubscription(hourEvent.id)"
>
<div class="event__hour">
<div>{{ hourEvent.startHour }}</div>
<div class="event__end-hour">{{ hourEvent.endHour }}</div>
</div>
<div class="title">
{{ hourEvent.title }}
<VolumeOffIcon
v-if="!hourEvent.isSubscribed"
class="event__subscribed-icon"
/>
</div>
</div>
</div>
</li>
</template>
</ul>
</li>
</template>
</ul>
</div>
</div>
</div>
</template>
Expand All @@ -175,7 +182,7 @@ const events = computed<(TimelineEventItem | TimelineEventTitle)[]>(() => {
}
.event {
margin: 5px 0;
margin: 16px 0;
cursor: url('../assets/img/rocket-fire.png'), auto;
user-select: none;
Expand All @@ -185,6 +192,7 @@ const events = computed<(TimelineEventItem | TimelineEventTitle)[]>(() => {
height: 2.5rem;
margin-top: -0.25em;
margin-right: 0.5em;
color: $secondary-color;
}
&__subscribed-icon {
Expand All @@ -200,6 +208,7 @@ const events = computed<(TimelineEventItem | TimelineEventTitle)[]>(() => {
margin-right: 10px;
font-size: 15px;
font-weight: bold;
gap: 8px;
text-align: right;
&__end-hour {
Expand Down Expand Up @@ -230,32 +239,17 @@ const events = computed<(TimelineEventItem | TimelineEventTitle)[]>(() => {
-webkit-overflow-scrolling: touch;
text-align: left;
&::before {
position: fixed;
z-index: 10;
top: 39px;
right: 0;
left: 0;
height: 100px;
background-image: linear-gradient($bg-color, transparent);
content: '';
pointer-events: none;
}
ul {
min-height: 200px;
max-height: 100%;
box-sizing: content-box;
padding-top: 25px;
padding-right: 25px;
padding-left: 25px;
margin-top: 175px;
margin-right: 75px;
margin-left: 75px;
background-color: #ffffff75;
border-radius: 25px;
list-style: none;
overflow-y: none;
}
li {
Expand All @@ -272,6 +266,8 @@ const events = computed<(TimelineEventItem | TimelineEventTitle)[]>(() => {
> div {
display: flex;
align-items: center;
gap: 16px;
}
}
Expand All @@ -293,7 +289,7 @@ const events = computed<(TimelineEventItem | TimelineEventTitle)[]>(() => {
width: 100%;
height: 100%;
max-height: 100%;
margin-left: 40%;
margin-left: 48%;
}
li {
Expand Down
4 changes: 2 additions & 2 deletions src/components/PanelContainer.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,11 +17,11 @@ defineProps<Props>()
max-width: 1300px;
flex-wrap: wrap;
justify-content: center;
padding: 150px 16px 50px;
padding: 140px 60px 50px;
margin: 0 auto;
@media (max-width: 720px) {
padding-top: 60px;
padding: 80px 20px 40px;
}
.no-margin {
Expand Down
Loading

0 comments on commit 7a89b1a

Please sign in to comment.