Clean up docs, add inset mode to tab panes
This commit is contained in:
Samuel Georges
parent
1b4e4b08fd
commit
556eff359c
|
|
@ -1,16 +1,14 @@
|
|||
# October Storm
|
||||
|
||||
Welcome to the client-side framework designed for the OctoberCMS back-end area, referred to as *October Storm*.
|
||||
Welcome to the client-side framework designed exclusively for the OctoberCMS back-end area, referred to as *October Storm*. The library is quite large as it has many features and it is not really itended to be used outside of October.
|
||||
|
||||
## Design consideration
|
||||
|
||||
In this library, each component behaves a bit like PHP. If a component depends on another component, it will include the file using `@import` in LESS or `=require` in JavaScript. Think of it like a namespace `use` reference in PHP.
|
||||
Each LESS library should always include the `global.less` to ensure all mixins and variables are available.
|
||||
|
||||
Both compilers will exclude duplicates references (a la `require_once`), so the usage is designed to be compiled as one fell swoop. Meaning one build file per page. Using multiple builds may result in duplication of dependencies.
|
||||
Compiling JavaScript depends on October's asset combiner as the `=require` directive was invented here to emulate the LESS `@import` functionality.
|
||||
|
||||
> **Note**: Compiling JavaScript depends on October's asset combiner as the `=require` directive was invented here to emulate the LESS `@import` functionality.
|
||||
|
||||
# UI Components
|
||||
## UI Components
|
||||
|
||||
Components are a mixture of CSS and JavaScript (Controls), or can be solely style-based (Styles) or solely script-based (Scripts).
|
||||
|
||||
|
|
@ -18,20 +16,19 @@ Each component has a *strong name*, for example the loading indicator has the na
|
|||
|
||||
> *Note*: Documentation for each component can be found in the **docs/** directory.
|
||||
|
||||
## Building a collection
|
||||
## Naming conventions
|
||||
|
||||
You can either build the entire collection by including the `storm.js` and `storm.less` files found in the root directory. This will result in quite a large file. It includes everything, you know.
|
||||
In most cases a control will be styled in CSS with the prefix `control-something` and the JavaScript is applied using `data-control="something"`. This allows a rendering as a styled control only, without the JavaScript and vice versa.
|
||||
|
||||
It might be more appropriate to cherry pick the components you need. Just reference them by component name and they should take care of their own dependencies.
|
||||
<div class="control-list" data-control="list">...</div>
|
||||
|
||||
Here is an example, if you just want the loader, add to a file called `build.js`:
|
||||
The appearance of a control can be modified using additional CSS classes. These modifiers should be prefixed with the control name or the word `is` if the modification is binary (a boolean). For example:
|
||||
|
||||
=require path/to/ui/js/loader.js
|
||||
<div class="control-list list-purple is-sortable"></div>
|
||||
|
||||
Loader is a control, so a StyleSheet file is also needed, also `build.less`:
|
||||
The above uses two modifiers; one to make it purple and one to declare that it is sortable. In the above example, the class `is-purple` is not recommended because it is a variable attribute as opposed to a binary one. Here are some common words used for attributes and their meanings:
|
||||
|
||||
@import "path/to/ui/less/loader.less";
|
||||
|
||||
That's it, you're done! Rinse and repeat for any other components.
|
||||
|
||||
> *Remember*: Only one build should be used on a page to prevent duplication.
|
||||
- **flush**: The control will use no margin, padding and/or border to the controls or containers surrounding it. Eg: `list-flush`
|
||||
- **inset**: The control will use a negative margin on the left or right side to negate a padded container. Eg: `list-inset`
|
||||
- **offset**: The control will use a positive margin or padding on the left or right to assist a container with padding. Eg: `list-offset`
|
||||
- **padded**: The control will use padding all around. Eg: `list-padded`
|
||||
|
|
@ -8,6 +8,101 @@ This plugin is a wrapper for the Twitter Bootstrap Tab component. It provides th
|
|||
- Scrolling tabs if they do not fit the screen
|
||||
- Collapsible tabs
|
||||
|
||||
### Supported CSS modifiers
|
||||
|
||||
These modifiers can be added in addition to the `control-tabs` class:
|
||||
|
||||
- **tabs-inset**: Applies a negative margin to the tabs allowing them to sit well inside a padded container.
|
||||
- **tabs-offset**: Applies a positive padding to tabs so they sit well inside a flush (non padded) container.
|
||||
- **tabs-flush**: Tabs to sit flush to the element above it.
|
||||
|
||||
### Master tabs
|
||||
|
||||
<div class="control-tabs master-tabs" data-control="tab">
|
||||
<ul class="nav nav-tabs">
|
||||
<li class="active"><a href="#primaryTabOne">One</a></li>
|
||||
<li><a href="#primaryTabTwo">Two</a></li>
|
||||
<li><a href="#primaryTabThree">Three</a></li>
|
||||
</ul>
|
||||
<div class="tab-content">
|
||||
<div class="tab-pane active">
|
||||
Tab one content
|
||||
</div>
|
||||
<div class="tab-pane">
|
||||
Tab two content
|
||||
</div>
|
||||
<div class="tab-pane">
|
||||
Tab three content
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
### Primary tabs
|
||||
|
||||
<div class="control-tabs primary-tabs" data-control="tab">
|
||||
<ul class="nav nav-tabs">
|
||||
<li class="active"><a href="#primaryTabOne">One</a></li>
|
||||
<li><a href="#primaryTabTwo">Two</a></li>
|
||||
<li><a href="#primaryTabThree">Three</a></li>
|
||||
</ul>
|
||||
<div class="tab-content">
|
||||
<div class="tab-pane active">
|
||||
Tab one content
|
||||
</div>
|
||||
<div class="tab-pane">
|
||||
Tab two content
|
||||
</div>
|
||||
<div class="tab-pane">
|
||||
Tab three content
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
> **Note**: Primary tabs in the October back-end are inset by default and you should use `.tabs-no-inset` to disable this.
|
||||
|
||||
### Secondary tabs
|
||||
|
||||
<div class="control-tabs secondary-tabs" data-control="tab">
|
||||
<ul class="nav nav-tabs">
|
||||
<li class="active"><a href="#secondaryTabOne">One</a></li>
|
||||
<li><a href="#secondaryTabTwo">Two</a></li>
|
||||
<li><a href="#secondaryTabThree">Three</a></li>
|
||||
</ul>
|
||||
<div class="tab-content">
|
||||
<div class="tab-pane active">
|
||||
Tab one content
|
||||
</div>
|
||||
<div class="tab-pane">
|
||||
Tab two content
|
||||
</div>
|
||||
<div class="tab-pane">
|
||||
Tab three content
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
### Content tabs
|
||||
|
||||
<div class="control-tabs content-tabs" data-control="tab">
|
||||
<ul class="nav nav-tabs">
|
||||
<li class="active"><a href="#contentTabOne">One</a></li>
|
||||
<li><a href="#contentTabTwo">Two</a></li>
|
||||
<li><a href="#contentTabThree">Three</a></li>
|
||||
</ul>
|
||||
<div class="tab-content">
|
||||
<div class="tab-pane active">
|
||||
Tab one content
|
||||
</div>
|
||||
<div class="tab-pane">
|
||||
Tab two content
|
||||
</div>
|
||||
<div class="tab-pane">
|
||||
Tab three content
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
### Supported data attributes:
|
||||
|
||||
- data-control="tab" - creates the tab control from an element
|
||||
|
|
@ -52,108 +147,3 @@ Example with data attributes (data-control="tab"):
|
|||
- beforeClose.oc.tab - triggered on a tab pane element before tab is closed by the user. Call the event's
|
||||
preventDefault() method to cancel the action.
|
||||
- afterAllClosed.oc.tab - triggered after all tabs have been closed
|
||||
|
||||
# Example
|
||||
|
||||
<h5>Master</h5>
|
||||
|
||||
<div class="control-tabs master-tabs" data-control="tab">
|
||||
<ul class="nav nav-tabs">
|
||||
<li class="active"><a href="#primaryTabOne">One</a></li>
|
||||
<li><a href="#primaryTabTwo">Two</a></li>
|
||||
<li><a href="#primaryTabThree">Three</a></li>
|
||||
</ul>
|
||||
<div class="tab-content">
|
||||
<div class="tab-pane active">
|
||||
Tab one content
|
||||
</div>
|
||||
<div class="tab-pane">
|
||||
Tab two content
|
||||
</div>
|
||||
<div class="tab-pane">
|
||||
Tab three content
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<hr />
|
||||
|
||||
|
||||
|
||||
<h5>Primary</h5>
|
||||
|
||||
<div class="control-tabs primary-tabs" data-control="tab">
|
||||
<ul class="nav nav-tabs">
|
||||
<li class="active"><a href="#primaryTabOne">One</a></li>
|
||||
<li><a href="#primaryTabTwo">Two</a></li>
|
||||
<li><a href="#primaryTabThree">Three</a></li>
|
||||
</ul>
|
||||
<div class="tab-content">
|
||||
<div class="tab-pane active">
|
||||
Tab one content
|
||||
</div>
|
||||
<div class="tab-pane">
|
||||
Tab two content
|
||||
</div>
|
||||
<div class="tab-pane">
|
||||
Tab three content
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<hr />
|
||||
|
||||
|
||||
|
||||
<h5>Secondary</h5>
|
||||
|
||||
<div class="control-tabs secondary-tabs" data-control="tab">
|
||||
<ul class="nav nav-tabs">
|
||||
<li class="active"><a href="#secondaryTabOne">One</a></li>
|
||||
<li><a href="#secondaryTabTwo">Two</a></li>
|
||||
<li><a href="#secondaryTabThree">Three</a></li>
|
||||
</ul>
|
||||
<div class="tab-content">
|
||||
<div class="tab-pane active">
|
||||
Tab one content
|
||||
</div>
|
||||
<div class="tab-pane">
|
||||
Tab two content
|
||||
</div>
|
||||
<div class="tab-pane">
|
||||
Tab three content
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<hr />
|
||||
|
||||
|
||||
|
||||
<h5>Content</h5>
|
||||
|
||||
<div class="control-tabs content-tabs" data-control="tab">
|
||||
<ul class="nav nav-tabs">
|
||||
<li class="active"><a href="#contentTabOne">One</a></li>
|
||||
<li><a href="#contentTabTwo">Two</a></li>
|
||||
<li><a href="#contentTabThree">Three</a></li>
|
||||
</ul>
|
||||
<div class="tab-content">
|
||||
<div class="tab-pane active">
|
||||
Tab one content
|
||||
</div>
|
||||
<div class="tab-pane">
|
||||
Tab two content
|
||||
</div>
|
||||
<div class="tab-pane">
|
||||
Tab three content
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -434,17 +434,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
> .tab-content > .tab-pane {
|
||||
padding-top: 0;
|
||||
|
||||
div.list-header,
|
||||
div.padded-container,
|
||||
div.toolbar-widget {
|
||||
background: @color-tab-content-active-bg;
|
||||
padding-top: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
// Tab divider to sit inset the standard padding (20px)
|
||||
&.tabs-inset {
|
||||
> ul.nav-tabs, > div > ul.nav-tabs, > div > div > ul.nav-tabs {
|
||||
|
|
@ -482,6 +471,24 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .tab-content > .tab-pane {
|
||||
padding-top: 0;
|
||||
|
||||
div.list-header,
|
||||
div.padded-container,
|
||||
div.toolbar-widget {
|
||||
background: @color-tab-content-active-bg;
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
// Pane to sit inset the standard padding (20px)
|
||||
&.pane-inset {
|
||||
margin-left: -20px;
|
||||
margin-right: -20px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1332,8 +1332,6 @@ div.progress{height:9px;-webkit-box-shadow:none;box-shadow:none;background:#d9de
|
|||
.control-tabs.content-tabs > ul.nav-tabs li:last-child{border-right:1px solid #e3e5e7}
|
||||
.control-tabs.content-tabs > ul.nav-tabs li.active{background:#ffffff}
|
||||
.control-tabs.content-tabs > ul.nav-tabs li.active a{font-weight:600}
|
||||
.control-tabs.content-tabs > .tab-content > .tab-pane{padding-top:0}
|
||||
.control-tabs.content-tabs > .tab-content > .tab-pane div.list-header,.control-tabs.content-tabs > .tab-content > .tab-pane div.padded-container,.control-tabs.content-tabs > .tab-content > .tab-pane div.toolbar-widget{background:#ffffff;padding-top:20px}
|
||||
.control-tabs.content-tabs.tabs-inset > ul.nav-tabs,.control-tabs.content-tabs.tabs-inset > div > ul.nav-tabs,.control-tabs.content-tabs.tabs-inset > div > div > ul.nav-tabs{margin-left:-20px;margin-right:-20px}
|
||||
.control-tabs.content-tabs.tabs-inset > ul.nav-tabs li:first-child,.control-tabs.content-tabs.tabs-inset > div > ul.nav-tabs li:first-child,.control-tabs.content-tabs.tabs-inset > div > div > ul.nav-tabs li:first-child{margin-left:20px}
|
||||
.control-tabs.content-tabs.tabs-offset > ul.nav-tabs li:first-child{margin-left:20px}
|
||||
|
|
@ -1341,6 +1339,9 @@ div.progress{height:9px;-webkit-box-shadow:none;box-shadow:none;background:#d9de
|
|||
.control-tabs.content-tabs.tabs-flush > ul.nav-tabs li:last-child{border-right:1px solid transparent}
|
||||
.control-tabs.content-tabs.tabs-flush > ul.nav-tabs li:first-child{border-left:1px solid transparent}
|
||||
.control-tabs.content-tabs.tabs-flush > ul.nav-tabs li.active:last-child{border-right:1px solid #e3e5e7}
|
||||
.control-tabs.content-tabs > .tab-content > .tab-pane{padding-top:0}
|
||||
.control-tabs.content-tabs > .tab-content > .tab-pane div.list-header,.control-tabs.content-tabs > .tab-content > .tab-pane div.padded-container,.control-tabs.content-tabs > .tab-content > .tab-pane div.toolbar-widget{background:#ffffff;padding-top:20px}
|
||||
.control-tabs.content-tabs > .tab-content > .tab-pane.pane-inset{margin-left:-20px;margin-right:-20px}
|
||||
.hide-tabs .control-tabs ul.nav-tabs{display:none}
|
||||
.hide-tabs .control-tabs > div.tab-content > div.tab-pane{padding-top:0}
|
||||
.form-sidebar .control-tabs.secondary > div > ul.nav-tabs > li a{background:transparent}
|
||||
|
|
|
|||
Loading…
Reference in New Issue