Optimise for mobile

WebThingsIO · Aug 11, 2023 · 6b15daf · 6b15daf
1 parent 15de927
commit 6b15daf
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 21 deletions.
diff --git a/static/css/add-group.css b/static/css/add-group.css
@@ -17,6 +17,10 @@
   text-align: center;
   font-family: 'Open Sans', sans-serif;
   font-weight: normal;
+  width: calc(100% - 18rem);
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
 }
 
 #add-group-screen h1 img {
@@ -51,3 +55,18 @@
   box-sizing: border-box;
   background-color: #7f93a1;
 }
+
+@media only screen and (max-width: 959px) {
+  #add-group-form {
+    flex-direction: column;
+  }
+
+  #add-group-title-input {
+    flex: none;
+  }
+
+  #add-group-create-button {
+    margin: 2rem auto 0 auto;
+    width: 9rem;
+  }
+}
diff --git a/static/css/group-context-menu.css b/static/css/group-context-menu.css
@@ -17,6 +17,10 @@
   text-align: center;
   font-family: 'Open Sans', sans-serif;
   font-weight: normal;
+  width: calc(100% - 18rem);
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
 }
 
 #group-context-menu h1 img {
@@ -77,3 +81,18 @@
   height: 6rem;
   background-color: #f55;
 }
+
+@media only screen and (max-width: 959px) {
+  #edit-group-form {
+    flex-direction: column;
+  }
+
+  #edit-group-title-input {
+    flex: none;
+  }
+
+  #edit-group-save-button {
+    margin: 2rem auto 0 auto;
+    width: 9rem;
+  }
+}
diff --git a/static/css/group.css b/static/css/group.css
@@ -2,7 +2,6 @@
   background: #5288af;
   border-radius: 0.5rem;
   margin: 2rem 5rem;
-  min-width: 25rem;
   min-height: 5rem;
   max-height: 3.2rem;
 }
@@ -17,28 +16,28 @@
 }
 
 .group .bar {
-  padding: 0.5rem 1rem;
+  display: flex;
+  flex-direction: row;
+  padding: 0.5rem;
   position: relative;
   height: 5rem;
   box-sizing: border-box;
 }
 
 .group .bar .title {
+  flex: 1;
   color: white;
   line-height: 4rem;
-}
-
-.group .bar .leftcontainer {
-  display: flex;
+  text-align: left;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
 }
 
 .group .bar .overflow-button {
-  position: absolute;
-  top: 0;
-  right: 0;
   width: 3.2rem;
   height: 3.2rem;
-  margin: 0.9rem;
+  margin: 0.4rem;
   padding: 0;
   background-image: url('/images/overflow-small.svg');
   background-color: transparent;
@@ -63,11 +62,10 @@
   background-position: center;
   background-repeat: no-repeat;
   border: none;
-  width: 2.4rem;
-  height: 4rem;
-  margin-right: 5px;
+  width: 3.2rem;
+  height: 3.2rem;
+  margin: 0.4rem;
   background-color: transparent;
-  cursor: grab;
 }
 
 .group.open .bar .expand-button {

diff --git a/static/js/views/group.js b/static/js/views/group.js
@@ -62,9 +62,6 @@ class Group {
     bar.setAttribute('draggable', 'true');
     bar.setAttribute('data-layout-index', '-1');
 
-    const leftcontainer = document.createElement('DIV');
-    leftcontainer.setAttribute('class', 'leftcontainer');
-
     const expandButton = document.createElement('BUTTON');
     expandButton.setAttribute('class', 'expand-button');
     const cookie = `group-${this.id}-closed=1`;
@@ -87,14 +84,12 @@ class Group {
         this.element.classList.add('open');
       }
     });
-    leftcontainer.appendChild(expandButton);
+    bar.appendChild(expandButton);
 
     const title = document.createElement('DIV');
     title.setAttribute('class', 'title');
     title.innerText = this.title;
-    leftcontainer.appendChild(title);
-
-    bar.appendChild(leftcontainer);
+    bar.appendChild(title);
 
     const groupOverflowButton = document.createElement('BUTTON');
     groupOverflowButton.setAttribute('class', 'overflow-button');