diff --git a/server.js b/server.js
index 2074b82a..352d07dc 100644
--- a/server.js
+++ b/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);
-}
\ No newline at end of file
+ .use(serveStatic(__dirname + '/dist'))
+ .listen(port, () =>
+ console.log(`Boom, app is running on port ${port}`)
+ )
+} catch (error) {
+ console.log('Something fucked up', error)
+}
diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
index cf9b9113..12730605 100644
--- a/src/components/HelloWorld.vue
+++ b/src/components/HelloWorld.vue
@@ -1,7 +1,7 @@
{{ msg }}
-
+
diff --git a/src/components/Item.vue b/src/components/Item.vue
index b545c349..55081bdd 100644
--- a/src/components/Item.vue
+++ b/src/components/Item.vue
@@ -1,6 +1,14 @@
- {{ title }}
+
+
@@ -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'
+ }
+ }
}
}
@@ -27,45 +52,76 @@ export default {
diff --git a/src/components/ItemGroup.vue b/src/components/ItemGroup.vue
index 97d8b53b..f1299c6d 100644
--- a/src/components/ItemGroup.vue
+++ b/src/components/ItemGroup.vue
@@ -5,8 +5,14 @@
No Items to Show Yet
-
@@ -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%;
}
diff --git a/src/data/item-data.json b/src/data/item-data.json
index d51f7a9f..4d815bb3 100644
--- a/src/data/item-data.json
+++ b/src/data/item-data.json
@@ -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": ""
}
]
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 1797cc94..a8ba52d5 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -3,7 +3,12 @@
{{title}}
{{subtitle}}
-
+