Skip to content

Commit

Permalink
Starting developing Tickets Page and implementing woocommerce
Browse files Browse the repository at this point in the history
  • Loading branch information
Michel Moraes committed Sep 12, 2018
1 parent 6ab402f commit aa9aa7a
Show file tree
Hide file tree
Showing 16 changed files with 724 additions and 289 deletions.
165 changes: 104 additions & 61 deletions resources/assets/js/components/Purchase.vue
View file
Original file line number Diff line number Diff line change
@@ -1,91 +1,134 @@
<template>
<section class="purchase">
<section class="purchase section">
<div class="container">

<div class="purchase__step step-1">
<div class="purchase__step step-1" v-show="isStep(1)">
<div class="purchase__step-label">
<span>1</span> Select the parade type
</div>
<div class="purchase__items">
<div class="purchase__item button selected">Preliminary Parades</div>
<div class="purchase__item button">Main Parades</div>
<div class="purchase__item button">Champions’ Parade</div>
</div>
</div>

<div class="purchase__step step-2">
<div class="purchase__step-label">
<span>2</span> Select the date
</div>
<div class="purchase__items">
<div class="purchase__item button">Friday (March 01)</div>
<div class="purchase__item button">Saturday (March 02)</div>
<span class="number">1</span> Select the parade type
</div>
<ul class="purchase__items">
<li class="purchase__item button" @click="nextStep(2, index)"
:class="{ selected: index === activeItem }"
v-for="(parade, index) in paradeType" :key="index">{{ parade }}</li>
</ul>
</div>

<div class="purchase__step step-3">
<div class="purchase__step-label">
<span>3</span> Select the seat type
</div>
<div class="purchase__items">
<div class="purchase__item button">Grandstand tickets</div>
<div class="purchase__item button">Open front box seats</div>
<transition name="fade">
<div class="purchase__step step-2" v-show="isStep(2)">
<div class="purchase__step-label">
<span class="number">2</span> Select the date
</div>
<ul class="purchase__items">
<li class="purchase__item button" @click="nextStep(3)">Friday (March 01)</li>
<li class="purchase__item button" @click="nextStep(3)">Saturday (March 02)</li>
</ul>
</div>
</div>
</transition>

<div class="purchase__step step-4">
<div class="purchase__step-label">
<span>4</span> Select the sector
</div>
<div class="purchase__items">
<div class="purchase__item button sector">1</div>
<div class="purchase__item button sector">2</div>
<div class="purchase__item button sector">3</div>
<div class="purchase__item button sector">4</div>
<div class="purchase__item button sector">5</div>
<div class="purchase__item button sector">6</div>
<div class="purchase__item button sector">7</div>
<div class="purchase__item button sector">8</div>
<div class="purchase__item button sector">9</div>
<div class="purchase__item button sector">10</div>
<transition name="fade">
<div class="purchase__step step-3" v-show="isStep(3)">
<div class="purchase__step-label">
<span class="number">3</span> Select the seat type
</div>
<div class="purchase__items">
<div class="purchase__item button" @click="nextStep(4)">Grandstand tickets</div>
<div class="purchase__item button" @click="nextStep(4)">Open front box seats</div>
</div>
</div>
</div>
</transition>

<div class="purchase__step step-5">
<div class="purchase__step-label">
<span>5</span> Enter the quantity
</div>
<div class="purchase__items">
<div class="purchase__item-quantity">
<button class="button">-</button> 3 <button class="button">+</button>
<transition name="fade">
<div class="purchase__step step-4" v-show="isStep(4)">
<div class="purchase__step-label">
<span class="number">4</span> Select the sector
</div>
<div class="purchase__items">
<div class="purchase__item button sector" @click="nextStep(5)">1</div>
<div class="purchase__item button sector" @click="nextStep(5)">2</div>
<div class="purchase__item button sector" @click="nextStep(5)">5</div>
<div class="purchase__item button sector" @click="nextStep(5)">4</div>
<div class="purchase__item button sector" @click="nextStep(5)">5</div>
<div class="purchase__item button sector" @click="nextStep(5)">6</div>
<div class="purchase__item button sector" @click="nextStep(5)">7</div>
<div class="purchase__item button sector" @click="nextStep(5)">8</div>
<div class="purchase__item button sector" @click="nextStep(5)">9</div>
<div class="purchase__item button sector" @click="nextStep(5)">10</div>
</div>
</div>
</div>
</transition>

<div class="purchase__step step-6">
<div class="purchase__step-label">
<span>6</span> Add to cart
<transition name="fade">
<div class="purchase__step step-5" v-show="isStep(5)">
<div class="purchase__step-label">
<span class="number">5</span> Enter the quantity
</div>
<div class="purchase__items">
<div class="purchase__item-quantity">
<button class="button">-</button> 3 <button class="button">+</button>
</div>
</div>
</div>
<div class="purchase__item-total">
<span>3x $18.40</span>
</transition>

