Osmwithspace/MapComplete
1
0
Fork 0
forked from MapComplete/MapComplete
Code Pull requests Activity

UI: change tablist to reflect fixmycity-design, see #2107

Browse source
This commit is contained in:
Pieter Vander Vennet 2025-08-27 02:23:06 +02:00
parent c30d52c5f4
commit 0f2e8486cd
4 changed files with 93 additions and 37 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -5444,6 +5444,46 @@ button.unstyled, .button-unstyled button {
padding: 0;
}
/****** Tablist elements *****/
.tablist {
margin: 0.25rem;
padding: 0.5rem;
border: 2px dashed var(--button-background-hover);
border-radius: 0.5rem;
display: flex;
justify-content: center;
}
.tab {
border: unset;
border-radius: 0;
transition: all;
color: var(--foreground-color);
border-bottom: 2px solid var(--foreground-color);
font-weight: bold;
margin: 0.25rem;
padding: 0.25rem;
padding-left: 0.75rem;
padding-right: 0.75rem;
}
.tab-selected {
opacity: 100%;
background: var(--interactive-background);
}
/* Actually used, don't remove*/
.tab-unselected {
background: #00000000 !important;
opacity: 60%;
}
.tab-unselected:hover {
background: var(--interactive-background);
}
/******* Other input elements ******/
.hover-alert:hover {

35
src/UI/Base/TabbedGroup.svelte
View file

@ -43,11 +43,11 @@
}
}}
>
<div class="interactive sticky top-0 flex items-center justify-between">
<TabList class="flex flex-wrap">
<div class="tablist sticky top-0 flex items-center justify-center">
<TabList class="flex items-center justify-center">
{#if $$slots.title0}
<Tab
class={({ selected }) => twJoin("tab", selected && "primary", !$condition0 && "hidden")}
class={({ selected }) => twJoin("tab", selected ? "tab-selected": "tab-unselected", !$condition0 && "hidden")}
>
<div bind:this={tabElements[0]} class="flex">
<slot name="title0">Tab 0</slot>
@ -56,7 +56,7 @@
{/if}
{#if $$slots.title1}
<Tab
class={({ selected }) => twJoin("tab", selected && "primary", !$condition1 && "hidden")}
class={({ selected }) => twJoin("tab", selected ? "tab-selected": "tab-unselected", !$condition1 && "hidden")}
>
<div bind:this={tabElements[1]} class="flex">
<slot name="title1" />
@ -65,7 +65,7 @@
{/if}
{#if $$slots.title2}
<Tab
class={({ selected }) => twJoin("tab", selected && "primary", !$condition2 && "hidden")}
class={({ selected }) => twJoin("tab", selected ? "tab-selected": "tab-unselected", !$condition2 && "hidden")}
>
<div bind:this={tabElements[2]} class="flex">
<slot name="title2" />
@ -74,7 +74,7 @@
{/if}
{#if $$slots.title3}
<Tab
class={({ selected }) => twJoin("tab", selected && "primary", !$condition3 && "hidden")}
class={({ selected }) => twJoin("tab", selected ? "tab-selected": "tab-unselected", !$condition3 && "hidden")}
>
<div bind:this={tabElements[3]} class="flex">
<slot name="title3" />
@ -83,7 +83,7 @@
{/if}
{#if $$slots.title4}
<Tab
class={({ selected }) => twJoin("tab", selected && "primary", !$condition4 && "hidden")}
class={({ selected }) => twJoin("tab", selected ? "tab-selected": "tab-unselected", !$condition4 && "hidden")}
>
<div bind:this={tabElements[4]} class="flex">
<slot name="title4" />
@ -92,7 +92,7 @@
{/if}
{#if $$slots.title5}
<Tab
class={({ selected }) => twJoin("tab", selected && "primary", !$condition5 && "hidden")}
class={({ selected }) => twJoin("tab", selected ? "tab-selected": "tab-unselected", !$condition5 && "hidden")}
>
<div bind:this={tabElements[5]} class="flex">
<slot name="title5" />
@ -101,7 +101,7 @@
{/if}
{#if $$slots.title6}
<Tab
class={({ selected }) => twJoin("tab", selected && "primary", !$condition6 && "hidden")}
class={({ selected }) => twJoin("tab", selected ? "tab-selected": "tab-unselected", !$condition6 && "hidden")}
>
<div bind:this={tabElements[6]} class="flex">
<slot name="title6" />
@ -167,19 +167,6 @@
height: calc(100% - 2rem);
}
:global(.tab) {
margin: 0.25rem;
padding: 0.25rem;
padding-left: 0.75rem;
padding-right: 0.75rem;
border-radius: 1rem;
}
:global(.tab .flex) {
align-items: center;
gap: 0.25rem;
}
:global(.tab span|div) {
align-items: center;
gap: 0.25rem;
@ -190,8 +177,4 @@
fill: var(--interactive-contrast);
}
:global(.tab-unselected) {
background-color: var(--background-color) !important;
color: var(--foreground-color) !important;
}
</style>

13
src/UI/Wikipedia/WikipediaPanel.svelte
View file

@ -31,9 +31,9 @@
<WikipediaArticle wikipediaDetails={_wikipediaStores[0]} />
{:else}
<TabGroup>
<TabList>
<TabList class="tablist">
{#each _wikipediaStores as store (store.tag)}
<Tab class={({ selected }) => (selected ? "tab-selected" : "tab-unselected")}>
<Tab class={({ selected }) => ("tab "+ (selected ? "tab-selected" : "tab-unselected"))}>
<WikipediaTitle wikipediaDetails={store} />
</Tab>
{/each}
@ -51,14 +51,5 @@
<style>
/* Actually used, don't remove*/
.tab-selected {
background-color: rgb(59 130 246);
color: rgb(255 255 255);
}
/* Actually used, don't remove*/
.tab-unselected {
background-color: rgb(255 255 255);
color: rgb(0 0 0);
}
</style>

42
src/index.css
View file

@ -293,6 +293,48 @@ button.unstyled, .button-unstyled button {
padding: 0;
}
/****** Tablist elements *****/
.tablist {
margin: 0.25rem;
padding: 0.5rem;
border: 2px dashed var(--button-background-hover);
border-radius: 0.5rem;
display: flex;
justify-content: center;
}
.tab {
border: unset;
border-radius: 0;
transition: all;
color: var(--foreground-color);
border-bottom: 2px solid var(--foreground-color);
font-weight: bold;
margin: 0.25rem;
padding: 0.25rem;
padding-left: 0.75rem;
padding-right: 0.75rem;
}
.tab-selected {
opacity: 100%;
background: var(--interactive-background);
}
/* Actually used, don't remove*/
.tab-unselected {
background: #00000000 !important;
opacity: 60%;
}
.tab-unselected:hover {
background: var(--interactive-background);
}
/******* Other input elements ******/
.hover-alert:hover {