Responsive App

[mahsashadi]

Hi How can I make my osjs application responsive? For example, I want my app to be shown in the full screen mode on phone.

[andersevenrud]

I transferred this issue to the appropriate repository.

[andersevenrud]

Currently there's only a setting to make all windows maximized on small screen devices. Note maximized -- there's no full-screen mode (i.e. window headers do not disappear on their own).

If you just want your windows to take up all available space, just do this:

const isMobile = window.offsetWidth < 600

win.on('render', () => {
  if (isMobile) {
    win.maximize()
  }
})

If you want to hide the window header/controls you can do this on window creation:

const isMobile = () => window.offsetWidth < 600

const win = proc.createWindow({
  attributes: {
    header: !isMobile()  // Or "controls" to just hide the buttons
  }
})

//
// NB: This is not dynamically updated... you can hack your way around this though:
//
let debounce
const onGlobalResize = () => {
  clearTimeout(debounce)
  debounce = setTimeout(() => {
    win.attributes.header = !isMobile()
    win._updateHeaderStyles() // Or "_updateButtons()" if you used "controls"
  }, 100)
}

win.on('render' () => window.addEventListener('resize', onGlobalResize))
win.on('destroy' () => window.removeEventListener('reszize', onGlobalResize))

FYI: You can have responsive contents of windows using https://manual.os-js.org/tutorial/window/#media-queries

[andersevenrud]

Btw, if this does not fit your needs let me know and I'll implement something.

[andersevenrud]

I'm closing this issue because there's been no response in a week. Feel free to re-open if you haven't gotten to the bottom of this. I'm just cleaning up open issues :)

[mahsashadi]

Sorry for delay in my response. In addition to have windows with dynamic sizes according to the desktop screen size, I need the window position to be changed by resizing the osjs desktop. Currently position of all windows remained fixed as the desktop resizes.

[andersevenrud]

I need the window position to be changed by resizing the osjs desktop. Currently position of all windows remained fixed as the desktop resizes.

Could you open a new issue about this ?