Jump to content

Potrait Landscape display


Claudia M
 Share

Recommended Posts

As I mentioned before I got a new phone that is slightly taller than my old one.  When checking my web design on this phone I noticed that in landscape my styling is considered medium not small.  I've made the changes in my styling to reflect this since I believe newer phones are more this size than my old phone.  It was small both ways on my old phone.  Anyway, If I am looking at my phone in portrait and add something to my basket the added item will show. But if I turn my phone to landscape the item is no longer there - like the skin/content/checkout.small doesn't load. 

my change at the top of this file:

<div class="show-for-medium-down" id="content_checkout_small">
   {foreach from=$ITEMS key=hash item=item}

)

And at the top of the checkout.medium file:

<div class="show-for-large-up" id="content_checkout_medium_up">
   <table class="expand">

I loaded the cart CubeCart demo store in Firefox and looked at it in Responsive mode 650 x 360 (and others) landscape and the item in the cart does not show.  In portrait the item does show.

So if you are sitting on your couch adding items to your cart in portrait and casually turn your phone to sidways to landscape the items in your cart disappear.

Am I making too much out of this? Or is there a solution to this

Link to comment
Share on other sites

It's really weird, but was necessary. See:

https://github.com/cubecart/v6/issues/1732

There is this in Foundation's /js/2.cubecart.js:

Near line 425:

    /* We must only show grid view with 1 grid column for medium */
    if(Foundation.utils.is_small_only()) {
        grid_view(0);
        $('#content_checkout_medium_up').remove();
        $("[checked]").prop("checked",true);
    }
    if(Foundation.utils.is_medium_up()) {
        $('#content_checkout_small').remove();
        $("[checked]").prop("checked",true);
    }

When this bit of javascript is executed, whatever orientation is seen first (technically, the range of a screen width), the code for the other orientation is deleted - the browser is told to "discard" it.

Thus, switching the orientation (at checkout) (that is, screen width to a different range) results in content not displaying because it was previously removed by the browser.

What can we do about it? We can post a new issue in the GitHub reminding the programmer's of this comment in #1732:

"In reality maybe it could be written better altogether with one block of HTML for all."

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...