Skip to content

Commit 2bfa989

Browse files
rstoenescurstoenescu
committed
feat(docs): Add style > breakpoints page; Update Whatsapp layout
1 parent 932ee05 commit 2bfa989

File tree

3 files changed

+134
-55
lines changed

3 files changed

+134
-55
lines changed

‎docs/src/assets/menu.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -422,6 +422,10 @@ const style = [
422422
name: 'Shadows',
423423
path: 'shadows'
424424
},
425+
{
426+
name: 'Breakpoints',
427+
path: 'breakpoints'
428+
},
425429
{
426430
name: 'Visibility',
427431
path: 'visibility'

‎docs/src/layouts/gallery/whatsapp.vue‎

Lines changed: 112 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,32 @@
11
<template>
2-
<div class="col position-relative whatsapp-container bg-grey-4">
3-
<q-layout view="lHh Lpr lFf" class="shadow-3" container
4-
:style="{
5-
height: (this.$q.screen.height - (this.$q.screen.gt.md ? 40 : 0)) + 'px',
6-
width: (this.$q.screen.width - (this.$q.screen.gt.md ? 350 : 0)) + 'px',
7-
top: this.$q.screen.gt.md ? '20px' : 0
8-
}"
9-
>
2+
<div class="WAL position-relative bg-grey-4">
3+
<q-layout view="lHh Lpr lFf" class="WAL__layout shadow-3" container>
104
<q-header elevated>
115
<q-toolbar class="bg-grey-3 text-black">
6+
<q-btn
7+
round
8+
flat
9+
icon="keyboard_arrow_left"
10+
class="WAL__drawer-open q-mr-sm"
11+
@click="leftDrawerOpen = true"
12+
/>
13+
1214
<q-btn round flat>
1315
<q-avatar>
1416
<img :src="currentConversation.avatar">
1517
</q-avatar>
1618
</q-btn>
19+
1720
<span class="q-subtitle-1 q-pl-md">
1821
{{ currentConversation.person }}
1922
</span>
23+
2024
<q-space/>
21-
<q-btn round flat icon="search"/>
22-
<q-btn round flat icon="attachment" class="rotate-135"/>
25+
26+
<q-btn round flat icon="search" />
27+
<q-btn round flat>
28+
<q-icon name="attachment" class="rotate-135" />
29+
</q-btn>
2330
<q-btn round flat icon="more_vert">
2431
<q-menu auto-close :offset="[110, 0]">
2532
<q-list style="min-width: 150px">
@@ -49,14 +56,17 @@
4956

5057
<q-drawer
5158
v-model="leftDrawerOpen"
52-
bordered :breakpoint="0"
53-
:width="350"
59+
bordered
60+
show-if-above
61+
:breakpoint="690"
5462
>
5563
<q-toolbar class="bg-grey-3">
5664
<q-avatar class="cursor-pointer">
5765
<img src="https://cdn.quasar.dev/app-icons/icon-128x128.png" />
5866
</q-avatar>
67+
5968
<q-space />
69+
6070
<q-btn round flat icon="message" />
6171
<q-btn round flat icon="more_vert">
6272
<q-menu auto-close :offset="[110, 8]">
@@ -82,10 +92,18 @@
8292
</q-list>
8393
</q-menu>
8494
</q-btn>
95+
96+
<q-btn
97+
round
98+
flat
99+
icon="close"
100+
class="WAL__drawer-close"
101+
@click="leftDrawerOpen = false"
102+
/>
85103
</q-toolbar>
86104

87105
<q-toolbar class="bg-grey-2">
88-
<q-input rounded outlined dense class="full-width" bg-color="white" v-model="search" placeholder="Search or start a new conversation">
106+
<q-input rounded outlined dense class="WAL__field full-width" bg-color="white" v-model="search" placeholder="Search or start a new conversation">
89107
<template slot="prepend">
90108
<q-icon name="search" />
91109
</template>
@@ -94,59 +112,63 @@
94112

95113
<q-scroll-area style="height: calc(100% - 100px)">
96114
<q-list>
97-
<q-item v-for="(conversation, index) in conversations" :key="conversation.id" clickable ripple @click="currentConversationIndex = index">
115+
<q-item
116+
v-for="(conversation, index) in conversations"
117+
:key="conversation.id"
118+
clickable
119+
v-ripple
120+
@click="currentConversationIndex = index"
121+
>
98122
<q-item-section avatar>
99123
<q-avatar>
100124
<img :src="conversation.avatar">
101-
</q-avatar>{{ }}
102-
</q-item-section>{{ }}
125+
</q-avatar>
126+
</q-item-section>
127+
103128
<q-item-section>
104-
<div class="row justify-between items-center">
105-
<q-item-label>
106-
{{ conversation.person }}
107-
</q-item-label>
108-
<q-item-label caption>
109-
{{ conversation.time }}
110-
</q-item-label>
111-
</div>
112-
<div class="row justify-between items-center">
113-
<q-item-label class="conversation__summary" caption>
114-
<q-icon name="check" v-if="conversation.sent"/>
115-
<q-icon name="fas fa-ban" v-if="conversation.deleted"/>
116-
{{ conversation.caption }}
117-
</q-item-label>
118-
<q-item-label class="conversation__more" caption>
119-
<q-icon name="keyboard_arrow_down"/>
120-
</q-item-label>
121-
</div>
129+
<q-item-label lines="1">
130+
{{ conversation.person }}
131+
</q-item-label>
132+
<q-item-label class="conversation__summary" caption>
133+
<q-icon name="check" v-if="conversation.sent" />
134+
<q-icon name="fas fa-ban" v-if="conversation.deleted" />
135+
{{ conversation.caption }}
136+
</q-item-label>
137+
</q-item-section>
138+
139+
<q-item-section side>
140+
<q-item-label caption>
141+
{{ conversation.time }}
142+
</q-item-label>
143+
<q-icon name="keyboard_arrow_down" />
122144
</q-item-section>
123145
</q-item>
124146
</q-list>
125147
</q-scroll-area>
126148
</q-drawer>
127149

