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

refactor(tabs): apply new design

pull/3/head
alex 2016-02-17 15:57:31 +03:00
parent e61d51a071
commit df4599d2e2
11 changed files with 163 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/app/pages/ui/panels/panels.html
View File

@ -9,8 +9,7 @@
<div ba-panel ba-panel-class="xsmall-panel">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ac mi erat. Phasellus placerat, elit a laoreet
semper, enim ipsum ultricies orci, ac tincidunt tellus massa eu est. Nam non porta purus, sed facilisis justo. Nam
pulvinar sagittis quam, eget posuere turpis facilisis pharetra. Integer facilisis ex sed aliquet euismod. Interdum
et malesuada fames ac ante ipsum primis in faucibus.
pulvinar sagittis quam.
</div>
</div>
<div class="col-md-12 col-lg-4">
@ -19,8 +18,7 @@
<div ba-panel ba-panel-title="Example header" ba-panel-class="xsmall-panel">
Phasellus maximus venenatis augue, et vestibulum neque aliquam ut. Morbi mattis libero vitae vulputate dignissim.
Praesent placerat, sem non dapibus cursus, lacus nisi blandit quam, vitae porttitor lectus lacus non turpis. Donec
suscipit consequat tellus, non blandit purus porttitor a. Sed scelerisque ac purus id sollicitudin. Vestibulum
magna ligula, tristique eu aliquam id, mollis vel nunc.
suscipit consequat tellus.
</div>
</div>
<div class="col-md-12 col-lg-4">

17
src/app/pages/ui/tabs/contextualAccordion.html Normal file
View File

@ -0,0 +1,17 @@
<uib-accordion>
<uib-accordion-group heading="Primary" panel-class="panel-primary bootstrap-panel accordion-panel">
Primary <i class="ion-heart"></i>
</uib-accordion-group>
<uib-accordion-group heading="Success" panel-class="panel-success bootstrap-panel accordion-panel">
Success <i class="ion-checkmark-round"></i>
</uib-accordion-group>
<uib-accordion-group heading="Info" panel-class="panel-info bootstrap-panel accordion-panel">
Info <i class="ion-information-circled"></i>
</uib-accordion-group>
<uib-accordion-group heading="Warning" panel-class="panel-warning bootstrap-panel accordion-panel">
Warning <i class="ion-alert"></i>
</uib-accordion-group>
<uib-accordion-group heading="Danger" panel-class="panel-danger bootstrap-panel accordion-panel">
Danger <i class="ion-nuclear"></i>
</uib-accordion-group>
</uib-accordion>

41
src/app/pages/ui/tabs/mainTabs.html
View File

@ -1,18 +1,41 @@
<uib-tabset>
<uib-tabset class="panel medium-panel horizontal-tabs">
<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.
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.
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>
<div class="text-center">
<div class="kameleon-icon with-round-bg primary inline-icon"><img ng-src="{{::( 'Shop' | kameleonImg )}}"></div>
<div class="kameleon-icon with-round-bg primary inline-icon"><img ng-src="{{::( 'Programming' | kameleonImg )}}"></div>
<div class="kameleon-icon with-round-bg primary inline-icon"><img ng-src="{{::( 'Dna' | kameleonImg )}}"></div>
</div>
<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="Getting Done" >
<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.
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.
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">
@ -27,12 +50,14 @@
</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.
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>
<p class="text-center">
<button class="btn btn-danger">I'm just a dummy button</button>
</p>
</div>

16
src/app/pages/ui/tabs/sampleAccordion.html
View File

@ -1,21 +1,17 @@
<uib-accordion>
<uib-accordion-group heading="Static Header, initially expanded">
<uib-accordion-group is-open="true" heading="Static Header, initially expanded" panel-class="bootstrap-panel accordion-panel">
This content is straight in the template.
</uib-accordion-group>
<uib-accordion-group heading="Dynamic Body Content">
<uib-accordion-group heading="Dynamic Body Content" panel-class="bootstrap-panel accordion-panel">
<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>
<button type="button" class="btn btn-primary btn-sm">Add Item</button>
</uib-accordion-group>
<uib-accordion-group heading="Custom template">
<uib-accordion-group heading="Custom template" panel-class="bootstrap-panel accordion-panel">
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-group panel-class="bootstrap-panel accordion-panel">
<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>
I can have markup, too! <i class="fa pull-right ion-settings"></i>
</uib-accordion-heading>
This is just some content to illustrate fancy headings.
</uib-accordion-group>

52
src/app/pages/ui/tabs/sideTabs.html
View File

