Suggested New KTL class - KTLsmallscreen

[Greenlight88]

Just a thought really - wondering if the zoom feature could be combined with a media query to provide responsive design for smaller screens like laptops

I can see the KTLmobile class combined with Zoom could be used to adapt for mobile - however in case of mobile its so particular that it would need its own css - I'm more thinking for cases where design elements go into the overflow for smaller screens (eg laptop vs TV) - could we apply a new KTLclass for smaller screens?

I ran into this issue with our login screen where the form ran into the overflow on laptops

I found the KTL _zoom could fix it, but then it didn't look right on larger displays

[CSWinnall]

We could add ktlCond to zoom so you can add it if it's mobile. What do you think @cortexrd

Craig

[Greenlight88]

Thanks Craig - I think we can already do that, I'm more thinking of a media query that assessed if we're dealing with a 'small screen' (not mobile, like a laptop) - on another note my issue seems to have righted itself ... maybe it was just a latency issue

[cortexrd]

Hi @Greenlight88,

First I'm trying to reproduce that layout where your login page is sort of "modal" against the background. How did you do that? I tried a modal login but it's doesn't switch to modal.

Anyways, I don't think I'd integrate this as part of the KTL for now.

But what you can do is add some custom code that, when a view is rendered, you check if it's a login screen and if window.innerHeight is less than a threshold value you decide (ex 800px), then reduce the zoom of the view using CSS.

Try this code:

$(document).on('knack-view-render.any', function (event, view, data) {
    if ($('.kn-login').length && window.innerHeight < 800) {
        $('.kn-login').css('zoom', '75%');
    }
})

Norm

[Greenlight88]

Cheers Norm - I'll give that a go if Claude's answer below doesnt work out (wow) - with the modal - I got a dev to help me - happy to share the code - there was the java below and then some class css - assumning its the java youre interested in

`$(document).on('knack-page-render.any', function () {
if ($('.kn-login').length) {
$('#knack-body, .kn-scenes').addClass('loginPage');
} else {
$('#knack-body, .kn-scenes').removeClass('loginPage');
}
$('#knack-body.loginPage .login_form #forgot-pass').text('Forget your password?');
$('#knack-body.loginPage .login_form .kn-button.is-primary').val('Continue');
$('#knack-body.loginPage .login_form').before('

or

');
});

$(document).ready(function () {
    // Define the HTML to be inserted

    $(document).on('click', '#need-account .register.kn-button', function () {
        var htmlToInsert = '<div class="line"><div class="bg-emphasis"></div><span class="text-subtle text-xs">or</span><div class="bg-emphasis"></div></div>';
        // Insert the HTML after the element with class 'view-header'
        var checkExist = setInterval(function () {
            if ($('#register_all_users').length) {
                // Element exists, insert the HTML after the .view-header element
                $('#register_all_users .view-header').after(htmlToInsert);

                // Clear the interval
                clearInterval(checkExist);
            }
        }, 300);

        var forgetPassHtml = '<div class="forget-pass"><a tabindex="5" class="ang-link" id="forgot-pass" href="#welcome-page/knack-password/forgot">Forgot your password?</a></div>';

        var checkPass = setInterval(function () {
            if ($('#register_all_users').length) {
                // Element exists, insert the HTML after the .view-header element
                $('#register_all_users .kn-input-password').after(forgetPassHtml);

                // Clear the interval
                clearInterval(checkPass);
            }
        }, 300);
    });
     var confirmClass = setInterval(function () {
        $('#kn-scene_1789').closest('#knack-body').addClass('loginPage confirmPage');
        if ($('#knack-body.loginPage').length) {
            clearInterval(confirmClass);
        }
    }, 300);
           var confirmClass = setInterval(function () {
        $('#kn-scene_1791').closest('#knack-body').addClass('loginPage confirmPage');
        if ($('#knack-body.loginPage').length) {
            clearInterval(confirmClass);
        }
    }, 300);

    var confirmClass1 = setInterval(function () {
        $('#kn-scene_1792').closest('#knack-body').addClass('loginPage confirmPage');
        if ($('#knack-body.loginPage').length) {
            clearInterval(confirmClass1);
        }
    }, 300);

    var confirmClass1 = setInterval(function () {
        $('#kn-scene_1811').closest('#knack-body').addClass('loginPage confirmPage');
        if ($('#knack-body.loginPage').length) {
            clearInterval(confirmClass1);
        }
    }, 300);

    $(document).on('click', '#forgot-pass', function () {
        var checkBtnClass = setInterval(function () {
            if ($('#knack-reset-pass').length) {
                $('#knack-reset-pass button').removeClass('kn-button');
                clearInterval(checkBtnClass);
            }
        }, 0);
    });
});

`

[cortexrd]

BTW guys, Claude.ai is incredible! I just tried it to see what he'd come up with and here's my question vs his answer:

Here's the text, copied for your convenience, if you want to try it.

// Add this script to your Knack app's JavaScript section

$(document).on('knack-view-render.any', function(event, view, data) {
  function adjustLoginZoom() {
    var loginForm = $('.kn-login-form');
    if (loginForm.length) {
      if (window.innerHeight < 800) {
        loginForm.css('zoom', '0.8');  // Adjust this value as needed
      } else {
        loginForm.css('zoom', '1');
      }
    }
  }

  // Call the function initially
  adjustLoginZoom();

  // Also call the function on window resize
  $(window).resize(adjustLoginZoom);
});

// Add this to your Knack app's CSS section

.kn-login-form {
  transform-origin: top center;
  transition: zoom 0.3s ease-in-out;
}

[Greenlight88]

Thank you both - I couldn't get any of that to work - I settled on just applying this to KTL

_zoom=[80], [ktlTarget, $('#kn-scene_257')]

And that seems to be good enough - keep it simple, I must remember