-
-
![]()
+
+
+
@@ -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;
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 07b23b91..38827cab 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -24,6 +24,10 @@ import * as linkData from './../data/item-data.json'
export default {
name: 'home',
+ props: {
+ title: { default: 'Panel', type: String },
+ subtitle: { default: 'All your server management tools in one place', type: String }
+ },
components: {
Header,
FilterTile,
@@ -39,18 +43,19 @@ export default {
searching (searchTile) {
this.searchTile = searchTile
},
+ getDomainFromUrl (url) {
+ var urlPattern = /^(?:https?:\/\/)?(?:w{3}\.)?([a-z\d\.-]+)\.(?:[a-z\.]{2,10})(?:[/\w\.-]*)*/;
+ var domainPattern = url.match(urlPattern);
+ return domainPattern? domainPattern[1] : ''
+ },
filterTiles (allTiles) {
return allTiles.filter(tile => {
const searchTerm = this.searchTile.toLowerCase()
return tile.title.toLowerCase().includes(searchTerm) ||
- tile.description.toLowerCase().includes(searchTerm) ||
- tile.url.toLowerCase().includes(searchTerm)
+ tile.provider.toLowerCase().includes(searchTerm) ||
+ this.getDomainFromUrl(tile.url).includes(searchTerm)
})
}
- },
- props: {
- title: { default: 'Panel', type: String },
- subtitle: { default: 'All your server management tools in one place', type: String }
}
}