openstack/horizon
Code Issues Proposed changes

Bootstrap Theme Preview links to sections don't work Edit

Browse Source 
There's a bug indicating that the browser won't scroll to #element-id when
clicking anchor links (href="#element-id"). We can fix this issue bypassing
AngularJS router using target="_self". This fix works but Angular is still
rewriting the the hash to "its style", another way to fix this could be to
enable html5Mode and will allow us to use browser history.

This commit also inserts an element (using :before pseudo-selector) with
negative margin matching the navbar height, thus preventing h1 elements from
being overlapped by the navbar (which is position:fixed).

Change-Id: Ia51b385a8148440d86dd588918658f5454416d77
Closes-bug: #1555863
This commit is contained in:
Eddie Ramirez 2016-03-17 22:28:25 +00:00
parent 8996355964
commit 83a2d36adc
2 changed files with 20 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
openstack_dashboard/contrib/developer/static/dashboard/developer/theme-preview/theme-preview.html
View File

@ -5,16 +5,16 @@
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-4">
<div class="list-group">
<a translate class="list-group-item" href="#navbar">Navbar</a>
<a translate class="list-group-item" href="#buttons">Buttons</a>
<a translate class="list-group-item" href="#typography">Typography</a>
<a translate class="list-group-item" href="#tables">Tables</a>
<a translate class="list-group-item" href="#forms">Forms</a>
<a translate class="list-group-item" href="#navs">Navs</a>
<a translate class="list-group-item" href="#indicators">Indicators</a>
<a translate class="list-group-item" href="#progress-bars">Progress bars</a>
<a translate class="list-group-item" href="#containers">Containers</a>
<a translate class="list-group-item" href="#dialogs">Dialogs</a>
<a translate class="list-group-item" href="#navbar" target="_self">Navbar</a>
<a translate class="list-group-item" href="#buttons" target="_self">Buttons</a>
<a translate class="list-group-item" href="#typography" target="_self">Typography</a>
<a translate class="list-group-item" href="#tables" target="_self">Tables</a>
<a translate class="list-group-item" href="#forms" target="_self">Forms</a>
<a translate class="list-group-item" href="#navs" target="_self">Navs</a>
<a translate class="list-group-item" href="#indicators" target="_self">Indicators</a>
<a translate class="list-group-item" href="#progress-bars" target="_self">Progress bars</a>
<a translate class="list-group-item" href="#containers" target="_self">Containers</a>
<a translate class="list-group-item" href="#dialogs" target="_self">Dialogs</a>
</div>
</div>
</div>

10
openstack_dashboard/contrib/developer/static/dashboard/developer/theme-preview/theme-preview.scss
View File

@ -56,4 +56,14 @@ themepreview {
margin: 0;
}
}
.page-header {
h1:before {
content: '';
height: $navbar-height;
margin: -$navbar-height 0 0;
display: block;
}
}
}