150+
<q-page-container class="bg-grey-2">
151+
<router-view />
152+
</q-page-container>
153+
128154
<q-footer>
129155
<q-toolbar class="bg-grey-3 text-black row">
130-
<q-btn round flat icon="insert_emoticon"/>
131-
<q-input rounded outlined dense class="col-grow" bg-color="white" v-model="message" placeholder="Type a message"/>
132-
<q-btn round flat icon="mic"/>
156+
<q-btn round flat icon="insert_emoticon" class="q-mr-sm" />
157+
<q-input rounded outlined dense class="WAL__field col-grow q-mr-sm" bg-color="white" v-model="message" placeholder="Type a message" />
158+
<q-btn round flat icon="mic" />
133159
</q-toolbar>
134160
</q-footer>
135-
136-
<q-page-container class="bg-grey-2">
137-
<router-view />
138-
</q-page-container>
139161
</q-layout>
140162
</div>
141163
</template>
142164

143165
<script>
144166
export default {
145-
name: 'MyLayout',
167+
name: 'WhatsappLayout',
146168
147169
data () {
148170
return {
149-
leftDrawerOpen: true,
171+
leftDrawerOpen: false,
150172
search: '',
151173
message: '',
152174
currentConversationIndex: 0,
@@ -186,34 +208,69 @@ export default {
186208
]
187209
}
188210
},
211+
189212
computed: {
190213
currentConversation () {
191214
return this.conversations[this.currentConversationIndex]
192215
}
216+
},
217+
218+
watch: {
219+
leftDrawerOpen (val) {
220+
// if user opens drawer in mobile mode
221+
// then widens the window and closes drawer,
222+
// we should still show drawer on page in standard mode
223+
if (val === false && this.$q.screen.width >= 690) {
224+
this.$nextTick(() => {
225+
this.leftDrawerOpen = true
226+
})
227+
}
228+
}
193229
}
194230
}
195231
</script>
196232

197233
<style lang="stylus">
198-
.q-layout-container
199-
margin 0 auto
200-
z-index 4000
201-
202-
.whatsapp-container
203-
height 100vh
204-
&::after
205-
content ""
234+
.WAL
235+
width 100%
236+
height 100%
237+
padding-top 20px
238+
padding-bottom 20px
239+
240+
&:before
241+
content ''
206242
height 127px
207243
position fixed
208244
top 0
209245
width 100%
210246
background-color #009688
211247
212-
.q-field--outlined .q-field__control:before
213-
border none
248+
&__layout
249+
margin 0 auto
250+
z-index 4000
251+
height 100%
252+
width 90%
253+
max-width 950px
254+
border-radius 5px
255+
256+
&__field.q-field--outlined .q-field__control:before
257+
border none
258+
259+
.q-drawer--standard
260+
.WAL__drawer-close
261+
display none
262+
263+
@media (max-width 850px)
264+
.WAL
265+
padding 0
266+
&__layout
267+
width 100%
268+
border-radius 0
214269
215-
.q-icon
216-
opacity .45
270+
@media (min-width 691px)
271+
.WAL
272+
&__drawer-open
273+
display none
217274
218275
.conversation__summary
219276
margin-top 4px

‎docs/src/pages/style/breakpoints.md‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
---
2+
title: Breakpoints
3+
desc: Quasar's list of CSS breakpoints.
4+
---
5+
6+
Quasar uses the following CSS breakpoints:
7+
8+
| Window Size | Name | Width threshold in pixels |
9+
| --- | --- | --- |
10+
| Extra Small | `xs` | Up to 599px |
11+
| Small | `sm` | Up to 1023px |
12+
| Medium | `md` | Up to 1439px |
13+
| Large | `lg` | Up to 1919px |
14+
| Extra Large | `xl` | Bigger than 1920px |
15+
16+
To learn how to use them, please visit the [Visibility](/style/visibility) page.
17+
18+
You might also want to take a look at the [Introduction to Flexbox](/layout/grid/introduction-to-flexbox#Responsive-Design) on the "Responsive Design" section.

0 commit comments

Comments
 (0)