mobify / pikabu Goto Github PK

Off-Canvas flyout menu

Home Page: http://mobify.github.io/pikabu/

License: MIT License

JavaScript 45.00% CSS 2.55% HTML 50.87% CoffeeScript 1.47% Shell 0.12%

pikabu's Issues

Max-width px sidebar

Is it possible to give the sidebar a max-width of 300px for example? We want the sidebar in all devices so also on desktop but the sidebar has a width of 80%. When we add a max-width that's not working correctly!

Error after opening drawer

I currently have pikabu configured and working great in a project locally. When the screen is resized smaller, I set up and enable pikabu, and when it becomes larger I undo all of that and display my UI normally for desktop view. This is working fine, except for that it doesn't return my UI back to normal desktop view after I pull a drawer out. I get this error in my console:

Uncaught TypeError: Cannot read property 'scrollHeight' of undefined

So, doing some digging, I found that it's looking for this:

https://github.com/mobify/pikabu/blob/master/src/pikabu.js#L516-L517

And that the sidebar is set here:

https://github.com/mobify/pikabu/blob/master/src/pikabu.js#L417

I found that when I accessed my pikabu object, that pikabu.activeSidebar contained null. Fantastic! "I can solve this!" I thought. So I manually called pikabu.openSidebar('left') which worked, but I still got the Cannot read properly 'scrollHeight' of undefined error. I checked pikabu.activeSidebar to see what it held, and it was holding left as expected. Hmn.

So then I took a look at pikabu.$sidebars and found that it was indeed holding an object with left and right. I tried running pikabu.$sidebars['left'] then, and got []. I then tried pikabu.$sidebars.left and still got [].

Any idea how to solve this? Is there something else I should be doing? This is how I am initing pikabu:

    self.pikabu = new Pikabu({
      viewportSelector: '.body-chatter',
      widths: {
        left: '90%',
        right: '90%'
      },
      selectors: {
        element: '#candy'
      }
    });

I have also set my m-pikabu-sidebar m-pikabu-left (and right) classes, as well as m-pikabu-nav-toggle and data-role='left' stuff on the toggle buttons.

Any input/help/advice would be greatly appreciated. Thanks!

Pikabu 2.0: Perspective effect doesn't have a proper close hit target

As per the screenshot, only the translucent area can be tapped to close the menu.

Expected: You can tap anywhere outside the menu to close it.

Issue with pikabu after using browsers back button on iOS8

When navigating to a new URL off of pikabu, if a user then presses back on the browser and tries to open the pikabu again, it'll be visually and functionally broken. This happens only on iOS 8.

Firefox display: -moz-box unnecessary?

.m-pikabu-viewport {
    backface-visibility: hidden;
    display: -moz-box;
    overflow: hidden;
    position: relative;
    transform: translateZ(0px);
}

This behaves very strange in firefox. The pikabu-viewport doesn't span the overal width of the browser viewport. If I disable display: -moz-box;it works well.

Pikabu breaks on older devices (0.2.1)

Pikabu is broken on legacy Androids as described here: #12

Pikabu 2.0: Automated tests don't work

^ What the title says.

It looks like a mixture of old tests/Pinny tests.

Old IE support

Any interest in a pull request for old IE patches and possible support of IE 7? I'd like to use this project but I need to be able to support old corporate machines that suck.

Won't work on FireFox

Won't work on FireFox, even the demo!

Doesn't work in IE10

Your example doesn't work in IE10 - try to open/close left-side menu

.m-pikabu-nav-toggle position:fixed inside viewport isn't fixed

This works fine:

<a class="m-pikabu-nav-toggle" style="position:fixed;">Toggle</a>  
<div class="m-pikabu-viewport">
    [Content]
</div>

But this doesn't:

<div class="m-pikabu-viewport">
    <a class="m-pikabu-nav-toggle" style="position:fixed;">Toggle</a>  
    [Content]
</div>

It's caused by the compination of position:fixed and -webkit-transform (Further explained here: https://code.google.com/p/chromium/issues/detail?id=20574)

Any ideas how to fix this? Any work arounds?

Turn off 'applyPersistentStyles' style injection

