Merge pull request #2 from andyblac/dev

Version 2.0 of card pack.
andyblac · Sep 18, 2023 · fa9ef3d · fa9ef3d
2 parents 7cb4930 + e41781a
commit fa9ef3d
Show file tree

Hide file tree

Showing 20 changed files with 747 additions and 181 deletions.
diff --git a/...ustom_card_andyblac_status_icon_only.yaml → ...info/custom_card_andyblac_count_info.yaml b/...ustom_card_andyblac_status_icon_only.yaml → ...info/custom_card_andyblac_count_info.yaml
@@ -1,11 +1,12 @@
 ---
-custom_card_andyblac_status_icon_only:
-  # v1.1
+custom_card_andyblac_count_info:
+  # v1.2.1
   template:
     - "ulm_translation_engine"
   variables:
+    ulm_custom_card_andyblac_count_info_badge_bg: true
     tap_action:
-      action: "navigate"
+      action: "[[[ return entity?.attributes?.navigation ? 'navigate' : 'more-info'; ]]]"
       navigation_path: "[[[ return entity?.attributes?.navigation ? entity?.attributes?.navigation : 'none'; ]]]"
     hold_action:
       action: "more-info"
@@ -44,7 +45,6 @@ custom_card_andyblac_status_icon_only:
     service: "[[[ return variables.hold_action.service; ]]]"
     service_data: "[[[ return variables.hold_action.service_data; ]]]"
 
-
   state:
     - value: "unavailable"
       styles:
@@ -59,43 +59,42 @@ custom_card_andyblac_status_icon_only:
             - background-color: "rgba(var(--color-red),1)"
     - styles:
         label:
-          - color: "[[[ return variables.ulm_card_status_color ? 'rgba(var(--color-'+variables.ulm_card_status_color+'),1)' : 'rgba(var(--color-theme),0.7)'; ]]]"
+          - color: "[[[ return 'rgba(var(--color-'+variables.ulm_custom_card_andyblac_count_info_color_on+'),1)'; ]]]"
           - background-color: >
