Add option to set Moon position on card

scripts/add-missing-translations.js

@@ -0,0 +1,47 @@
+/* eslint-disable */
+const fs = require('fs');
+const path = require('path');
+
+// Paths
+const translationsDir = path.join(__dirname, '../src/languages');
+const missingTranslationsPath = path.join(__dirname, 'missing_translations.json');
+
+// Read missing translations JSON
+const missingTranslations = JSON.parse(fs.readFileSync(missingTranslationsPath, 'utf8'));
+
+// Function to update language files
+const updateLanguageFiles = () => {
+  Object.entries(missingTranslations).forEach(([languageFile, translations]) => {
+    const languageFilePath = path.join(translationsDir, languageFile);
+
+    // Check if the language file exists
+    if (fs.existsSync(languageFilePath)) {
+      // Read the language file content
+      const languageData = JSON.parse(fs.readFileSync(languageFilePath, 'utf8'));
+
+      // Add missing translations
+      translations.forEach(({ key, value }) => {
+        const keyParts = key.split('.');
+
+        // Add the nested keys and values to the language JSON file
+        let current = languageData;
+        keyParts.forEach((part, index) => {
+          if (index === keyParts.length - 1) {
+            current[part] = value; // Add the value at the final key
+          } else {
+            current = current[part] = current[part] || {}; // Continue nesting
+          }
+        });
+      });
+
+      // Write the updated data back to the language file
+      fs.writeFileSync(languageFilePath, JSON.stringify(languageData, null, 2), 'utf8');
+      console.log(`Updated ${languageFile}`);
+    } else {
+      console.log(`Language file ${languageFile} not found.`);
+    }
+  });
+};
+
+// Run the script
+updateLanguageFiles();

src/components/moon-data.ts

@@ -28,7 +28,7 @@ export class LunarBaseData extends LitElement {
       centeredSlides: true,
       grabCursor: true,
       roundLengths: true,
-      spaceBetween: 16,
+      spaceBetween: 12,
       keyboard: {
         enabled: true,
         onlyInViewport: true,

src/css/editor.css

@@ -1,9 +1,37 @@
 .card-config {
   width: 100%;
-  margin-block: 0.5rem;
   display: flex;
   gap: 12px;
   flex-direction: column;
+  border: 1px solid var(--divider-color, rgba(0, 0, 0, 0.87));
+  justify-content: space-evenly;
+  margin: 0;
+  box-sizing: border-box;
+  padding: 8px;
+}
+
+.header-container {
+  flex: 1 1 0%;
+  display: flex;
+  border-bottom: inherit;
+  min-height: 48px;
+  align-items: center;
+  cursor: pointer;
+  overflow: hidden;
+  font-weight: 500;
+  outline: 0px;
+}
+
+.header-title {
+  flex: 1 1 0%;
+  display: flex;
+  flex-direction: column;
+}
+
+.header-title>span.secondary {
+  display: block;
+  color: var(--secondary-text-color);
+  font-size: 12px;
 }
 
 .switches {
@@ -25,7 +53,6 @@ ha-select {
   display: grid;
   grid-gap: 8px;
   grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
-  margin-bottom: 8px;
   align-items: center;
 }
 

src/css/style.css

@@ -45,6 +45,7 @@ ha-card.--background {
   width: 100%;
 }
 
+
 .lunar-card-header.flexend {
   justify-content: flex-end;
 }
@@ -93,11 +94,15 @@ h1 {
   padding: 0;
   justify-content: space-between;
   align-items: center;
-  gap: 1.5rem;
+  gap: 0.5rem;
   font-size: var(--lunar-card-label-font-size, 14px);
   text-transform: var(--lunar-card-label-text-transform, none);
 }
 
+.lunar-card-content[moon-reverse] {
+  flex-direction: row-reverse;
+}
+
 .lunar-card-content.flex-col {
   flex-direction: column;
   gap: 8px;
@@ -144,16 +149,22 @@ h1 {
 
 .moon-data {
   width: 100%;
+  box-sizing: border-box;
+  margin: 0;
+  padding-inline: 0.5rem;
 }
 
 .moon-data-item {
   display: flex;
-  flex-direction: row;
+  /* flex-direction: row; */
   justify-content: space-between;
   align-items: center;
   gap: 0.5rem;
   border-bottom: 1px solid var(--divider-color);
-  padding-block: 0.25rem;
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+  width: 100%;
+  flex: 1 1 0%;
 }
 
 .moon-data-item:last-child {
@@ -162,19 +173,19 @@ h1 {
 }
 
 .moon-data-item>span.label {
-  display: block;
+  display: flex;
   color: var(--primary-text-color);
-  width: auto;
+  width: fit-content;
   text-wrap: nowrap;
+  flex: 0;
 }
 
 .moon-data-item>.value {
   display: flex;
   color: var(--primary-text-color);
   font-weight: 600;
-  width: 60%;
+  width: auto;
   text-wrap: nowrap !important;
-  justify-content: flex-end;
 }
 
 .value>span {