fix: minor fixups for accessibility and responsive design (#948)

* fix: minor fixups for accessibility and responsive design

* fix lint
This commit is contained in:
Nolan Lawson 2019-02-06 22:23:54 -08:00 committed by GitHub
parent 157f5db690
commit 2a96e0eeda
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 50 additions and 12 deletions

View file

@ -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>

View file

@ -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">
<svg class="instance-switcher-button-svg"> <button class="instance-switcher-button"
<use xlink:href="{instance.name === $currentInstance ? '#fa-star' : '#fa-star-o'}" /> aria-label={instance.switchLabel}
</svg> title={instance.switchLabel}
</button> aria-pressed={instance.current}
on:click="onSwitchToThisInstance(event, instance.name)">
<svg class="instance-switcher-button-svg">
<use xlink:href="{instance.current ? '#fa-star' : '#fa-star-o'}" />
</svg>
</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>