fix: minor fixups for accessibility and responsive design (#948)
* fix: minor fixups for accessibility and responsive design * fix lint
This commit is contained in:
parent
157f5db690
commit
2a96e0eeda
|
@ -1,4 +1,4 @@
|
||||||
<a {href} aria-label={ariaLabel || label} class="settings-list-button">
|
<a {href} aria-label={ariaLabel || label} class="settings-list-button {className ? className : ''}">
|
||||||
<span>
|
<span>
|
||||||
{label}
|
{label}
|
||||||
</span>
|
</span>
|
||||||
|
|
|
@ -4,16 +4,23 @@
|
||||||
{#if $isUserLoggedIn}
|
{#if $isUserLoggedIn}
|
||||||
<p>Instances you've logged in to:</p>
|
<p>Instances you've logged in to:</p>
|
||||||
<SettingsList label="Instances">
|
<SettingsList label="Instances">
|
||||||
{#each $loggedInInstancesAsList as instance}
|
{#each instanceStates as instance}
|
||||||
<SettingsListRow>
|
<SettingsListRow>
|
||||||
<SettingsListButton href="/settings/instances/{instance.name}"
|
<SettingsListButton className="instance-switcher-instance-name"
|
||||||
|
href="/settings/instances/{instance.name}"
|
||||||
label={instance.name}
|
label={instance.name}
|
||||||
ariaLabel="{instance.name} {instance.name === $currentInstance ? '(current instance)' : ''}" />
|
ariaLabel={instance.label} />
|
||||||
<button class="instance-switcher-button" on:click="onSwitchToThisInstance(event, instance.name)">
|
<div class="instance-switcher-button-wrapper">
|
||||||
|
<button class="instance-switcher-button"
|
||||||
|
aria-label={instance.switchLabel}
|
||||||
|
title={instance.switchLabel}
|
||||||
|
aria-pressed={instance.current}
|
||||||
|
on:click="onSwitchToThisInstance(event, instance.name)">
|
||||||
<svg class="instance-switcher-button-svg">
|
<svg class="instance-switcher-button-svg">
|
||||||
<use xlink:href="{instance.name === $currentInstance ? '#fa-star' : '#fa-star-o'}" />
|
<use xlink:href="{instance.current ? '#fa-star' : '#fa-star-o'}" />
|
||||||
</svg>
|
</svg>
|
||||||
</button>
|
</button>
|
||||||
|
</div>
|
||||||
</SettingsListRow>
|
</SettingsListRow>
|
||||||
{/each}
|
{/each}
|
||||||
</SettingsList>
|
</SettingsList>
|
||||||
|
@ -24,9 +31,29 @@
|
||||||
{/if}
|
{/if}
|
||||||
</SettingsLayout>
|
</SettingsLayout>
|
||||||
<style>
|
<style>
|
||||||
|
:global(.instance-switcher-instance-name) {
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
.instance-switcher-button-wrapper {
|
||||||
|
position: relative;
|
||||||
|
border: 1px solid var(--settings-list-item-border);
|
||||||
|
min-width: 44px;
|
||||||
|
}
|
||||||
.instance-switcher-button {
|
.instance-switcher-button {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-grow: 0;
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
bottom: 0;
|
||||||
|
right: 0;
|
||||||
|
width: 100%;
|
||||||
|
border: none;
|
||||||
|
background: none;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
margin: 1px;
|
||||||
}
|
}
|
||||||
.instance-switcher-button-svg {
|
.instance-switcher-button-svg {
|
||||||
width: 24px;
|
width: 24px;
|
||||||
|
@ -53,9 +80,20 @@
|
||||||
methods: {
|
methods: {
|
||||||
onSwitchToThisInstance (e, instanceName) {
|
onSwitchToThisInstance (e, instanceName) {
|
||||||
e.preventDefault()
|
e.preventDefault()
|
||||||
|
e.stopPropagation()
|
||||||
switchToInstance(instanceName)
|
switchToInstance(instanceName)
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
store: () => store
|
store: () => store,
|
||||||
|
computed: {
|
||||||
|
instanceStates: ({ $loggedInInstancesAsList }) => (
|
||||||
|
$loggedInInstancesAsList.map(({ name, current }) => ({
|
||||||
|
name,
|
||||||
|
current,
|
||||||
|
label: `${name} ${current ? '(current instance)' : ''}`,
|
||||||
|
switchLabel: current ? `${name} is the current instance` : `Switch to ${name}`
|
||||||
|
}))
|
||||||
|
)
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
Loading…
Reference in a new issue