Skip to content
Projects
Groups
Snippets
Help
This project
Loading...
Sign in / Register
Toggle navigation
N
nexpie-grafana-theme
Overview
Overview
Details
Activity
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Registry
Registry
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
Kornkitt Poolsup
nexpie-grafana-theme
Commits
02e2d5da
Commit
02e2d5da
authored
Nov 23, 2017
by
Torkel Ödegaard
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
ux breadcrumb work
parent
b3ddcc80
Hide whitespace changes
Inline
Side-by-side
Showing
6 changed files
with
74 additions
and
80 deletions
+74
-80
public/app/core/components/navbar/navbar.html
+7
-14
public/app/core/components/navbar/navbar.ts
+0
-2
public/app/core/components/scroll/scroll.ts
+0
-1
public/app/features/plugins/partials/ds_list.html
+0
-1
public/sass/components/_scrollbar.scss
+0
-2
public/sass/layout/_page.scss
+67
-60
No files found.
public/app/core/components/navbar/navbar.html
View file @
02e2d5da
<div
class=
"page-nav"
>
<div
class=
"page-nav"
>
<div
class=
"container"
>
<div
class=
"container"
>
<div
class=
"page-breadcrumb"
>
<div
class=
"page-breadcrumbs"
>
<div
class=
"page-breadcrumb__item dropdown"
ng-repeat=
"item in ctrl.model.breadcrumbs"
>
<a
class=
"breadcrumb-item active"
href=
"/"
>
<a
class=
"pointer"
ng-href=
"{{::item.url}}"
>
<i
class=
"fa fa-home"
></i>
{{::item.text}}
</a>
</a>
<a
class=
"breadcrumb-item"
ng-href=
"{{::item.url}}"
ng-repeat=
"item in ctrl.model.breadcrumbs"
>
{{::item.text}}
<ul
class=
"dropdown-menu dropdown-menu--navbar"
>
</a>
<li
ng-repeat=
"subItem in ::item.children"
>
<a
class=
"pointer"
ng-href=
"{{::subItem.url}}"
ng-click=
"ctrl.navItemClicked(subItem, $event)"
>
{{::subItem.text}}
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
...
...
public/app/core/components/navbar/navbar.ts
View file @
02e2d5da
///<reference path="../../../headers/common.d.ts" />
import
coreModule
from
'../../core_module'
;
import
coreModule
from
'../../core_module'
;
import
{
NavModel
}
from
'../../nav_model_srv'
;
import
{
NavModel
}
from
'../../nav_model_srv'
;
...
...
public/app/core/components/scroll/scroll.ts
View file @
02e2d5da
...
@@ -7,7 +7,6 @@ export function geminiScrollbar() {
...
@@ -7,7 +7,6 @@ export function geminiScrollbar() {
link
:
function
(
scope
,
elem
,
attrs
)
{
link
:
function
(
scope
,
elem
,
attrs
)
{
let
scrollbar
=
new
PerfectScrollbar
(
elem
[
0
]);
let
scrollbar
=
new
PerfectScrollbar
(
elem
[
0
]);
console
.
log
(
'scrllbar!'
);
scope
.
$on
(
'$destroy'
,
()
=>
{
scope
.
$on
(
'$destroy'
,
()
=>
{
scrollbar
.
destroy
();
scrollbar
.
destroy
();
...
...
public/app/features/plugins/partials/ds_list.html
View file @
02e2d5da
...
@@ -46,4 +46,3 @@
...
@@ -46,4 +46,3 @@
</div>
</div>
</div>
</div>
</div>
</div>
public/sass/components/_scrollbar.scss
View file @
02e2d5da
...
@@ -92,8 +92,6 @@
...
@@ -92,8 +92,6 @@
.ps
{
.ps
{
overflow
:
auto
!
important
;
overflow
:
auto
!
important
;
}
}
}
.ps
:hover
>
.ps__rail-x
,
.ps
:hover
>
.ps__rail-y
{
}
}
.ps__rail-x
:hover
,
.ps__rail-x
:hover
,
...
...
public/sass/layout/_page.scss
View file @
02e2d5da
...
@@ -121,81 +121,88 @@
...
@@ -121,81 +121,88 @@
margin-bottom
:
$spacer
*
2
;
margin-bottom
:
$spacer
*
2
;
}
}
.page-breadcrumb
{
.page-breadcrumb
s
{
display
:
flex
;
display
:
flex
;
padding
:
0
$spacer
;
padding
:
3px
1
.5rem
1
.5rem
1
.5rem
;
line-height
:
0
.5
;
line-height
:
0
.5
;
}
}
$page-breadcrumb__angle-1
:
39px
;
.breadcrumb
{
$page-breadcrumb__angle-ul
:
31px
;
display
:
inline-block
;
$page-breadcrumb__angle-a
:
30px
;
box-shadow
:
0
0
15px
1px
rgba
(
0
,
0
,
0
,
0
.35
);
overflow
:
hidden
;
.page-breadcrumb__item
{
border-radius
:
5px
;
background
:
$page-nav-bg
;
counter-reset
:
flag
;
box-shadow
:
$page-nav-shadow
;
}
>
a
{
.breadcrumb-item
{
color
:
$page-nav-breadcrumb-color
;
text-decoration
:
none
;
font-size
:
$font-size-sm
;
outline
:
none
;
display
:
block
;
display
:
block
;
padding
:
0
.6rem
1rem
0
.6rem
3rem
;;
float
:
left
;
position
:
relative
;
font-size
:
12px
;
line-height
:
36px
;
&
:
:
after
{
padding
:
0
7px
0
37px
;
content
:
''
;
@include
gradientBar
(
$btn-inverse-bg
,
$btn-inverse-bg-hl
,
$btn-inverse-text-color
);
position
:
absolute
;
position
:
relative
;
top
:
-53px
;
box-shadow
:
$card-shadow
;
left
:
100%
;
content
:
''
;
height
:
0
;
width
:
0
;
border
:
$page-breadcrumb__angle-1
solid
transparent
;
border-right-width
:
0
;
border-left-width
:
$page-breadcrumb__angle-a
;
z-index
:
2
;
border-left-color
:
$page-nav-bg
;
}
}
&
:first-child
{
&
:first-child
{
a
{
padding-left
:
13px
;
padding-left
:
1rem
;
border-radius
:
5px
0
0
5px
;
/*to match with the parent's radius*/
}
font-size
:
20px
;
}
&
:first-child:before
{
left
:
14px
;
}
&
:last-child
{
border-radius
:
0
5px
5px
0
;
/*this was to prevent glitches on hover*/
padding-right
:
20px
;
}
&
.active
,
&
:hover
{
background
:
#333
;
background
:
linear-gradient
(
#333
,
#000
);
}
&
.active
:after
,
&
:hover:after
{
background
:
#333
;
background
:
linear-gradient
(
135deg
,
#333
,
#000
);
}
}
&
:
:
after
{
&
:after
{
content
:
''
;
content
:
''
;
position
:
absolute
;
position
:
absolute
;
top
:
-53px
;
top
:
0
;
left
:
100%
;
right
:
-18px
;
// half of square's length
content
:
''
;
height
:
0
;
// same dimension as the line-height of .breadcrumb-item
width
:
0
;
width
:
36px
;
border
:
$page-breadcrumb__angle-1
solid
transparent
;
height
:
36px
;
border-right-width
:
0
;
border-left-width
:
$page-breadcrumb__angle-ul
;
transform
:
scale
(
0
.707
)
rotate
(
45deg
);
// we need to prevent the arrows from getting buried under the next link
z-index
:
1
;
z-index
:
1
;
transform
:
translateX
(
4px
);
border-left-color
:
#282020
;
margin
:
0
;
}
&
:hover
{
// background same as links but the gradient will be rotated to compensate with the transform applied
background
:
$breadcrumb-hover-hl
;
background
:
linear-gradient
(
135deg
,
$btn-inverse-bg
,
$btn-inverse-bg-hl
)
;
.page-breadcrumb__caret
{
// stylish arrow design using box shadow
opacity
:
1
;
box-shadow
:
2px
-2px
0
2px
rgb
(
35
,
31
,
31
)
,
3px
-3px
0
2px
rgba
(
255
,
255
,
255
,
0
.1
);
}
>
a
{
// 5px - for rounded arrows and
color
:
$text-color
;
// 50px - to prevent hover glitches on the border created using shadows*/
border-radius
:
0
5px
0
50px
;
}
&
:
:
after
{
// we dont need an arrow after the last link
border-left-color
:
$breadcrumb-hover-hl
;
&
:last-child:after
{
color
:
$text-color
;
content
:
none
;
}
}
}
}
}
}
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment