mirror of https://github.com/Lissy93/dashy.git
Marquee text, if it is too long to fit
This commit is contained in:
parent
9a57f0aeab
commit
7f645745f9
20
server.js
20
server.js
|
@ -1,14 +1,14 @@
|
|||
var connect = require('connect');
|
||||
var serveStatic = require('serve-static');
|
||||
var connect = require('connect')
|
||||
var serveStatic = require('serve-static')
|
||||
|
||||
const port = process.env.PORT || 3002;
|
||||
const port = process.env.PORT || 3002
|
||||
|
||||
try {
|
||||
connect()
|
||||
.use(serveStatic(__dirname+'/dist'))
|
||||
.listen(port, () =>
|
||||
console.log(`Boom, app is running on port ${port}`)
|
||||
);
|
||||
} catch(error) {
|
||||
console.log('Something fucked up', error);
|
||||
}
|
||||
.use(serveStatic(__dirname + '/dist'))
|
||||
.listen(port, () =>
|
||||
console.log(`Boom, app is running on port ${port}`)
|
||||
)
|
||||
} catch (error) {
|
||||
console.log('Something fucked up', error)
|
||||
}
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<div class="hello">
|
||||
<h1>{{ msg }}</h1>
|
||||
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
@ -1,6 +1,14 @@
|
|||
<template>
|
||||
<div class="item">
|
||||
{{ title }}
|
||||
<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>
|
||||
</template>
|
||||
|
||||
|
@ -8,6 +16,7 @@
|
|||
export default {
|
||||
name: 'Item',
|
||||
props: {
|
||||
id: String, // The unique ID of a tile (e.g. 001)
|
||||
title: String, // The main text of tile, required
|
||||
subtitle: String, // Optional sub-text
|
||||
description: String, // Optional tooltip hover text
|
||||
|
@ -20,6 +29,22 @@ export default {
|
|||
validator: (value) =>
|
||||
['newtab', 'sametab', 'iframe'].indexOf(value) !== -1
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return { getId: this.id }
|
||||
},
|
||||
mounted () {
|
||||
// Detects overflowing text, and allows is to marguee on hover
|
||||
// The below code is horifically bad, it is embarassing that I wrote it...
|
||||
const tileElem = document.getElementById(`tile-${this.getId}`)
|
||||
if (tileElem) {
|
||||
const isOverflowing =
|
||||
tileElem.scrollHeight > tileElem.clientHeight ||
|
||||
tileElem.scrollWidth > tileElem.clientWidth
|
||||
if (isOverflowing) {
|
||||
tileElem.className += ' is-overflowing'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
@ -27,45 +52,76 @@ export default {
|
|||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
<style scoped lang="scss">
|
||||
|
||||
// .item-group-outer {
|
||||
// width: 300px;
|
||||
// height: 500px;
|
||||
// border-radius: 10px;
|
||||
// padding: 5px;
|
||||
// display: flex;
|
||||
// flex-direction: column;
|
||||
// background: #1CA8DD;
|
||||
// background: -webkit-linear-gradient(to left top, #9F86FF, #1CA8DD, #007AE1);
|
||||
// background: linear-gradient(to left top, #9F86FF, #1CA8DD, #007AE1);
|
||||
// box-shadow: 1px 1px 2px #130f23;
|
||||
.item {
|
||||
width: 120px;
|
||||
height: 100px;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin: 8px;
|
||||
background: #607d8b33;
|
||||
text-align: center;
|
||||
padding: 5px;
|
||||
border-radius: 10px;
|
||||
box-shadow: 1px 1px 2px #373737;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
box-shadow: 1px 2px 4px #373737;
|
||||
background: #607d8b4d;
|
||||
}
|
||||
}
|
||||
.tile-title {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
width: 120px;
|
||||
height: 30px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
padding: 0;
|
||||
|
||||
// h2 {
|
||||
// color: #2f323ae6;
|
||||
// font-size: 1.5em;
|
||||
// margin: 0.4em;
|
||||
// text-shadow: 1px 1px 2px #056bc1;
|
||||
// }
|
||||
// }
|
||||
// .item-group-inner {
|
||||
// color: #1CA8DD;
|
||||
// background: #2f323ae6;
|
||||
// height: 100%;
|
||||
// width: 100%;
|
||||
// border-radius: 0 0 10px 10px;
|
||||
// display: flex;
|
||||
// justify-content: space-evenly;
|
||||
// flex-direction: column;
|
||||
// text-align: center;
|
||||
// }
|
||||
span.text {
|
||||
position: absolute;
|
||||
white-space: nowrap;
|
||||
transition: 1s;
|
||||
float: left;
|
||||
left: 0;
|
||||
}
|
||||
&:not(.is-overflowing) span.text{
|
||||
width: 100%;
|
||||
}
|
||||
.overflow-dots {
|
||||
// display: none;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// .no-items {
|
||||
// background: #607d8b33;
|
||||
// width: 100px;
|
||||
// text-align: center;
|
||||
// margin: 0 auto;
|
||||
// padding: 0.8em;
|
||||
// border-radius: 10px;
|
||||
// box-shadow: 1px 1px 2px #373737;
|
||||
// }
|
||||
.tile-title.is-overflowing {
|
||||
span.text {
|
||||
overflow: hidden;
|
||||
}
|
||||
.overflow-dots {
|
||||
display: block;
|
||||
opacity: 1;
|
||||
background: #354857;
|
||||
position: absolute;
|
||||
z-index: 5;
|
||||
right: 0;
|
||||
transition: opacity 0.1s ease-in;
|
||||
}
|
||||
}
|
||||
|
||||
.item:hover .tile-title{
|
||||
.overflow-dots {
|
||||
// display: none;
|
||||
opacity: 0;
|
||||
}
|
||||
span.text {
|
||||
transform: translateX(calc(120px - 100%));
|
||||
}
|
||||
}
|
||||
|
||||
.tile-icon {
|
||||
width: 60px;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
|
@ -5,8 +5,14 @@
|
|||
<span v-if="!items || items.length < 1" class="no-items">
|
||||
No Items to Show Yet
|
||||
</span>
|
||||
<div v-else>
|
||||
<Item title="Ahoy!"/>
|
||||
<div v-else class="there-are-items">
|
||||
<Item
|
||||
v-for="item in items"
|
||||
:key="item.id"
|
||||
:id="item.id"
|
||||
:title="item.title"
|
||||
:icon="item.icon"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -54,11 +60,11 @@ export default {
|
|||
background: #2f323ae6;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
border-radius: 0 0 10px 10px;
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.no-items {
|
||||
|
@ -69,6 +75,11 @@ export default {
|
|||
padding: 0.8em;
|
||||
border-radius: 10px;
|
||||
box-shadow: 1px 1px 2px #373737;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.there-are-items {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
|
@ -4,24 +4,27 @@
|
|||
"name": "Server Management",
|
||||
"items": [
|
||||
{
|
||||
"title": "Tile 1!",
|
||||
"id":"001",
|
||||
"title": "Server Monitoring",
|
||||
"description": "",
|
||||
"provider": "",
|
||||
"icon": "",
|
||||
"icon": "008-clock",
|
||||
"url": ""
|
||||
},
|
||||
{
|
||||
"title": "",
|
||||
"id":"002",
|
||||
"title": "Analytics",
|
||||
"description": "",
|
||||
"provider": "",
|
||||
"icon": "",
|
||||
"icon": "001-achievement",
|
||||
"url": ""
|
||||
},
|
||||
{
|
||||
"title": "",
|
||||
"id":"003",
|
||||
"title": "MongoDB Management",
|
||||
"description": "",
|
||||
"provider": "",
|
||||
"icon": "",
|
||||
"icon": "004-astrophysics-2",
|
||||
"url": ""
|
||||
}
|
||||
]
|
||||
|
|
|
@ -3,7 +3,12 @@
|
|||
<h1>{{title}}</h1>
|
||||
<span class="subtitle">{{subtitle}}</span>
|
||||
<div class="item-group-container">
|
||||
<ItemGroup v-for="item in items" :key="item.id" :title="item.name"/>
|
||||
<ItemGroup
|
||||
v-for="item in items"
|
||||
:key="item.id"
|
||||
:title="item.name"
|
||||
:items="item.items"
|
||||
/>
|
||||
<ItemGroup title="External Infrastructure"/>
|
||||
<ItemGroup title="Utilities"/>
|
||||
</div>
|
||||
|
|
Loading…
Reference in New Issue