github
/
portainer
mirror of https://github.com/portainer/portainer
1
0
Fork 0
Code Issues Releases Wiki Activity

style(sidebar): make sidebar-header fixed, use flex instead of absolute to position footer (#1315)

pull/1336/head
1138-4EB 2017-10-27 09:35:35 +02:00 committed by Anthony Lapenna
parent b5629c5b1a
commit f8451e944a
2 changed files with 57 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
app/components/sidebar/sidebar.html
View File

@ -1,13 +1,14 @@
<!-- Sidebar --> <!-- Sidebar -->
<div id="sidebar-wrapper"> <div id="sidebar-wrapper">
<ul class="sidebar"> <div class="sidebar-header">
<li class="sidebar-main">
<a ng-click="toggleSidebar()" class="interactive"> <a ng-click="toggleSidebar()" class="interactive">
<img ng-if="logo" ng-src="{{ logo }}" class="img-responsive logo"> <img ng-if="logo" ng-src="{{ logo }}" class="img-responsive logo">
<img ng-if="!logo" src="images/logo.png" class="img-responsive logo" alt="Portainer"> <img ng-if="!logo" src="images/logo.png" class="img-responsive logo" alt="Portainer">
<span class="menu-icon glyphicon glyphicon-transfer"></span> <span class="menu-icon glyphicon glyphicon-transfer"></span>
</a> </a>
</li> </div>
<div class="sidebar-content">
<ul class="sidebar">
<li class="sidebar-title"> <li class="sidebar-title">
<span>Active endpoint</span> <span>Active endpoint</span>
</li> </li>
@ -77,8 +78,7 @@
</div> </div>
</li> </li>
</ul> </ul>
<div class="sidebar-footer"> <div class="sidebar-footer-content">
<div class="col-sm-12">
<img src="images/logo_small.png" class="img-responsive logo" alt="Portainer"> <img src="images/logo_small.png" class="img-responsive logo" alt="Portainer">
<span class="version">{{ uiVersion }}</span> <span class="version">{{ uiVersion }}</span>
</div> </div>

48
assets/css/app.css
View File

@ -278,7 +278,9 @@ a[ng-click]{
} }
ul.sidebar { ul.sidebar {
bottom: 40px; position: relative;
overflow: hidden;
flex-shrink: 0;
} }
ul.sidebar .sidebar-title { ul.sidebar .sidebar-title {
@ -292,7 +294,32 @@ ul.sidebar .sidebar-list a.active {
background: #2d3e63; background: #2d3e63;
} }
.sidebar-footer .logo { .sidebar-header {
height: 60px;
list-style: none;
text-indent: 20px;
font-size: 18px;
background: #2d3e63;
}
.sidebar-header a { color: #fff; }
.sidebar-header a:hover {text-decoration: none; }
.sidebar-header .menu-icon {
float: right;
padding-right: 28px;
line-height: 60px;
}
#page-wrapper:not(.open) .sidebar-footer-content {
display: none;
}
.sidebar-footer-content {
text-align: center;
}
.sidebar-footer-content .logo {
width: 100%; width: 100%;
max-width: 100px; max-width: 100px;
height: 100%; height: 100%;
@ -300,12 +327,27 @@ ul.sidebar .sidebar-list a.active {
margin: 2px 0 2px 20px; margin: 2px 0 2px 20px;
} }
.sidebar-footer .version { .sidebar-footer-content .version {
font-size: 11px; font-size: 11px;
margin: 11px 20px 0 7px; margin: 11px 20px 0 7px;
color: #fff; color: #fff;
} }
#sidebar-wrapper {
display: flex;
flex-flow: column;
}
.sidebar-content {
display: flex;
flex-direction: column;
justify-content: space-between;
overflow-y: auto;
overflow-x: hidden;
height: 100%;
}
#image-layers .btn{ #image-layers .btn{
padding: 0; padding: 0;
} }