Skip to content

Commit 089b7cc

Browse files
drewngyendrewngyen
authored
Merge pull request #8 from drewngyen/master
added collapsed footer dashboard functionality
2 parents 7a5dbbc + b52bfe7 commit 089b7cc

File tree

7 files changed

+112
-39
lines changed

7 files changed

+112
-39
lines changed

‎quasar.conf.js‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,10 @@ module.exports = function (ctx) {
5252
'QTabs',
5353
'QTab',
5454
'QRouteTab',
55-
'QTabPanels'
55+
'QTabPanels',
56+
'QTabPanel',
57+
'QFab',
58+
'QFabAction'
5659
],
5760

5861
directives: [

‎src/components/ComponentDisplay.vue‎

Lines changed: 25 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -91,37 +91,39 @@ export default {
9191
/* border: 3px dashed rgb(159, 122, 122); */
9292
/* height: 500px; */
9393
/* width: 500px; */
94-
height: 70vh;
95-
width: 70vw;
94+
/* original is 70vh */
95+
height: 87vh;
96+
width: 100vw;
9697
position: relative;
9798
background-color: rgba(124, 126, 145, 0.44);
9899
/* background-color: #269; */
99-
background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
100-
background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px;
101-
background-image: -webkit-linear-gradient(white 2px, transparent 2px),
102-
-webkit-linear-gradient(0, white 2px, transparent 2px),
103-
-webkit-linear-gradient(rgba(255,255,255,.3) 1px, transparent 1px),
104-
-webkit-linear-gradient(0, rgba(255,255,255,.3) 1px, transparent 1px);
105-
background-image: -moz-linear-gradient(white 2px, transparent 2px),
106-
-moz-linear-gradient(0, white 2px, transparent 2px),
107-
-moz-linear-gradient(rgba(255,255,255,.3) 1px, transparent 1px),
108-
-moz-linear-gradient(0, rgba(255,255,255,.3) 1px, transparent 1px);
109-
background-image: linear-gradient(white 2px, transparent 2px),
110-
linear-gradient(90deg, white 2px, transparent 2px),
111-
linear-gradient(rgba(255,255,255,.3) 1px, transparent 1px),
112-
linear-gradient(90deg, rgba(255,255,255,.3) 1px, transparent 1px);
113-
-pie-background: linear-gradient(white 2px, transparent 2px) -2px -2px / 100px,
114-
linear-gradient(90deg, white 2px, transparent 2px) -2px -2px / 100px,
115-
linear-gradient(rgba(255,255,255,.3) 1px, transparent 1px) -1px -1px / 20px,
116-
linear-gradient(90deg, rgba(255,255,255,.3) 1px, transparent 1px) -1px -1px / 20px,
117-
#269;
118-
behavior: url(/pie/PIE.htc);
100+
background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
101+
background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px;
102+
background-image: -webkit-linear-gradient(white 2px, transparent 2px),
103+
-webkit-linear-gradient(0, white 2px, transparent 2px),
104+
-webkit-linear-gradient(rgba(255, 255, 255, 0.3) 1px, transparent 1px),
105+
-webkit-linear-gradient(0, rgba(255, 255, 255, 0.3) 1px, transparent 1px);
106+
background-image: -moz-linear-gradient(white 2px, transparent 2px),
107+
-moz-linear-gradient(0, white 2px, transparent 2px),
108+
-moz-linear-gradient(rgba(255, 255, 255, 0.3) 1px, transparent 1px),
109+
-moz-linear-gradient(0, rgba(255, 255, 255, 0.3) 1px, transparent 1px);
110+
background-image: linear-gradient(white 2px, transparent 2px),
111+
linear-gradient(90deg, white 2px, transparent 2px),
112+
linear-gradient(rgba(255, 255, 255, 0.3) 1px, transparent 1px),
113+
linear-gradient(90deg, rgba(255, 255, 255, 0.3) 1px, transparent 1px);
114+
-pie-background: linear-gradient(white 2px, transparent 2px) -2px -2px / 100px,
115+
linear-gradient(90deg, white 2px, transparent 2px) -2px -2px / 100px,
116+
linear-gradient(rgba(255, 255, 255, 0.3) 1px, transparent 1px) -1px -1px /
117+
20px,
118+
linear-gradient(90deg, rgba(255, 255, 255, 0.3) 1px, transparent 1px) -1px -1px /
119+
20px,
120+
#269;
121+
behavior: url(/pie/PIE.htc);
119122
}
120123
121124
.component-box {
122125
color: white;
123126
border: 3px dashed rgb(227, 203, 71);
124127
background-color: rgba(186, 99, 99, 0.529);
125128
}
126-
127129
</style>

‎src/components/Footer.vue‎

Lines changed: 67 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,80 @@
11
<template>
2-
<q-footer reveal elevated class="primary text-white">
3-
<q-toolbar>
4-
<q-btn push color="secondary" round icon="keyboard_arrow_up" />
5-
<q-toolbar-title>Dashboard</q-toolbar-title>
6-
<FooterTabView />
7-
</q-toolbar>
8-
</q-footer>
2+
<q-footer reveal elevated class="gradient text-white" :style="{ height: `${height}vh` }">
3+
<q-toolbar>
4+
<q-btn flat color="subaccentbtn" round @click="openBottomDrawer">
5+
<i :class="[open ? down : up]"></i>
6+
</q-btn>
7+
<q-toolbar-title>Dashboard</q-toolbar-title>
8+
</q-toolbar>
9+
<q-card>
10+
<q-tabs
11+
v-model="tab"
12+
dense
13+
class="bg-subaccent text-white"
14+
active-color="secondary"
15+
indicator-color="secondary"
16+
align="left"
17+
>
18+
<q-tab name="code" label="Code" />
19+
<q-tab name="tree" label="Tree" />
20+
<q-tab name="html" label="HTML Elements" />
21+
</q-tabs>
22+
23+
<q-tab-panels v-model="tab" animated class="bg-primary text-white">
24+
<q-tab-panel name="code">
25+
<div class="text-h6">Code Snippet</div>Code Snippet Component Here
26+
<br />asdfadsfasdf
27+
</q-tab-panel>
28+
29+
<q-tab-panel name="tree">
30+
<div class="text-h6">Tree</div>Tree Component Here
31+
</q-tab-panel>
32+
33+
<q-tab-panel name="html">
34+
<div class="text-h6">HTML Elements</div>HTML Element Component Here
35+
</q-tab-panel>
36+
</q-tab-panels>
37+
</q-card>
38+
</q-footer>
939
</template>
1040

1141
<script>
12-
import FooterTabView from './FooterTabView'
13-
1442
export default {
15-
components: {
16-
FooterTabView
43+
data () {
44+
return {
45+
tab: 'code',
46+
open: true,
47+
height: 35,
48+
up: 'fas fa-chevron-up',
49+
down: 'fas fa-chevron-down'
50+
}
51+
},
52+
methods: {
53+
openBottomDrawer () {
54+
this.height === 35 ? (this.height = 6.5) : (this.height = 35)
55+
this.open === true ? this.open = false : this.open = true
56+
}
1757
}
1858
}
1959
</script>
2060

2161
<style lang="stylus">
2262
.q-footer {
23-
height: 20vh;
63+
// height: 35vh;
64+
transition-timing-function: ease-in;
65+
transition: 0.2s;
66+
}
67+
68+
.q-tab-panel {
69+
background: #454d66;
70+
}
71+
72+
.q-tab-panels {
73+
background: yellow;
74+
height: 100%;
75+
}
76+
77+
.q-tabs {
78+
background: #2c384d;
2479
}
2580
</style>

‎src/components/FooterTabView.vue‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,10 @@
1818
<q-list>
1919
<q-tab-panels v-model="tab" animated>
2020
<q-tab-panel name="Tree">
21-
<div class="text-h6">Tree</div>Lorem ipsum dolor sit amet consectetur adipisicing elit.
21+
<div class="text-h6">Tree</div>
22+
<q-card>
23+
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
24+
</q-card>
2225
</q-tab-panel>
2326

2427
<q-tab-panel name="Code">

‎src/css/app.styl‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,8 @@
11
// app global css
22
main {
33
background: #f2f6f5;
4+
}
5+
.gradient {
6+
background: rgb(22,108,105);
7+
background: linear-gradient(36deg, rgba(22,108,105,1) 0%, rgba(20,32,23,1) 100%);
48
}

‎src/css/quasar.variables.styl‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,11 @@
99
// to match your app's branding.
1010
// Tip: Use the "Theme Builder" on Quasar's documentation website.
1111

12-
$primary = #c8dad3
12+
$primary = #737578
1313
$secondary = #26A69A
1414
$accent = #9C27B0
15+
$subaccent = #454d66
16+
$subaccentbtn = #2c384d
1517

1618
$positive = #21BA45
1719
$negative = #C10015

‎src/layouts/MyLayout.vue‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
22
<q-layout view="hHh LpR lFf">
3-
<q-header elevated class="bg-primary text-black">
3+
<q-header elevated class="gradient text-white">
44
<q-toolbar>
55
<q-btn dense flat round icon="menu" @click="left = !left" />
66

@@ -44,3 +44,7 @@ export default {
4444
}
4545
}
4646
</script>
47+
48+
<style lang="stylus">
49+
50+
</style>

0 commit comments

Comments
 (0)