media queries and FittableRows/Columns

i'm just learning about media queries. translating to the enyo world, how would one go about changing fittablerows (say map/image, list, toolbar top to bottom) to fittablecolumns (toolbar, map/image, list left to right)? is something like this possible? the only alternative i can think of is to have both ways hardcoded and just hide the one i don't need when the screen size changes (but that seems like an awful redundant waste).

thanks!

Comments

  • Usually, for handling different screen widths, we encourage the use of enyo.Panels which have the ability to collapse to a single panel view (see how our Sampler reacts to being shrunk, for example).
  • thanks! but that shows me how to collapse, where i'm looking to alter. if i'm on a tablet or smartphone and in portrait orientation, it makes sense to have my map on top, list in the middle, and a small toolbar on the bottom. however, when i go to landscape, it makes sense to have the toolbar to the side, show my map and list side-by-side.
  • edited May 2013
    This is very basic example of how you could achieve this, though it doesn't use media queries: http://jsfiddle.net/arthurthornton/45khD/

    Media queries wouldn't work for this because what they're for is, for example, saying that if the viewport width is under 400px, do certain styling; or to change styling when printing; you can see this in action by opening http://enyojs.com and resizing the window since we built it using media queries with mobile in mind. Basically, with media queries, you can change styling of elements but you can't change their classes or execute JS based on them. Since Fittable itself calculates and sets the width and/or height for you, that's not something media queries could alter.
  • looks like @arthur and I had a similar plan. I wrapped it in a layout kind and used media queries to clean up the view. Depending on how complex the view is, you may be able to accomplish what you want with just media queries.

    http://jsfiddle.net/ryanjduffy/8vQhE/
  • it is simply just a map, list and toolbar. however the toolbar in horizontal mode looks like

    {[button] [button] [fit:true] [button]}

    (pseudo code/format) which would have to convert to a vertical setup like:

    {[button]
    [button]
    [fit:true]
    [button]}

    i'm assuming since my toolbar components are going from fittablecolumns to fittablerows i'll have to make that change. i did try this in @arthurs fiddle, but the buttons are very funky and it doesn't work out. i'll try to update and show after i get home tonight to see what the kinks are.

    the buttons become disassociated from the toolbar, and it looks like their z-index becomes lower as well. thanks for all the help!

    here is the snippet i was using, but have to leave now:
    if (!isNarrow) {
                this.setLayoutKind(enyo.FittableColumnsLayout);
                this.$.toolbar.setStyle("height: 100%; width: 50px;");
                this.$.toolbar.setLayoutKind(enyo.FittableRowsLayout);
                this.$.toolbar.render();
                this.$.map.setStyle("border: 1px solid black; height: 100%; width: 50%;");
                var toolbar = this.$.toolbar;
                this.removeControl(toolbar);
                this.addControl(this.$.toolbar, this.$.map);
                this.render();
            } else {
                this.setLayoutKind(enyo.FittableRowsLayout);
                this.$.toolbar.setStyle("height: 50px; width: 100%;");
                this.$.toolbar.setLayoutKind(enyo.FittableColumnsLayout);
                this.$.toolbar.render();
                this.$.map.setStyle("border: 1px solid black; height: 40%; width: 100%;");
                var toolbar = this.$.toolbar;
                this.removeControl(toolbar);
                this.addControl(this.$.toolbar);
                this.render();
            }
  • I'm guessing the layout issue was due to onyx.Toolbar assuming a horizontal display so it has CSS to enforce that (specifically applying display:inline-block to children).

    Here's an option using the Layout I created above. Instead of reordering the DOM, I extracted the Toolbar into a custom kind, included it twice in the view and only displayed one at a time using CSS media queries. Not sure if there's a performance difference between this approach or yours.

    http://jsfiddle.net/8vQhE/1/
  • edited May 2013
    thank you, sir! it will take me some time to figure out what's going on. it definitely solves my problem, but i want to make sure i understand some of the inner workings. if you aren't too terribly busy, could you answer the following pertaining to how the code works?
    • in general you have created a custom layoutKind to battle the onyx.Toolbar's children orientation issues?
    • is this.container the containing window?
    • is this.container.threshold the px extents of the window along the h-axis?
    • i'm not following how this.invertLayout works - is it just a boolean to signal the layout should be inverted?
    • is it checking if "invertLayout" is or is not in the container?
    • are "enyo-fittable-rows-layout" and "enyo-fittable-columns-layout" system classes?
    • is this.clearStyle(dimension) telling all of the children of this that they need to switch classes
    • i had a function "doThis" attached to the first button in the menu. now that the button is in a separate kind, how do I call App's doThis function from my custom layoutKind's button tap?
    • it appears the gradient is a little off when the toolbar is vertical, and there is a line present where the fit:true resides
    i got it working in my app - LOOKS AMAZING! no lag (latest chrome) when i pull the screen wider than the defined threshold. however, i tested it in the blackberry playbook's browser, and it doesn't seem to care about the change in orientation. on the playbook, the app keeps the column layout in both orientations. i then found that after i change orientation, it no longer fits to the screen size. i'm using <600 or 601> pixels as my threshold since playbook is 1024x600. after the first orientation change it looks like the app is just filling a 600x600 box instead of 1024x600 or 600x1024.

    btw, i'm not a good enough programmer yet to 'measure performance' - i'm just going for 'does it work' :)

    i sincerely appreciate the help!

    THANKS!
  • in general you have created a custom layoutKind to battle the onyx.Toolbar's children orientation issues?
    Primarily, it's to automatically switch between fittable row and column layouts. The orientation issue is fixed by CSS which sets the display of those elements to block instead of inline-block.
    @media (min-width:768px) {
        .main-toolbar.left.onyx-toolbar-inline > * {
            display:block;
        }
    }
    
    is this.container the containing window?
    this.container in a Layout refers to the control on which the layout is applied
    is this.container.threshold the px extents of the window along the h-axis?
    Yes
    i'm not following how this.invertLayout works - is it just a boolean to signal the layout should be inverted?
    Yes. In the case of the Toolbar, it's layout is the opposite of the main layout. In other words, it uses fittable rows when the main layout is using fittable columns and vice versa.
    is it checking if "invertLayout" is or is not in the container?
    Ya, it's just an existence check. It's asking, "Does the object this.container contain a member named invertLayout?" Normally, you'd see if(this.container.invertLayout) to check for a truthy value to indicate it exists but since it's a boolean, that's not sufficient.
    are "enyo-fittable-rows-layout" and "enyo-fittable-columns-layout" system classes?
    Yes, those are the classes that are applied when you use FittableRowsLayout and FittableColumnsLayout, respectively
    is this.clearStyle(dimension) telling all of the children of this that they need to switch classes
    Not really but similar. The Fittable layouts set either the height or width to the fit control. When switching from fittable rows to columns, you need to remove the previously set dimension. Comment that line out in my fiddle and resize the window and you'll see what I mean.
    i had a function "doThis" attached to the first button in the menu. now that the button is in a separate kind, how do I call App's doThis function from my custom layoutKind's button tap?
    Declare a custom event on the Toolbar, trigger that event on button tap, and handle the event in the App.
    it appears the gradient is a little off when the toolbar is vertical, and there is a line present where the fit:true resides
    Looks like a background-image issue. Simplest fix is to declare a different background image. The gradient probably doesn't make sense for something that tall.

    Regarding size, make sure you've set the threshold on the container and updated the CSS to use those values. If you've done that, let me know and I'll investigate further.
Sign In or Register to comment.