-              [[[ 
-                if (variables.ulm_card_status_badge_bg) {
-                  return variables.ulm_card_status_color ? 'rgba(var(--color-'+variables.ulm_card_status_color+'),0.2)' : 'rgba(var(--color-theme),0.2)'; 
+              [[[
+                if (variables.ulm_custom_card_andyblac_count_info_badge_bg) {
+                  return variables.ulm_custom_card_andyblac_count_info_color_on ? 'rgba(var(--color-'+variables.ulm_custom_card_andyblac_count_info_color_on+'),0.2)' : 'rgba(var(--color-theme),0.15)';
                 } else {
-                  return variables.ulm_card_status_color ? 'rgba(var(--color-'+variables.ulm_card_status_color+'),0.0)' : 'rgba(var(--color-theme),0.0)'; 
+                  return 'none';
                 }
               ]]]
         icon:
-          - color: "[[[ return variables.ulm_card_status_color ? 'rgba(var(--color-'+variables.ulm_card_status_color+'),1)' : 'rgba(var(--color-theme),0.7)'; ]]]"
+          - color: "[[[ return variables.ulm_custom_card_andyblac_count_info_color_on ? 'rgba(var(--color-'+variables.ulm_custom_card_andyblac_count_info_color_on+'),1)' : 'rgba(var(--color-theme),0.7)'; ]]]"
         img_cell:
-          - background-color: "[[[ return variables.ulm_card_status_color ? 'rgba(var(--color-'+variables.ulm_card_status_color+'),0.2)' : 'rgba(var(--color-theme),0.2)'; ]]]"
+          - background-color: "[[[ return variables.ulm_custom_card_andyblac_count_info_color_on ? 'rgba(var(--color-'+variables.ulm_custom_card_andyblac_count_info_color_on+'),0.2)' : 'rgba(var(--color-theme),0.15)'; ]]]"
       id: "on"
       value: "[[[ return variables.ulm_active_state ]]]"
 
   styles:
     label:
-      - font-weight: "bold"
-      - font-size: "90%"
-      - border-radius: "[[[ return variables.ulm_card_status_badge_bg ? '50%' : '0%'; ]]]"
       - position: "absolute"
-      - right: "6%"
-      - top: "[[[ return variables.ulm_card_status_badge_bg ? '2%' : '0%'; ]]]"
-      - height: "30%"
-      - width: "30%"
-      - line-height: "24px"
-      - color: "rgba(var(--color-theme),0.2)"
-      - background-color: "rgba(var(--color-theme),0)"
+      - top: "3px"
+      - right: "3px"
+      - height: "20px"
+      - width: "20px"
+      - font-weight: "bold"
+      - font-size: "16px"
+      - color: "rgba(var(--color-theme),0.4)"
+      - background-color: "rgba(var(--color-theme),0.05)"
+      - border-radius: "50%"
     icon:
       - color: "rgba(var(--color-theme),0.2)"
     img_cell:
-      - background-color: "rgba(var(--color-theme),0.05)"
-      - border-radius: "50%"
       - position: "absolute"
       - left: "-18%"
       - top: "18%"
+      - background-color: "rgba(var(--color-theme),0.05)"
+      - border-radius: "50%"
     card:
       - border-radius: "15px"
       - box-shadow: "var(--box-shadow)"

diff --git a/custom_cards/custom_card_andyblac_person/custom_card_andyblac_person.yaml b/custom_cards/custom_card_andyblac_person/custom_card_andyblac_person.yaml
@@ -1,6 +1,6 @@
 ---
 custom_card_andyblac_person:
-  # v1.2
+  # v1.2.1
   template:
     - "ulm_translation_engine"
   variables:
@@ -35,35 +35,33 @@ custom_card_andyblac_person:
       - width: "[[[ return !variables.ulm_card_person_use_entity_picture ? '50%' : '100%'; ]]]"
       - place-self: "[[[ return !variables.ulm_card_person_use_entity_picture ? 'center' : 'stretch stretch'; ]]]"
     name:
-      - position: "absolute"
-      - font-weight: "bold"
-      - font-size: "16px"
-      - margin-top: "5%"
+      - justify-self: "start"
+      - align-self: "end"
+      - margin-top: "4%"
       - margin-left: "33%"
-      - margin-right: "20px"
-      - margin-bottom: "10%"
       - max-width: "65%"
+      - font-size: "16px"
+      - font-weight: "bold"
       - text-overflow: "ellipsis"
       - overflow: "hidden"
     label:
-      - position: "absolute"
-      - font-weight: "bold"
+      - justify-self: "start"
+      - align-self: "end"
+      - margin-top: "0%"
+      - margin-left: "33%"
+      - max-width: "65%"
       - font-size: "15px"
+      - font-weight: "bold"
       - filter: "opacity(40%)"
-      - margin-top: "17%"
-      - margin-left: "33%"
-      - margin-right: "20px"
-      - margin-bottom: "7%"
-      - max-width: "60%"
       - text-overflow: "ellipsis"
       - overflow: "hidden"
     img_cell:
-      - background-color: "rgba(var(--color-theme),0.05)"
-      - border-radius: "50%"
       - position: "absolute"
       - left: "-6%"
       - top: "18%"
       - width: "35%"
+      - background-color: "rgba(var(--color-theme),0.05)"
+      - border-radius: "50%"
     grid:
       - grid-template-areas: "'i n' 'i l'"
       - grid-template-columns: "min-content auto"
@@ -76,22 +74,22 @@ custom_card_andyblac_person:
       badge:
         - border-radius: "50%"
         - position: "absolute"
-        - left: "18%"
-        - top: "5%"
-        - height: "20px"
-        - width: "20px"
-        - border: "2px solid var(--card-background-color)"
+        - top: "0px"
+        - left: "2px"
+        - height: "18px"
+        - width: "18px"
         - font-size: "12px"
         - line-height: "16px"
         - background-color: "[[[ return (entity.state !== 'home') ? 'rgba(var(--color-green),1)' : 'rgba(var(--color-blue),1)'; ]]]"
+        - border: "2px solid var(--card-background-color)"
       battery: &card_andyblac_person_battery_styling
         - border-radius: "50%"
         - position: "absolute"
-        - left: "18%"
-        - bottom: "0%"
-        - width: "15%"
-        - height: "40%"
-        - background-color: var(--card-background-color)
+        - top: "0px"
+        - left: "26px"
+        - height: "22px"
+        - width: "22px"
+        - background-color: "var(--primary-background-color)"
   custom_fields:
     badge: >
       [[[
@@ -138,8 +136,9 @@ card_andyblac_person_battery:
   show_state: false
   styles:
     icon:
-      - width: "80%"
-      - height: "80%"
+      - bottom: "2px"
+      - width: "85%"
+      - height: "85%"
     card:
       - background: "none"
       - box-shadow: "none"