Skip to content

U
ulakbus-ui
Commit ddb49705 authored by Evren Kutar's avatar Evren Kutar
Browse files
Options

sample dashboard styling

parent ca529169
Hide whitespace changes
Inline Side-by-side
Showing with 146 additions and 29 deletions
app/app.css
View file @ ddb49705
/* app css stylesheet */ /*
* Base structure
*/
.menu { /* Move down content because we have a fixed navbar that is 50px tall */
list-style: none; body {
border-bottom: 0.1em solid black; padding-top: 50px;
margin-bottom: 2em;
padding: 0 0 0.5em;
} }
.menu:before {
content: "["; /*
* Global add-ons
*/
.sub-header {
padding-bottom: 10px;
border-bottom: 1px solid #eee;
} }
.menu:after { /*
content: "]"; * Top navigation
* Hide default border to remove 1px line.
*/
.navbar-fixed-top {
border: 0;
} }
.menu > li { /*
display: inline; * Sidebar
*/
/* Hide for mobile, show later */
.sidebar {
display: none;
}
@media (min-width: 768px) {
.sidebar {
position: fixed;
top: 51px;
bottom: 0;
left: 0;
z-index: 1000;
display: block;
padding: 20px;
overflow-x: hidden;
overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
background-color: #f5f5f5;
border-right: 1px solid #eee;
}
} }
.menu > li:before { /* Sidebar navigation */
content: "|"; .nav-sidebar {
padding-right: 0.3em; margin-right: -21px; /* 20px padding + 1px border */
margin-bottom: 20px;
margin-left: -20px;
}
.nav-sidebar > li > a {
padding-right: 20px;
padding-left: 20px;
} }
.nav-sidebar > .active > a,
.nav-sidebar > .active > a:hover,
.nav-sidebar > .active > a:focus {
color: #fff;
background-color: #428bca;
}
.menu > li:nth-child(1):before { /*
content: ""; * Main content
padding: 0; */
.main {
padding: 20px;
}
@media (min-width: 768px) {
.main {
padding-right: 40px;
padding-left: 40px;
}
}
.main .page-header {
margin-top: 0;
}
/*
* Placeholder dashboard ideas
*/
.placeholders {
margin-bottom: 30px;
text-align: center;
}
.placeholders h4 {
margin-bottom: 0;
}
.placeholder {
margin-bottom: 20px;
}
.placeholder img {
display: inline-block;
border-radius: 50%;
} }
app/index.html
View file @ ddb49705
...@@ -21,21 +21,63 @@ ...@@ -21,21 +21,63 @@
<!--<script src="bower_components/html5-boilerplate/js/vendor/modernizr-2.6.2.min.js"></script>--> <!--<script src="bower_components/html5-boilerplate/js/vendor/modernizr-2.6.2.min.js"></script>-->
</head> </head>
<body> <body>
<div class="container"> <nav class="navbar navbar-inverse navbar-fixed-top">
<ul class="menu"> <div class="container-fluid">
<li><a href="#/login">login</a></li> <div class="navbar-header">
</ul> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">ZAERP</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="#/dashboard">Dashboard</a></li>
<li><a href="#/settings">Settings</a></li>
<li><a href="#/profile">Profile</a></li>
<li><a href="#/login">Login</a></li>
</ul>
<form class="navbar-form navbar-right">
<input type="text" class="form-control" placeholder="Search...">
</form>
</div>
</div>
</nav>
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 col-md-2 sidebar">
<ul class="nav nav-sidebar">
<li class="active"><a href="#">Overview <span class="sr-only">(current)</span></a></li>
<li><a href="#">Reports</a></li>
<li><a href="#">Analytics</a></li>
<li><a href="#">Export</a></li>
</ul>
<ul class="nav nav-sidebar">
<li><a href="">Nav item</a></li>
<li><a href="">Nav item again</a></li>
<li><a href="">One more nav</a></li>
<li><a href="">Another nav item</a></li>
<li><a href="">More navigation</a></li>
</ul>
<ul class="nav nav-sidebar">
<li><a href="">Nav item again</a></li>
<li><a href="">One more nav</a></li>
<li><a href="">Another nav item</a></li>
</ul>
</div>
<!--[if lt IE 7]> <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main" ng-view>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade
your browser</a> to improve your experience.</p>
<![endif]-->
<div class="row" ng-view></div>
<hr> </div>
<div>ZaerpUI app: v<span app-version></span></div> <hr>
<div>ZaerpUI app: v<span app-version></span></div>
</div>
</div> </div>
<!-- In production use: <!-- In production use:
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment