include a topbar with title

This commit is contained in:
Tor Hveem 2013-10-16 14:13:23 +02:00
parent b6197ad4a7
commit b40ff4fb43
2 changed files with 42 additions and 11 deletions

View file

@ -89,7 +89,24 @@ input[type=text], input[type=password] {
background: rgba(255,255,255,0.5); background: rgba(255,255,255,0.5);
border-radius: 0; border-radius: 0;
} }
#sidebar, .panel { #topbar {
position: fixed;
width: 100%;
height: 25px;
z-index: 1;
}
#topbar .brand {
height: 25px;
padding-left: 5px;
}
#topbar .brand img {
height: 25px;
}
#topbar .title {
padding-left: 14%;
}
#topbar, #sidebar, .panel {
background: #282828; background: #282828;
} }
#sidebar { #sidebar {
@ -99,7 +116,11 @@ input[type=text], input[type=password] {
height: 100%; height: 100%;
min-width: 130px; min-width: 130px;
overflow: auto; overflow: auto;
padding-top: 35px; /* topbar */
} }
#sidebar form {
padding-left: 5px;
}
.content { .content {
height: 100%; height: 100%;
min-height: 100%; min-height: 100%;
@ -111,7 +132,8 @@ input[type=text], input[type=password] {
margin-left: 14%; margin-left: 14%;
width: auto; width: auto;
position: relative; position: relative;
padding-bottom: 55px; padding-bottom: 55px; /* bottom input */
padding-top: 35px; /* topbar */
} }
.bufferlines .btn { .bufferlines .btn {
font-family: sans-serif; font-family: sans-serif;
@ -125,6 +147,7 @@ input[type=text], input[type=password] {
position: relative; position: relative;
min-height: 0; min-height: 0;
margin-left: 0; margin-left: 0;
height: auto;
max-width: 100%; max-width: 100%;
border: 0; border: 0;
} }

View file

@ -23,7 +23,7 @@
<body ng-controller="WeechatCtrl" ng-keydown="handleKeyPress($event)"> <body ng-controller="WeechatCtrl" ng-keydown="handleKeyPress($event)">
<div ng-hide="connected" class="container"> <div ng-hide="connected" class="container">
<h2> <h2>
<img src="img/favicon.png"> <img alt="logo" src="img/favicon.png">
glowing bear glowing bear
<small> <small>
WeeChat web frontend WeeChat web frontend
@ -125,20 +125,28 @@
</div> </div>
</div> </div>
<div class="content" ng-show="connected"> <div class="content" ng-show="connected">
<div id="topbar">
<div class="brand pull-left">
<img alt="brand" src="img/favicon.png">
</div>
<div class="title">
{{ pageTitle}}
</div>
</div>
<div id="sidebar"> <div id="sidebar">
<form class="form-inline" role="form">
<div class="checkbox">
<label>
<input type="checkbox" ng-model="onlyUnread">
Unread only
</label>
</div>
</form>
<ul class="nav nav-pills nav-stacked"> <ul class="nav nav-pills nav-stacked">
<li class="bufferfilter"> <li class="bufferfilter">
<form role="form"> <form role="form">
<input class="form-control" type="text" id="bufferFilter" ng-model="search.$" placeholder="Search"> <input class="form-control" type="text" id="bufferFilter" ng-model="search.$" placeholder="Search">
</form> </form>
<form class="form-inline" role="form">
<div class="checkbox">
<label>
<input type="checkbox" ng-model="onlyUnread">
Unread only
</label>
</div>
</form>
</li> </li>
<li class="label" ng-class="{'active': content.active }" ng-repeat="(key, content) in buffers | toArray | filter:search | filter:hasUnread | orderBy:'content.number':true"> <li class="label" ng-class="{'active': content.active }" ng-repeat="(key, content) in buffers | toArray | filter:search | filter:hasUnread | orderBy:'content.number':true">
<a href="#" ng-click="setActiveBuffer(content.id)" title="{{ content.fullName }}"> <a href="#" ng-click="setActiveBuffer(content.id)" title="{{ content.fullName }}">