Skip to content

Commit af57c76

Browse files
joni2backjoni2back
committed
header and sidebar redesign based in material
1 parent e9fc510 commit af57c76

File tree

7 files changed

+220
-143
lines changed

7 files changed

+220
-143
lines changed

‎dist/angular-filemanager.min.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/angular-filemanager.min.js‎

Lines changed: 4 additions & 4 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/css/main.css‎

Lines changed: 128 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,12 @@ body {
1313
margin-bottom: 0;
1414
border: 0;
1515
border-radius: 0;
16+
color: #fff;
17+
}
18+
19+
.navbar .navbar-collapse {
20+
overflow: visible;
21+
padding: 0;
1622
}
1723

1824
.navbar .navbar-toggle {
@@ -25,22 +31,6 @@ body {
2531
line-height: 100%;
2632
}
2733

28-
.navbar .navbar-form {
29-
border-bottom: none;
30-
border-top: none;
31-
box-shadow: none;
32-
padding: 0 10px;
33-
margin-top: 10px;
34-
}
35-
36-
.breadcrumb {
37-
border-radius: 0;
38-
}
39-
40-
.breadcrumb .btn {
41-
margin-top: -5px;
42-
}
43-
4434
.btn.btn-default {
4535
color: #444;
4636
background-color: #FAFAFA;
@@ -68,6 +58,12 @@ textarea.code {
6858

6959
.sidebar {
7060
display: none;
61+
background: #fafafa;
62+
margin-top: 2px;
63+
padding: 0;
64+
overflow-x: hidden;
65+
overflow-y: auto;
66+
border-right: 1px solid #eee;
7167
}
7268

7369
.btn-go-back {
@@ -80,18 +76,24 @@ textarea.code {
8076
margin-left: -20px;
8177
}
8278

79+
8380
.nav-sidebar > li > a {
84-
padding-right: 20px;
85-
padding-left: 20px;
81+
color: #7a7a7a;
82+
padding: 7px 0 7px 16px;
8683
}
8784

88-
.nav-sidebar > .active > a,
89-
.nav-sidebar > .active > a:hover,
90-
.nav-sidebar > .active > a:focus {
91-
color: #fff;
92-
background-color: #2196F3;
85+
86+
.nav-sidebar> li > a:hover,
87+
.nav-sidebar> li > a:focus {
88+
background: none;
89+
color: #1378b9;
90+
}
91+
92+
.nav-sidebar > li.active > a {
93+
color: #2196F3;
9394
}
9495

96+
9597
.main {
9698
padding: 0;
9799
}
@@ -106,15 +108,6 @@ textarea.code {
106108
padding-left: 12px;
107109
}
108110

109-
.file-tree ul.nav.nav-sidebar > li {
110-
border-left: 1px solid #ddd;
111-
padding-left: 4px;
112-
}
113-
114-
.file-tree ul.nav.nav-sidebar > li > a {
115-
padding: 2px 2px 2px 4px;
116-
}
117-
118111
.file-tree ul.nav.nav-sidebar:first-child {
119112
padding-left: 0;
120113
}
@@ -216,20 +209,22 @@ textarea.code {
216209
background-color: #888;
217210
}
218211

219-
.dropdown-menu.dropdown-right-click {
220-
display: block;
221-
position: static;
222-
margin-bottom: 5px;
223-
font-size: 1em;
212+
.dropdown-menu {
213+
font-size: 14px;
224214
}
225215

226-
.dropdown-menu.dropdown-right-click>li>a {
227-
padding: 5px 12px;
216+
.dropdown-menu > li > a {
217+
padding: 6px 20px;
228218
}
229219

230-
.dropdown-menu.dropdown-right-click>li>a>i {
231-
font-size: .9em;
232-
margin-right: 1px;
220+
.dropdown-menu > li > a > i {
221+
margin-right: 4px;
222+
}
223+
224+
.dropdown-menu.dropdown-right-click {
225+
display: block;
226+
position: static;
227+
margin-bottom: 5px;
233228
}
234229

235230
.dropdown-menu.dropdown-right-click .divider {
@@ -337,30 +332,13 @@ table th > a:focus {
337332
}
338333

339334
.container-fluid {
340-
height: -webkit-calc(100% - 55px);
341-
height: -moz-calc(100% - 55px);
342-
height: calc(100% - 55px);
335+
height: -webkit-calc(100% - 58px);
336+
height: -moz-calc(100% - 58px);
337+
height: calc(100% - 58px);
343338
}
344339

345340
.sidebar {
346341
display: block;
347-
padding: 0;
348-
overflow-x: hidden;
349-
overflow-y: auto;
350-
background-color: #f5f5f5;
351-
border-right: 1px solid #eee;
352-
}
353-
}
354-
355-
@media (max-width: 768px) {
356-
.navbar-form .btn {
357-
margin-top: 5px;
358-
}
359-
}
360-
361-
@media (max-width: 475px) {
362-
.table.table-files .btn {
363-
display: none;
364342
}
365343
}
366344

@@ -369,25 +347,100 @@ table th > a:focus {
369347
}
370348

371349
.item-extension::after {
372-
font-family: "Roboto","Helvetica Neue",Helvetica,Arial,sans-serif;
373-
content: attr(data-ext);
374-
left: 4px;
375-
position: absolute;
376-
color: #fff;
377-
font-size: 9px;
378-
text-transform: uppercase;
379-
top: 21px;
350+
font-family: "Roboto","Helvetica Neue",Helvetica,Arial,sans-serif;
351+
content: attr(data-ext);
352+
left: 4px;
353+
position: absolute;
354+
color: #fff;
355+
font-size: 9px;
356+
text-transform: uppercase;
357+
top: 21px;
380358
}
381359

382360
.selected .item-extension::after {
383-
color: #2196F3;
361+
color: #2196F3;
384362
}
385363

386364
.form-control.search-input {
387-
max-width: 20em;
388-
display: inline;
365+
max-width: 20em;
366+
display: inline;
389367
}
390368

391369
.like-code {
392-
display: inline;
393-
}
370+
display: inline;
371+
}
372+
373+
.point {
374+
margin-right: 8px;
375+
font-size: 10px;
376+
}
377+
378+
.navbar .btn.btn-flat {
379+
padding: 2px;
380+
width: 32px;
381+
height: 30px;
382+
margin-left: 5px;
383+
}
384+
385+
.navbar-inverse .navbar-toggle .icon-bar {
386+
background: #fff;
387+
}
388+
389+
.navbar-inverse .navbar-form input[type="text"] {
390+
color: #7a7a7a;
391+
box-shadow: none;
392+
margin: 0 10px;
393+
}
394+
395+
.navbar .navbar-form {
396+
border-bottom: none;
397+
border-top: none;
398+
box-shadow: none;
399+
padding: 0;
400+
margin: 12px 0;
401+
}
402+
403+
.breadcrumb {
404+
background: none;
405+
padding: 0;
406+
font-size: 17px;
407+
margin: 12px 0;
408+
overflow: hidden;
409+
max-height: 30px
410+
}
411+
412+
.breadcrumb>.active,
413+
.breadcrumb a {
414+
color: #fff;
415+
}
416+
417+
.breadcrumb>li+li:before {
418+
font-family: 'Glyphicons Halflings';
419+
content: "\e080";
420+
font-size: 12px;
421+
color: #fff;
422+
}
423+
424+
.scrollable-menu {
425+
height: auto;
426+
max-height: 200px;
427+
overflow-x: hidden;
428+
}
429+
430+
.btn.btn-flat {
431+
background: none;
432+
color: #fff;
433+
}
434+
435+
.btn-group.open > .btn-flat,
436+
.btn.btn-flat,
437+
.btn.btn-flat:active {
438+
box-shadow: none;
439+
}
440+
441+
.btn.btn-flat > i {
442+
font-size: 18px;
443+
width: 18px;
444+
height: 18px;
445+
line-height: 100%;
446+
}

‎src/templates/current-folder-breadcrumb.html‎

Lines changed: 4 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,15 @@
1-
<ol class="breadcrumb mb0">
1+
<ol class="breadcrumb">
22
<li>
33
<a href="" ng-click="fileNavigator.goTo(-1)">
4-
<i class="glyphicon glyphicon-folder-open mr2"></i>
4+
{{ config.appName }}
55
</a>
66
</li>
77
<li ng-repeat="(key, dir) in fileNavigator.currentPath track by key" ng-class="{'active':$last}" class="animated fast fadeIn">
88
<a href="" ng-show="!$last" ng-click="fileNavigator.goTo(key)">
9-
<i class="glyphicon glyphicon-folder-open mr2"></i> {{dir}}
9+
{{dir | strLimit : 8}}
1010
</a>
1111
<span ng-show="$last">
12-
<i class="glyphicon glyphicon-folder-open mr2"></i> {{dir}}
12+
{{dir | strLimit : 12}}
1313
</span>
1414
</li>
15-
<li>
16-
<button class="btn btn-primary btn-xs" ng-click="fileNavigator.upDir()">
17-
<i class="glyphicon glyphicon-level-up"></i>
18-
</button>
19-
</li>
2015
</ol>

‎src/templates/main.html‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,10 @@
44
<div class="container-fluid">
55
<div class="row">
66

7-
<div class="col-sm-3 col-md-2 sidebar file-tree animated slow fadeIn" ng-include="config.tplPath + '/sidebar.html'" ng-show="config.sidebar &amp;&amp; fileNavigator.history[0]"></div>
8-
<div class="main" ng-class="config.sidebar &amp;&amp; fileNavigator.history[0] &amp;&amp; 'col-sm-9 col-md-10'">
9-
<div ng-include="config.tplPath + '/current-folder-breadcrumb.html'" ng-show="config.breadcrumb"></div>
7+
<div class="col-sm-4 col-md-3 sidebar file-tree animated slow fadeIn" ng-include="config.tplPath + '/sidebar.html'" ng-show="config.sidebar &amp;&amp; fileNavigator.history[0]">
8+
</div>
9+
10+
<div class="main" ng-class="config.sidebar &amp;&amp; fileNavigator.history[0] &amp;&amp; 'col-sm-8 col-md-9'">
1011
<div ng-include="config.tplPath + '/' + viewTemplate" class="main-navigation clearfix"></div>
1112
</div>
1213
</div>

0 commit comments

Comments
 (0)