What is the point of having this.applyPersistentStyles(); (https://github.com/mobify/pikabu/blob/master/src/pikabu.js#L271) in the JS when those same things are also already in the CSS? I don't get why those are in both? It just makes it difficult to override things when it appears in the <head>. Or if anything, could their be an option made to turn off applyPersistentStyles?

Screen jumps when typing in inputs on legacy Android

These three lines in the css are causing all the trouble, and we need a way to not load these particular rules on older Android devices:

@include perspective(1000);
@include transform(translateZ(0));
@include backface-visibility(hidden);

Remove Compass/CSS3 Dependncy

If added to adaptive.js project as bower component, the scss requires “compass/css3”.
Fix the dependency so that pikbu.scss could be added to the project and built.

data attribute pikabu initialization not working

TODO:

make sure these work
create example of this in the readme

Pikabu 2.0: Styling issue when opening menu while partially scrolled (Chrome)

Does not occur on Safari.

Pikabu 2.0: Non-standard classes don't work

Pikabu 2.0 works if you use the default class names in your HTML, but not if you try to specify different classes upon initialization.

For example:

    var pikabu = $('.m-pikabu-left').pikabu({
            container: '.m-pikabu-container',
            appendTo: '.m-pikabu-viewport',
            effect: drawerLeft,
            zIndex: 2,
            coverage: '80%',
            easing: 'swing',
            duration: 200,
            shade: {
                zIndex: 2
            }
        });

This will correctly update this.options, however, this does not update the classes object. Because we access both this.options and classes within Pikabu, this is causing inconsistent behaviour.

Does not work for IE on Windows Mobile 8.0

We really want to use this lib, but it needs to support the latest Windows phones for us to be able to use it. Any plans of fixing and testing this?

Double-clicking on menu toggles when pikabu is open hides pikabu content

If you open one of the pikabu side menus, then double click the nav toggle outside the menu, the menu tries to close but is the immediately re-opened. However now the content inside it is hidden.

Unable to scroll open pikabu menu after orientation change on iOS6

This fix might've gotten lost in a re-factor - as per @kpeatt the class 'm-pikabu-overflow-touch' needs to be toggled on orientation change in order to fix this.

Reducing the size of the browser

Hi,

First thanks for the awesome pikabu. Playing with it I noticed possibly a bug

When reducing the browser size the height is having a bit of issues.

How to Reproduce

Open the file.
Reduce the size of the browser.
Check if the last sentence Am I am visible is visible.

In chrome (37.0.2062.94 ), on first reducing the sentence is visible. When changing again to full size the scrollbar disappears.

In Mozilla 32 reducing don't show the scroll bar itself.

It could not detect when I increase the font size also. See code below.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="author" content="Mobify">
    <meta name="description" content="A responsive, mobile first accordion UI module from Mobify">
    <meta name="keywords" content="mobify,mobile,modules,ui,responsive,carousel,scooch,slider">
    <title>Mobify Modules</title>

    <link rel="stylesheet" href="http://cdn.mobify.com/modules/pikabu/0.2.2/pikabu.css">
    <link rel="stylesheet" href="http://cdn.mobify.com/modules/pikabu/0.2.2/pikabu-theme.css">

    <link rel="shortcut icon" href="/static/img/favicon.ico">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
<div class="m-pikabu-viewport">
    <!-- the left sidebar -->
    <div class="m-pikabu-sidebar m-pikabu-left">
        <!-- left sidebar content -->
        Left
    </div>
    <!-- the main page content -->
    <div class="m-pikabu-container">
        <!-- Overlay is needed to have a big click area to close the sidebars -->
        <div class="m-pikabu-overlay"></div>
        <header>
            <a class="m-pikabu-nav-toggle" data-role="left">Left Menu</a>
            <h1>Pikabu</h1>
            <a class="m-pikabu-nav-toggle" data-role="right">Right Menu</a>
        </header>
        <section>
            <!-- Body content goes in here -->
            <h2><strong>Pikabu</strong> is a speedy, flexible framework for off-canvas flyout panels.</h2>

            <h3>Why use <strong>Pikabu</strong>?</h3>

            <p><em>Simple markup</em> &mdash; Few containers and classes means implementation is a breeze.</p>

            <p><em>Native scrolling</em> &mdash; Just like mom used to make. Momentum scrolling in sidebars and smart fallbacks for browsers that don&rsquo;t support it.</p>

            <p><em>Customization</em> &mdash; No theme, just barebones HTML and CSS. Pikabu is super customizable to your needs.</p>

            <p><em>Compatibility</em> &mdash; This thing works on everything. We progressively enhance the experience for devices that support it.</p>

            <p><em>Simple markup</em> &mdash; Few containers and classes means implementation is a breeze.</p>

            <p><em>Native scrolling</em> &mdash; Just like mom used to make. Momentum scrolling in sidebars and smart fallbacks for browsers that don&rsquo;t support it.</p>

            <p><em>Customization</em> &mdash; No theme, just barebones HTML and CSS. Pikabu is super customizable to your needs.</p>

            <p><em>Compatibility</em> &mdash; This thing works on everything. We progressively enhance the experience for devices that support it.</p>


            <p><em>Simple markup</em> &mdash; Few containers and classes means implementation is a breeze.</p>

            <p><em>Native scrolling</em> &mdash; Just like mom used to make. Momentum scrolling in sidebars and smart fallbacks for browsers that don&rsquo;t support it.</p>

            <p><em>Customization</em> &mdash; No theme, just barebones HTML and CSS. Pikabu is super customizable to your needs.</p>

            <p><em>Compatibility</em> &mdash; This thing works on everything. We progressively enhance the experience for devices that support it.</p>


            <p><em>Simple markup</em> &mdash; Few containers and classes means implementation is a breeze.</p>

            <p><em>Native scrolling</em> &mdash; Just like mom used to make. Momentum scrolling in sidebars and smart fallbacks for browsers that don&rsquo;t support it.</p>

            <p><em>Customization</em> &mdash; No theme, just barebones HTML and CSS. Pikabu is super customizable to your needs.</p>

            <p><em>Compatibility</em> &mdash; This thing works on everything. We progressively enhance the experience for devices that support it.</p>

            <p><em>Simple markup</em> &mdash; Few containers and classes means implementation is a breeze.</p>

            <p><em>Native scrolling</em> &mdash; Just like mom used to make. Momentum scrolling in sidebars and smart fallbacks for browsers that don&rsquo;t support it.</p>

            <p><em>Customization</em> &mdash; No theme, just barebones HTML and CSS. Pikabu is super customizable to your needs.</p>

            <p>Am I am visible</p>
        </section>
    </div>
    <!-- the right sidebar -->
    <div class="m-pikabu-sidebar m-pikabu-right">
        <!-- right sidebar content -->
        Right
    </div>
</div>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="http://cdn.mobify.com/modules/pikabu/0.2.1/pikabu.min.js"></script>
<script>
    $(function() {
        pikabu = new Pikabu();
    });
</script>
</body>
</html>

See attached image from firefox.

Thank you.

Sliding animation is not consistent

http://mobify.github.io/pikabu/

It's easy to see.
Open: you cant see Left coming in from the side, as it's already there.
Close: you see Left going away to the side.

The Right side is consistent though. I imagine it is due to some sort of width tweening, doing it from the right side, so it's only noticeable on Left while opening? Not sure.

closeSiderbars() not a function

I'm trying to enable a close button for my menu with closeSidebars(), but the function doesn't seem to work. These are my settings(in coffeescript):

    pikabu = new Pikabu
        viewportSelector: '#page'
        widths:
            right: '90%',
        selectors:
            element: '.m-pikabu-container',
            common: '.m-pikabu-sidebar',
            right: '.m-pikabu-right'
            navToggles: '.m-pikabu-nav-toggle'
        onOpened: ->
            header.addClass "header-opened"
            closer.closeSidebars()

But i'm getting the "undefined is not a function" error. Could somebody help me?

Thanks!

extra white space on Android 4 browsers

I am getting an extra white space between the menu and the main content area that I can't get rid of on Android browser 4.0.4. The issue comes up when viewing the live demo as well.

Pikabu 2.0 does not handle orientation change well

On orientation change, the shade is mispositioned and the height of the pikabu content needs to get reset.

Viewport height with expandable/collapsible items hides content

At the moment height of the viewport is set by the script as a fixed height based on the content. If the content contains expandable/collapsible items that are defaulted to collapsed, the viewport's "overflow: hidden;" style hides content when items expand.

Is there a fix for this?

Pikabu 2.0: how to mark up the body content

The readme for Pikabu 2.0 needs to indicate what the minimum expected markup that works.

Currently, the readme essentially asks you to do this:

<div id="yourPikabu" hidden>
    Your pikabu content
</div>
<script>$('#yourPikabu').pikabu()</script>

But that's not enough.. it doesn't say how to mark up the body content too. I had to add the following markup in current project:

<div class="pikabu">
    <div class="pikabu__container">
        // header, main, footer would go here
    </div>
</div>

What is supposed to be the markup for it? Thanks.

Desktop Chrome is given a wrong height due to Chrome for Android Check

For some reason when Pikabu adds the height, it's much bigger than the actual viewport height. I've been at this a few hours and I can't locate what's causing it. I'm using Chrome 36. I'm wondering if it's something within my CSS files but I haven't been able to track it down.

var windowHeight = this.device.isNewChrome ? window.outerHeight : $(window).height();

I've fixed the issue by removing the check for Chrome but I'm a little wary of keeping this as I'm not sure I understand the reason this check is made. I get that window.outerHeight grabs the height of everything including toolbars etc? Just not sure why you'd need to do that.

Closing animation is jerky

Requires pikabu to be accessible after scrolling a page.

Scroll page, open the pikabu menu, then close the pikabu menu. The animation to return to the original screen position is jerky and appears broken.

Minimal test case to follow

After clicking the toggle button the scroll seems disabled

Android 4.2.2 , using 0.2.2 .

PS : Which branch is the current development branch ?

So I can try to build the js and css.

Thanks!

Scroll locks in Chrome for Android and iOS

At first scroll works fine, but after a few seconds and/or if you scroll back to the top, scrolling gets disabled.

I was even able to lock the scrolling on the Pikabu demo page by scrolling up a down a few times with Chrome on my Android 4.4.2 (Galaxy S4).

I tested this in Safari on iOS and on the Android native browser and it worked fine. Seems to just be an issue on Chrome mobile.

Multiple Pikabus should make multiple shades

Right now, because shade is instantiated on the Pikabu container and not on the individual Pikabus, you can't have more than one shade. Which means the first shade you instantiate is the only shade you get. Should we allow for multiple shades for each Pikabu on the page? My thought is: yes.

Some similar projects we might be able to learn from:

http://onsenui.io/OnsenUI/demo/sliding_menu/

http://mmenu.frebsite.nl

mobify / pikabu Goto Github PK

pikabu's Issues

How to Reproduce

Recommend Projects

Recommend Topics

Recommend Org