Skip to content

Commit

Permalink
fix(): agrega estado header
Browse files Browse the repository at this point in the history
  • Loading branch information
@raulghm
raulghm committed Feb 25, 2019
1 parent 74763aa commit 41db179
Show file tree
Hide file tree
Showing 3 changed files with 90 additions and 77 deletions.
48 changes: 31 additions & 17 deletions src/components/v-Header.vue
View file
Original file line number Diff line number Diff line change
@@ -1,19 +1,27 @@
<template>
<div class="Header">
<div class="Header-menu" @click="openMenu">
<div class="Header-menu-icon" v-hammer:pan.right="panToRight">
<i class="ico-menu-dots"></i>
</div>
<div class="Header-left">
<transition name="fade">
<template v-if="this.$store.state.isInStore">
<router-link to="/home">
<i class="ico-arrow-left"></i>
</router-link>
</template>
</transition>
</div>

<v-menu/>

<div class="Header-logo">
<logo/>
</div>
<!-- <div class="Header-user">
<i class="ico-user"></i>
</div>-->

<div class="Header-menu" @click="openMenu">
<div class="Header-menu-icon" v-hammer:pan.right="panToRight">
<i class="ico-menu-dots"></i>
</div>
</div>

<div class="Header-line"></div>
</div>
</template>
Expand Down Expand Up @@ -54,7 +62,20 @@ export default {
right: 0;
left: 0;
z-index: 100;
/* box-shadow: 1px 5px 2px #f6868633; */
}
.Header-left {
position: absolute;
top: 22px;
left: 20px;
font-size: 2rem;
cursor: pointer;
color: var(--color-white);
opacity: .8;
}
.Header-left a {
color: var(--color-white);
}
.Header-line {
Expand All @@ -71,25 +92,18 @@ export default {
.Header-menu-icon {
position: absolute;
top: 18px;
left: 10px;
right: 20px;
font-size: 2rem;
transform: rotate(90deg);
cursor: pointer;
color: var(--color-white);
opacity: .8;
}
.Header-menu-icon i {
display: block;
}
.Header-user {
position: absolute;
top: 30px;
right: 20px;
font-size: 1.6rem;
cursor: pointer;
}
.Header-logo {
padding-top: 2px;
}
Expand Down
6 changes: 5 additions & 1 deletion src/store.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,8 @@ export default new Vuex.Store({
state: {
loading: true,
userData: {},
isMenuActive: false
isMenuActive: false,
isInStore: false
},

mutations: {
Expand All @@ -19,6 +20,9 @@ export default new Vuex.Store({
},
setMenu (state, value) {
state.isMenuActive = value
},
setInStore (state, value) {
state.isInStore = value
}
}
})
113 changes: 54 additions & 59 deletions src/views/Store.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,80 +2,67 @@
<div class="Store">
<loading v-if="!store"/>

<template v-if="store">
<!-- <div class="Store-map">
<GmapMap
:center="{lat: store.geometry.coordinates[1], lng: store.geometry.coordinates[0]}"
:zoom="15"
map-type-id="terrain"
style="width: 100%; height: 300px"
>
<GmapMarker
:position="{lat: store.geometry.coordinates[1], lng: store.geometry.coordinates[0]}"
:clickable="false"
:draggable="false"
<transition name="fade">
<div v-if="store">
<div class="Store-map" :style="{backgroundImage: 'url(' + getStaticMap + ')'}"></div>

<div class="Store-body">
<StoreItemFull
:name="store.name"
:address="store.address"
:distance="store.distance.text"
/>
</GmapMap>
</div> -->

<div class="Store-map" :style="{backgroundImage: 'url(' + getStaticMap + ')'}"></div>
<div class="Store-arriving">
<div class="u-title">Llegarías en</div>

<div class="Store-arriving-list">
<div>
<i class="ico-walking"></i>
<div>20 min</div>
</div>
<div>
<i class="ico-cycling"></i>
<div>10 min</div>
</div>
<div>
<i class="ico-bus"></i>
<div>6 min</div>
</div>
<div>
<i class="ico-car"></i>
<div>4 min</div>
</div>
</div>
</div>

<div class="Store-body">
<StoreItemFull
:name="store.name"
:address="store.address"
:distance="store.distance.text"
/>
<img class="Store-sep" src="/img/img-separator.svg" alt="sep">

<div class="Store-arriving">
<div class="u-title">Llegarías en</div>
<div class="Store-types">
<div class="u-title">Tipos de cervezas</div>

<div class="Store-arriving-list">
<div>
<i class="ico-walking"></i>
<div>20 min</div>
</div>
<div>
<i class="ico-cycling"></i>
<div>10 min</div>
</div>
<div>
<i class="ico-bus"></i>
<div>6 min</div>
</div>
<div>
<i class="ico-car"></i>
<div>4 min</div>
<div class="Store-types-list">
<div>Growler IPA | 7º | IBU 50</div>
<div>Cuello negro ambar | 5º | IBU 20</div>
<div>Kross golden | 5,3º | IBU 25</div>
<div>Jester saison | 6º</div>
</div>
</div>
</div>

<img class="Store-sep" src="/img/img-separator.svg" alt="sep">
<img class="Store-sep" src="/img/img-separator.svg" alt="sep">

<div class="Store-types">
<div class="u-title">Tipos de cervezas</div>
<div class="Store-values">
<div class="u-title">Valores</div>

<div class="Store-types-list">
<div>Growler IPA | 7º | IBU 50</div>
<div>Cuello negro ambar | 5º | IBU 20</div>
<div>Kross golden | 5,3º | IBU 25</div>
<div>Jester saison | 6º</div>
<div>Entre $3000 y $6000 pesos por litro</div>
</div>
</div>

<img class="Store-sep" src="/img/img-separator.svg" alt="sep">

<div class="Store-values">
<div class="u-title">Valores</div>

<div>Entre $3000 y $6000 pesos por litro</div>
<div class="Store-footer">
<img class="Store-footer-hop" src="/img/img-hop.svg" alt="hop">
</div>
</div>

<div class="Store-footer">
<img class="Store-footer-hop" src="/img/img-hop.svg" alt="hop">
</div>
</template>
</transition>
</div>
</template>

Expand Down Expand Up @@ -105,6 +92,14 @@ export default {
store: null
}),
mounted () {
this.$store.commit('setInStore', true)
},
beforeDestroy () {
this.$store.commit('setInStore', false)
},
computed: {
getStaticMap () {
if (this.store) {
Expand Down

0 comments on commit 41db179

Please sign in to comment.