From a5cc115fa681b481cdbf2057868bf232eb2326e9 Mon Sep 17 00:00:00 2001
From: schlagmichdoch <schlagmichdoch@users.noreply.github.com>
Date: Tue, 12 Dec 2023 13:39:55 +0100
Subject: [PATCH] - Fix theme-wrapper size on touch devices - Make x-instructor
 shrinkable on small screens - Evaluate x-Peers overflow when header expand
 button is clicked - Refactor padding/margin classnames

---
 public/index.html             | 58 +++++++++++++++++------------------
 public/scripts/ui-main.js     |  8 +++--
 public/scripts/ui.js          |  3 +-
 public/styles/styles-main.css | 49 +++++++++++++++++++----------
 4 files changed, 69 insertions(+), 49 deletions(-)

diff --git a/public/index.html b/public/index.html
index 2d8f294..0e4bdcf 100644
--- a/public/index.html
+++ b/public/index.html
@@ -104,12 +104,12 @@
     <!-- Center -->
     <div id="center" class="opacity-0">
         <!-- Peers -->
-        <x-peers class="center grow"></x-peers>
+        <x-peers class="center grow-5"></x-peers>
         <x-no-peers class="center grow fade-in no-animation-on-load" data-i18n-key="instructions.no-peers" data-i18n-attrs="data-drop-bg">
             <h2 data-i18n-key="instructions.no-peers-title" data-i18n-attrs="text"></h2>
             <div data-i18n-key="instructions.no-peers-subtitle" data-i18n-attrs="text"></div>
         </x-no-peers>
-        <x-instructions class="fade-in" data-i18n-key="instructions.x-instructions" data-i18n-attrs="desktop mobile data-drop-peer data-drop-bg"></x-instructions>
+        <x-instructions class="grow fade-in" data-i18n-key="instructions.x-instructions" data-i18n-attrs="desktop mobile data-drop-peer data-drop-bg"></x-instructions>
         <div class="shr-panel panel column" hidden>
             <div class="row">
                 <div class="thumb center">
@@ -128,7 +128,7 @@
                     </div>
                     <div class="image-thumb" hidden></div>
                 </div>
-                <div class="share-descriptor column p1">
+                <div class="share-descriptor column p-1">
                     <span class="descriptor-item"></span>
                     <span class="descriptor-other" hidden></span>
                 </div>
@@ -179,7 +179,7 @@
     <x-dialog id="language-select-dialog">
         <x-background class="full center">
             <x-paper shadow="2">
-                <div class="row center p2">
+                <div class="row center p-2">
                     <h2 class="dialog-title" data-i18n-key="dialogs.language-selector-title" data-i18n-attrs="text"></h2>
                 </div>
                 <div class="language-buttons">
@@ -264,10 +264,10 @@
         <form action="#">
             <x-background class="full center text-center">
                 <x-paper shadow="2">
-                    <div class="row center p2">
+                    <div class="row center p-2">
                         <h2 class="dialog-title" data-i18n-key="dialogs.pair-devices-title" data-i18n-attrs="text"></h2>
                     </div>
-                    <div class="row center p2">
+                    <div class="row center p-2">
                         <div class="column">
                             <div class="center key-qr-code pointer" data-i18n-key="dialogs.pair-devices-qr-code" data-i18n-attrs="title"></div>
                             <h1 class="center key" dir="ltr">000 000</h1>
@@ -283,7 +283,7 @@
                             <span data-i18n-key="dialogs.hr-or" data-i18n-attrs="text"></span>
                         </div>
                     </div>
-                    <div class="row center p2">
+                    <div class="row center p-2">
                         <div class="column fw">
                             <div class="input-key-container six-chars" dir="ltr">
                                 <input type="tel" class="textarea center" aria-label="pair-key-char-1" maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" autofocus contenteditable placeholder disabled>
@@ -309,7 +309,7 @@
         <form action="#">
             <x-background class="full center text-center">
                 <x-paper shadow="2">
-                    <div class="row center p2">
+                    <div class="row center p-2">
                         <h2 class="dialog-title" data-i18n-key="dialogs.edit-paired-devices-title" data-i18n-attrs="text"></h2>
                     </div>
                     <div class="paired-devices-wrapper" data-i18n-key="dialogs.paired-devices-wrapper" data-i18n-attrs="data-empty"></div>
@@ -332,10 +332,10 @@
         <form action="#">
             <x-background class="full center text-center">
                 <x-paper shadow="2">
-                    <div class="row center p2">
+                    <div class="row center p-2">
                         <h2 class="dialog-title" data-i18n-key="dialogs.temporary-public-room-title" data-i18n-attrs="text"></h2>
                     </div>
-                    <div class="row center p2">
+                    <div class="row center p-2">
                         <div class="column">
                             <div class="center key-qr-code pointer" data-i18n-key="dialogs.public-room-qr-code" data-i18n-attrs="title"></div>
                             <h1 class="center key" dir="ltr"></h1>
