Improve theming and layout of the sidebar menu.
This commit is contained in:
Arpad Csanyi
94
app.css
94
app.css
@@ -1,21 +1,26 @@
|
||||
#sidebar-menu {
|
||||
background-color: #eee;
|
||||
background-color: #f5f5f5;
|
||||
border-right: 1px solid #ccc;
|
||||
position: fixed;
|
||||
overflow-y: scroll;
|
||||
width: 250px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#sidebar-menu ul {
|
||||
ul {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#sidebar-menu ul li {
|
||||
li {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.sidebar__level-1 {
|
||||
padding: .5rem 1rem;
|
||||
}
|
||||
|
||||
.sidebar__level-1, .sidebar__level-2 {
|
||||
padding-left: 15px;
|
||||
}
|
||||
@@ -24,17 +29,71 @@
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
||||
.sidebar__level-1 {
|
||||
background-color: #ccc;
|
||||
font-size: 2rem;
|
||||
line-height: 3rem;
|
||||
margin-top: 2rem;
|
||||
.sidebar__level-1:hover,
|
||||
.sidebar__level-2--item:hover {
|
||||
cursor: pointer;
|
||||
background-color: rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.menu--top .sidebar__level-1:first-child {
|
||||
#sidebar-menu .sidebar__level-2--item {
|
||||
padding: 0 20px 0 0;
|
||||
}
|
||||
|
||||
#sidebar-menu .sidebar__level-2--item .fa.pull-right {
|
||||
position: relative;
|
||||
top: 2px;
|
||||
}
|
||||
|
||||
#sidebar-menu .fa-star-o {
|
||||
color: #f5f5f5;
|
||||
}
|
||||
|
||||
#sidebar-menu .sidebar__level-2--item:hover .fa-star-o {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
#sidebar-menu .sidebar__level-2--item .fa-star-o:hover {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
#sidebar-menu .fa-star {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.sidebar__level-1 {
|
||||
font-size: 2rem;
|
||||
line-height: 3rem;
|
||||
}
|
||||
|
||||
.sidebar__level-1--item {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.sidebar__level-1--item:nth-child(1) {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#sidebar-menu .sidebar__actions--list {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.sidebar__action--item {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.sidebar__action {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.sidebar__level-2--item.active {
|
||||
background-color: #555;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.sidebar__level-2--item.active i {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.menu--bottom {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
@@ -44,6 +103,7 @@
|
||||
|
||||
.menu--bottom .sidebar__level-1 {
|
||||
background-color: transparent;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
#main-content {
|
||||
@@ -85,10 +145,6 @@
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.unk--wrapper {
|
||||
/*margin-top: 10rem;*/
|
||||
}
|
||||
|
||||
.uhk {
|
||||
max-width: 100%;
|
||||
}
|
||||
@@ -104,6 +160,14 @@
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.btn:not(.btn-primary) {
|
||||
border: none;
|
||||
.sidebar__level-1 .fa.fa-chevron-down {
|
||||
margin-right: 1rem;
|
||||
font-size: 1.5rem;
|
||||
position: relative;
|
||||
top: .5rem;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.sidebar__level-1:hover .fa.fa-chevron-down {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
39
app.html
39
app.html
@@ -61,19 +61,46 @@
|
||||
<script type="text/x-handlebars-template" id="sidebar-menu--source">
|
||||
{{#if menu}}
|
||||
<ul class="menu--top">
|
||||
{{#each menu}}
|
||||
<li><div class="sidebar__level-1"><i class='fa fa-{{icon}}'></i> {{name}}</div>
|
||||
{{#each menu as |menuValue menuKey|}}
|
||||
<li class="sidebar__level-1--item">
|
||||
<div class="sidebar__level-1">
|
||||
<i class='fa fa-{{icon}}'></i> {{name}} <!--<span class="small-text">collapse</span>-->
|
||||
{{#if expandable}}
|
||||
<a href="#" class="btn btn-default pull-right btn-sm">
|
||||
<i class="fa fa-plus"></i>
|
||||
</a>
|
||||
{{/if}}
|
||||
<i class="fa fa-chevron-down pull-right" style=""></i>
|
||||
</div>
|
||||
{{#if children}}
|
||||
<ul>
|
||||
{{#each children}}
|
||||
<li>
|
||||
<li class="sidebar__level-2--item {{classes}}">
|
||||
<div class="sidebar__level-2">
|
||||
<i class="fa fa-{{icon}}"></i> {{name}}
|
||||
{{name}}
|
||||
{{#if menuValue.hasDefaults}}
|
||||
{{#if isDefault}}
|
||||
<i class="fa fa-star pull-right"></i>
|
||||
{{else}}
|
||||
<i class="fa fa-star-o pull-right"></i>
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
</div>
|
||||
</li>
|
||||
{{/each}}
|
||||
</ul>
|
||||
{{/if}}
|
||||
{{#if actions}}
|
||||
<ul class="sidebar__actions--list">
|
||||
{{#each actions}}
|
||||
<li class="sidebar__action--item">
|
||||
<a href="#" class="btn btn-default btn-xs sidebar__action">
|
||||
<i class="fa fa-{{icon}}"></i> {{name}}
|
||||
</a>
|
||||
</li>
|
||||
{{/each}}
|
||||
</ul>
|
||||
{{/if}}
|
||||
</li>
|
||||
{{/each}}
|
||||
</ul>
|
||||
@@ -81,7 +108,9 @@
|
||||
{{#if menuBottom}}
|
||||
<ul class="menu--bottom">
|
||||
{{#each menuBottom}}
|
||||
<li><div class="sidebar__level-1"><i class='fa fa-{{icon}}'></i> {{name}}</div>
|
||||
<li class="sidebar__level-2--item">
|
||||
<div class="sidebar__level-1"><i class='fa fa-{{icon}}'></i> {{name}}</div>
|
||||
</li>
|
||||
{{/each}}
|
||||
</ul>
|
||||
{{/if}}
|
||||
|
||||
41
app.js
41
app.js
@@ -27,19 +27,19 @@ var menuObject = {
|
||||
menu: [
|
||||
{
|
||||
icon: 'keyboard-o',
|
||||
name: 'Keyboard',
|
||||
name: 'Keymaps',
|
||||
hasDefaults: true,
|
||||
expandable: true,
|
||||
children: [
|
||||
{
|
||||
icon: 'plus-circle',
|
||||
name: 'Add new keymap'
|
||||
icon: '',
|
||||
name: 'Factory keymap',
|
||||
isDefault: true
|
||||
},
|
||||
{
|
||||
icon: '',
|
||||
name: 'Factory keymap'
|
||||
},
|
||||
{
|
||||
icon: '',
|
||||
name: 'QWERTY'
|
||||
name: 'QWERTY',
|
||||
classes: 'active'
|
||||
},
|
||||
{
|
||||
icon: '',
|
||||
@@ -56,17 +56,20 @@ var menuObject = {
|
||||
{
|
||||
icon: '',
|
||||
name: 'Mortal Kombat X'
|
||||
},
|
||||
]
|
||||
}
|
||||
],
|
||||
// actions: [
|
||||
// {
|
||||
// icon: 'plus',
|
||||
// name: 'Add new keymap'
|
||||
// }
|
||||
// ]
|
||||
},
|
||||
{
|
||||
icon: 'play',
|
||||
name: 'Macros',
|
||||
expandable: true,
|
||||
children: [
|
||||
{
|
||||
icon: 'plus-circle',
|
||||
name: 'Add new macro'
|
||||
},
|
||||
{
|
||||
icon: '',
|
||||
name: 'Macro1'
|
||||
@@ -82,8 +85,14 @@ var menuObject = {
|
||||
{
|
||||
icon: '',
|
||||
name: 'Macro4'
|
||||
},
|
||||
]
|
||||
}
|
||||
],
|
||||
// actions: [
|
||||
// {
|
||||
// icon: 'plus',
|
||||
// name: 'Add new macro'
|
||||
// }
|
||||
// ]
|
||||
},
|
||||
{
|
||||
'icon': 'puzzle-piece',
|
||||
|
||||
Reference in New Issue
Block a user