tyler.durden
/
dashy
mirror of https://github.com/Lissy93/dashy.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

🔀 Merge pull request #284 from Lissy93/FIX/283-item-hover-glitch 

[FIX] Improves item layout, fixes hover bug
Fixes #283
This commit is contained in:
Alicia Sykes 2021-10-19 21:23:05 +01:00 committed by GitHub
parent cec78d1f1e a3da4c743f
commit de9b41c76c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 32 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
src/components/LinkItems/Item.vue
View File

@ -240,6 +240,8 @@ export default {
</script> </script>
<style lang="scss"> <style lang="scss">
@import '@/styles/style-helpers.scss';
@import '@/styles/media-queries.scss';
.item-wrapper { .item-wrapper {
flex-grow: 1; flex-grow: 1;
@ -269,10 +271,6 @@ export default {
box-shadow: var(--item-hover-shadow); box-shadow: var(--item-hover-shadow);
background: var(--item-background-hover); background: var(--item-background-hover);
color: var(--item-text-color-hover); color: var(--item-text-color-hover);
position: relative;
.tile-title span.text {
white-space: pre-wrap;
}
} }
&:focus { &:focus {
outline: 2px solid var(--primary); outline: 2px solid var(--primary);
@ -292,11 +290,18 @@ export default {
padding: 0; padding: 0;
z-index: 2; z-index: 2;
display: -webkit-box; display: -webkit-box;
-webkit-line-clamp: 3; -webkit-line-clamp: 1;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
word-break: keep-all; word-break: keep-all;
&:not(.no-icon) {
overflow: hidden;
}
span.text { span.text {
text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
overflow: hidden;
display: block;
width: -webkit-fill-available;
} }
} }
@ -371,8 +376,7 @@ export default {
margin-bottom: 0.25rem; margin-bottom: 0.25rem;
} }
.tile-title { .tile-title {
min-width: 100px; width: 100%;
max-width: 160px;
&.no-icon { &.no-icon {
text-align: left; text-align: left;
width: 100%; width: 100%;
@ -398,6 +402,7 @@ export default {
.tile-title { .tile-title {
height: auto; height: auto;
padding: 0.1rem 0.25rem; padding: 0.1rem 0.25rem;
-webkit-line-clamp: 3;
span.text { span.text {
position: relative; position: relative;
font-weight: bold; font-weight: bold;
@ -425,13 +430,28 @@ export default {
} }
} }
</style>
<!-- An un-scoped style tag, since tooltip is outside this DOM tree -->
<style lang="scss">
.disabled-link { .disabled-link {
pointer-events: none; pointer-events: none;
} }
/* Modifications for more equal width on auto-layout. This is bad code. */
.orientation-auto {
.collapsable.col-1 .wrap-size-medium {
max-width: 50%;
}
@include tablet-up {
.collapsable.col-2 .wrap-size-medium {
max-width: 25%;
}
}
@include tablet-up {
.collapsable.col-1 .wrap-size-small {
min-width: 50%;
}
.collapsable.col-2 .wrap-size-small {
min-width: 20%;
}
}
}
</style> </style>