Search: use 'searchbar' where applicable, refactoring

This commit is contained in:
Pieter Vander Vennet 2024-09-03 01:14:08 +02:00
parent bcd53405c8
commit 9b8c300e77
28 changed files with 403 additions and 582 deletions

View file

@ -11,7 +11,7 @@
import CommunityIndexView from "./CommunityIndexView.svelte"
import Community from "../../assets/svg/Community.svelte"
import LoginToggle from "../Base/LoginToggle.svelte"
import { CloseButton, Sidebar } from "flowbite-svelte"
import { CloseButton } from "flowbite-svelte"
import HotkeyTable from "./HotkeyTable.svelte"
import { Utils } from "../../Utils"
import Constants from "../../Models/Constants"
@ -24,7 +24,6 @@
import MapillaryLink from "./MapillaryLink.svelte"
import Github from "../../assets/svg/Github.svelte"
import Bug from "../../assets/svg/Bug.svelte"
import Add from "../../assets/svg/Add.svelte"
import CopyrightPanel from "./CopyrightPanel.svelte"
import CopyrightAllIcons from "./CopyrightAllIcons.svelte"
import LanguagePicker from "../InputElement/LanguagePicker.svelte"
@ -49,6 +48,7 @@
import Copyright from "../../assets/svg/Copyright.svelte"
import Pencil from "../../assets/svg/Pencil.svelte"
import Squares2x2 from "@babeard/svelte-heroicons/mini/Squares2x2"
import SidebarUnit from "../Base/SidebarUnit.svelte"
export let state: ThemeViewState
let userdetails = state.osmConnection.userDetails
@ -83,7 +83,7 @@
<!-- User related: avatar, settings, favourits, logout -->
<div class="sidebar-unit">
<SidebarUnit>
<LoginToggle {state}>
<LoginButton osmConnection={state.osmConnection} slot="not-logged-in"></LoginButton>
<div class="flex gap-x-4 items-center">
@ -153,11 +153,11 @@
<LanguagePicker />
</div>
</SidebarUnit>
<!-- Theme related: documentation links, download, ... -->
<div class="sidebar-unit">
<SidebarUnit>
<h3>
<Tr t={t.aboutCurrentThemeTitle} />
</h3>
@ -218,11 +218,11 @@
<Tr t={Translations.t.general.attribution.openOsmcha.Subs({ theme: layout.title })} />
</a>
{/if}
</div>
</SidebarUnit>
<!-- Other links and tools for the given location: open iD/JOSM; community index, ... -->
<div class="sidebar-unit">
<SidebarUnit>
<h3>
<Tr t={t.moreUtilsTitle} />
@ -244,11 +244,11 @@
<MapillaryLink large={false} mapProperties={state.mapProperties} />
</If>
</div>
</SidebarUnit>
<!-- About MC: various outward links, legal info, ... -->
<div class="sidebar-unit">
<SidebarUnit>
<h3>
<Tr t={Translations.t.general.menu.aboutMapComplete} />
@ -325,58 +325,8 @@
<div class="subtle self-end">
{Constants.vNumber}
</div>
</div>
</SidebarUnit>
</div>
<style>
:global(.sidebar-unit) {
display: flex;
flex-direction: column;
row-gap: 0.25rem;
background: var(--background-color);
padding: 0.5rem;
border-radius: 0.5rem;
}
:global(.sidebar-unit > h3) {
margin-top: 0;
margin-bottom: 0.5rem;
padding: 0.25rem;
}
:global(.sidebar-button svg, .sidebar-button img) {
width: 1.5rem;
height: 1.5rem;
margin-right: 0.5rem;
flex-shrink: 0;
}
:global(.sidebar-button .weblate-link > svg) {
width: 0.75rem;
height: 0.75rem;
flex-shrink: 0;
}
:global(.sidebar-button, .sidebar-unit > a) {
display: flex;
align-items: center;
border-radius: 0.25rem !important;
padding: 0.4rem 0.75rem !important;
text-decoration: none !important;
width: 100%;
text-align: start;
}
:global(.sidebar-button > svg , .sidebar-button > img, .sidebar-unit a > img, .sidebar-unit > a svg) {
margin-right: 0.5rem;
flex-shrink: 0;
}
:global(.sidebar-button:hover, .sidebar-unit > a:hover) {
background: var(--low-interaction-background) !important;
}
</style>