dancefinder/dancefinder-app
5
0
Fork 0
Code Issues 1 Pull Requests 1 Actions Packages Projects Releases Activity

Change from iview to vuetify

Browse Source
This commit is contained in:
Joakim Olsson
2019-01-21 20:58:25 +01:00
parent 54d8310464
commit ab14a88bdd
8 changed files with 71 additions and 128 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/pages/events/Event/index.vue
+17 -13
View File
@@ -1,17 +1,21 @@
<template>
<Card dis-hover>
<p slot="title"><a href="#" v-if="hasUser" @click.prevent="ignore('band', event.band.name)"><Icon type="ios-eye-off" title="Dölj"></Icon>&nbsp;</a>{{event.band.name}}</p>
<Row>
<Col :xs="24" :sm="12"><strong>Datum:</strong> {{event.date}}</Col>
<Col :xs="24" :sm="12" v-if="event.time"><strong>Tid:</strong> {{event.time}}</Col>
</Row>
<Row>
<Col :xs="24" :sm="12" :md="6"><strong>Var:</strong> <a href="#" v-if="hasUser" @click.prevent="ignore('danceHall', event.danceHall.name)"><Icon type="ios-eye-off" title="Dölj"></Icon>&nbsp;</a>{{event.danceHall.name}}</Col>
<Col :xs="24" :sm="12" :md="6"><strong>Ort:</strong> <a href="#" v-if="hasUser" @click.prevent="ignore('city', event.danceHall.city)"><Icon type="ios-eye-off" title="Dölj"></Icon>&nbsp;</a>{{event.danceHall.city}}</Col>
<Col :xs="24" :sm="12" :md="6"><strong>Kommun:</strong> <a href="#" v-if="hasUser" @click.prevent="ignore('municipality', event.danceHall.municipality)"><Icon type="ios-eye-off" title="Dölj"></Icon>&nbsp;</a>{{event.danceHall.municipality}}</Col>
<Col :xs="24" :sm="12" :md="6"><strong>Län:</strong> <a href="#" v-if="hasUser" @click.prevent="ignore('state', event.danceHall.state)"><Icon type="ios-eye-off" title="Dölj"></Icon>&nbsp;</a>{{event.danceHall.state}}</Col>
</Row>
</Card>
<v-card xs12>
<v-card-title primary-title>
<h3 class="headline mb-0"><a href="#" v-if="hasUser" @click.prevent="ignore('band', event.band.name)"><v-icon small title="Dölj">mdi-eye-off</v-icon></a>&nbsp;{{event.band.name}}</h3>
</v-card-title>
<v-container>
<v-layout row wrap>
<v-flex xs12 sm6><strong>Datum:</strong> {{event.date}}</v-flex>
<v-flex xs12 sm6 v-if="event.time"><strong>Tid:</strong> {{event.time}}</v-flex>
</v-layout>
<v-layout row wrap>
<v-flex xs12 sm6 md3><strong>Var:</strong> <a href="#" v-if="hasUser" @click.prevent="ignore('danceHall', event.danceHall.name)"><v-icon small title="Dölj">mdi-eye-off</v-icon></a>&nbsp;{{event.danceHall.name}}</v-flex>
<v-flex xs12 sm6 md3><strong>Ort:</strong> <a href="#" v-if="hasUser" @click.prevent="ignore('city', event.danceHall.city)"><v-icon small title="Dölj">mdi-eye-off</v-icon></a>&nbsp;{{event.danceHall.city}}</v-flex>
<v-flex xs12 sm6 md3><strong>Kommun:</strong> <a href="#" v-if="hasUser" @click.prevent="ignore('municipality', event.danceHall.municipality)"><v-icon small title="Dölj">mdi-eye-off</v-icon></a>&nbsp;{{event.danceHall.municipality}}</v-flex>
<v-flex xs12 sm6 md3><strong>Län:</strong> <a href="#" v-if="hasUser" @click.prevent="ignore('state', event.danceHall.state)"><v-icon small title="Dölj">mdi-eye-off</v-icon></a>&nbsp;{{event.danceHall.state}}</v-flex>
</v-layout>
</v-container>
</v-card>
</template>
<script>
components/pages/events/index.vue
+12 -15
View File
@@ -1,16 +1,13 @@
<template>
<div>
<app-loader :show="isLoading" />
<div v-if="isReady || isSubmitting || isSubmitted" class="container app-fade-in">
<Content>
<Row :gutter="16" type="flex" justify="space-around" v-for="event in events" :key="event.id" class-name="eventRow">
<Col span="24">
<Event :event="event" :has-user="hasUser" :ignore="ignore"></Event>
</Col>
</Row>
<br>
</Content>
</div>
<v-container fluid grid-list-md v-if="isReady || isSubmitting || isSubmitted" class="app-fade-in">
<v-layout row wrap v-for="event in events" :key="event.id">
<v-flex xs12>
<Event :event="event" :has-user="hasUser" :ignore="ignore" />
</v-flex>
</v-layout>
</v-container>
</div>
</template>
@@ -177,11 +174,11 @@
</script>
<style lang="scss" scoped>
.container {
display: flex;
will-change: opacity;
padding: 1.5rem 1rem;
}
/*.container {*/
/*display: flex;*/
/*will-change: opacity;*/
/*padding: 1.5rem 1rem;*/
/*}*/
.left {
padding: 1.5rem 1rem;