allow theming individual pages with data attributes

niwla23 · Jun 25, 2022 · ddb345e · ddb345e
1 parent d574b6c
commit ddb345e
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 21 deletions.
diff --git a/package.json b/package.json
@@ -1,13 +1,13 @@
 {
   "name": "smartdashboard",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "private": true,
   "scripts": {
     "dev": "nuxt-ts",
     "build": "nuxt-ts build",
     "start": "nuxt-ts start",
     "generate": "nuxt-ts generate",
-    "pack-dist": "tar -czf smartdashboard.tar.gz dist",
+    "pack-dist": "tar -czf smartdashboard-v$(cat package.json | jq .version -r).tar.gz dist",
     "lint:js": "eslint --ext \".js,.vue\" --ignore-path .gitignore .",
     "lint": "yarn lint:js",
     "test": "jest"

diff --git a/pages/index.vue b/pages/index.vue
@@ -3,26 +3,12 @@
     <link rel="stylesheet" :href="stylesheetUrl" />
     <Slider v-if="$store.state.sliderOverlayShown" />
     <Colorpicker v-if="$store.state.colorpickerOverlayShown" />
-    <div
-      v-hammer:swipe.left="nextPage"
-      v-hammer:pan="swipeUp"
-      class="grid auto-rows-fr gap-6 h-screen p-4 bg-cover smartdashboard-bg"
-      :style="{
+    <div v-hammer:swipe.left="nextPage" v-hammer:pan="swipeUp"
+      class="grid auto-rows-fr gap-6 h-screen p-4 bg-cover smartdashboard-bg" :style="{
         'grid-template-columns': `repeat(${pageConfig.columns}, minmax(0, 1fr))`,
-      }"
-    >
-      <Item
-        v-for="item in pageConfig.items"
-        :key="item.item_name"
-        :cell-color="pageConfig.box_color"
-        :active-color="pageConfig.active_color"
-        :border-color="pageConfig.border_color"
-        :border-width="pageConfig.border_width"
-        :item-name="item.item_name"
-        :label="item.label"
-        :suffix="item.suffix"
-        :refresh="pageConfig.refresh"
-      />
+      }" :data-page-name="pageConfig.name">
+      <Item v-for="item in pageConfig.items" :key="item.item_name" :item-name="item.item_name" :label="item.label"
+        :suffix="item.suffix" :refresh="pageConfig.refresh" />
     </div>
   </main>
 </template>

diff --git a/static/themes/dark.css b/static/themes/dark.css
@@ -4,6 +4,14 @@
   padding: 2rem;
 }
 
+[data-page-name="sirens"] {
+  background-color: red;
+}
+
+[data-page-name="sirens"] > .smartdashboard-box {
+  background-color: rgb(0, 255, 221);
+}
+
 .smartdashboard-box {
   background-color: rgb(44, 44, 44);
   box-shadow: 0px 0px 26px -3px rgba(0, 0, 0, 0.5);