diff --git a/README.md b/README.md index 3feb4ca9..a765c4c7 100644 --- a/README.md +++ b/README.md @@ -75,6 +75,7 @@ All fields are optional, unless otherwise stated. - `cols` - Int: Number of columns the section should span horizontally, e.g. 2 (defaults to `1`) - `color` - String: A custom background 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;` + - `itemSize` - String: Specify the size for items within this group, either `small`, `medium` or `large` **`item`** - `title` - String: The text to display on the item @@ -87,9 +88,10 @@ All fields are optional, unless otherwise stated. **`icon`** Examples: - To use use a remote image, just use it's full URL, e.g. `https://i.ibb.co/710B3Yc/space-invader-x256.png` - To use a local image, save it in `./public/item-icons/` or `./public/my-category/item-icons` and specify the image as `image.png` or `my-category/image.png`. For best results, use either png or svg formats. -- To automatically fetch the icons from the website's URL, just set icon to `favicon` +- To automatically fetch an icon from items URL, just set icon field to `favicon` - To use a Font-Awesome icon, specify the category (`fas`, `fab`, `far`, `fal` or`fad`), followed by a space then `fa-` and the icon name. For example: `fas fa-rocket`, `fab fa-monero`, `fal fa-duck` or `fad fa-glass-whiskey-rocks`. Note that light (`fal`) and duotone (`fad`) icons are only available with Font Awesome Pro, to use this, you need to set you're kit ID under `appConfig.fontAwesomeKey`. + --- ## License 📜 diff --git a/src/components/LinkItems/Item.vue b/src/components/LinkItems/Item.vue index 1e5d004f..864dc61a 100644 --- a/src/components/LinkItems/Item.vue +++ b/src/components/LinkItems/Item.vue @@ -33,7 +33,6 @@ export default { subtitle: String, // Optional sub-text description: String, // Optional tooltip hover text icon: String, // Optional path to icon, within public/img/tile-icons - svg: String, // Optional vector graphic, that is then dynamically filled color: String, // Optional background color, specified in hex code url: String, // URL to the resource, optional but recommended target: { // Where resource will open, either 'newtab', 'sametab' or 'iframe' diff --git a/src/components/LinkItems/ItemGroup.vue b/src/components/LinkItems/ItemGroup.vue index 18743a69..d372cc62 100644 --- a/src/components/LinkItems/ItemGroup.vue +++ b/src/components/LinkItems/ItemGroup.vue @@ -21,7 +21,7 @@ :description="item.description" :icon="item.icon" :target="item.target" - :itemSize="itemSize" + :itemSize="newItemSize" @itemClicked="$emit('itemClicked')" @triggerModal="triggerModal" /> @@ -54,6 +54,11 @@ export default { Item, IframeModal, }, + computed: { + newItemSize: function size() { + return this.displayData.itemSize || this.itemSize; + }, + }, methods: { /* Returns a unique lowercase string, based on name, for section ID */ makeId(str) {