refactor(ui-docs): clearer examples for layout section component
This commit is contained in:
upsiflu
parent
e450303f83
commit
ae8ed94d5b
|
|
@ -9,7 +9,7 @@ import Toggle from '~/components/ui/Toggle.vue'
|
||||||
import Spacer from '~/components/ui/layout/Spacer.vue'
|
import Spacer from '~/components/ui/layout/Spacer.vue'
|
||||||
import Button from '~/components/ui/Button.vue'
|
import Button from '~/components/ui/Button.vue'
|
||||||
import Activity from '~/components/ui/Activity.vue'
|
import Activity from '~/components/ui/Activity.vue'
|
||||||
import LayoutSection from '~/components/ui/layout/Section.vue'
|
import Section from '~/components/ui/layout/Section.vue'
|
||||||
|
|
||||||
const alignLeft = ref(false)
|
const alignLeft = ref(false)
|
||||||
|
|
||||||
|
|
@ -108,13 +108,19 @@ const user: User = {
|
||||||
|
|
||||||
# Layout section
|
# Layout section
|
||||||
|
|
||||||
## Alignment
|
Sections divide the page vertically. Choose an appropriate heading level for each section: `h1` or `h2` or `h3`.
|
||||||
|
|
||||||
|
```vue-html
|
||||||
|
<Section h3="My title" />
|
||||||
|
```
|
||||||
|
|
||||||
|
### Align the section to the page
|
||||||
|
|
||||||
```vue-html
|
```vue-html
|
||||||
<Section alignLeft />
|
<Section alignLeft />
|
||||||
```
|
```
|
||||||
|
|
||||||
## Item width
|
### Make the section header align with the section contents
|
||||||
|
|
||||||
Do you want to align the header to tiny, small or medium items?
|
Do you want to align the header to tiny, small or medium items?
|
||||||
|
|
||||||
|
|
@ -122,29 +128,28 @@ Do you want to align the header to tiny, small or medium items?
|
||||||
<Section medium-items />
|
<Section medium-items />
|
||||||
```
|
```
|
||||||
|
|
||||||
## Heading
|
### Provide an action
|
||||||
|
|
||||||
`h1` or `h2` or `h3` `="title"`
|
The link or button will be shown on the right side of the header.
|
||||||
|
|
||||||
```vue-html
|
```vue-html
|
||||||
<Section h3="My title" />
|
<Section h3="With a link" :action="{ text:'My library', to:'/' }" />
|
||||||
|
|
||||||
|
<Section h3="With a button" :action="{ text:'Say hello!', onClick:()=>console.log('Hello') }" />
|
||||||
```
|
```
|
||||||
|
|
||||||
## Action
|
<Section h3="With a link" :action="{ text:'My library', to:'/' }" />
|
||||||
|
<Section h3="With a button" :action="{ text:'Say hello!', onClick:()=>console.log('Hello') }" />
|
||||||
|
|
||||||
Will be shown on the right side of the header
|
You can add props to the Link or Button, for example to make them `primary` or add an icon:
|
||||||
|
|
||||||
### (a) Add a link:
|
```vue-html{1}
|
||||||
|
<Section solid primary icon="bi-star"
|
||||||
```vue-html
|
h3="Do it!" :action="{ text:'Say hello!', onClick:()=>console.log('Hello') }" />
|
||||||
<Section :action="{ text:'more...', to:'/' }" />
|
|
||||||
```
|
```
|
||||||
|
|
||||||
### (b) Or a button:
|
<Section solid primary icon="bi-star"
|
||||||
|
h3="Do it!" :action="{ text:'Say hello!', onClick:()=>console.log('Hello') }" />
|
||||||
```vue-html
|
|
||||||
<Section :action="{ text:'more...', onClick:'loadMore' }" />
|
|
||||||
```
|
|
||||||
|
|
||||||
## Example
|
## Example
|
||||||
|
|
||||||
|
|
@ -153,24 +158,17 @@ Will be shown on the right side of the header
|
||||||
<Toggle v-model="alignLeft" label="Left-align the layout"/>
|
<Toggle v-model="alignLeft" label="Left-align the layout"/>
|
||||||
</Layout>
|
</Layout>
|
||||||
|
|
||||||
---
|
<Section :alignLeft="alignLeft" small-items h3="Cards (small items)" :action="{ text:'more...', to:'/' }">
|
||||||
|
|
||||||
<div class="preview" style="margin: 0 -40px; padding: 0 25px;">
|
|
||||||
|
|
||||||
<LayoutSection :alignLeft="alignLeft" small-items h3="Cards (small items)" :action="{ text:'more...', to:'/' }">
|
|
||||||
<Card small title="Relatively Long Album Name">
|
<Card small title="Relatively Long Album Name">
|
||||||
Artist Name
|
Artist Name
|
||||||
13 tracks
|
|
||||||
</Card>
|
</Card>
|
||||||
<Card small title="Relatively Long Album Name">
|
<Card small title="Relatively Long Album Name">
|
||||||
Artist Name
|
Artist Name
|
||||||
13 tracks
|
|
||||||
</Card>
|
</Card>
|
||||||
<Card small title="Relatively Long Album Name">
|
<Card small title="Relatively Long Album Name">
|
||||||
Artist Name
|
Artist Name
|
||||||
13 tracks
|
|
||||||
</Card>
|
</Card>
|
||||||
</LayoutSection>
|
</Section>
|
||||||
|
|
||||||
<LayoutSection
|
<LayoutSection
|
||||||
:alignLeft="alignLeft"
|
:alignLeft="alignLeft"
|
||||||
|
|
@ -182,8 +180,6 @@ Will be shown on the right side of the header
|
||||||
<Activity :track="track" :user="user" />
|
<Activity :track="track" :user="user" />
|
||||||
<Activity :track="track" :user="user" />
|
<Activity :track="track" :user="user" />
|
||||||
</LayoutSection>
|
</LayoutSection>
|
||||||
|
|
||||||
</div>
|
|
||||||
```
|
```
|
||||||
|
|
||||||
<Layout flex>
|
<Layout flex>
|
||||||
|
|
@ -194,25 +190,31 @@ Will be shown on the right side of the header
|
||||||
|
|
||||||
<div class="preview" style="margin: 0 -40px; padding: 0 25px;">
|
<div class="preview" style="margin: 0 -40px; padding: 0 25px;">
|
||||||
|
|
||||||
<LayoutSection :alignLeft="alignLeft" small-items h3="Cards (small items)" :action="{ text:'more...', to:'/' }">
|
<Section :alignLeft="alignLeft" small-items h3="Cards (small items)" :action="{ text:'Go to library', to:'/' }">
|
||||||
<Card small title="Relatively Long Album Name">
|
<Card small title="Relatively Long Album Name">
|
||||||
Artist Name
|
Artist Name
|
||||||
13 tracks
|
|
||||||
</Card>
|
</Card>
|
||||||
<Card small title="Relatively Long Album Name">
|
<Card small title="Relatively Long Album Name">
|
||||||
Artist Name
|
Artist Name
|
||||||
13 tracks
|
|
||||||
</Card>
|
</Card>
|
||||||
<Card small title="Relatively Long Album Name">
|
<Card small title="Relatively Long Album Name">
|
||||||
Artist Name
|
Artist Name
|
||||||
13 tracks
|
|
||||||
</Card>
|
</Card>
|
||||||
</LayoutSection>
|
</Section>
|
||||||
|
|
||||||
<LayoutSection :alignLeft="alignLeft" medium-items h3="Activities (medium items)" :action="{ text:'more...', to:'/' }">
|
<Section :alignLeft="alignLeft" medium-items h3="Activities (medium items)" :action="{ text:'Delete selected items', onClick:()=>console.log('Deleted :-)') }">
|
||||||
<Activity :track="track" :user="user" />
|
<Activity :track="track" :user="user" />
|
||||||
<Activity :track="track" :user="user" />
|
<Activity :track="track" :user="user" />
|
||||||
<Activity :track="track" :user="user" />
|
<Activity :track="track" :user="user" />
|
||||||
</LayoutSection>
|
</Section>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
## Responsivity
|
||||||
|
|
||||||
|
- Cards and Activities snap to the grid columns. They have intrinsic widths, expressed in the number of columns they span. For Card, it is 3 and for Activity, it is 4.
|
||||||
|
- On a typical laptop screen, you will have 4 albums or 3 activities side-by-side. On a typical mobile screen, you will have 1 medium card or 2 small ones in a row.
|
||||||
|
- The remaining space is evenly distributed.
|
||||||
|
- Title rows align with the content below them.
|
||||||
|
|
||||||
|
Resize the window to observe how the items move.
|
||||||
|
|
|
||||||
|
|
@ -9,100 +9,13 @@ import Toggle from '~/components/ui/Toggle.vue'
|
||||||
import Spacer from '~/components/ui/layout/Spacer.vue'
|
import Spacer from '~/components/ui/layout/Spacer.vue'
|
||||||
import Button from '~/components/ui/Button.vue'
|
import Button from '~/components/ui/Button.vue'
|
||||||
import Activity from '~/components/ui/Activity.vue'
|
import Activity from '~/components/ui/Activity.vue'
|
||||||
|
import Section from '~/components/ui/layout/Section.vue'
|
||||||
|
|
||||||
const alignLeft = ref(false)
|
const alignLeft = ref(false)
|
||||||
|
|
||||||
const attributes = computed(() => ({
|
const attributes = computed(() => ({
|
||||||
style: alignLeft.value ? 'justify-content: start' : ''
|
style: alignLeft.value ? 'justify-content: start' : ''
|
||||||
}))
|
}))
|
||||||
|
|
||||||
const track: Track = {
|
|
||||||
id: 0,
|
|
||||||
fid: "",
|
|
||||||
|
|
||||||
title: 'Some lovely track',
|
|
||||||
description: {
|
|
||||||
content_type: 'text/markdown',
|
|
||||||
text: `**New:** Music for the eyes!`
|
|
||||||
},
|
|
||||||
cover: {
|
|
||||||
uuid: "",
|
|
||||||
urls: {
|
|
||||||
original: 'https://images.unsplash.com/photo-1524650359799-842906ca1c06?ixlib=rb-1.2.1&dl=te-nguyen-Wt7XT1R6sjU-unsplash.jpg&w=640&q=80&fm=jpg&crop=entropy&cs=tinysrgb',
|
|
||||||
medium_square_crop: 'https://images.unsplash.com/photo-1524650359799-842906ca1c06?ixlib=rb-1.2.1&dl=te-nguyen-Wt7XT1R6sjU-unsplash.jpg&w=640&q=80&fm=jpg&crop=entropy&cs=tinysrgb',
|
|
||||||
large_square_crop: 'https://images.unsplash.com/photo-1524650359799-842906ca1c06?ixlib=rb-1.2.1&dl=te-nguyen-Wt7XT1R6sjU-unsplash.jpg&w=640&q=80&fm=jpg&crop=entropy&cs=tinysrgb'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
tags: ["example"],
|
|
||||||
uploads: [],
|
|
||||||
downloads_count: 1927549377,
|
|
||||||
artist_credit: [{
|
|
||||||
artist: {
|
|
||||||
id: 0,
|
|
||||||
fid: "",
|
|
||||||
|
|
||||||
name: "The Artist",
|
|
||||||
description: {
|
|
||||||
content_type: 'text/markdown',
|
|
||||||
text: `I'm a musician based on the internet.
|
|
||||||
|
|
||||||
Find all my music on [Funkwhale](https://funkwhale.audio)!`},
|
|
||||||
tags: [],
|
|
||||||
|
|
||||||
content_category: 'music',
|
|
||||||
albums: [],
|
|
||||||
tracks_count: 1,
|
|
||||||
attributed_to: {
|
|
||||||
id: 0,
|
|
||||||
summary: "",
|
|
||||||
preferred_username: "User12345",
|
|
||||||
full_username: "User12345",
|
|
||||||
is_local: false,
|
|
||||||
domain: "myDomain.io"
|
|
||||||
},
|
|
||||||
is_local: false,
|
|
||||||
is_playable: true
|
|
||||||
},
|
|
||||||
credit: "",
|
|
||||||
joinphrase: " and ",
|
|
||||||
index: 22
|
|
||||||
}],
|
|
||||||
disc_number: 7,
|
|
||||||
|
|
||||||
listen_url: "https://funkwhale.audio",
|
|
||||||
creation_date: "12345",
|
|
||||||
attributed_to: {
|
|
||||||
id: 0,
|
|
||||||
summary: "",
|
|
||||||
preferred_username: "User12345",
|
|
||||||
full_username: "User12345",
|
|
||||||
is_local: false,
|
|
||||||
domain: "myDomain.io"
|
|
||||||
},
|
|
||||||
|
|
||||||
is_playable: true,
|
|
||||||
is_local: false
|
|
||||||
}
|
|
||||||
|
|
||||||
const user: User = {
|
|
||||||
id: 12,
|
|
||||||
avatar: {
|
|
||||||
uuid: "",
|
|
||||||
urls: {
|
|
||||||
original: 'https://images.unsplash.com/photo-1524650359799-842906ca1c06?ixlib=rb-1.2.1&dl=te-nguyen-Wt7XT1R6sjU-unsplash.jpg&w=640&q=80&fm=jpg&crop=entropy&cs=tinysrgb',
|
|
||||||
medium_square_crop: 'https://images.unsplash.com/photo-1524650359799-842906ca1c06?ixlib=rb-1.2.1&dl=te-nguyen-Wt7XT1R6sjU-unsplash.jpg&w=640&q=80&fm=jpg&crop=entropy&cs=tinysrgb',
|
|
||||||
large_square_crop: 'https://images.unsplash.com/photo-1524650359799-842906ca1c06?ixlib=rb-1.2.1&dl=te-nguyen-Wt7XT1R6sjU-unsplash.jpg&w=640&q=80&fm=jpg&crop=entropy&cs=tinysrgb'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
email: "user12345@example.org",
|
|
||||||
summary: { text: "Hi! I'm Example from The Internet.", content_type: "text" },
|
|
||||||
username: "user12345",
|
|
||||||
full_username: "user12345",
|
|
||||||
instance_support_message_display_date: "?",
|
|
||||||
funkwhale_support_message_display_date: "?",
|
|
||||||
is_superuser: true,
|
|
||||||
privacy_level: "everyone"
|
|
||||||
}
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
# Designing Pages
|
# Designing Pages
|
||||||
|
|
@ -111,110 +24,17 @@ const user: User = {
|
||||||
|
|
||||||
The page grid consists of 46px wide tracks, separated by 32px wide gaps. [See examples on design.funkwhale.audio](https://design.funkwhale.audio/#/workspace/582e7be1-0cc7-11ed-87a1-ae44a720651d/e3a00150-0f5e-11ed-adb9-fff9e854a67c?page-id=e7a90671-0f5e-11ed-adb9-fff9e854a67c)
|
The page grid consists of 46px wide tracks, separated by 32px wide gaps. [See examples on design.funkwhale.audio](https://design.funkwhale.audio/#/workspace/582e7be1-0cc7-11ed-87a1-ae44a720651d/e3a00150-0f5e-11ed-adb9-fff9e854a67c?page-id=e7a90671-0f5e-11ed-adb9-fff9e854a67c)
|
||||||
|
|
||||||
### Responsivity
|
## Page sections
|
||||||
|
|
||||||
- Cards and Activities snap to the grid columns. They have intrinsic widths, expressed in the number of columns they span. For Card, it is 3 and for Activity, it is 4.
|
Use the [Layout Section component](/components/ui/layout/section) to structure the page into separate sections, each with a heading. Make sure the heading level hierarchy makes sense.
|
||||||
- On a typical laptop screen, you will have 4 albums or 3 activities side-by-side. On a typical mobile screen, you will have 1 medium card or 2 small ones in a row.
|
|
||||||
- The remaining space is evenly distributed.
|
|
||||||
- Title rows align with the content below them.
|
|
||||||
|
|
||||||
Resize the window to observe how the items move.
|
<Section :alignLeft="alignLeft" small-items h3="My albums" :action="{ text:'Go to library', to:'/' }">
|
||||||
|
<Card small solid yellow title="Album 1" />
|
||||||
|
<Card small solid green title="Album 2" />
|
||||||
|
<Card small solid blue title="Album 3" />
|
||||||
|
</Section>
|
||||||
|
|
||||||
<Layout flex>
|
Sections and their contentsare automatically aligned to the default grid.
|
||||||
<Toggle v-model="alignLeft" label="Left-align the layout"/>
|
|
||||||
</Layout>
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
<div class="preview" style="margin: 0 -40px; padding: 0 25px;">
|
|
||||||
<Layout
|
|
||||||
grid="auto / repeat(auto-fit, calc(46px * 3 + 32px * 2))"
|
|
||||||
v-bind="attributes"
|
|
||||||
>
|
|
||||||
<!-- The title row's width is a multiple of 3 rows -->
|
|
||||||
<Layout flex no-gap
|
|
||||||
style="grid-column: 1 / -1; align-self: baseline;"
|
|
||||||
>
|
|
||||||
<!-- Set distance between baseline and previous row -->
|
|
||||||
<Spacer v
|
|
||||||
:size="64"
|
|
||||||
style="outline:1px solid red; align-self: baseline;"
|
|
||||||
/>
|
|
||||||
<!-- Flexible row content -->
|
|
||||||
<!-- Note that the `h3` uses its padding to create the 24px bottom gap -->
|
|
||||||
<h3 style="align-self: baseline; padding:0 0 24px 10px; margin:0;">
|
|
||||||
Albums
|
|
||||||
</h3>
|
|
||||||
<Spacer grow />
|
|
||||||
<Button ghost thin auto align-self="baseline"
|
|
||||||
style="grid-column:-1;"
|
|
||||||
>
|
|
||||||
Show all
|
|
||||||
</Button>
|
|
||||||
</Layout>
|
|
||||||
</Layout>
|
|
||||||
<Layout solid default
|
|
||||||
style="position:relative;"
|
|
||||||
grid="auto / repeat(auto-fit, 46px)"
|
|
||||||
v-bind="attributes"
|
|
||||||
>
|
|
||||||
<Card small title="Relatively Long Album Name">
|
|
||||||
Artist Name
|
|
||||||
13 tracks
|
|
||||||
</Card>
|
|
||||||
<Card small title="Relatively Long Album Name">
|
|
||||||
Artist Name
|
|
||||||
13 tracks
|
|
||||||
</Card>
|
|
||||||
<Card small title="Relatively Long Album Name">
|
|
||||||
Artist Name
|
|
||||||
13 tracks
|
|
||||||
</Card>
|
|
||||||
<Card small title="Relatively Long Album Name">
|
|
||||||
Artist Name
|
|
||||||
13 tracks
|
|
||||||
</Card>
|
|
||||||
<Card small title="Relatively Long Album Name">
|
|
||||||
Artist Name
|
|
||||||
13 tracks
|
|
||||||
</Card>
|
|
||||||
</Layout>
|
|
||||||
|
|
||||||
<Layout
|
|
||||||
grid="auto / repeat(auto-fit, calc(46px * 4 + 32px * 3))"
|
|
||||||
v-bind="attributes"
|
|
||||||
>
|
|
||||||
<Layout flex no-gap
|
|
||||||
style="grid-column: 1 / -1; align-self: baseline;"
|
|
||||||
>
|
|
||||||
<!-- Set distance between baseline and previous row -->
|
|
||||||
<Spacer v
|
|
||||||
:size="64"
|
|
||||||
style="outline:1px solid red; align-self: baseline;"
|
|
||||||
/>
|
|
||||||
<!-- Flexible row content -->
|
|
||||||
<!-- Note that the `h3` uses its padding to create the 24px bottom gap -->
|
|
||||||
<h3 style="align-self: baseline; padding:0 0 24px 10px; margin:0;">
|
|
||||||
Tracks
|
|
||||||
</h3>
|
|
||||||
<Spacer grow />
|
|
||||||
<Button ghost thin auto align-self="baseline"
|
|
||||||
style="grid-column:-1;"
|
|
||||||
>
|
|
||||||
Show all
|
|
||||||
</Button>
|
|
||||||
</Layout>
|
|
||||||
</Layout>
|
|
||||||
<Layout solid default
|
|
||||||
style="position:relative;"
|
|
||||||
grid="auto / repeat(auto-fit, 46px)"
|
|
||||||
v-bind="attributes"
|
|
||||||
>
|
|
||||||
<Activity :track="track" :user="user" />
|
|
||||||
<Activity :track="track" :user="user" />
|
|
||||||
<Activity :track="track" :user="user" />
|
|
||||||
</Layout>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
## Navigation
|
## Navigation
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue