data.coop/pinafore
8
0
Fork 0
Code Issues 1 Pull requests Packages Projects Releases Wiki Activity

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

Browse source 
* 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
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/routes/_components/settings/SettingsListButton.html
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>
{label}
</span>

60
src/routes/_pages/settings/instances/index.html
View file

@ -4,16 +4,23 @@
{#if $isUserLoggedIn}
<p>Instances you've logged in to:</p>
<SettingsList label="Instances">
{#each $loggedInInstancesAsList as instance}
{#each instanceStates as instance}
<SettingsListRow>
<SettingsListButton href="/settings/instances/{instance.name}"
<SettingsListButton className="instance-switcher-instance-name"
href="/settings/instances/{instance.name}"
label={instance.name}
ariaLabel="{instance.name} {instance.name === $currentInstance ? '(current instance)' : ''}" />
<button class="instance-switcher-button" on:click="onSwitchToThisInstance(event, instance.name)">
<svg class="instance-switcher-button-svg">
<use xlink:href="{instance.name === $currentInstance ? '#fa-star' : '#fa-star-o'}" />
</svg>
</button>
ariaLabel={instance.label} />
<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">
<use xlink:href="{instance.current ? '#fa-star' : '#fa-star-o'}" />
</svg>
</button>
</div>
</SettingsListRow>
{/each}
</SettingsList>
@ -24,9 +31,29 @@
{/if}
</SettingsLayout>
<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 {
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 {
width: 24px;
@ -53,9 +80,20 @@
methods: {
onSwitchToThisInstance (e, instanceName) {
e.preventDefault()
e.stopPropagation()
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>