jinql
/
blur-admin
mirror of https://github.com/akveo/blur-admin
1
0
Fork 0
Code Issues Releases Wiki Activity

feat(accordions): Add accordions page

pull/3/head
Vladimir Lugovsky 2015-12-23 13:16:19 +03:00
parent 752bb8e48a
commit 5eafe949ab
10 changed files with 155 additions and 124 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
bower.json
View File

@ -47,7 +47,8 @@
"angular-chart.js": "~0.8.8",
"angular-chartist.js": "~3.3.12",
"angular-morris-chart": "~1.1.0",
"angular-bootstrap": "~0.14.3"
"angular-bootstrap": "~0.14.3",
"angular-animate": "~1.4.8"
},
"overrides": {
"amcharts": {

1
src/app/app.js
View File

@ -1,6 +1,7 @@
'use strict';
angular.module('BlurAdmin', [
'ngAnimate',
'ui.bootstrap',
'ui.sortable',
'ui.router',

40
src/app/pages/tabs/mainTabs.html Normal file
View File

@ -0,0 +1,40 @@
<uib-tabset>
<uib-tab heading="Start">
<p>
Take up one idea. Make that one idea your life--think of it, dream of it, live on that idea. Let the brain, muscles, nerves, every part of your body, be full of that idea, and just leave every other idea alone. This is the way to success.
</p>
<p>
People who succeed have momentum. The more they succeed, the more they want to succeed, and the more they find a way to succeed. Similarly, when someone is failing, the tendency is to get on a downward spiral that can even become a self-fulfilling prophecy.
</p>
</uib-tab>
<uib-tab heading="Getting Done" >
<p>
You can't connect the dots looking forward; you can only connect them looking backwards. So you have to trust that the dots will somehow connect in your future. You have to trust in something--your gut, destiny, life, karma, whatever. This approach has never let me down, and it has made all the difference in my life.
</p>
<p>
The reason most people never reach their goals is that they don't define them, or ever seriously consider them as believable or achievable. Winners can tell you where they are going, what they plan to do along the way, and who will be sharing the adventure with them.
</p>
</uib-tab>
<uib-tab ng-init="$dropdownTabActive = 1" class="with-dropdown">
<uib-tab-heading uib-dropdown>
<a uib-dropdown-toggle ng-click="$event.stopPropagation()">
Dropdown tab <i class="caret"></i>
</a>
<ul class="uib-dropdown-menu">
<li><a ng-click="$dropdownTabActive = 1">Tab 1</a></li>
<li><a ng-click="$dropdownTabActive = 2">Tab 2</a></li>
</ul>
</uib-tab-heading>
<div ng-show="$dropdownTabActive == 1">
<p>
Success is ... knowing your purpose in life, growing to reach your maximum potential, and sowing seeds that benefit others.
</p>
<p>Failure is the condiment that gives success its flavor.</p>
</div>
<div ng-show="$dropdownTabActive == 2">
<p>
<button class="btn btn-danger">I'm just a dummy button</button>
</p>
</div>
</uib-tab>
</uib-tabset>

22
src/app/pages/tabs/sampleAccordion.html Normal file
View File

@ -0,0 +1,22 @@
<uib-accordion>
<uib-accordion-group heading="Static Header, initially expanded">
This content is straight in the template.
</uib-accordion-group>
<uib-accordion-group heading="Dynamic Body Content">
<p>The body of the uib-accordion group grows to fit the contents</p>
<button type="button" class="btn btn-default btn-sm" ng-click="addItem()">Add Item</button>
</uib-accordion-group>
<uib-accordion-group heading="Custom template">
Hello
</uib-accordion-group>
<uib-accordion-group heading="Delete account" panel-class="panel-danger">
<p>Please, to delete your account, click the button below</p>
<button class="btn btn-danger">Delete</button>
</uib-accordion-group>
<uib-accordion-group is-open="status.open">
<uib-accordion-heading>
I can have markup, too! <b class="fa pull-right" ng-class="{'fa-angle-up': status.open, 'fa-angle-down': !status.open}"></b>
</uib-accordion-heading>
This is just some content to illustrate fancy headings.
</uib-accordion-group>
</uib-accordion>

49
src/app/pages/tabs/sideTabs.html Normal file
View File

@ -0,0 +1,49 @@
<uib-tabset class="tabs-left">
<uib-tab heading="Start">
<p>
Take up one idea. Make that one idea your life--think of it, dream of it, live on that idea. Let the brain, muscles, nerves, every part of your body, be full of that idea, and just leave every other idea alone. This is the way to success.
</p>
<p>
People who succeed have momentum. The more they succeed, the more they want to succeed, and the more they find a way to succeed. Similarly, when someone is failing, the tendency is to get on a downward spiral that can even become a self-fulfilling prophecy.
</p>
</uib-tab>
<uib-tab heading="Get it done" >
<p>
You can't connect the dots looking forward; you can only connect them looking backwards. So you have to trust that the dots will somehow connect in your future. You have to trust in something--your gut, destiny, life, karma, whatever. This approach has never let me down, and it has made all the difference in my life.
</p>
<p>
The reason most people never reach their goals is that they don't define them, or ever seriously consider them as believable or achievable. Winners can tell you where they are going, what they plan to do along the way, and who will be sharing the adventure with them.
</p>
</uib-tab>
<uib-tab heading="Achieve">
<p>
Success is ... knowing your purpose in life, growing to reach your maximum potential, and sowing seeds that benefit others.
</p>
<p>Failure is the condiment that gives success its flavor.</p>
</uib-tab>
</uib-tabset>
<uib-tabset class="tabs-right">
<uib-tab heading="Start">
<p>
Take up one idea. Make that one idea your life--think of it, dream of it, live on that idea. Let the brain, muscles, nerves, every part of your body, be full of that idea, and just leave every other idea alone. This is the way to success.
</p>
<p>
People who succeed have momentum. The more they succeed, the more they want to succeed, and the more they find a way to succeed. Similarly, when someone is failing, the tendency is to get on a downward spiral that can even become a self-fulfilling prophecy.
</p>
</uib-tab>
<uib-tab heading="Get it done" >
<p>
You can't connect the dots looking forward; you can only connect them looking backwards. So you have to trust that the dots will somehow connect in your future. You have to trust in something--your gut, destiny, life, karma, whatever. This approach has never let me down, and it has made all the difference in my life.
</p>
<p>
The reason most people never reach their goals is that they don't define them, or ever seriously consider them as believable or achievable. Winners can tell you where they are going, what they plan to do along the way, and who will be sharing the adventure with them.
</p>
</uib-tab>
<uib-tab heading="Achieve">
<p>
Success is ... knowing your purpose in life, growing to reach your maximum potential, and sowing seeds that benefit others.
</p>
<p>Failure is the condiment that gives success its flavor.</p>
</uib-tab>
</uib-tabset>

126
src/app/pages/tabs/tabs.html
View File

@ -1,126 +1,10 @@
<div>
<div class="row">
<div class="col-md-6">
<uib-tabset>
<uib-tab heading="Start">
<p>
Take up one idea. Make that one idea your life--think of it, dream of it, live on that idea. Let the brain, muscles, nerves, every part of your body, be full of that idea, and just leave every other idea alone. This is the way to success.
</p>
<p>
People who succeed have momentum. The more they succeed, the more they want to succeed, and the more they find a way to succeed. Similarly, when someone is failing, the tendency is to get on a downward spiral that can even become a self-fulfilling prophecy.
</p>
</uib-tab>
<uib-tab heading="Getting Done" >
<p>
You can't connect the dots looking forward; you can only connect them looking backwards. So you have to trust that the dots will somehow connect in your future. You have to trust in something--your gut, destiny, life, karma, whatever. This approach has never let me down, and it has made all the difference in my life.
</p>
<p>
The reason most people never reach their goals is that they don't define them, or ever seriously consider them as believable or achievable. Winners can tell you where they are going, what they plan to do along the way, and who will be sharing the adventure with them.
</p>
</uib-tab>
<uib-tab ng-init="$dropdownTabActive = 1" class="with-dropdown">
<uib-tab-heading uib-dropdown>
<a uib-dropdown-toggle ng-click="$event.stopPropagation()">
Dropdown tab <i class="caret"></i>
</a>
<ul class="uib-dropdown-menu">
<li><a ng-click="$dropdownTabActive = 1">Tab 1</a></li>
<li><a ng-click="$dropdownTabActive = 2">Tab 2</a></li>
</ul>
</uib-tab-heading>
<div ng-show="$dropdownTabActive == 1">
<p>
Success is ... knowing your purpose in life, growing to reach your maximum potential, and sowing seeds that benefit others.
</p>
<p>Failure is the condiment that gives success its flavor.</p>
</div>
<div ng-show="$dropdownTabActive == 2">
<p>
<button class="btn btn-danger">I'm just a dummy button</button>
</p>
</div>
</uib-tab>
</uib-tabset>
</div>
<div class="col-md-6 tabset-group">
<uib-tabset class="tabs-left">
<uib-tab heading="Start">
<p>
Take up one idea. Make that one idea your life--think of it, dream of it, live on that idea. Let the brain, muscles, nerves, every part of your body, be full of that idea, and just leave every other idea alone. This is the way to success.
</p>
<p>
People who succeed have momentum. The more they succeed, the more they want to succeed, and the more they find a way to succeed. Similarly, when someone is failing, the tendency is to get on a downward spiral that can even become a self-fulfilling prophecy.
</p>
</uib-tab>
<uib-tab heading="Get it done" >
<p>
You can't connect the dots looking forward; you can only connect them looking backwards. So you have to trust that the dots will somehow connect in your future. You have to trust in something--your gut, destiny, life, karma, whatever. This approach has never let me down, and it has made all the difference in my life.
</p>
<p>
The reason most people never reach their goals is that they don't define them, or ever seriously consider them as believable or achievable. Winners can tell you where they are going, what they plan to do along the way, and who will be sharing the adventure with them.
</p>
</uib-tab>
<uib-tab heading="Achieve">
<p>
Success is ... knowing your purpose in life, growing to reach your maximum potential, and sowing seeds that benefit others.
</p>
<p>Failure is the condiment that gives success its flavor.</p>
</uib-tab>
</uib-tabset>
<uib-tabset class="tabs-right">
<uib-tab heading="Start">
<p>
Take up one idea. Make that one idea your life--think of it, dream of it, live on that idea. Let the brain, muscles, nerves, every part of your body, be full of that idea, and just leave every other idea alone. This is the way to success.
</p>
<p>
People who succeed have momentum. The more they succeed, the more they want to succeed, and the more they find a way to succeed. Similarly, when someone is failing, the tendency is to get on a downward spiral that can even become a self-fulfilling prophecy.
</p>
</uib-tab>
<uib-tab heading="Get it done" >
<p>
You can't connect the dots looking forward; you can only connect them looking backwards. So you have to trust that the dots will somehow connect in your future. You have to trust in something--your gut, destiny, life, karma, whatever. This approach has never let me down, and it has made all the difference in my life.
</p>
<p>
The reason most people never reach their goals is that they don't define them, or ever seriously consider them as believable or achievable. Winners can tell you where they are going, what they plan to do along the way, and who will be sharing the adventure with them.
</p>
</uib-tab>
<uib-tab heading="Achieve">
<p>
Success is ... knowing your purpose in life, growing to reach your maximum potential, and sowing seeds that benefit others.
</p>
<p>Failure is the condiment that gives success its flavor.</p>
</uib-tab>
</uib-tabset>
</div>
</div>
<div class="row">
<div class="col-md-6">
<uib-accordion close-others="oneAtATime">
<uib-accordion-group heading="Static Header, initially expanded">
This content is straight in the template.
</uib-accordion-group>
<uib-accordion-group heading="Dynamic Body Content">
<p>The body of the uib-accordion group grows to fit the contents</p>
<button type="button" class="btn btn-default btn-sm" ng-click="addItem()">Add Item</button>
</uib-accordion-group>
<uib-accordion-group heading="Custom template">
Hello
</uib-accordion-group>
<uib-accordion-group heading="Delete account" panel-class="panel-danger">
<p>Please, to delete your account, click the button below</p>
<button class="btn btn-danger">Delete</button>
</uib-accordion-group>
<uib-accordion-group>
<uib-accordion-heading>
I can have markup, too! <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': status.open, 'glyphicon-chevron-right': !status.open}"></i>
</uib-accordion-heading>
This is just some content to illustrate fancy headings.
</uib-accordion-group>
</uib-accordion>
</div>
<div class="col-md-6">
<div class="col-md-6" ng-include="'app/pages/tabs/mainTabs.html'"></div>
<div class="col-md-6 tabset-group" ng-include="'app/pages/tabs/sideTabs.html'"></div>
</div>
<div class="row accordions-row">
<div class="col-md-6" ng-include="'app/pages/tabs/sampleAccordion.html'"></div>
<div class="col-md-6" ng-include="'app/pages/tabs/sampleAccordion.html'"></div>
</div>
</div>

6
src/sass/app/_tabsPage.scss
View File

@ -1,5 +1,9 @@
.tabset-group {
> div {
> div + div {
margin-top: 15px;
}
}
.accordions-row {
margin-top: 30px;
}

27
src/sass/theme/components/_accordion.scss Normal file
View File

@ -0,0 +1,27 @@
.panel-group {
> .panel {
> .panel-heading {
padding: 0;
> h4.panel-title {
height: 50px;
width: 100%;
padding: 0;
> a {
display: block;
padding: 15px 22px;
width: 100%;
}
}
}
}
}
.panel-collapse {
transition: height $default-animation-duration $default-animation-style;
.panel-body {
padding: 15px;
}
}

2
src/sass/theme/components/_tabs.scss
View File

@ -124,6 +124,6 @@
}
.tab-content {
padding: 10px 15px;
padding: 15px;
background: #ffffff;
}

3
src/sass/theme/conf/_variables.scss
View File

@ -58,6 +58,9 @@ $medium-panel-height: 400px;
$extra-medium-panel-height: 550px;
$large-panel-height: 974px;
$default-animation-duration: 0.2s;
$default-animation-style: ease-out;
$assets-root: '../assets/';
$images-root: $assets-root + 'img/';
$fonts-root: $assets-root + 'fonts/';