josh/dashy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Can tab over tiles

Browse Source
This commit is contained in:
Alicia Sykes
2019-08-24 18:24:04 +01:00
parent 5e56e0c3c7
commit 7ffc35afb6
3 changed files with 40 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
src/components/Item.vue
View File

@@ -1,15 +1,15 @@
<template>
<el-tooltip placement="bottom" effect="dark" :content="description" :disabled="!description">
<div class="item">
<div class="tile-title" :id="`tile-${id}`">
<span class="text">{{ title }}</span>
<div class="overflow-dots">...</div>
</div>
<img
v-if="icon"
:src="`/img/tile-icons/${icon}.png`"
class="tile-icon"
/>
<div class="item" tabindex="0">
<div class="tile-title" :id="`tile-${id}`">
<span class="text">{{ title }}</span>
<div class="overflow-dots">...</div>
</div>
<img
v-if="icon"
:src="`/img/tile-icons/${icon}.png`"
class="tile-icon"
/>
</div>
</el-tooltip>
</template>
@@ -64,7 +64,8 @@ export default {
margin: 8px;
background: #607d8b33;
text-align: center;
padding: 5px;
padding: 2px;
border: 2px solid transparent;
border-radius: 10px;
box-shadow: 1px 1px 2px #373737;
cursor: pointer;
@@ -72,6 +73,10 @@ export default {
box-shadow: 1px 2px 4px #373737;
background: #607d8b4d;
}
&:focus {
border: 2px solid #1CA8DD;
outline: none;
}
}
.tile-title {
white-space: nowrap;