midgard/mapcomplete
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

UX: use more parts of Tailwind (see #2106), more tweaking of the menu bar

Browse source
This commit is contained in:
Pieter Vander Vennet 2024-08-29 23:11:59 +02:00
parent 0b2ce63284
commit da252e9fdd
9 changed files with 2718 additions and 1811 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
langs/en.json
View file

@ -300,8 +300,11 @@
"logout": "Log out", "logout": "Log out",
"mappingsAreHidden": "Some options are hidden. Use search to show more options.", "mappingsAreHidden": "Some options are hidden. Use search to show more options.",
"menu": { "menu": {
"aboutCurrentThemeTitle": "About this map",
"aboutMapComplete": "About MapComplete", "aboutMapComplete": "About MapComplete",
"filter": "Filter data" "filter": "Filter data",
"moreUtilsTitle": "Discover more",
"showIntroduction": "Show introduction"
}, },
"morescreen": { "morescreen": {
"createYourOwnTheme": "Create your own MapComplete theme from scratch", "createYourOwnTheme": "Create your own MapComplete theme from scratch",

3981
public/css/index-tailwind-output.css
View file

File diff suppressed because it is too large Load diff

4
src/UI/Base/OpenJosm.svelte
View file

@ -35,8 +35,8 @@
{#if $showButton} {#if $showButton}
<div class="flex flex-col"> <div class="flex flex-col">
<button class="as-link" on:click={openJosm}> <button class="as-link sidebar-button" on:click={openJosm}>
<Josm_logo class="h-6 w-6 pr-2" /> <Josm_logo class="h-6 w-6" />
<Tr t={t.editJosm} /> <Tr t={t.editJosm} />
</button> </button>

8
src/UI/Base/Page.svelte
View file

@ -11,7 +11,7 @@
}) })
export let fullscreen: boolean = false export let fullscreen: boolean = false
const shared = "defaultClass normal-background dark:bg-gray-800 rounded-lg border-gray-200 dark:border-gray-700 border-gray-200 dark:border-gray-700 divide-gray-200 dark:divide-gray-700 shadow-md" const shared = "in-page normal-background dark:bg-gray-800 rounded-lg border-gray-200 dark:border-gray-700 border-gray-200 dark:border-gray-700 divide-gray-200 dark:divide-gray-700 shadow-md"
let defaultClass = "relative flex flex-col mx-auto w-full divide-y " + shared let defaultClass = "relative flex flex-col mx-auto w-full divide-y " + shared
if (fullscreen) { if (fullscreen) {
defaultClass = shared defaultClass = shared
@ -25,7 +25,9 @@
</script> </script>
{#if !onlyLink} {#if !onlyLink}
<Modal open={_shown} on:close={() => shown.set(false)} size="xl" {defaultClass} {bodyClass} {dialogClass} {headerClass} <Modal open={_shown} on:close={() => shown.set(false)} outsideclose
size="xl"
{defaultClass} {bodyClass} {dialogClass} {headerClass}
color="none"> color="none">
<h1 slot="header" class="w-full"> <h1 slot="header" class="w-full">
<slot name="header" /> <slot name="header" />
@ -36,7 +38,7 @@
{/if} {/if}
</Modal> </Modal>
{:else} {:else}
<button class="as-link" on:click={() => shown.setData(true)}> <button class="as-link sidebar-button" on:click={() => shown.setData(true)}>
<slot name="link"> <slot name="link">
<slot name="header" /> <slot name="header" />
</slot> </slot>

2
src/UI/BigComponents/FilterPage.svelte
View file

@ -51,7 +51,7 @@
<Page {onlyLink} shown={state.guistate.pageStates.filter}> <Page {onlyLink} shown={state.guistate.pageStates.filter}>
<div class="flex" slot="link"> <div class="flex" slot="link">
<Filter class="h-6 w-6 pr-2" /> <Filter class="h-6 w-6" />
<Tr t={Translations.t.general.menu.filter} /> <Tr t={Translations.t.general.menu.filter} />
</div> </div>
<div class="mr-16 flex w-full flex-wrap items-center justify-between" slot="header"> <div class="mr-16 flex w-full flex-wrap items-center justify-between" slot="header">

502
src/UI/BigComponents/MenuDrawer.svelte
View file

@ -11,7 +11,7 @@
import CommunityIndexView from "./CommunityIndexView.svelte" import CommunityIndexView from "./CommunityIndexView.svelte"
import Community from "../../assets/svg/Community.svelte" import Community from "../../assets/svg/Community.svelte"
import LoginToggle from "../Base/LoginToggle.svelte" import LoginToggle from "../Base/LoginToggle.svelte"
import { Sidebar, SidebarWrapper } from "flowbite-svelte" import { Sidebar } from "flowbite-svelte"
import HotkeyTable from "./HotkeyTable.svelte" import HotkeyTable from "./HotkeyTable.svelte"
import { Utils } from "../../Utils" import { Utils } from "../../Utils"
import Constants from "../../Models/Constants" import Constants from "../../Models/Constants"
@ -45,7 +45,6 @@
import ThemeIntroPanel from "./ThemeIntroPanel.svelte" import ThemeIntroPanel from "./ThemeIntroPanel.svelte"
import Marker from "../Map/Marker.svelte" import Marker from "../Map/Marker.svelte"
import LogoutButton from "../Base/LogoutButton.svelte" import LogoutButton from "../Base/LogoutButton.svelte"
import { LanguageIcon } from "@babeard/svelte-heroicons/solid"
import { BoltIcon } from "@babeard/svelte-heroicons/mini" import { BoltIcon } from "@babeard/svelte-heroicons/mini"
import Copyright from "../../assets/svg/Copyright.svelte" import Copyright from "../../assets/svg/Copyright.svelte"
@ -59,311 +58,304 @@
let showHome = featureSwitches.featureSwitchBackToThemeOverview let showHome = featureSwitches.featureSwitchBackToThemeOverview
let pg = state.guistate.pageStates let pg = state.guistate.pageStates
export let onlyLink: boolean export let onlyLink: boolean
const t = Translations.t.general.menu
</script> </script>
<Sidebar asideClass="max-w-screen p-0 low-interaction p-6 link-underline"> <div class="flex flex-col p-2 sm:p-3 low-interaction gap-y-2 sm:gap-y-3 h-screen overflow-y-auto">
<div class="flex flex-col">
<!-- User related: avatar, settings, favourits, logout --> <!-- User related: avatar, settings, favourits, logout -->
<div class="sidebar-unit"> <div class="sidebar-unit">
<LoginToggle {state}>
<LoginButton osmConnection={state.osmConnection} slot="not-logged-in"></LoginButton>
<div class="flex gap-x-4 items-center">
{#if $userdetails.img}
<img src={$userdetails.img} class="rounded-full w-14 h-14" />
{/if}
<b>{$userdetails.name}</b>
</div>
</LoginToggle>
<Page {onlyLink} shown={pg.usersettings}>
<div class="flex" slot="header">
<CogIcon class="h-6 w-6" />
<Tr t={UserRelatedState.usersettingsConfig.title.GetRenderValue({})} />
</div>
<!-- All shown components are set by 'usersettings.json', which happily uses some special visualisations created specifically for it -->
<LoginToggle {state}> <LoginToggle {state}>
<LoginButton osmConnection={state.osmConnection} slot="not-logged-in"></LoginButton> <div class="flex flex-col" slot="not-logged-in">
<div class="flex gap-x-2"> <LanguagePicker availableLanguages={layout.language} />
{#if $userdetails.img} <Tr cls="alert" t={Translations.t.userinfo.notLoggedIn} />
<img src={$userdetails.img} class="rounded-full w-14 h-14" /> <LoginButton clss="primary" osmConnection={state.osmConnection} />
{/if}
<div class="flex flex-col justify-between">
<b>{$userdetails.name}</b>
</div>
</div> </div>
</LoginToggle> <SelectedElementView
highlightedRendering={state.guistate.highlightedUserSetting}
layer={usersettingslayer}
<Page {onlyLink} shown={pg.usersettings}> selectedElement={{
<div class="flex" slot="header">
<CogIcon class="h-6 w-6" />
<Tr t={UserRelatedState.usersettingsConfig.title.GetRenderValue({})} />
</div>
<!-- All shown components are set by 'usersettings.json', which happily uses some special visualisations created specifically for it -->
<LoginToggle {state}>
<div class="flex flex-col" slot="not-logged-in">
<LanguagePicker availableLanguages={layout.language} />
<Tr cls="alert" t={Translations.t.userinfo.notLoggedIn} />
<LoginButton clss="primary" osmConnection={state.osmConnection} />
</div>
<SelectedElementView
highlightedRendering={state.guistate.highlightedUserSetting}
layer={usersettingslayer}
selectedElement={{
type: "Feature", type: "Feature",
properties: { id: "settings" }, properties: { id: "settings" },
geometry: { type: "Point", coordinates: [0, 0] }, geometry: { type: "Point", coordinates: [0, 0] },
}} }}
{state} {state}
tags={state.userRelatedState.preferencesAsTags} tags={state.userRelatedState.preferencesAsTags}
/> />
</LoginToggle>
</Page>
<LoginToggle {state}>
<Page {onlyLink} shown={pg.favourites}>
<div class="flex" slot="header">
<HeartIcon class="h-6 w-6" />
<Tr t={Translations.t.favouritePoi.tab} />
</div>
<h3>
<Tr t={Translations.t.favouritePoi.title} />
</h3>
<div>
<Favourites {state} />
<h3>
<Tr t={Translations.t.reviews.your_reviews} />
</h3>
<ReviewsOverview {state} />
</div>
</Page>
<div class="self-end">
<LogoutButton osmConnection={state.osmConnection} />
</div>
</LoginToggle> </LoginToggle>
<div style="width: 90%">
<LanguagePicker />
</div>
</div> </Page>
<LoginToggle {state}>
<Page {onlyLink} shown={pg.favourites}>
<!-- Theme related: documentation links, download, ... -->
<div class="sidebar-unit">
<h3>
About this map
</h3>
<Page {onlyLink} shown={pg.about_theme}>
<dic slot="link">
Show introduction
</dic>
<div class="flex" slot="header"> <div class="flex" slot="header">
<Marker icons={layout.icon} size="h-4 w-4" /> <HeartIcon class="h-6 w-6" />
<Tr t={layout.title} /> <Tr t={Translations.t.favouritePoi.tab} />
</div> </div>
<ThemeIntroPanel {state} /> <h3>
</Page>
<FilterPage {onlyLink} {state} /> <Tr t={Translations.t.favouritePoi.title} />
</h3>
<RasterLayerOverview {onlyLink} {state} /> <div>
<Favourites {state} />
<Page {onlyLink} shown={pg.share}> <h3>
<div class="flex" slot="header"> <Tr t={Translations.t.reviews.your_reviews} />
<Share class="h-4 w-4" /> </h3>
<Tr t={Translations.t.general.sharescreen.title} /> <ReviewsOverview {state} />
</div> </div>
<ShareScreen {state} />
</Page> </Page>
<div class="self-end">
<LogoutButton osmConnection={state.osmConnection} />
{#if state.featureSwitches.featureSwitchEnableExport}
<Page {onlyLink} shown={pg.download}>
<div slot="header" class="flex">
<ArrowDownTray class="h-4 w-4" />
<Tr t={Translations.t.general.download.title} />
</div>
<DownloadPanel {state} />
</Page>
{/if}
{#if layout.official}
<a
class="flex"
href={"https://github.com/pietervdvn/MapComplete/blob/develop/Docs/Themes/" +
layout.id +
".md"}
target="_blank"
>
<DocumentMagnifyingGlass class="h-6 w-6" />
<Tr
t={Translations.t.general.attribution.openThemeDocumentation.Subs({
name: layout.title,
})}
/>
</a>
<a class="flex" href={Utils.OsmChaLinkFor(31, layout.id)} target="_blank">
<DocumentChartBar class="h-6 w-6" />
<Tr t={Translations.t.general.attribution.openOsmcha.Subs({ theme: layout.title })} />
</a>
{/if}
</div>
<!-- Other links and tools for the given location: open iD/JOSM; community index, ... -->
<div class="sidebar-unit">
<h3>
Discover more
</h3>
<Page {onlyLink} shown={pg.community_index}>
<div class="flex gap-x-2" slot="header">
<Community class="h-6 w-6" />
<Tr t={Translations.t.communityIndex.title} />
</div>
<CommunityIndexView location={state.mapProperties.location} />
</Page>
<If condition={featureSwitches.featureSwitchEnableLogin}>
<OpenIdEditor mapProperties={state.mapProperties} />
<OpenJosm {state} />
<MapillaryLink large={false} mapProperties={state.mapProperties} />
</If>
</div>
<!-- About MC: various outward links, legal info, ... -->
<div class="sidebar-unit">
<h3>
<Tr t={Translations.t.general.menu.aboutMapComplete} />
</h3>
{#if $showHome}
<a class="flex" href={Utils.HomepageLink()}>
<Add class="h-6 w-6" />
{#if Utils.isIframe}
<Tr t={Translations.t.general.seeIndex} />
{:else}
<Tr t={Translations.t.general.backToIndex} />
{/if}
</a>
{/if}
<div class="hidden-on-mobile">
<Page {onlyLink} shown={pg.hotkeys}>
<div class="flex" slot="header">
<BoltIcon class="w-6 h-6" />
<Tr t={ Translations.t.hotkeyDocumentation.title} />
</div>
<HotkeyTable />
</Page>
</div> </div>
</LoginToggle>
<a class="flex" href="https://github.com/pietervdvn/MapComplete/" target="_blank"> <LanguagePicker />
<Github class="h-6 w-6" />
<Tr t={Translations.t.general.attribution.gotoSourceCode} />
</a>
<a class="flex" href="https://github.com/pietervdvn/MapComplete/issues" target="_blank">
<Bug class="h-6 w-6" />
<Tr t={Translations.t.general.attribution.openIssueTracker} />
</a>
<a class="flex" href="https://en.osm.town/@MapComplete" target="_blank">
<Mastodon class="h-6 w-6" />
<Tr t={Translations.t.general.attribution.followOnMastodon} />
</a>
<a class="flex" href="https://liberapay.com/pietervdvn/" target="_blank">
<Liberapay class="h-6 w-6" />
<Tr t={Translations.t.general.attribution.donate} />
</a>
<Page {onlyLink} shown={pg.copyright}>
<div slot="header" class="flex">
<Copyright class="w-8 h-8" />
<Tr t={Translations.t.general.attribution.attributionTitle} />
</div>
<CopyrightPanel {state} />
</Page>
<Page {onlyLink} shown={pg.copyright_icons}>
<div slot="header" class="flex">
<Copyright class="w-8 h-8" />
<Tr t={ Translations.t.general.attribution.iconAttribution.title} />
</div>
<CopyrightAllIcons {state} />
</Page>
<Page {onlyLink} shown={pg.privacy}>
<div class="flex gap-x-2" slot="header">
<EyeIcon class="w-6 pr-2" />
<Tr t={Translations.t.privacy.title} />
</div>
<PrivacyPolicy {state} />
</Page>
<div class="subtle self-end">
{Constants.vNumber}
</div>
</div>
</div> </div>
</Sidebar>
<!-- Theme related: documentation links, download, ... -->
<div class="sidebar-unit">
<h3>
<Tr t={t.aboutCurrentThemeTitle} />
</h3>
<Page {onlyLink} shown={pg.about_theme}>
<div slot="link" class="flex">
<Marker icons={layout.icon} size="h-6 w-6 mr-2" />
<Tr t={t.showIntroduction} />
</div>
<div class="flex" slot="header">
<Marker icons={layout.icon} size="h-8 w-8 mr-4" />
<Tr t={layout.title} />
</div>
<ThemeIntroPanel {state} />
</Page>
<FilterPage {onlyLink} {state} />
<RasterLayerOverview {onlyLink} {state} />
<Page {onlyLink} shown={pg.share}>
<div class="flex" slot="header">
<Share class="h-4 w-4" />
<Tr t={Translations.t.general.sharescreen.title} />
</div>
<ShareScreen {state} />
</Page>
{#if state.featureSwitches.featureSwitchEnableExport}
<Page {onlyLink} shown={pg.download}>
<div slot="header" class="flex">
<ArrowDownTray class="h-4 w-4" />
<Tr t={Translations.t.general.download.title} />
</div>
<DownloadPanel {state} />
</Page>
{/if}
{#if layout.official}
<a
class="flex"
href={"https://github.com/pietervdvn/MapComplete/blob/develop/Docs/Themes/" +
layout.id +
".md"}
target="_blank"
>
<DocumentMagnifyingGlass class="h-6 w-6" />
<Tr
t={Translations.t.general.attribution.openThemeDocumentation.Subs({
name: layout.title,
})}
/>
</a>
<a class="flex" href={Utils.OsmChaLinkFor(31, layout.id)} target="_blank">
<DocumentChartBar class="h-6 w-6" />
<Tr t={Translations.t.general.attribution.openOsmcha.Subs({ theme: layout.title })} />
</a>
{/if}
</div>
<!-- Other links and tools for the given location: open iD/JOSM; community index, ... -->
<div class="sidebar-unit">
<h3>
<Tr t={t.moreUtilsTitle} />
</h3>
{#if $showHome}
<a class="flex" href={Utils.HomepageLink()}>
<Add class="h-6 w-6" />
{#if Utils.isIframe}
<Tr t={Translations.t.general.seeIndex} />
{:else}
<Tr t={Translations.t.general.backToIndex} />
{/if}
</a>
{/if}
<Page {onlyLink} shown={pg.community_index}>
<div class="flex" slot="header">
<Community class="h-6 w-6" />
<Tr t={Translations.t.communityIndex.title} />
</div>
<CommunityIndexView location={state.mapProperties.location} />
</Page>
<If condition={featureSwitches.featureSwitchEnableLogin}>
<OpenIdEditor mapProperties={state.mapProperties} />
<OpenJosm {state} />
<MapillaryLink large={false} mapProperties={state.mapProperties} />
</If>
</div>
<!-- About MC: various outward links, legal info, ... -->
<div class="sidebar-unit">
<h3>
<Tr t={Translations.t.general.menu.aboutMapComplete} />
</h3>
<div class="hidden-on-mobile">
<Page {onlyLink} shown={pg.hotkeys}>
<div class="flex" slot="header">
<BoltIcon class="w-6 h-6" />
<Tr t={ Translations.t.hotkeyDocumentation.title} />
</div>
<HotkeyTable />
</Page>
</div>
<a class="flex" href="https://github.com/pietervdvn/MapComplete/" target="_blank">
<Github class="h-6 w-6" />
<Tr t={Translations.t.general.attribution.gotoSourceCode} />
</a>
<a class="flex" href="https://github.com/pietervdvn/MapComplete/issues" target="_blank">
<Bug class="h-6 w-6" />
<Tr t={Translations.t.general.attribution.openIssueTracker} />
</a>
<a class="flex" href="https://en.osm.town/@MapComplete" target="_blank">
<Mastodon class="h-6 w-6" />
<Tr t={Translations.t.general.attribution.followOnMastodon} />
</a>
<a class="flex" href="https://liberapay.com/pietervdvn/" target="_blank">
<Liberapay class="h-6 w-6" />
<Tr t={Translations.t.general.attribution.donate} />
</a>
<Page {onlyLink} shown={pg.copyright}>
<div slot="header" class="flex">
<Copyright class="w-8 h-8" />
<Tr t={Translations.t.general.attribution.attributionTitle} />
</div>
<CopyrightPanel {state} />
</Page>
<Page {onlyLink} shown={pg.copyright_icons}>
<div slot="header" class="flex">
<Copyright class="w-8 h-8" />
<Tr t={ Translations.t.general.attribution.iconAttribution.title} />
</div>
<CopyrightAllIcons {state} />
</Page>
<Page {onlyLink} shown={pg.privacy}>
<div class="flex" slot="header">
<EyeIcon class="w-8 h-8" />
<Tr t={Translations.t.privacy.title} />
</div>
<PrivacyPolicy {state} />
</Page>
<div class="subtle self-end">
{Constants.vNumber}
</div>
</div>
</div>
<style> <style>
:global(.sidebar-unit) { :global(.sidebar-unit) {
width: calc(100% + 1rem);
margin-top: 0.75rem;
margin-left: -0.5rem;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
row-gap: 0.25rem; row-gap: 0.25rem;
background: var(--background-color); background: var(--background-color);
padding: 1rem; padding: 0.5rem;
border-radius: 0.5rem; border-radius: 0.5rem;
} }
:global(.sidebar-unit > h3) { :global(.sidebar-unit > h3) {
margin-top: 0; margin-top: 0;
margin-bottom: 0.5rem margin-bottom: 0.5rem;
padding: 0.25rem;
} }
:global(.sidebar-unit svg) { :global(.sidebar-button svg, .sidebar-button img) {
width: 1.5rem;
height: 1.5rem;
margin-right: 0.5rem;
margin-left: 0.5rem;
flex-shrink: 0;
}
:global(.sidebar-unit img) {
width: 1.5rem; width: 1.5rem;
height: 1.5rem; height: 1.5rem;
margin-right: 0.5rem; margin-right: 0.5rem;
flex-shrink: 0; flex-shrink: 0;
}
:global(.sidebar-button .weblate-link > svg) {
width: 0.75rem;
height: 0.75rem;
flex-shrink: 0;
} }
:global(.sidebar-unit a) { :global(.sidebar-button, .sidebar-button, .sidebar-unit > a) {
display: flex; display: flex;
align-items: center; align-items: center;
margin-left: 1rem; border-radius: 0.25rem !important;
padding: 0.4rem 0.75rem !important;
text-decoration: none !important;
} }
:global(.sidebar-unit button) { :global(.sidebar-button > svg , .sidebar-button > img, .sidebar-unit a > img, .sidebar-unit > a svg) {
display: flex; margin-right: 0.5rem;
align-items: center; flex-shrink: 0;
margin-left: 0.5rem;
} }
:global(.sidebar-button:hover, .sidebar-unit > a:hover) {
background: var(--low-interaction-background) !important;
}
</style> </style>

4
src/UI/Popup/TagRendering/TagRenderingQuestion.svelte
View file

@ -401,6 +401,7 @@
> >
<input <input
type="radio" type="radio"
class="self-center mr-1"
bind:group={selectedMapping} bind:group={selectedMapping}
name={"mappings-radio-" + config.id} name={"mappings-radio-" + config.id}
value={i} value={i}
@ -412,6 +413,7 @@
<label class="flex gap-x-1"> <label class="flex gap-x-1">
<input <input
type="radio" type="radio"
class="self-center mr-1"
bind:group={selectedMapping} bind:group={selectedMapping}
name={"mappings-radio-" + config.id} name={"mappings-radio-" + config.id}
value={config.mappings?.length} value={config.mappings?.length}
@ -448,6 +450,7 @@
> >
<input <input
type="checkbox" type="checkbox"
class="self-center mr-1"
name={"mappings-checkbox-" + config.id + "-" + i} name={"mappings-checkbox-" + config.id + "-" + i}
bind:checked={checkedMappings[i]} bind:checked={checkedMappings[i]}
on:keypress={(e) => onInputKeypress(e)} on:keypress={(e) => onInputKeypress(e)}
@ -458,6 +461,7 @@
<label class="flex gap-x-1"> <label class="flex gap-x-1">
<input <input
type="checkbox" type="checkbox"
class="self-center mr-1"
name={"mappings-checkbox-" + config.id + "-" + config.mappings?.length} name={"mappings-checkbox-" + config.id + "-" + config.mappings?.length}
bind:checked={checkedMappings[config.mappings.length]} bind:checked={checkedMappings[config.mappings.length]}
on:keypress={(e) => onInputKeypress(e)} on:keypress={(e) => onInputKeypress(e)}

5
src/UI/ThemeViewGUI.svelte
View file

@ -46,7 +46,6 @@
import SelectedElementPanel from "./Base/SelectedElementPanel.svelte" import SelectedElementPanel from "./Base/SelectedElementPanel.svelte"
import MenuDrawer from "./BigComponents/MenuDrawer.svelte" import MenuDrawer from "./BigComponents/MenuDrawer.svelte"
import DrawerLeft from "./Base/DrawerLeft.svelte" import DrawerLeft from "./Base/DrawerLeft.svelte"
import { ariaLabel, ariaLabelStore } from "../Utils/ariaLabel"
export let state: ThemeViewState export let state: ThemeViewState
let layout = state.layout let layout = state.layout
@ -406,7 +405,9 @@
</LoginToggle> </LoginToggle>
<DrawerLeft shown={state.guistate.menuIsOpened}> <DrawerLeft shown={state.guistate.menuIsOpened}>
<MenuDrawer onlyLink={true} {state} /> <div class="h-screen overflow-y-auto">
<MenuDrawer onlyLink={true} {state} />
</div>
</DrawerLeft> </DrawerLeft>
<MenuDrawer onlyLink={false} {state} /> <MenuDrawer onlyLink={false} {state} />

18
tailwind.config.cjs
View file

@ -1,8 +1,10 @@
/** @type {import('tailwindcss').Config} */ /** @type {import('tailwindcss').Config} */
const plugin = require("tailwindcss/plugin") const plugin = require("tailwindcss/plugin")
const flowbitePlugin = require("flowbite/plugin")
module.exports = { module.exports = {
content: ["./**/*.{html,ts,svelte}"], content: ["./**/*.{html,ts,svelte}", './node_modules/flowbite-svelte/**/*.{html,js,svelte,ts}'],
theme: { theme: {
extend: { extend: {
maxHeight: { maxHeight: {
@ -12,10 +14,24 @@ module.exports = {
colors: { colors: {
subtle: "#dbeafe", subtle: "#dbeafe",
unsubtle: "#bfdbfe", unsubtle: "#bfdbfe",
// flowbite-svelte
primary: {
50: '#FFF5F2',
100: '#FFF1EE',
200: '#FFE4DE',
300: '#FFD5CC',
400: '#FFBCAD',
500: '#FE795D',
600: '#EF562F',
700: '#EB4F27',
800: '#CC4522',
900: '#A5371B'
}
}, },
}, },
}, },
plugins: [ plugins: [
flowbitePlugin,
plugin(function ({ addVariant, e }) { plugin(function ({ addVariant, e }) {
addVariant("landscape", ({ modifySelectors, separator }) => { addVariant("landscape", ({ modifySelectors, separator }) => {
modifySelectors(({ className }) => { modifySelectors(({ className }) => {