improve mobile support

martianunlimited · Nov 13, 2023 · 8ed49ca · 8ed49ca
1 parent af8bd62
commit 8ed49ca
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 3 deletions.
diff --git a/extensions-builtin/anapnoe-sd-uiux/javascript/anapnoe_sd_uiux_core.js b/extensions-builtin/anapnoe-sd-uiux/javascript/anapnoe_sd_uiux_core.js
@@ -135,6 +135,13 @@ function applyDefaultLayout(isMobile){
             }
         }           
     });
+
+    if(isMobile){ 
+        anapnoe_app.querySelector(".accordion-vertical.expand #mask-icon-acc-arrow")?.click();
+        anapnoe_app.classList.add("default-mobile");
+    }else{
+        anapnoe_app.classList.remove("default-mobile");
+    }
 }
 
 function switchMobile(){
@@ -153,12 +160,12 @@ function switchMobile(){
             applyDefaultLayout(isMobile);
         });
         applyDefaultLayout(detectMobile());
+
     }else if(optslayout === "Mobile"){
         applyDefaultLayout(true);
     }else{
         applyDefaultLayout(false);
-    }
-
+    }   
 }
 
 
@@ -599,6 +606,7 @@ function onUiUxReady(content_div){
 			showContributors()           
             switchMobile();
 
+
             localStorage.setItem('UiUxComplete', true);
 
 		}

diff --git a/extensions-builtin/anapnoe-sd-uiux/style.css b/extensions-builtin/anapnoe-sd-uiux/style.css
@@ -1863,7 +1863,9 @@ button.active .icon-sort {
     -webkit-mask-image: url(./html/svg/computer-line.svg);
 }
 
-
+.icon-menuadd{
+    -webkit-mask-image: url(./html/svg/menu-add-fill.svg);
+}
 
 #contributors_grid {
     gap: 5px;
@@ -3245,6 +3247,7 @@ input[type="checkbox"] {
 .tab-labels [id$="2img_header"] span ,
 .aside-labels #accordion-aside .xtabs-tab span {
     display: flex !important;
+    text-transform: capitalize;
 }
 .main-labels #main-nav .xtabs-tab,
 .tab-labels [id$="2img_header"] .xtabs-tab,
@@ -3282,6 +3285,23 @@ input[type="checkbox"] {
 #split-right:not(.v-expand) #accordion-aside{
     margin-left: var(--ae-border-size);
 }
+[toggle] .wrap{
+    display:none;
+}
+
+.default-mobile #split-right:not(.v-expand) { 
+    position: fixed;
+    inset: var(--ae-panel-padding);
+    z-index: 999;
+    background-color: var(--ae-main-bg-color);
+    outline: var(--ae-border-size) solid var(--ae-main-bg-color);
+}
+.default-mobile #split-right:not(.v-expand) #accordion-aside {
+    margin-left: var(--ae-panel-padding);
+}
+.default-mobile .template > .full-height {
+    padding: var(--ae-panel-padding);
+}
 
 @media (max-width: 768px) {
     .xtabs-tab span {