responsive title-bar component?

[dchersey]

Hi, I have the following code in my application.emblem (this is my first ember app so please bear with me)

.title-bar data-responsive-toggle="example-menu" data-hide-for="medium"
  button.menu-icon type="button" data-toggle=""
  .title-bar-title Menu

.top-bar#example-menu
  .top-bar-left
    = zf-dropdown-menu 
      li
        a href="#" Item 1
        ul.menu
          li
            a href="#" Item 1A 
      li
        a href="#" Item 2
      li
        a href="#" Item 3
      li
        a href="#" Item 4
  .top-bar-right
    ul.menu
      li
        input type="search" placeholder="Search"
      li
        button.button type="button" Search

The zf-dropdown-menu has been nicely exposed as an ember component, but I don't see the title bar in the ember-cli-foundation-6-sass. The foundation docs imply that title-bar also requires javascript.

Do you know anything to the contrary? And is adding support as simple as adding a zf-title-bar.js to app/components and addon/components similar to zf-dropdown-menu.js?

Happy to submit a PR with a little guidance.

[acoustep]

Hi @dchersey

I took a look at the documentation and there doesn't seem to be anything to suggest you need Javascript for the responsive title bar.

There are requirements for JS when using dropdown menus etc within the title bar though, in which case you can use the components when needed.

If I'm being dense and missing the Javascript part in the documentation feel free to let me know.

[dchersey]

Yeah, it's a little ambiguous. I'm basing this on the fact that
a) The responsive features don't work on the title but DO work on the dropdown
b) The following section of the doc describing how to delay the visibility until the .js loads seems to apply to all 3 responsive elements on the page:

Preventing FOUC
Before the JavaScript on your page loads, you'll be able to see both the mobile and desktop element at once for a brief second. This is known as a flash of unstyled content. There's not an easy way for the framework to handle this for you, but you can add some extra CSS to account for it.

If we reference the above example, .title-bar is our mobile element and .top-bar is our desktop element. So before the JavaScript loads, we want only the right element for that screen size to be visible.

[ziggurat]

@dchersey could you solve the problem? I am in the same scenario and trying to make the responsive menu to work with no luck so far.

Thanks!

[dchersey]

I did get it to work -- but honestly I cannot tell you how at this point; I've been away from the project for about 2 months working on something else. I can tell you that the above code is still in my app, and the solution was elsewhere (environmental).

I have this code in ember-cli-build.js:

var EmberApp = require('ember-cli/lib/broccoli/ember-app');

module.exports = function(defaults) {
  var app = new EmberApp(defaults, {
    // Add options here
    'ember-cli-foundation-6-sass': {
    'foundationJs': 'all'
    }
  });

Perhaps that did it?

Sorry for the swiss cheese :( -- chasing too many rabbits at the moment.

[GCheung55]

@dchersey I'm interested in how you got it working. I have the options set, but things aren't working. I've filed a separate ticket: #25