@@ -351,7 +351,7 @@
                             <span data-i18n-key="dialogs.hr-or" data-i18n-attrs="text"></span>
                         </div>
                     </div>
-                    <div class="row center p2">
+                    <div class="row center p-2">
                         <div class="column fw">
                             <div class="input-key-container" dir="ltr">
                                 <input type="text" class="textarea center" aria-label="room-id-char-1" maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" autofocus contenteditable placeholder disabled>
@@ -378,10 +378,10 @@
     <x-dialog id="receive-request-dialog">
         <x-background class="full center">
             <x-paper shadow="2">
-                <div class="row center p2">
+                <div class="row center p-2">
                     <h2 class="dialog-title"></h2>
                 </div>
-                <div class="row center p2">
+                <div class="row center p-2">
                     <div class="column center file-description">
                         <div>
                             <span class="display-name badge"></span>
@@ -408,10 +408,10 @@
     <x-dialog id="receive-file-dialog">
         <x-background class="full center">
             <x-paper shadow="2">
-                <div class="row center p2">
+                <div class="row center p-2">
                     <h2 class="dialog-title"></h2>
                 </div>
-                <div class="row center p2">
+                <div class="row center p-2">
                     <div class="column center file-description">
                         <div>
                             <span class="display-name badge"></span>
@@ -440,10 +440,10 @@
         <form action="#">
             <x-background class="full center">
                 <x-paper shadow="2">
-                    <div class="row center p2">
+                    <div class="row center p-2">
                         <h2 class="dialog-title" data-i18n-key="dialogs.send-message-title" data-i18n-attrs="text"></h2>
                     </div>
-                    <div class="row center p2 display-name-wrapper">
+                    <div class="row center p-2 display-name-wrapper">
                         <div class="column">
                             <div class="text-center">
                                 <span data-i18n-key="dialogs.send-message-to" data-i18n-attrs="text"></span>
@@ -451,7 +451,7 @@
                             </div>
                         </div>
                     </div>
-                    <div class="row p2">
+                    <div class="row p-2">
                         <div class="column fw">
                             <div class="fw textarea" role="textbox" data-i18n-key="dialogs.message" data-i18n-attrs="title placeholder" autofocus contenteditable></div>
                         </div>
@@ -468,16 +468,16 @@
     <x-dialog id="receive-text-dialog">
         <x-background class="full center">
             <x-paper shadow="2">
-                <div class="row center p2">
+                <div class="row center p-2">
                     <h2 class="dialog-title" class="text-center" data-i18n-key="dialogs.receive-text-title" data-i18n-attrs="text"></h2>
                 </div>
-                <div class="row center p2 display-name-wrapper">
+                <div class="row center p-2 display-name-wrapper">
                     <div class="text-center">
                         <span class="display-name badge"></span>
                         <span data-i18n-key="dialogs.has-sent" data-i18n-attrs="text"></span>
                     </div>
                 </div>
-                <div class="row center p2">
+                <div class="row center p-2">
                     <div class="column fw">
                         <div id="text" class="textarea"></div>
                     </div>
@@ -493,24 +493,24 @@
     <x-dialog id="share-text-dialog">
         <x-background class="full center">
             <x-paper shadow="2">
-                <div class="row center p2">
+                <div class="row center p-2">
                     <h2 class="dialog-title" data-i18n-key="dialogs.share-text-title" data-i18n-attrs="text"></h2>
                 </div>
-                <div class="row center p2 pb0">
+                <div class="row center p-2 pb-0">
                     <div class="column">
                         <div class="text-center">
                             <span data-i18n-key="dialogs.share-text-subtitle" data-i18n-attrs="text"></span>
                         </div>
                     </div>
                 </div>
-                <div class="row p2">
+                <div class="row p-2">
                     <div class="column fw">
                         <div class="fw textarea" role="textbox" data-i18n-key="dialogs.message" data-i18n-attrs="title placeholder" contenteditable></div>
                     </div>
                 </div>
-                <div class="row p2 center">
-                    <span class="mx1" data-i18n-key="dialogs.share-text-checkbox" data-i18n-attrs="text"></span>
-                    <label class="pointer switch mx1">
+                <div class="row p-2 center">
+                    <span class="mx-1" data-i18n-key="dialogs.share-text-checkbox" data-i18n-attrs="text"></span>
+                    <label class="pointer switch mx-1">
                         <input type="checkbox">
                         <div class="slider round"></div>
                     </label>
@@ -525,10 +525,10 @@
     <x-dialog id="base64-paste-dialog">
         <x-background class="full center">
             <x-paper shadow="2">
-                <div class="row center p2">
+                <div class="row center p-2">
                     <h2 class="dialog-title"></h2>
                 </div>
-                <div class="row p2">
+                <div class="row p-2">
                     <button class="btn btn-rounded btn-grey center" id="base64-paste-btn" title="Paste"></button>
                     <div class="textarea" title="CMD/⌘ + V" contenteditable hidden></div>
                 </div>
