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

🐛 Re: #41 No longer cuts title text on items

This commit is contained in:
Alicia Sykes 2021-06-23 16:30:42 +01:00
parent 7af784088f
commit fd0107443a
2 changed files with 5 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -11,7 +11,6 @@
<!-- Item Text --> <!-- Item Text -->
<div :class="`tile-title ${!icon? 'bounce': ''}`" :id="`tile-${id}`" > <div :class="`tile-title ${!icon? 'bounce': ''}`" :id="`tile-${id}`" >
<span class="text">{{ title }}</span> <span class="text">{{ title }}</span>
<div class="overflow-dots">...</div>
<p class="description">{{ description }}</p> <p class="description">{{ description }}</p>
</div> </div>
<!-- Item Icon --> <!-- Item Icon -->
@ -80,18 +79,6 @@ export default {
this.$emit('itemClicked'); this.$emit('itemClicked');
} }
}, },
/**
* Detects overflowing text, shows ellipse, and allows is to marguee on hover
* The below code is horifically bad, it is embarassing that I wrote it...
*/
manageTitleEllipse() {
const tileElem = document.getElementById(`tile-${this.getId}`);
if (tileElem) {
const isOverflowing = (tileElem.scrollHeight > tileElem.clientHeight
|| tileElem.scrollWidth > tileElem.clientWidth) && this.title.length > 12;
if (isOverflowing) tileElem.className += ' is-overflowing';
} // Note from present me to past me: WTF?!
},
/* Returns configuration object for the tooltip */ /* Returns configuration object for the tooltip */
getTooltipOptions() { getTooltipOptions() {
return { return {
@ -131,7 +118,6 @@ export default {
}, },
}, },
mounted() { mounted() {
this.manageTitleEllipse();
if (this.enableStatusCheck) this.checkWebsiteStatus(); if (this.enableStatusCheck) this.checkWebsiteStatus();
if (this.statusCheckInterval > 0) { if (this.statusCheckInterval > 0) {
setInterval(this.checkWebsiteStatus, this.statusCheckInterval * 1000); setInterval(this.checkWebsiteStatus, this.statusCheckInterval * 1000);
@ -157,10 +143,14 @@ export default {
cursor: pointer; cursor: pointer;
text-decoration: none; text-decoration: none;
position: relative; position: relative;
transition: all 0.2s ease-in-out 0s;
&:hover { &:hover {
box-shadow: var(--item-hover-shadow); box-shadow: var(--item-hover-shadow);
background: var(--item-background-hover); background: var(--item-background-hover);
position: relative; position: relative;
.tile-title span.text {
white-space: pre-wrap;
}
} }
&:focus { &:focus {
outline: 2px solid var(--primary); outline: 2px solid var(--primary);
@ -177,36 +167,11 @@ export default {
text-overflow: ellipsis; text-overflow: ellipsis;
min-width: 120px; min-width: 120px;
height: 30px; height: 30px;
overflow: hidden;
position: relative; position: relative;
padding: 0; padding: 0;
z-index: 2; z-index: 2;
span.text { span.text {
position: absolute;
white-space: nowrap; white-space: nowrap;
transition: 1s;
float: left;
left: 0;
}
&:not(.is-overflowing) span.text{
width: 100%;
}
.overflow-dots {
opacity: 0;
}
&.is-overflowing {
span.text {
overflow: hidden;
}
.overflow-dots {
display: block;
opacity: 1;
background: var(--item-background);
position: absolute;
z-index: 5;
right: 0;
transition: opacity 0.1s ease-in;
}
} }
} }
@ -275,6 +240,7 @@ export default {
} }
.tile-title { .tile-title {
min-width: 100px; min-width: 100px;
max-width: 160px;
} }
} }
&.size-large { &.size-large {

5
src/styles/color-themes.scss
View File

@ -241,7 +241,6 @@ html[data-theme='colorful'] {
.item:nth-child(6n) { color: #afeb5c; border: 1px solid #afeb5c; } .item:nth-child(6n) { color: #afeb5c; border: 1px solid #afeb5c; }
.item:nth-child(7n) { color: #ebb75c; border: 1px solid #ebb75c; } .item:nth-child(7n) { color: #ebb75c; border: 1px solid #ebb75c; }
.item:nth-child(8n) { color: #eb615c; border: 1px solid #eb615c; } .item:nth-child(8n) { color: #eb615c; border: 1px solid #eb615c; }
.tile-title span.text { transition: none; }
.item:hover, .item:focus { .item:hover, .item:focus {
opacity: 0.85; opacity: 0.85;
outline: none; outline: none;
@ -404,9 +403,6 @@ html[data-theme='material'], html[data-theme='material-dark'] {
&:active { &:active {
background: #c7c7c754; background: #c7c7c754;
} }
span.text {
transition: none;
}
&.size-small { &.size-small {
padding-left: 0.5rem; padding-left: 0.5rem;
min-width: 11rem; min-width: 11rem;
@ -666,7 +662,6 @@ html[data-theme='vaporware'] {
background: #844ceb; background: #844ceb;
color: #09bfe6; color: #09bfe6;
} }
.tile-title span.text { transition: none; }
} }
div.login-page { div.login-page {