(simatec) Responsive design Fix

simatec · Sep 23, 2024 · a3558f8 · a3558f8
1 parent 12cb165
commit a3558f8
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 7 deletions.
diff --git a/README.md b/README.md
@@ -46,6 +46,9 @@ When the adapter crashes or an other Code error happens, this error message that
 
 ## Changelog
 <!-- ### __WORK IN PROGRESS__ -->
+### __WORK IN PROGRESS__
+* (simatec) Responsive design Fix
+
 ### 1.8.1 (2024-09-21)
 * (simatec) small Design Fix
 

diff --git a/admin/index_m.html b/admin/index_m.html
@@ -22,8 +22,8 @@
         -->
     <!-- Load our own files -->
     <script type="text/javascript" src="words.js"></script>
-    <link rel="stylesheet" type="text/css" href="style.css" />
     <script type="text/javascript" src="index_m.js"></script>
+    <link rel="stylesheet" type="text/css" href="style.css" />
 
 </head>
 
@@ -746,9 +746,9 @@ <h6 class="title" style="background-color:#174475;"><span class="translate">Edit
                         </div>
                         <div class="col s12">
                             <ul class="tabs">
-                                <li class="tab col s6 l4"><a href="#tab-settingsPopUp" class="translate active">main settings</a></li>
-                                <li class="tab col s6 l4 tab-sunPopUp"><a href="#tab-sunPopUp" class="translate">sun protection settings</a></li>
-                                <li class="tab col s6 l4 tab-extraPopUp"><a href="#tab-extraPopUp" class="translate">Extra Settings</a></li>
+                                <li class="tab col s8 l4"><a href="#tab-settingsPopUp" class="translate active">main settings</a></li>
+                                <li class="tab col s12 l4 tab-sunPopUp"><a href="#tab-sunPopUp" class="translate">sun protection settings</a></li>
+                                <li class="tab col s8 l4 tab-extraPopUp"><a href="#tab-extraPopUp" class="translate">Extra Settings</a></li>
                             </ul>
                         </div>
                         <div id="tab-sunPopUp" class="col s12 page">

diff --git a/admin/index_m.js b/admin/index_m.js
@@ -35,6 +35,7 @@ function load(settings, onChange) {
 
     values2table('events', events, onChange, tableOnReady);
 
+    translateTable();
     showHideSettings();
 
     $('#responseOIDDialog').on('click', function () {
@@ -293,6 +294,16 @@ function load(settings, onChange) {
     }
 }
 
+function translateTable() {
+    const element = document.querySelector('#events');
+
+    const name = _('Name');
+    const objectID = _('Object-ID shutter');
+
+    element.style.setProperty('--my-name', `"${name}"`);
+    element.style.setProperty('--my-id', `"${objectID}"`);
+}
+
 function fillPosition() {
     socket.emit('getObject', 'system.config', function (err, obj) {
         if ($('#longitude').val() === '') {

diff --git a/admin/style.css b/admin/style.css
@@ -337,6 +337,7 @@
     #events tr {
         margin-bottom: 15px;
         border: 1px solid #ddd;
+        box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
         padding: 10px;
         background: #f9f9f9;
     }
@@ -350,7 +351,6 @@
     }
 
     #events td:before {
-        content: attr(data-name);
         font-weight: bold;
         display: block;
         margin-bottom: 5px;
@@ -368,9 +368,22 @@
         visibility: hidden !important;
         display: none !important;
     }
-
+    
     #events td:nth-of-type(2) {
-        text-align: center !important;
+        margin-bottom: 2.0rem;
+    }
+
+    #events td:nth-of-type(3):before {
+        content: var(--my-name);
+    }
+
+    #events td:nth-of-type(4):before {
+        content: var(--my-id);
+    }
+
+    #events td:nth-of-type(5) {
+        margin-bottom: 10px;
+        border-bottom: 1px solid #ddd;
     }
 
     .adapter-body {
@@ -400,4 +413,8 @@
     .m [type=checkbox]+span:not(.lever) {
         height: auto;
     }
+
+    .m .modal .modal-content {
+        padding: 5px;
+    }
 }