added no transition to option settings

extensions-builtin/anapnoe-sd-uiux/html/svg/computer-line.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M4 16H20V5H4V16ZM13 18V20H17V22H7V20H11V18H2.9918C2.44405 18 2 17.5511 2 16.9925V4.00748C2 3.45107 2.45531 3 2.9918 3H21.0082C21.556 3 22 3.44892 22 4.00748V16.9925C22 17.5489 21.5447 18 21.0082 18H13Z"></path></svg>

extensions-builtin/anapnoe-sd-uiux/javascript/anapnoe_sd_uiux_core.js

@@ -86,6 +86,63 @@ let loggerUiUx;
 const split_instances = [];
 const anapnoe_app_id = "#anapnoe_app";
 
+function detectMobile() {
+    return ( ( window.innerWidth <= 768 ) );//&& ( window.innerHeight <= 600 ) );
+}
+function debounce(func){
+    var timer;
+    return function(event){
+      if(timer) clearTimeout(timer);
+      timer = setTimeout(func,100,event);
+    };
+}
+
+function applyDefaultLayout(isMobile){
+    anapnoe_app.querySelectorAll("[mobile]").forEach((tabItem) => {        
+        if(isMobile){
+            if(tabItem.childElementCount === 0){
+                const mobile_attr = tabItem.getAttribute("mobile");              
+                if(mobile_attr){
+                    const mobile_target = anapnoe_app.querySelector(mobile_attr);      
+                    if(mobile_target){
+                        tabItem.setAttribute("mobile-restore", `#${mobile_target.parentElement.id}`);
+                        tabItem.append(mobile_target);
+                        
+                    }           
+                }
+            }
+        }else{
+            if(tabItem.childElementCount > 0){
+                const mobile_attr = tabItem.getAttribute("mobile-restore");              
+                if(mobile_attr){
+                    const mobile_target = anapnoe_app.querySelector(mobile_attr);      
+                    if(mobile_target){
+                        mobile_target.append(tabItem.firstElementChild);
+                    }           
+                }
+            }
+        }           
+    });
+}
+
+function switchMobile(){
+    const optslayout = window.opts.uiux_default_layout;
+    //console.log(optslayout);
+    anapnoe_app.classList.add(`default-${optslayout.toLowerCase()}`);
+    if(optslayout === "Auto"){           
+        window.addEventListener("resize",debounce(function(e){
+            const isMobile = detectMobile();
+            applyDefaultLayout(isMobile);
+        }));
+    }else if(optslayout === "Mobile"){
+        applyDefaultLayout(true);
+    }else{
+        applyDefaultLayout(false);
+    }
+    
+}
+
+
 
 function getRootContainer() {
 	return document.getElementById('tab_anapnoe_sd_uiux_core');
@@ -384,13 +441,19 @@ function updateExtraNetworksCards(el){
 }
 
 function setupAnimationEventListeners(){
+
 	document.addEventListener('animationend', function (e) {
 		if (e.animationName === 'fade-out') {				
 			e.target.classList.add('hidden');
 		}
 	}); 
 
+    const notransition = window.opts.uiux_disable_transitions;
+
 	document.addEventListener('animationstart', function (e) {
+        if (notransition) {	
+            e.target.classList.add("notransition");
+        }
 		if (e.animationName === 'fade-out') {
 			if (e.target.className.indexOf('notransition') !== -1) {				
 				e.target.classList.add('hidden');
@@ -531,6 +594,8 @@ function onUiUxReady(content_div){
                 sdMaxOutputResolution(intvalue);					
             })	
             sdMaxOutputResolution(window.opts.uiux_max_resolution_output);
+
+            //switchMobile();
 			
 
 
@@ -584,6 +649,8 @@ function setupGenerateObservers(){
 
 }
 
+
+
 function initDefaultComponents(content_div) {
 	const anapnoe_app = document.querySelector(anapnoe_app_id);
 	content_div.querySelectorAll(`div.split`).forEach((el) => {
@@ -763,14 +830,6 @@ function initDefaultComponents(content_div) {
 				tabItem.classList.remove('fade-out');
 				tabItem.classList.add('fade-in');
 				//console.log('tab', tids, tabItem);
-                const mobile_attr = tabItem.getAttribute("mobile");              
-                if(mobile_attr){
-                    const mobile_target = anapnoe_app.querySelector(mobile_attr);      
-                    if(mobile_target){
-                        tabItem.append(mobile_target);
-                    }           
-                }
-
 			});
 
 			el.classList.add('active');
@@ -1244,8 +1303,9 @@ function setupLogger() {
     console.log("Maximum resolution output: ", window.opts.uiux_max_resolution_output);
     console.log("Ignore overrides: ", window.opts.uiux_ignore_overrides);
     console.log("Show ticks for input range slider: ", window.opts.uiux_show_input_range_ticks);
+    console.log("Default layout: ", window.opts.uiux_default_layout);
+    console.log("Disable transitions: ", window.opts.uiux_disable_transitions);
     
- 
 
 	const isFirefox = navigator.userAgent.toLowerCase().includes('firefox');
 	if(isFirefox){

extensions-builtin/anapnoe-sd-uiux/scripts/anapnoe_sd_uiux.py

@@ -10,7 +10,9 @@ shared.options_templates.update(shared.options_section(('uiux_core', "Anapnoe UI
     "uiux_enable_console_log": shared.OptionInfo(False, "Enable console log"),
     "uiux_max_resolution_output": shared.OptionInfo(2048, "Max resolution output for txt2img and img2img"),
     "uiux_show_input_range_ticks": shared.OptionInfo(True, "Show ticks for input range slider"),
-    "uiux_no_slider_layout": shared.OptionInfo(False, "No input range sliders"), 
+    "uiux_no_slider_layout": shared.OptionInfo(False, "No input range sliders"),
+    "uiux_disable_transitions": shared.OptionInfo(False, "Disable transitions"),
+    "uiux_default_layout": shared.OptionInfo("Auto", "Layout", gr.Radio, {"choices": ["Auto","Desktop", "Mobile"]}),    
     "uiux_ignore_overrides": shared.OptionInfo([], "Ignore Overrides", gr.CheckboxGroup, lambda: {"choices": [x[0] for x in infotext_to_setting_name_mapping]}),
     
  }))

extensions-builtin/anapnoe-sd-uiux/style.css

@@ -1856,6 +1856,12 @@ button.active .icon-sort {
     -webkit-mask-image: url(./html/svg/team-line.svg);
 }
 
+.icon-results{
+    -webkit-mask-image: url(./html/svg/computer-line.svg);
+}
+
+
+
 #contributors_grid {
     gap: 5px;
     align-items: flex-start;
@@ -2222,7 +2228,7 @@ button:hover svg {
 
 *.notransition.fade-in {
     display: flex !important;
-    position: initial !important;
+   /*  position: initial !important; */
 }
 *.notransition.fade-out {
     display: none !important;
@@ -3202,10 +3208,38 @@ input[type="checkbox"] {
     }
 }
 
+.default-desktop .mobile,
+.default-auto .mobile{
+    display:none;
+}
+.default-mobile .mobile{
+    display: flex;
+}
+.default-mobile .split-container.params{
+    min-width:100% !important;
+}
+.default-mobile .split-container.params ~ div{
+    display:none;
+}
+
+#txt2img_generate_group .generate{
+    flex-grow: 1;
+}
+
 @media (max-width: 768px) {
     .xtabs-tab span {
         display: none;
     }
+
+    .default-auto .mobile{
+        display: flex;
+    }
+    .default-auto .split-container.params{
+        min-width:100% !important;
+    }
+    .default-auto .split-container.params ~ div{
+        display:none;
+    }
 }
 
 /* Firefox */