<button class="purchase__add-to-cart-btn button">
Add to cart
</button>
</div>
<transition name="fade">
<div class="purchase__step step-6" v-show="isStep(5)">
<div class="purchase__step-label">
<span class="number">6</span> Add to cart
</div>
<div class="purchase__item-total">
<span>3x $18.40</span>

</div>
<button class="purchase__add-to-cart-btn button">
Add to cart
</button>
</div>
</div>
</transition>

</div>
</section>
</template>

<script>
export default {
data() {
return {
currentStep: 1,
paradeType: ['Preliminary Parades', 'Main Parades', 'Champions’ Parade'],
activeItem: -1
}
},
computed: {
},
methods: {
nextStep(val, idx) {
this.currentStep = val
let selected = event.target
selected.classList.add('selected')
this.activeItem = idx
},
isStep(val) {
return this.currentStep >= val
}
},
mounted() {
console.log(this.currentStep);
}
}
</script>

<style scoped>
<style lang="sass">
.fade-enter-active, .fade-leave-active
transition: opacity .5s;
.fade-enter, .fade-leave-to
opacity: 0
</style>
97 changes: 96 additions & 1 deletion resources/assets/sass/pages/_tickets.sass
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,25 @@
.tickets

.intro

&.section
padding-top: 100px
padding-bottom: 100px

&__title
font-family: $font-title
font-size: 28px
color: $gray-dark
letter-spacing: 1px
margin-bottom: 23px

&__copy
font-family: $font-text
font-size: 16px
color: $gray-dark
letter-spacing: 0.44px
line-height: 25px
max-width: 348px

.purchase

Expand All @@ -15,4 +33,81 @@
font-size: 18px
color: #5D5D5D
letter-spacing: 0.5px
margin-bottom: 15px
margin-bottom: 15px
display: flex
align-items: center
padding-bottom: 15px

span.number
font-family: Cabin-Regular
font-size: 14px
color: #fff
letter-spacing: 0.5px
text-align: center
background: $bc-primary
padding: 17px 0
border-radius: 50%

&__item
margin-top: 15px

&:not(:last-child)
margin-right: 10px
+tablet
margin-right: 30px

&.button
font-size: 22px
transition: 0.2s
width: 100%
max-width: 350px
background-color: $gray-light
height: 85px
border-color: transparent
border-bottom: solid 15px #8D8D8D
font-family: $font-text
color: #fff
letter-spacing: 0.86px

+tablet
font-size: 32px

+desktop
max-width: calc(100% / 3 - 25px)


&:hover,
&.selected
background-color: $green
border-bottom: solid 15px #3FAC5D

&:hover
&:not(.selected)
transform: scale(1.05)

&.sector
max-width: calc(50% - 25px)

+tablet
max-width: 110px

&-total
display: flex
align-items: center

span
font-size: 32px
color: $gray-dark
letter-spacing: 0.86px
text-align: center
margin-right: 30px

&__add-to-cart-btn
@extend .purchase__item.button
background-color: #2B9AE5
border-bottom-color: #248BCF
max-width: 281px

&:hover
background-color: #2B9AE5
border-bottom-color: #248BCF
2 changes: 1 addition & 1 deletion resources/assets/sass/woocommerce/_common.sass
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
input
input:not([type='checkbox'])
@extend .input

textarea
Expand Down
12 changes: 8 additions & 4 deletions resources/views/404.twig
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,12 @@
{% extends "base.twig" %}

{% block content %}
<h1 class="title is-2">
{{ messages.404.title }}
</h1>
<p>{{ messages.404.body }} <a href="{{ site.link }}">{{ messages.404.link_text }}</a>.</p>

<div class="section container">
<h1 class="title is-2">
{{ messages.404.title }}
</h1>
<p>{{ messages.404.body }} <a href="{{ site.link }}">{{ messages.404.link_text }}</a>.</p>
</div>

{% endblock %}
9 changes: 6 additions & 3 deletions resources/views/page.twig
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,11 @@
{% extends "base.twig" %}

{% block content %}
<article class="post-type-{{ post.post_type }}" id="post-{{ post.ID }}">

<div class="section container">
<div class="post-type-{{ post.post_type }}" id="post-{{ post.ID }}">
{{ post.content }}
</div>
</div>

</article>
{% endblock %}
{% endblock %}
2 changes: 1 addition & 1 deletion resources/views/template-tickets.twig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
{% block content %}
<div class="tickets" id="post-{{ post.ID }}">

<div class="intro">
<div class="intro section">
<div class="container wrapper">
<div class="intro__title">About lorem Ipsum</div>
<div class="intro__copy">Lorem ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
Expand Down
0 static/css/admin.a2fe8e4c5217f207efd2.css → static/css/admin.d61513ae22f2c267bdf4.css
View file
File renamed without changes.
Loading

0 comments on commit aa9aa7a

Please sign in to comment.