STEMMechanics/Website
1
0
Fork 0
Code Issues 4 Pull Requests 1 Actions Packages Projects Releases 3 Wiki Activity

fix styling

Browse Source
This commit is contained in:
James Collins
2023-04-24 08:40:41 +10:00
parent 44ccaf10d4
commit b4a49d20c8
1 changed files with 39 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
resources/js/views/Event.vue
View File

@@ -1,7 +1,7 @@
<template> <template>
<SMPage :page-error="pageError" :loading="pageLoading"> <SMPage :page-error="pageError" :loading="pageLoading">
<div <div
class="sm-workshop-image" class="workshop-image"
:style="{ :style="{
backgroundImage: `url('${mediaGetVariantUrl(event.hero)}')`, backgroundImage: `url('${mediaGetVariantUrl(event.hero)}')`,
}"></div> }"></div>
@@ -12,29 +12,29 @@
type="error" type="error"
:message="formMessage" :message="formMessage"
class="mt-5" /> class="mt-5" />
<SMContainer class="sm-workshop-page"> <SMContainer class="workshop-page">
<div class="sm-workshop-body"> <div class="workshop-body">
<h2 class="sm-workshop-title">{{ event.title }}</h2> <h2 class="workshop-title">{{ event.title }}</h2>
<SMHTML :html="event.content" class="sm-workshop-content" /> <SMHTML :html="event.content" class="workshop-content" />
<SMAttachments :attachments="event.attachments || []" /> <SMAttachments :attachments="event.attachments || []" />
</div> </div>
<div class="sm-workshop-info"> <div class="workshop-info">
<div <div
v-if=" v-if="
event.status == 'closed' || event.status == 'closed' ||
(event.status == 'open' && expired) (event.status == 'open' && expired)
" "
class="sm-workshop-registration sm-workshop-registration-closed"> class="workshop-registration workshop-registration-closed">
Registration for this event has closed. Registration for this event has closed.
</div> </div>
<div <div
v-if="event.status == 'soon'" v-if="event.status == 'soon'"
class="sm-workshop-registration sm-workshop-registration-soon"> class="workshop-registration workshop-registration-soon">
Registration for this event will open soon. Registration for this event will open soon.
</div> </div>
<div <div
v-if="event.status == 'cancelled'" v-if="event.status == 'cancelled'"
class="sm-workshop-registration sm-workshop-registration-cancelled"> class="workshop-registration workshop-registration-cancelled">
This event has been cancelled. This event has been cancelled.
</div> </div>
<div <div
@@ -43,7 +43,7 @@
expired == false && expired == false &&
event.registration_type == 'none' event.registration_type == 'none'
" "
class="sm-workshop-registration sm-workshop-registration-none"> class="workshop-registration workshop-registration-none">
Registration not required for this event.<br />Arrive Registration not required for this event.<br />Arrive
early to avoid disappointment as seating maybe limited. early to avoid disappointment as seating maybe limited.
</div> </div>
@@ -53,7 +53,7 @@
expired == false && expired == false &&
event.registration_type == 'link' event.registration_type == 'link'
" "
class="sm-workshop-registration sm-workshop-registration-url"> class="workshop-registration workshop-registration-url">
<SMButton <SMButton
:to="registerUrl" :to="registerUrl"
:block="true" :block="true"
@@ -65,10 +65,10 @@
expired == false && expired == false &&
event.registration_type == 'message' event.registration_type == 'message'
" "
class="sm-workshop-registration sm-workshop-registration-message"> class="workshop-registration workshop-registration-message">
{{ event.registration_data }} {{ event.registration_data }}
</div> </div>
<div class="sm-workshop-date"> <div class="workshop-date">
<h4> <h4>
<ion-icon <ion-icon
class="icon" class="icon"
@@ -81,7 +81,7 @@
{{ line }} {{ line }}
</p> </p>
</div> </div>
<div class="sm-workshop-location"> <div class="workshop-location">
<h4> <h4>
<ion-icon <ion-icon
class="icon" class="icon"
@@ -95,7 +95,7 @@
}} }}
</p> </p>
</div> </div>
<div v-if="event.ages" class="sm-workshop-ages"> <div v-if="event.ages" class="workshop-ages">
<h4> <h4>
<ion-icon class="icon" name="body-outline" />{{ <ion-icon class="icon" name="body-outline" />{{
computedAges computedAges
@@ -103,7 +103,7 @@
</h4> </h4>
<p>{{ computedAgeNotice }}</p> <p>{{ computedAgeNotice }}</p>
</div> </div>
<div v-if="event.price" class="sm-workshop-price"> <div v-if="event.price" class="workshop-price">
<h4><span class="icon">$</span>{{ computedPrice }}</h4> <h4><span class="icon">$</span>{{ computedPrice }}</h4>
</div> </div>
</div> </div>
@@ -300,7 +300,7 @@ handleLoad();
</script> </script>
<style lang="scss"> <style lang="scss">
.sm-workshop-image { .workshop-image {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
@@ -312,32 +312,32 @@ handleLoad();
background-color: #eee; background-color: #eee;
transition: background-image 0.2s; transition: background-image 0.2s;
.sm-workshop-image-loader { .workshop-image-loader {
font-size: 5rem; font-size: 5rem;
color: $secondary-color; color: $secondary-color;
} }
} }
.sm-workshop-page { .page-event .workshop-page {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
.sm-workshop-body, .workshop-body,
.sm-workshop-info { .workshop-info {
line-height: 1.5rem; line-height: 1.5rem;
} }
.sm-workshop-body { .workshop-body {
flex: 1; flex: 1;
text-align: left; text-align: left;
} }
.sm-workshop-title { .workshop-title {
line-height: 1.15em; line-height: 1.15em;
margin-bottom: 32px; margin-bottom: 32px;
} }
.sm-workshop-info { .workshop-info {
width: 18rem; width: 18rem;
margin-left: 2rem; margin-left: 2rem;
@@ -361,14 +361,14 @@ handleLoad();
font-size: 90%; font-size: 90%;
} }
.sm-workshop-registration { .workshop-registration {
margin-top: 1.5rem; margin-top: 1.5rem;
line-height: 1.25rem; line-height: 1.25rem;
} }
.sm-workshop-registration-none, .workshop-registration-none,
.sm-workshop-registration-soon, .workshop-registration-soon,
.sm-workshop-registration-message { .workshop-registration-message {
border: 1px solid #ffeeba; border: 1px solid #ffeeba;
background-color: #fff3cd; background-color: #fff3cd;
color: #856404; color: #856404;
@@ -377,8 +377,8 @@ handleLoad();
padding: 0.5rem; padding: 0.5rem;
} }
.sm-workshop-registration-closed, .workshop-registration-closed,
.sm-workshop-registration-cancelled { .workshop-registration-cancelled {
border: 1px solid #f5c2c7; border: 1px solid #f5c2c7;
background-color: #f8d7da; background-color: #f8d7da;
color: #842029; color: #842029;
@@ -387,14 +387,14 @@ handleLoad();
padding: 0.5rem; padding: 0.5rem;
} }
.sm-workshop-date, .workshop-date,
.sm-workshop-location, .workshop-location,
.sm-workshop-price, .workshop-price,
.sm-workshop-ages { .workshop-ages {
padding: 0 1rem; padding: 0 1rem;
} }
.sm-workshop-ages p { .workshop-ages p {
margin-top: 0.5rem; margin-top: 0.5rem;
margin-left: 1rem; margin-left: 1rem;
padding: 0 0 0 0.5rem; padding: 0 0 0 0.5rem;
@@ -406,14 +406,14 @@ handleLoad();
} }
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
.sm-workshop-page { .workshop-page {
flex-direction: column; flex-direction: column;
.sm-workshop-body { .workshop-body {
text-align: center; text-align: center;
} }
.sm-workshop-info { .workshop-info {
width: 100%; width: 100%;
margin-left: 0; margin-left: 0;
@@ -426,7 +426,7 @@ handleLoad();
text-align: center; text-align: center;
} }
.sm-workshop-ages p { .workshop-ages p {
margin-left: 0; margin-left: 0;
border-left: 0; border-left: 0;
} }