taigrr/homer
1
0
Fork 0
mirror of https://github.com/taigrr/homer synced 2025-01-18 04:53:12 -08:00
Code Issues Projects Releases Wiki Activity

Rewrite custom card colors to use custom CSS classes instead of styles

Browse Source
This commit is contained in:
Tom Pansino 2020-09-02 00:34:37 -07:00
parent fbe9338fd3
commit e9afa4d7dd
3 changed files with 14 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
docs/configuration.md
View File

@ -110,10 +110,8 @@ services:
subtitle: "Another example" subtitle: "Another example"
tag: "other" tag: "other"
url: "https://www.reddit.com/r/selfhosted/" url: "https://www.reddit.com/r/selfhosted/"
target: "_blank" # optionnal html a tag target attribute target: "_blank" # optional html a tag target attribute
# colors: # optional custom colors for card # class: "green" # optional custom CSS class for card, useful with custom stylesheet
# background: #66a5e2
# text: #000000
``` ```
If you choose to fetch message information from an endpoint, the output format should be: If you choose to fetch message information from an endpoint, the output format should be:

9
public/assets/custom.css.sample Normal file
View File

@ -0,0 +1,9 @@
@charset "UTF-8";
/* Custom card colors */
/* Use with `class:` property of services in config.yml */
body #app .card .green
{
background-color: #006600;
color: #00ff00;
}

6
src/components/Service.vue
View File

@ -4,7 +4,7 @@
<a :href="item.url" :target="item.target" rel="noreferrer"> <a :href="item.url" :target="item.target" rel="noreferrer">
<div <div
class="card-content" class="card-content"
:style="(item.colors && item.colors.background) ? {backgroundColor: item.colors.background} : null" :class="item.class"
> >
<div class="media"> <div class="media">
<div v-if="item.logo" class="media-left"> <div v-if="item.logo" class="media-left">
@ -20,11 +20,11 @@
<div class="media-content"> <div class="media-content">
<p <p
class="title is-4" class="title is-4"
:style="(item.colors && item.colors.text) ? {color: item.colors.text} : null" :class="item.class"
>{{ item.name }}</p> >{{ item.name }}</p>
<p <p
class="subtitle is-6" class="subtitle is-6"
:style="(item.colors && item.colors.text) ? {color: item.colors.text} : null" :class="item.class"
>{{ item.subtitle }}</p> >{{ item.subtitle }}</p>
</div> </div>
</div> </div>