Skip to content

Commit

Permalink
chore(docs): use wrapper for QScrollArea in QDrawer; use links for se…
Browse files Browse the repository at this point in the history 
…arch results quasarframework#11169, quasarframework#10281

quasarframework#11169, quasarframework#10281
  • Loading branch information
@pdanpdan
pdanpdan committed Dec 29, 2021
1 parent d7d51fd commit 6abd19f
Show file tree
Hide file tree
Showing 25 changed files with 704 additions and 653 deletions.
3 changes: 1 addition & 2 deletions docs/src/components/search-results/ResultPageContent.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,7 @@
q-item.app-search__result(
:id="entry.id"
:active="active"
clickable
@click="entry.onClick"
:to="entry.url"
@mouseenter="entry.onMouseenter"
)
q-item-section
Expand Down
3 changes: 1 addition & 2 deletions docs/src/components/search-results/ResultPageLink.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,7 @@
q-item.app-search__result(
:id="entry.id"
:active="active"
clickable
@click="entry.onClick"
:to="entry.url"
@mouseenter="entry.onMouseenter"
)
q-item-section
Expand Down
24 changes: 14 additions & 10 deletions docs/src/examples/QDrawer/Basic.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,11 +17,13 @@
elevated
content-class="bg-primary text-white"
>
<q-scroll-area class="fit">
<div class="q-pa-sm">
<div v-for="n in 50" :key="n">Drawer {{ n }} / 50</div>
</div>
</q-scroll-area>
<div class="fit overflow-hidden">
<q-scroll-area class="fit">
<div class="q-pa-sm">
<div v-for="n in 50" :key="n">Drawer {{ n }} / 50</div>
</div>
</q-scroll-area>
</div>
</q-drawer>

<q-drawer
Expand All @@ -33,11 +35,13 @@
:breakpoint="500"
content-class="bg-grey-3"
>
<q-scroll-area class="fit">
<div class="q-pa-sm">
<div v-for="n in 50" :key="n">Drawer {{ n }} / 50</div>
</div>
</q-scroll-area>
<div class="fit overflow-hidden">
<q-scroll-area class="fit">
<div class="q-pa-sm">
<div v-for="n in 50" :key="n">Drawer {{ n }} / 50</div>
</div>
</q-scroll-area>
</div>
</q-drawer>

<q-page-container>
Expand Down
92 changes: 47 additions & 45 deletions docs/src/examples/QDrawer/HeaderPicture.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,59 +14,61 @@
:width="200"
:breakpoint="400"
>
<q-scroll-area style="height: calc(100% - 150px); margin-top: 150px; border-right: 1px solid #ddd">
<q-list padding>
<q-item clickable v-ripple>
<q-item-section avatar>
<q-icon name="inbox" />
</q-item-section>
<div class="fit overflow-hidden column no-wrap">
<q-img src="https://cdn.quasar.dev/img/material.png" style="height: 150px">
<div class="absolute-bottom bg-transparent">
<q-avatar size="56px" class="q-mb-sm">
<img src="https://cdn.quasar.dev/img/boy-avatar.png">
</q-avatar>
<div class="text-weight-bold">Razvan Stoenescu</div>
<div>@rstoenescu</div>
</div>
</q-img>

<q-item-section>
Inbox
</q-item-section>
</q-item>
<q-scroll-area class="col" style="border-right: 1px solid #ddd">
<q-list padding>
<q-item clickable v-ripple>
<q-item-section avatar>
<q-icon name="inbox" />
</q-item-section>

<q-item active clickable v-ripple>
<q-item-section avatar>
<q-icon name="star" />
</q-item-section>
<q-item-section>
Inbox
</q-item-section>
</q-item>

<q-item-section>
Star
</q-item-section>
</q-item>
<q-item active clickable v-ripple>
<q-item-section avatar>
<q-icon name="star" />
</q-item-section>

<q-item clickable v-ripple>
<q-item-section avatar>
<q-icon name="send" />
</q-item-section>
<q-item-section>
Star
</q-item-section>
</q-item>

<q-item-section>
Send
</q-item-section>
</q-item>
<q-item clickable v-ripple>
<q-item-section avatar>
<q-icon name="send" />
</q-item-section>

<q-item clickable v-ripple>
<q-item-section avatar>
<q-icon name="drafts" />
</q-item-section>
<q-item-section>
Send
</q-item-section>
</q-item>

<q-item-section>
Drafts
</q-item-section>
</q-item>
</q-list>
</q-scroll-area>
<q-item clickable v-ripple>
<q-item-section avatar>
<q-icon name="drafts" />
</q-item-section>

<q-img class="absolute-top" src="https://cdn.quasar.dev/img/material.png" style="height: 150px">
<div class="absolute-bottom bg-transparent">
<q-avatar size="56px" class="q-mb-sm">
<img src="https://cdn.quasar.dev/img/boy-avatar.png">
</q-avatar>
<div class="text-weight-bold">Razvan Stoenescu</div>
<div>@rstoenescu</div>
</div>
</q-img>
<q-item-section>
Drafts
</q-item-section>
</q-item>
</q-list>
</q-scroll-area>
</div>
</q-drawer>

