docs/content/compositions/compositions.md in bootstrap-bookingsync-sass-1.0.0.beta2 vs docs/content/compositions/compositions.md in bootstrap-bookingsync-sass-1.0.0.beta3
- old
+ new
@@ -11,10 +11,13 @@
</div>
~~~ html
<nav id="sidebar" class="menu menu-fixed flex-col">
...
</nav>
+<nav id="sidebar-settings" class="menu menu-fixed flex-col menu-submenu menu-submenu-collapsed">
+ ...
+</nav>
<div class="sided-content">
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle menu-toggle" data-toggle="toggle"
@@ -31,11 +34,11 @@
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="navbar-brand-container">
<span class="navbar-brand">
- <h1><i class="icon-rental"></i> Rentals</h1>
+ <h1 class="text-overflow"><i class="icon-rental"></i> Rentals</h1>
</span>
</div>
</div>
<div class="collapse navbar-collapse navbar-top-collapse">
<div class="navbar-right">
@@ -53,50 +56,152 @@
</div>
~~~
<div class="example example-responsive">
<div class="sheet-header">
- <h3 id="app-admin">App Admin</h3>
+ <h3 id="app-admin">App admin</h3>
</div>
<div class="bs-callout bs-callout-info">
<h4>Information</h4>
<p>
- Using the <code>menu</code> plugin, the iframe will automatically post a message to the parent iframe when clicking the <code>.navbar-toggle.menu-toggle</code> button.
- The parent iframe using this plugin will automatically monitor this message to toggle the menu on mobile devices.
+ On mobile devices, the parent iframe overlay a toggle button over the iframe to toggle the parent frame menu.
</p>
+ <p>
+ This can be replaced by your own toggle button as presented in the <a href="/compositions/#app-admin-with-menu">App admin with menu</a> example.
+ </p>
</div>
<div class="bs-example bs-sheet bs-example-composition-body bs-example-iframe-container-desktop"
data-example-id="app-admin">
<iframe class="bs-example-iframe" src="/embed/app_admin/index.html"
frameborder="0"></iframe>
</div>
</div>
~~~ html
-<nav id="sidebar" class="menu menu-fixed flex-col">
+<div class="menu-toggle-hideable">
+ <button type="button" class="navbar-toggle menu-toggle" data-toggle="toggle"
+ data-target="body" data-value="menu-open">
+ <span class="sr-only">Toggle Navigation</span>
+ <span class="icon-bar"></span>
+ <span class="icon-bar"></span>
+ <span class="icon-bar"></span>
+ </button>
+</div>
+<nav id="sidebar" class="menu menu-fixed flex-col menu-folded">
...
</nav>
-<iframe class="iframe-fullscreen" src="/embed/app_admin_content/index.html" frameborder="0"></iframe>
+<nav id="sidebar-settings" class="menu menu-fixed flex-col menu-submenu menu-submenu-collapsed">
+ ...
+</nav>
+<div class="sided-content-full">
+ <iframe class="iframe-fullscreen"
+ src="/embed/app_admin__content/index.html"
+ frameborder="0"></iframe>
+</div>
<!-- iFrame content -->
-<nav class="menu menu-fixed flex-col menu-submenu">
+<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
...
</nav>
-<div class="sided-content">
+<section class="main-content">
+ <div class="sheet">
+ <p>Body</p>
+ </div>
+</section>
+~~~
+
+<div class="example example-responsive">
+ <div class="sheet-header">
+ <h3 id="app-admin-with-menu">App admin with menu</h3>
+ </div>
+
+ <div class="bs-callout bs-callout-info">
+ <h4>Information</h4>
+ <p>
+ On mobile devices, the parent iframe overlay a toggle button over the iframe to toggle the parent frame menu.
+ </p>
+ <p>
+ Using the <code>menu</code> plugin, your iframe is able to connect its own menu with the parent's frame one. You simply need to add the class <code>menu-toggle-parent-frame</code> to your toggle button, which will also remove the parent frame toggle button that was initialy present as long as it's having the class <code>menu-toggle-hideable</code>.
+ </p>
+ </div>
+
+ <div class="bs-example bs-sheet bs-example-composition-body bs-example-iframe-container-desktop"
+ data-example-id="app-admin-with-menu">
+ <iframe class="bs-example-iframe" src="/embed/app_admin_with_menu/index.html"
+ frameborder="0"></iframe>
+ </div>
+</div>
+~~~ html
+<div class="menu-toggle-hideable">
+ <button type="button" class="navbar-toggle menu-toggle" data-toggle="toggle"
+ data-target="body" data-value="menu-open">
+ <span class="sr-only">Toggle Navigation</span>
+ <span class="icon-bar"></span>
+ <span class="icon-bar"></span>
+ <span class="icon-bar"></span>
+ </button>
+</div>
+<nav id="sidebar" class="menu menu-fixed flex-col menu-folded">
+ ...
+</nav>
+<nav id="sidebar-settings" class="menu menu-fixed flex-col menu-submenu menu-submenu-collapsed">
+ ...
+</nav>
+<div class="sided-content-full">
+ <iframe class="iframe-fullscreen"
+ src="/embed/app_admin_with_menu__content/index.html"
+ frameborder="0"></iframe>
+</div>
+
+<!-- iFrame content -->
+<nav class="menu menu-fixed flex-col menu-submenu menu-app">
+ ...
+</nav>
+<div class="sided-content-with-menu">
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
- ...
+ <div class="container-fluid">
+ <div class="navbar-header">
+ <button type="button"
+ class="navbar-toggle menu-toggle menu-toggle-parent-frame"
+ data-toggle="toggle"
+ data-target="body" data-value="menu-open">
+ <span class="sr-only">Toggle Navigation</span>
+ <span class="icon-bar"></span>
+ <span class="icon-bar"></span>
+ <span class="icon-bar"></span>
+ </button>
+ <button type="button" class="navbar-toggle navbar-toggle-context"
+ data-toggle="collapse" data-target=".navbar-top-collapse">
+ <span class="sr-only">Toggle Navigation</span>
+ <span class="icon-bar"></span>
+ <span class="icon-bar"></span>
+ <span class="icon-bar"></span>
+ </button>
+ <div class="navbar-brand-container">
+ <span class="navbar-brand">
+ <h1 class="text-overflow"><i class="icon-rental"></i> Rentals</h1>
+ </span>
+ </div>
+ </div>
+ <div class="collapse navbar-collapse navbar-top-collapse">
+ <div class="navbar-right">
+ <button class="btn btn-secondary navbar-btn" type="button">Button</button>
+ <button class="btn btn-primary navbar-btn" type="button">Call to action</button>
+ </div>
+ </div>
+ </div>
</nav>
<section class="main-content">
<div class="sheet">
- <p>Body</p>
+ <p>...</p>
</div>
</section>
</div>
~~~
-<div class="example">
+<div class="example example-responsive">
<div class="sheet-header">
<h3 id="section">Section</h3>
</div>
<div class="bs-example bs-sheet bs-example-composition-body bs-example-iframe-container-desktop"
@@ -116,11 +221,11 @@
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="navbar-brand-container">
<span class="navbar-brand">
- <h1><i class="icon-rental"></i> Rentals</h1>
+ <h1 class="text-overflow"><i class="icon-rental"></i> Rentals</h1>
</span>
</div>
</div>
<div class="collapse navbar-collapse navbar-top-collapse">
<div class="navbar-right">
@@ -135,11 +240,11 @@
<p>Body</p>
</div>
</section>
~~~
-<div class="example">
+<div class="example example-responsive">
<div class="sheet-header">
<h3 id="nested-section">Nested Section</h3>
</div>
<div class="bs-example bs-sheet bs-example-composition-body bs-example-iframe-container-desktop"
@@ -159,16 +264,17 @@
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="navbar-brand-container">
<span class="navbar-brand">
- <h1>
- <span class="navbar-breadcrumb">
- <i class="icon-calendar"></i> <a href="#">Bookings</a>
+ <h1 class="text-overflow">
+ <i class="icon-calendar"></i>
+ <span class="navbar-breadcrumb hidden-xs">
+ <a href="#">Bookings</a>
/
</span>
- Planning
+ A very long section name
</h1>
</span>
</div>
</div>
<div class="collapse navbar-collapse navbar-top-collapse">
@@ -196,10 +302,45 @@
<iframe class="bs-example-iframe" src="/embed/two_columns/index.html"
frameborder="0"></iframe>
</div>
</div>
+<div class="example">
+ <div class="sheet-header">
+ <h3 id="tabulated-content">Tabulated content</h3>
+ </div>
+
+ <div class="bs-example bs-sheet bs-example-composition-body bs-example-iframe-container-desktop"
+ data-example-id="tabulated-content">
+ <iframe class="bs-example-iframe" src="/embed/tabulated_content/index.html"
+ frameborder="0"></iframe>
+ </div>
+</div>
+~~~ html
+<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
+ ...
+</nav>
+<section class="main-content">
+ <div class="sheet">
+ <ul class="nav nav-tabs" data-toggle="stackable" data-target=".stackable-dropdown">
+ <li class="active"><a href="#">Tab 1</a></li>
+ <li><a href="#">Tab 2</a></li>
+ <li class="dropdown pull-right stackable-dropdown">
+ <a class="dropdown-toggle" data-toggle="dropdown" href="#">
+ More <span class="caret"></span>
+ </a>
+ <ul class="dropdown-menu">
+ </ul>
+ </li>
+ </ul>
+ <div>
+ <p>Text...</p>
+ </div>
+ </div>
+</section>
+~~~
+
<div class="example example-responsive">
<div class="sheet-header">
<h3 id="annotated-section">Annotated Section</h3>
</div>
@@ -237,39 +378,49 @@
</section>
~~~
<div class="example">
<div class="sheet-header">
- <h3 id="tabulated-content">Tabulated content</h3>
+ <h3 id="annotated-section-with-tabulated-content">
+ Annotated section with tabulated content
+ </h3>
</div>
<div class="bs-example bs-sheet bs-example-composition-body bs-example-iframe-container-desktop"
- data-example-id="tabulated-content">
- <iframe class="bs-example-iframe" src="/embed/tabulated_content/index.html"
+ data-example-id="annotated-section-with-tabulated-content">
+ <iframe class="bs-example-iframe"
+ src="/embed/annotated_section_with_tabulated_content/index.html"
frameborder="0"></iframe>
</div>
</div>
~~~ html
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
...
</nav>
<section class="main-content">
- <div class="sheet">
- <ul class="nav nav-tabs" data-toggle="stackable" data-target=".stackable-dropdown">
- <li class="active"><a href="#">Tab 1</a></li>
- <li><a href="#">Tab 2</a></li>
- <li class="dropdown pull-right stackable-dropdown">
- <a class="dropdown-toggle" data-toggle="dropdown" href="#">
- More <span class="caret"></span>
- </a>
- <ul class="dropdown-menu">
- </ul>
- </li>
- </ul>
- <div>
- <p>Text...</p>
+ <section class="annotated-section">
+ <header class="annotated-section-annotation">
+ <h2 class="annotated-section-title">Section Name</h2>
+ <p>Curabitur blandit tempus porttitor. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
+ <p><a href="#">More Information</a></p>
+ </header>
+ <div class="annotated-section-content">
+ <ul class="nav nav-tabs" data-toggle="stackable" data-target=".stackable-dropdown">
+ <li class="active"><a href="#">Tab 1</a></li>
+ <li><a href="#">Tab 2</a></li>
+ <li class="dropdown pull-right stackable-dropdown">
+ <a class="dropdown-toggle" data-toggle="dropdown" href="#">
+ More <span class="caret"></span>
+ </a>
+ <ul class="dropdown-menu">
+ </ul>
+ </li>
+ </ul>
+ <div>
+ <p>Body</p>
+ </div>
</div>
- </div>
+ </section>
</section>
~~~
<div class="example">
<div class="sheet-header">