diff --git a/public/scripts/ui-main.js b/public/scripts/ui-main.js
index 41cf99c..409a29c 100644
--- a/public/scripts/ui-main.js
+++ b/public/scripts/ui-main.js
@@ -125,9 +125,12 @@ class HeaderUI {
     }
 
     async evaluateOverflowing() {
-        // remove and reset bracket icon before evaluating
+        // remove bracket icon before evaluating
         this.$expandBtn.setAttribute('hidden', true);
+        // reset bracket icon rotation and header overflow
         this.$expandBtn.classList.add('flipped');
+        this.$header.classList.remove('overflow-expanded');
+
 
         const rtlLocale = Localization.isCurrentLocaleRtl();
         let icon;
@@ -152,7 +155,7 @@ class HeaderUI {
         }
         else {
             // no overflowing
-            // add overflowing-hidden class
+            // remove overflowing-hidden class
             this.$header.classList.remove('overflow-hidden');
         }
     }
@@ -169,6 +172,7 @@ class HeaderUI {
             this.$header.classList.remove('overflow-expanded');
             this.$expandBtn.classList.add('flipped');
         }
+        Events.fire('header-changed');
     }
 }
 
diff --git a/public/scripts/ui.js b/public/scripts/ui.js
index 8c0efd8..3e448d6 100644
--- a/public/scripts/ui.js
+++ b/public/scripts/ui.js
@@ -37,6 +37,7 @@ class PeersUI {
         Events.on('dragleave', _ => this._onDragEnd());
         Events.on('dragend', _ => this._onDragEnd());
         Events.on('resize', _ => this._evaluateOverflowingPeers());
+        Events.on('header-changed', _ => this._evaluateOverflowingPeers());
 
         Events.on('paste', e => this._onPaste(e));
         Events.on('activate-share-mode', e => this._activateShareMode(e.detail.files, e.detail.text));
@@ -1586,7 +1587,7 @@ class EditPairedDevicesDialog extends Dialog {
                             <span class="center wrap">
                                 ${autoAcceptString}
                             </span>
-                            <label class="auto-accept switch pointer m1">
+                            <label class="auto-accept switch pointer m-1">
                                 <input type="checkbox" ${roomSecretsEntry.auto_accept ? "checked" : ""}>
                                 <div class="slider round"></div>
                             </label>
diff --git a/public/styles/styles-main.css b/public/styles/styles-main.css
index e502af3..37b2723 100644
--- a/public/styles/styles-main.css
+++ b/public/styles/styles-main.css
@@ -30,24 +30,24 @@ html {
     width: 100%;
 }
 
-.p1 {
+.p-1 {
     padding: 5px;
 }
 
-.p2 {
+.p-2 {
     padding: 10px;
 }
 
-.pb0 {
+.pb-0 {
     padding-bottom: 0;
 }
 
-.mx1 {
+.mx-1 {
     margin-left: 5px;
     margin-right: 5px;
 }
 
-.m1 {
+.m-1 {
     margin: 5px;
 }
 
@@ -75,6 +75,11 @@ html {
     flex-grow: 2;
 }
 
+.grow-5 {
+    display: flex;
+    flex-grow: 5;
+}
+
 .shrink {
     display: flex;
     flex-shrink: 1;
@@ -138,6 +143,7 @@ header {
     z-index: 20;
     top: 0;
     right: 0;
+    min-height: 56px;
 }
 
 header.overflow-hidden {
@@ -193,19 +199,26 @@ header * {
     margin-bottom: 8px;
 }
 
-#theme-wrapper:hover .icon-button:not(.selected):hover:before {
-    opacity: 0.3;
-}
-
-#theme-wrapper:hover .icon-button.selected::before {
-    opacity: 0.3;
-}
-
-@media (pointer: coarse) {
-    #theme-wrapper:hover .icon-button.selected:hover::before {
+@media (hover: hover) and (pointer: fine) {
+    #theme-wrapper:hover .icon-button:not(.selected):hover:before {
         opacity: 0.3;
     }
 
+    #theme-wrapper:hover .icon-button.selected::before {
+        opacity: 0.3;
+    }
+}
+
+@media (hover: none) and (pointer: coarse) {
+    #theme-wrapper:before {
+        opacity: 0.3 !important;
+        height: 40px !important;
+    }
+
+    #theme-wrapper .icon-button:before {
+        opacity: 0;
+    }
+
     #theme-wrapper .icon-button:not(.selected) {
         height: 0;
         opacity: 0;
@@ -830,9 +843,11 @@ x-instructions {
     position: relative;
     opacity: 0.5;
     text-align: center;
-    margin: 50px 10px 0px;
+    margin-right: 10px;
+    margin-left: 10px;
+    min-height: max(6vh, 40px);
     flex-direction: column;
-    justify-content: center;
+    justify-content: end;
 }
 
 x-instructions:not([drop-peer]):not([drop-bg]):before {