smaller and bolder breadcrumb (#8566)

* smaller and bolder breadcrumb

* Use breadcrumb in settings

Co-authored-by: rijkvanzanten <rijkvanzanten@me.com>
This commit is contained in:
Ben Haynes
2021-10-07 18:16:10 -04:00
committed by GitHub
parent f64a5bef7e
commit 1383392a2f
11 changed files with 19 additions and 14 deletions

View File

@@ -49,7 +49,6 @@ body {
.v-breadcrumb {
display: flex;
align-items: center;
font-size: 12px;
.section {
display: contents;
@@ -90,9 +89,5 @@ body {
}
}
}
@media (min-width: 600px) {
font-size: inherit;
}
}
</style>

View File

@@ -1,6 +1,6 @@
<template>
<private-view :title="t('settings_data_model')">
<template #headline>{{ t('settings') }}</template>
<template #headline><v-breadcrumb :items="[{ name: t('settings'), to: '/settings' }]" /></template>
<template #title-outer:prepend>
<v-button class="header-icon" rounded disabled icon secondary>

View File

@@ -1,6 +1,8 @@
<template>
<private-view :title="collectionInfo && collectionInfo.name">
<template #headline>{{ t('settings_data_model') }}</template>
<template #headline>
<v-breadcrumb :items="[{ name: t('settings_data_model'), to: '/settings/data-model' }]" />
</template>
<template #title-outer:prepend>
<v-button class="header-icon" rounded icon exact to="/settings/data-model">
<v-icon name="arrow_back" />

View File

@@ -1,6 +1,6 @@
<template>
<private-view :title="t('settings_presets')">
<template #headline>{{ t('settings') }}</template>
<template #headline><v-breadcrumb :items="[{ name: t('settings'), to: '/settings' }]" /></template>
<template #title-outer:prepend>
<v-button class="header-icon" rounded disabled icon secondary>

View File

@@ -10,7 +10,9 @@
readonly
>
<private-view :title="t('editing_preset')">
<template #headline>{{ t('settings_presets') }}</template>
<template #headline>
<v-breadcrumb :items="[{ name: t('settings_presets'), to: '/settings/presets' }]" />
</template>
<template #title-outer:prepend>
<v-button class="header-icon" rounded icon exact :to="backLink">
<v-icon name="arrow_back" />

View File

@@ -1,6 +1,6 @@
<template>
<private-view :title="t('settings_project')">
<template #headline>{{ t('settings') }}</template>
<template #headline><v-breadcrumb :items="[{ name: t('settings'), to: '/settings' }]" /></template>
<template #title-outer:prepend>
<v-button class="header-icon" rounded disabled icon secondary>
<v-icon name="public" />

View File

@@ -1,6 +1,6 @@
<template>
<private-view :title="t('settings_permissions')">
<template #headline>{{ t('settings') }}</template>
<template #headline><v-breadcrumb :items="[{ name: t('settings'), to: '/settings' }]" /></template>
<template #title-outer:prepend>
<v-button class="header-icon" rounded disabled icon secondary>

View File

@@ -1,6 +1,8 @@
<template>
<private-view :title="loading ? t('loading') : t('editing_role', { role: item && item.name })">
<template #headline>{{ t('settings_permissions') }}</template>
<template #headline>
<v-breadcrumb :items="[{ name: t('settings_permissions'), to: '/settings/roles' }]" />
</template>
<template #title-outer:prepend>
<v-button class="header-icon" rounded icon exact :to="`/settings/roles/`">
<v-icon name="arrow_back" />

View File

@@ -11,7 +11,7 @@
collection="directus_webhooks"
>
<private-view :title="t('webhooks')">
<template #headline>{{ t('settings') }}</template>
<template #headline><v-breadcrumb :items="[{ name: t('settings'), to: '/settings' }]" /></template>
<template #title-outer:prepend>
<v-button class="header-icon" rounded disabled icon secondary>

View File

@@ -1,6 +1,8 @@
<template>
<private-view :title="title">
<template #headline>{{ t('settings_webhooks') }}</template>
<template #headline>
<v-breadcrumb :items="[{ name: t('settings_webhooks'), to: '/settings/webhooks' }]" />
</template>
<template #title-outer:prepend>
<v-button class="header-icon" rounded icon exact :to="`/settings/webhooks/`">

View File

@@ -146,6 +146,8 @@ export default defineComponent({
top: 2px;
left: 0;
color: var(--foreground-subdued);
font-weight: 600;
font-size: 12px;
white-space: nowrap;
opacity: 1;
transition: opacity var(--fast) var(--transition);