46 lines
1.8 KiB
Markdown
46 lines
1.8 KiB
Markdown
<script setup lang="ts">
|
|
import { computed, ref } from 'vue'
|
|
|
|
import { type Track, type User } from '~/types'
|
|
|
|
import Card from '~/components/ui/Card.vue'
|
|
import Layout from '~/components/ui/Layout.vue'
|
|
import Toggle from '~/components/ui/Toggle.vue'
|
|
import Spacer from '~/components/ui/layout/Spacer.vue'
|
|
import Button from '~/components/ui/Button.vue'
|
|
import Activity from '~/components/ui/Activity.vue'
|
|
import Section from '~/components/ui/layout/Section.vue'
|
|
|
|
const alignLeft = ref(false)
|
|
|
|
const attributes = computed(() => ({
|
|
style: alignLeft.value ? 'justify-content: start' : ''
|
|
}))
|
|
</script>
|
|
|
|
# Designing Pages
|
|
|
|
## Grid
|
|
|
|
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)
|
|
|
|
## Page sections
|
|
|
|
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.
|
|
|
|
<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>
|
|
|
|
Sections and their contentsare automatically aligned to the default grid.
|
|
|
|
## Navigation
|
|
|
|
When most of the screen changes, users perceive it as a page navigation. They will expect the "back" button to bring them to the precious screen. In addition, they may expect the URL to contain the current page for sharing.
|
|
|
|
This makes a component a "page". In this sense, modals are pages.
|
|
|
|
Not everything we want to share with the Url replaces most of the screen. What about switching a filter?
|