Skip to content

Commit 78bf746

Browse files
agualisagualis
committed
Change styles to brown layout
1 parent 144ea04 commit 78bf746

File tree

9 files changed

+60
-46
lines changed

9 files changed

+60
-46
lines changed

‎src/App.vue‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
<template>
2-
<div id="q-app" class="layout-padding row justify-center">
2+
<div id="q-app" class="row justify-center">
33
<q-layout ref="layout">
44
<Toolbar slot="header" @drawerClick="clickDrawer()"></Toolbar>
55
<SideBar slot="left"></SideBar>
66
<q-transition
77
name="custom">
88
<router-view class="layout-view"/>
99
</q-transition>
10-
</q-layout>
10+
</q-layout>
1111
</div>
1212
</template>
1313

@@ -28,14 +28,14 @@ export default {
2828

2929
<style>
3030
.custom-enter-active {
31-
transition: all .3s ease;
32-
opacity: 0;
31+
transition: all .5s ease;
32+
opacity: 0.5;
3333
}
3434
.custom-leave-active {
3535
transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0);
3636
}
3737
.custom-enter, .custom-leave-to {
38-
transform: translateX(10px);
38+
transform: translateX(100px);
3939
opacity: 0;
4040
}
4141
</style>

‎src/app/__page_objects__/DaysPageObject.js‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import PageObject from './PageObject'
2-
import { spanishFromIso } from '../services/date-utils';
32

43
export default class DayListPageObject extends PageObject {
54
constructor(wrapper) {
@@ -8,7 +7,7 @@ export default class DayListPageObject extends PageObject {
87
}
98

109
dayTitles() {
11-
return this.wrapper.findAll('.q-list-header').wrappers.map((day) => day.text())
10+
return this.wrapper.findAll('.q-card-title').wrappers.map((day) => day.text())
1211
}
1312

1413
gigRowsFor(dayNumber) {

‎src/app/pages/Days/Day.vue‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
<template>
2-
<q-list v-if="!isLoading">
2+
<q-card v-if="!isLoading">
33
<div class='day'>
4-
<q-list-header>{{dateLabel}}</q-list-header>
4+
<q-card-title>{{dateLabel}}</q-card-title>
55

66
<div v-for="gig in day.gigs">
77
<Gig :gig ="gig" :onClick="goTo"/>
88
</div>
99
</div>
10-
</q-list>
10+
</q-card>
1111
</template>
1212

1313
<script>
@@ -33,7 +33,7 @@
3333
</script>
3434

3535
<style scoped>
36-
.q-list-header {
36+
.q-card-title {
3737
color: black;
3838
font-weight: bold;
3939
font-size: 150%;

‎src/app/pages/Days/__test__/__snapshots__/Day.spec.js.snap‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,15 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

33
exports[`Day matches full snapshot 1`] = `
4-
<div class="q-list">
4+
<div class="q-card">
55
<div class="day">
6-
<div class="q-list-header ">Lunes, 18 de Septiembre</div>
6+
<div class="q-card-primary q-card-container row no-wrap">
7+
<div class="col column">
8+
<div class="q-card-title">Lunes, 18 de Septiembre</div>
9+
<div class="q-card-subtitle"></div>
10+
</div>
11+
<div class="col-auto self-center q-card-title-extra"></div>
12+
</div>
713
<div>
814
<div class="q-item q-item-division relative-position q-item-highlight">
915
Anarchy in the JS - SCBCN

‎src/app/pages/NewGig/NewGig.vue‎

Lines changed: 25 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,29 @@
11
<template>
2-
<div class="layout-padding">
3-
<h4>Add a New Gig to Mosica!</h4>
4-
<TextInput
5-
label="Insert Gig Title"
6-
v-model="title"
7-
:validation="$v.title"
8-
:validation-messages="validationMessages.title"
9-
placeholder="Type name of gig"
10-
></TextInput>
11-
<DateTimeInput
12-
format="YYYY/MM/DD - hh:mm"
13-
label="Date and time"
14-
v-model="dateTime"
15-
:validation="$v.dateTime"
16-
:validation-messages="validationMessages.dateTime"
17-
:value="dateTime"
18-
></DateTimeInput>
19-
<br><br>
20-
<FormButton class="full-width" :onClick="save"
21-
:disabled="$v.$invalid" :isLoading="loading">
22-
Create Gig
23-
</FormButton>
24-
</div>
2+
<q-card>
3+
<div class="layout-padding">
4+
<h4>Add a New Gig to Mosica!</h4>
5+
<TextInput
6+
label="Insert Gig Title"
7+
v-model="title"
8+
:validation="$v.title"
9+
:validation-messages="validationMessages.title"
10+
placeholder="Type name of gig"
11+
></TextInput>
12+
<DateTimeInput
13+
format="YYYY/MM/DD - hh:mm"
14+
label="Date and time"
15+
v-model="dateTime"
16+
:validation="$v.dateTime"
17+
:validation-messages="validationMessages.dateTime"
18+
:value="dateTime"
19+
></DateTimeInput>
20+
<br><br>
21+
<FormButton class="full-width" :onClick="save"
22+
:disabled="$v.$invalid" :isLoading="loading">
23+
Create Gig
24+
</FormButton>
25+
</div>
26+
</q-card>
2527
</template>
2628

2729
<script>

‎src/app/pages/__test__/__snapshots__/Days.spec.js.snap‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,15 @@ exports[`Days matches full snapshot 1`] = `
44
<div class="full-width">
55
<!---->
66
<div>
7-
<div class="q-list">
7+
<div class="q-card">
88
<div class="day">
9-
<div class="q-list-header ">Lunes, 18 de Septiembre</div>
9+
<div class="q-card-primary q-card-container row no-wrap">
10+
<div class="col column">
11+
<div class="q-card-title">Lunes, 18 de Septiembre</div>
12+
<div class="q-card-subtitle"></div>
13+
</div>
14+
<div class="col-auto self-center q-card-title-extra"></div>
15+
</div>
1016
<div>
1117
<div class="q-item q-item-division relative-position q-item-highlight">
1218
Anarchy in the JS - SCBCN

‎src/app/shared/FormButton.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<q-btn color="primary"
2+
<q-btn color="secondary"
33
:disable="disabled"
44
@click="onClick()">
55
<q-spinner-mat size="20" v-if="isLoading"/>

‎src/app/shared/SideBar.vue‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,5 @@
11
<template>
22
<q-scroll-area slot="left" style="width: 100%; height: 100%" inset-separator>
3-
<q-list-header>
4-
<img src="~assets/stones-small-red-white_letters.svg"/>
5-
</q-list-header>
63
<q-side-link item to="/all">
74
<q-item-side icon="list" />
85
<q-item-main label="All Gigs"/>
@@ -26,6 +23,10 @@
2623
<q-item-main label="Create new Gig"/>
2724
<q-item-side icon="keyboard_arrow_right" />
2825
</q-side-link>
26+
<br>
27+
<q-list-header>
28+
<img src="~assets/stones.svg"/>
29+
</q-list-header>
2930
</q-scroll-area>
3031
</template>
3132

‎src/themes/app.variables.styl‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -16,17 +16,17 @@
1616
// It's highly recommended to change the default colors
1717
// to match your app's branding.
1818

19-
$primary = #448AFF
20-
$secondary = #FFC107
19+
$primary = #795548
20+
$secondary = #FF5722
2121

2222
$neutral = #E0E1E2
2323
$positive = #21BA45
2424
$negative = #DB2828
2525
$info = #31CCEC
2626
$warning = #F2C037
2727

28-
$layout-aside-background = #E0E1E2
29-
$body-background = #E0E1E2
28+
$layout-aside-background = #FFFFFF
29+
$body-background = #FFFFFF
3030

3131
//$body-color = $secondary
3232
//$toolbar-color = red

0 commit comments

Comments
 (0)