connors / photon

The fastest way to build beautiful Electron apps using simple HTML and CSS
photonkit.com
MIT License
10.01k stars 579 forks source link

Toolbar Layout #69

Open paranoid-android opened 8 years ago

paranoid-android commented 8 years ago

Hello,

I am building an app with Photon (which is awesome!). I'm having problems aligning items in the toolbar. In the toolbar, I'm basically trying to have three "sections". One section above the sidebar, one above the main content/pane and one floating to the right. Currently, I have this setup like the following:

<div class="window">
  <header class="toolbar toolbar-header">
    <!-- Left aligned above the sidebar. This works. -->
    <button class="btn btn-default"><span class="icon icon-plus"></span></button>

    <!-- Should be left-aligned above the "pane". This does not work -->
    <div class="btn-group">
      <button class="btn btn-default active"><span class="icon icon-menu"></span></button>
      <button class="btn btn-default"><span class="icon icon-layout"></span></button>
      <button class="btn btn-default"><span class="icon icon-cloud"></span></button>
    </div>

    <!-- Should be right-aligned -->
    <button class="btn btn-default pull-right"><span class="icon icon-help"></span></button>
  </header>

  <div class="window-content">
    <div class="pane-group">
      <div class="pane pane-sm sidebar">
        [navigation]
      </div>

      <div class="pane>
        [main content]
      </div>
    </div>
  </div>
</div>

Unfortunately, I cannot seem to figure out how to get the btn-group to be in the same line as the others, while at the same time, providing enough padding so that it is not above the sidebar. Is there a clean way of doing this?