mirror of https://github.com/lissy93/dashy
Lets the user specify number of items per row, fixes #7
Ussage: Under `displayData` for a given section, specify `layout: grid`, and then to set the number of horizontal items, use `itemCountX: 3`. You can also set `itemCountY` for number of items vertically, but this can be infered automatically if left blank.
This commit is contained in:
parent
9020caa4e3
commit
10ec99d742
13
README.md
13
README.md
|
@ -36,6 +36,8 @@
|
||||||
<img width="800" src="https://i.ibb.co/L8YbNNc/dashy-demo2.gif" alt="Demo">
|
<img width="800" src="https://i.ibb.co/L8YbNNc/dashy-demo2.gif" alt="Demo">
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
|
![More themes and screens](https://i.ibb.co/M6nyvqW/dashy-options-screen.png)
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Running the App 🏃♂️
|
## Running the App 🏃♂️
|
||||||
|
@ -104,11 +106,16 @@ All fields are optional, unless otherwise stated.
|
||||||
- `items` - Item[]: (required) An array of items - _See **`item`** below_
|
- `items` - Item[]: (required) An array of items - _See **`item`** below_
|
||||||
- `displayData`: An object with the following fields (all optional)
|
- `displayData`: An object with the following fields (all optional)
|
||||||
- `collapsed` - Boolean: If true, the section will be collapsed initially (defaults to `false`)
|
- `collapsed` - Boolean: If true, the section will be collapsed initially (defaults to `false`)
|
||||||
- `rows` - Int: Number of rows the section should span vertically, e.g. 2 (defaults to `1`)
|
|
||||||
- `cols` - Int: Number of columns the section should span horizontally, e.g. 2 (defaults to `1`)
|
|
||||||
- `color` - String: A custom accent color for the section, as a hex code or HTML color (e.g. `#fff`)
|
- `color` - String: A custom accent color for the section, as a hex code or HTML color (e.g. `#fff`)
|
||||||
- `customStyles` - String: Custom CSS properties that should be applied to that section, e.g. `border: 2px dashed #ff0000;`
|
- `customStyles` - String: Custom CSS properties that should be applied to that section, e.g. `border: 2px dashed #ff0000;`
|
||||||
- `itemSize` - String: Specify the size for items within this group, either `small`, `medium` or `large`
|
- `itemSize` - String: Specify the size for items within this group, either `small`, `medium` or `large`
|
||||||
|
- `rows` - Int: Number of rows the section should span vertically, e.g. 2 (defaults to `1`)
|
||||||
|
- `cols` - Int: Number of columns the section should span horizontally, e.g. 2 (defaults to `1`)
|
||||||
|
- `layout` - Enum: `auto` or `grid`. If `grid` is selected, then the number of items per row can be set
|
||||||
|
- `itemCountX` - Int: Number of items horizontally (for `layout: grid`)
|
||||||
|
- `itemCountY` - Int: Number of items vertically (for `layout: grid`)
|
||||||
|
|
||||||
|
Note about `rows` and `cols`: These are defined as a proportion of the screen (rather than by number of child items), and is built using [`grid-layout`](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout). For more info, see [this example](https://i.ibb.co/HXRWVRK/how-rows-and-cols-work-in-dashy.png). In order to set the number of items that will display horizontally or vertically within a section, first set `display: grid`, and then specify values for `itemCountX`, and optionally `itemCountY`.
|
||||||
|
|
||||||
**`item`**
|
**`item`**
|
||||||
- `title` - String: The text to display on the item
|
- `title` - String: The text to display on the item
|
||||||
|
@ -174,7 +181,7 @@ This wouldn't have been quite so possible without the following components, kudo
|
||||||
- [`vue-material-tabs`](https://github.com/jairoblatt/vue-material-tabs) - Tab view component by @jairoblatt `MIT`
|
- [`vue-material-tabs`](https://github.com/jairoblatt/vue-material-tabs) - Tab view component by @jairoblatt `MIT`
|
||||||
- [`VJsoneditor`](https://github.com/yansenlei/VJsoneditor) - Interactive JSON editor component by @yansenlei `MIT`
|
- [`VJsoneditor`](https://github.com/yansenlei/VJsoneditor) - Interactive JSON editor component by @yansenlei `MIT`
|
||||||
- Forked from [`JsonEditor`](https://github.com/josdejong/jsoneditor) by @josdejong `Apache-2.0 License`
|
- Forked from [`JsonEditor`](https://github.com/josdejong/jsoneditor) by @josdejong `Apache-2.0 License`
|
||||||
- And using [`ajv`](https://github.com/ajv-validator/ajv) `MIT` JSON schema Validator [`ace`](https://github.com/ajaxorg/ace) `BSD` code editor
|
- Using [`ajv`](https://github.com/ajv-validator/ajv) `MIT` JSON schema Validator and [`ace`](https://github.com/ajaxorg/ace) `BSD` code editor
|
||||||
- [`vue-toasted`](https://github.com/shakee93/vue-toasted) - Toast notification component by @shakee93 `MIT`
|
- [`vue-toasted`](https://github.com/shakee93/vue-toasted) - Toast notification component by @shakee93 `MIT`
|
||||||
|
|
||||||
Utils:
|
Utils:
|
||||||
|
|
|
@ -11,7 +11,10 @@
|
||||||
<div v-if="!items || items.length < 1" class="no-items">
|
<div v-if="!items || items.length < 1" class="no-items">
|
||||||
No Items to Show Yet
|
No Items to Show Yet
|
||||||
</div>
|
</div>
|
||||||
<div v-else class="there-are-items">
|
<div v-else
|
||||||
|
:class="`there-are-items ${isGridLayout? 'item-group-grid': ''}`"
|
||||||
|
:style="gridStyle"
|
||||||
|
>
|
||||||
<Item
|
<Item
|
||||||
v-for="(item, index) in items"
|
v-for="(item, index) in items"
|
||||||
:id="`${index}_${makeId(item.title)}`"
|
:id="`${index}_${makeId(item.title)}`"
|
||||||
|
@ -59,9 +62,21 @@ export default {
|
||||||
IframeModal,
|
IframeModal,
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
newItemSize: function size() {
|
newItemSize() {
|
||||||
return this.displayData.itemSize || this.itemSize;
|
return this.displayData.itemSize || this.itemSize;
|
||||||
},
|
},
|
||||||
|
isGridLayout() {
|
||||||
|
return this.displayData.layout === 'grid'
|
||||||
|
|| !!(this.displayData.itemCountX || this.displayData.itemCountY);
|
||||||
|
},
|
||||||
|
gridStyle() {
|
||||||
|
let styles = '';
|
||||||
|
styles += this.displayData.itemCountX
|
||||||
|
? `grid-template-columns: repeat(${this.displayData.itemCountX}, 1fr);` : '';
|
||||||
|
styles += this.displayData.itemCountY
|
||||||
|
? `grid-template-rows: repeat(${this.displayData.itemCountY}, 1fr);` : '';
|
||||||
|
return styles;
|
||||||
|
},
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
/* Returns a unique lowercase string, based on name, for section ID */
|
/* Returns a unique lowercase string, based on name, for section ID */
|
||||||
|
@ -80,6 +95,7 @@ export default {
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
|
@import '@/styles/media-queries.scss';
|
||||||
|
|
||||||
.no-items {
|
.no-items {
|
||||||
width: 100px;
|
width: 100px;
|
||||||
|
@ -97,6 +113,27 @@ export default {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
|
&.item-group-grid {
|
||||||
|
display: grid;
|
||||||
|
@include phone {
|
||||||
|
grid-template-columns: repeat(1, 1fr);
|
||||||
|
}
|
||||||
|
@include tablet {
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
}
|
||||||
|
@include laptop {
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
}
|
||||||
|
@include monitor {
|
||||||
|
grid-template-columns: repeat(3, 1fr);
|
||||||
|
}
|
||||||
|
@include big-screen {
|
||||||
|
grid-template-columns: repeat(4, 1fr);
|
||||||
|
}
|
||||||
|
@include big-screen-up {
|
||||||
|
grid-template-columns: repeat(5, 1fr);
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
@ -35,7 +35,7 @@
|
||||||
--outline-color: none;
|
--outline-color: none;
|
||||||
--curve-factor: 5px; // Border radius for most components
|
--curve-factor: 5px; // Border radius for most components
|
||||||
--curve-factor-navbar: 16px; // Border radius for header
|
--curve-factor-navbar: 16px; // Border radius for header
|
||||||
--dimming-factor: 0.8; // Opacity for semi-transparent components
|
--dimming-factor: 0.7; // Opacity for semi-transparent components
|
||||||
|
|
||||||
/* Settings for specific components */
|
/* Settings for specific components */
|
||||||
--item-group-padding: 5px; // Determines width of item-group outline
|
--item-group-padding: 5px; // Determines width of item-group outline
|
||||||
|
|
|
@ -25,8 +25,9 @@
|
||||||
:displayData="getDisplayData(section)"
|
:displayData="getDisplayData(section)"
|
||||||
:groupId="`section-${index}`"
|
:groupId="`section-${index}`"
|
||||||
:items="filterTiles(section.items)"
|
:items="filterTiles(section.items)"
|
||||||
|
:itemSize="itemSizeBound"
|
||||||
@itemClicked="finishedSearching()"
|
@itemClicked="finishedSearching()"
|
||||||
:itemSize="itemSizeBound"
|
@change-modal-visibility="updateModalVisibility"
|
||||||
:class="(filterTiles(section.items).length === 0 && searchValue) ? 'no-results' : ''"
|
:class="(filterTiles(section.items).length === 0 && searchValue) ? 'no-results' : ''"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
Loading…
Reference in New Issue