<q-page-container>
Expand Down
32 changes: 17 additions & 15 deletions docs/src/examples/QDrawer/Menu.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,23 +16,25 @@
bordered
content-class="bg-grey-3"
>
<q-scroll-area class="fit">
<q-list>
<div class="fit overflow-hidden">
<q-scroll-area class="fit">
<q-list>

<template v-for="(menuItem, index) in menuList">
<q-item :key="index" clickable :active="menuItem.label === 'Outbox'" v-ripple>
<q-item-section avatar>
<q-icon :name="menuItem.icon" />
</q-item-section>
<q-item-section>
{{ menuItem.label }}
</q-item-section>
</q-item>
<q-separator :key="'sep' + index" v-if="menuItem.separator" />
</template>
<template v-for="(menuItem, index) in menuList">
<q-item :key="index" clickable :active="menuItem.label === 'Outbox'" v-ripple>
<q-item-section avatar>
<q-icon :name="menuItem.icon" />
</q-item-section>
<q-item-section>
{{ menuItem.label }}
</q-item-section>
</q-item>
<q-separator :key="'sep' + index" v-if="menuItem.separator" />
</template>

</q-list>
</q-scroll-area>
</q-list>
</q-scroll-area>
</div>
</q-drawer>

<q-page-container>
Expand Down
74 changes: 38 additions & 36 deletions docs/src/examples/QDrawer/MenuSeamless.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,49 +14,51 @@
:width="200"
:breakpoint="500"
>
<q-scroll-area class="fit">
<q-list padding class="menu-list">
<q-item clickable v-ripple>
<q-item-section avatar>
<q-icon name="inbox" />
</q-item-section>
<div class="fit overflow-hidden">
<q-scroll-area class="fit">
<q-list padding class="menu-list">
<q-item clickable v-ripple>
<q-item-section avatar>
<q-icon name="inbox" />
</q-item-section>

<q-item-section>
Inbox
</q-item-section>
</q-item>
<q-item-section>
Inbox
</q-item-section>
</q-item>

<q-item active clickable v-ripple>
<q-item-section avatar>
<q-icon name="star" />
</q-item-section>
<q-item active clickable v-ripple>
<q-item-section avatar>
<q-icon name="star" />
</q-item-section>

<q-item-section>
Star
</q-item-section>
</q-item>
<q-item-section>
Star
</q-item-section>
</q-item>

<q-item clickable v-ripple>
<q-item-section avatar>
<q-icon name="send" />
</q-item-section>
<q-item clickable v-ripple>
<q-item-section avatar>
<q-icon name="send" />
</q-item-section>

<q-item-section>
Send
</q-item-section>
</q-item>
<q-item-section>
Send
</q-item-section>
</q-item>

<q-item clickable v-ripple>
<q-item-section avatar>
<q-icon name="drafts" />
</q-item-section>
<q-item clickable v-ripple>
<q-item-section avatar>
<q-icon name="drafts" />
</q-item-section>

<q-item-section>
Drafts
</q-item-section>
</q-item>
</q-list>
</q-scroll-area>
<q-item-section>
Drafts
</q-item-section>
</q-item>
</q-list>
</q-scroll-area>
</div>
</q-drawer>

<q-page-container>
Expand Down
74 changes: 38 additions & 36 deletions docs/src/examples/QDrawer/MiniClickEvent.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,49 +20,51 @@
bordered
content-class="bg-grey-3"
>
<q-scroll-area class="fit">
<q-list padding>
<q-item clickable v-ripple>
<q-item-section avatar>
<q-icon name="inbox" />
</q-item-section>
<div class="fit overflow-hidden">
<q-scroll-area class="fit">
<q-list padding>
<q-item clickable v-ripple>
<q-item-section avatar>
<q-icon name="inbox" />
</q-item-section>

<q-item-section>
Inbox
</q-item-section>
</q-item>
<q-item-section>
Inbox
</q-item-section>
</q-item>

<q-item active clickable v-ripple>
<q-item-section avatar>
<q-icon name="star" />
</q-item-section>
<q-item active clickable v-ripple>
<q-item-section avatar>
<q-icon name="star" />
</q-item-section>

<q-item-section>
Star
</q-item-section>
</q-item>
<q-item-section>
Star
</q-item-section>
</q-item>

<q-item clickable v-ripple>
<q-item-section avatar>
<q-icon name="send" />
</q-item-section>
<q-item clickable v-ripple>
<q-item-section avatar>
<q-icon name="send" />
</q-item-section>

<q-item-section>
Send
</q-item-section>
</q-item>
<q-item-section>
Send
</q-item-section>
</q-item>

<q-item clickable v-ripple>
<q-item-section avatar>
<q-icon name="drafts" />
</q-item-section>
<q-item clickable v-ripple>
<q-item-section avatar>
<q-icon name="drafts" />
</q-item-section>

<q-item-section>
Drafts
</q-item-section>
</q-item>
</q-list>
</q-scroll-area>
<q-item-section>
Drafts
</q-item-section>
</q-item>
</q-list>
</q-scroll-area>
</div>

<!--
in this case, we use a button (can be anything)
Expand Down
Loading

0 comments on commit 6abd19f

Please sign in to comment.