@ -1,49 +1,65 @@
<uib-tabset class="tabs-left">
<uib-tabset class="tabs-left panel xsmall-panel">
<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 class="text-center">
Take up one idea.
</p>
<div class="kameleon-icon with-round-bg danger"><img ng-src="{{::( 'Key' | kameleonImg )}}"></div>
<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>
People who succeed have momentum. The more they succeed, the more they want to succeed, and the more they find a
way to succeed. </p>
</uib-tab>
<uib-tab heading="Get it done" >
<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.
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.
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.
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-tabset class="tabs-right panel xsmall-panel">
<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 class="text-center">
Take up one idea.
</p>
<div class="kameleon-icon with-round-bg warning"><img ng-src="{{::( 'Phone-Booth' | kameleonImg )}}"></div>
<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>
People who succeed have momentum. The more they succeed, the more they want to succeed, and the more they find a
way to succeed. </p>
</uib-tab>
<uib-tab heading="Get it done" >
<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.
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.
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.
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>

2
src/app/pages/ui/tabs/tabs.html
View File

@ -5,6 +5,6 @@
</div>
<div class="row accordions-row">
<div class="col-md-6" ng-include="'app/pages/ui/tabs/sampleAccordion.html'"></div>
<div class="col-md-6" ng-include="'app/pages/ui/tabs/sampleAccordion.html'"></div>
<div class="col-md-6" ng-include="'app/pages/ui/tabs/contextualAccordion.html'"></div>
</div>
</div>

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

@ -4,6 +4,18 @@
}
}
.accordions-row {
margin-top: 30px;
}
.xsmall-panel {
.nav-tabs, .tab-content{
height: 100%;
}
}
.inline-icon{
display: inline-block;
margin: 20px 5px;
}
.panel.horizontal-tabs {
.tab-content{
height: calc(100% - 40px);
}
}

2
src/sass/app/_typography.scss
View File

@ -1,6 +1,6 @@
h1, h2, h3, h4, h5, h6 {
font-family: $font-family;
width: 90%;
width: 100%;
margin-top: 0;
}

28
src/sass/theme/bootstrap-overrides/_panel.scss
View File

@ -129,8 +129,32 @@ $panel-heading-font-size: 16px;
}
}
.panel.bootstrap-panel .panel-body p {
color: $default-text;
.panel.bootstrap-panel{
.panel-body, .panel-heading {
p, div, span {
color: $default-text;
}
}
}
.accordion-panel.panel.bootstrap-panel{
&.panel-primary,
&.panel-success,
&.panel-info,
&.panel-warning,
&.panel-danger{
.panel-heading {
p, div, span {
color: rgba(255, 255, 255, 0.8);
}
}
}
}
.panel-group .panel.accordion-panel{
.panel-heading{
border-bottom: 0;
}
}
.panel-group .panel {

49
src/sass/theme/bootstrap-overrides/_tabs.scss
View File

@ -24,10 +24,6 @@
margin-bottom: 0;
> a {
-webkit-border-radius: 0 0 4px 4px;
-moz-border-radius: 0 0 4px 4px;
border-radius: 0 0 4px 4px;
&:hover, &:focus {
border-top-color: #ddd;
border-bottom-color: transparent;
@ -56,14 +52,9 @@
.tabs-left > .nav-tabs {
float: left;
margin-right: 19px;
border-right: 1px solid #ddd;
> li > a {
margin-right: -1px;
-webkit-border-radius: 4px 0 0 4px;
-moz-border-radius: 4px 0 0 4px;
border-radius: 4px 0 0 4px;
&:hover, &:focus {
border-color: #eee #ddd #eee #eee;
@ -80,14 +71,10 @@
.tabs-right > .nav-tabs {
float: right;
margin-left: 19px;
border-left: 1px solid #ddd;
> li > a {
margin-left: -1px;
-webkit-border-radius: 0 4px 4px 0;
-moz-border-radius: 0 4px 4px 0;
border-radius: 0 4px 4px 0;
&:hover, &:focus {
border-color: #eee #eee #eee #ddd;
@ -104,13 +91,6 @@
/** /Different tabs positions, which were removed from bootstrap */
.nav-tabs {
border-bottom: none;
background-color: #ddd;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}
.nav-tabs > li.with-dropdown {
> a {
padding: 0;
@ -124,7 +104,32 @@
}
.tab-content {
padding: 15px;
padding: 15px 15px 5px 15px;
background: #ffffff;
color: $default-text;
}
overflow-y: scroll;
.tab-pane p{
color: $default-text;
}
}
.nav-tabs > li {
margin-bottom: 0;
}
.nav.nav-tabs {
border-bottom: none;
background-color: #ddd;
& > li > a {
margin-right: 0;
margin-bottom: 0;
border-radius: 0;
border: none;
&:hover{
border: none;
}
}
}
.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus{
border: none;
}

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

@ -71,7 +71,7 @@ $resMin: 320px;
$top-height: 66px;
$small-panel-height: 114px;
$xsmall-panel-height: 250px;
$xsmall-panel-height: 187px;
$medium-panel-height: 400px;
$extra-medium-panel-height: 550px;
$large-panel-height: 974px;