masq
/
glowing-bear
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Use sidebar instead of top nav

This commit is contained in:
Tor Hveem 2013-10-11 00:51:18 +02:00
parent 01f7b616b3
commit 1f4579748c
2 changed files with 41 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
css/glowingbear.css
View File

@ -37,28 +37,54 @@ input#sendMessage {
body { body {
color: white; color: white;
background-color: #222; background-color: #222;
padding-left: 5px; padding-left: 0;
padding-right: 5px; padding-right: 5px;
padding-bottom:70px; padding-bottom:70px;
padding-top: 70px;
} }
input#sendMessage { input#sendMessage {
border: 0; border: 0;
width: 100%; width: 100%;
} }
#sidebar {
position: fixed;
width: 12%;
min-height: 100%;
height: 100%;
min-width: 130px;
overflow: auto;
background: #282828;
}
.content { .content {
height: 100%; height: 100%;
min-height: 100%; min-height: 100%;
display: block;
} }
.bufferlines { .bufferlines {
font-family: monospace; font-family: monospace;
overflow-y: auto; overflow-y: auto;
margin-left: 14%;
width: auto;
position: relative;
} }
.navbar-fixed-bottom { .navbar-fixed-bottom {
margin: 0 5px 0 5px; margin: 0 5px 0 14%;
}
@media (max-width: 968px) {
#sidebar, .bufferlines {
position: relative;
min-height: 0;
margin-left: 0;
max-width: 100%;
border: 0;
}
#sidebar {
width: 100%;
text-align: center;
}
.navbar-fixed-bottom {
margin: 0 5px 0 5px;
}
} }
.color-light-green { .color-light-green {
color: chartreuse; color: chartreuse;
@ -118,4 +144,4 @@ input#sendMessage {
li.notification { li.notification {
color: green; color: green;
} }

27
index.html
View File

@ -19,23 +19,6 @@
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
</head> </head>
<body ng-controller="WeechatCtrl"> <body ng-controller="WeechatCtrl">
<nav ng-show="connected" class="navbar navbar-default navbar-inverse navbar-fixed-top" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav ">
<li class="label" ng-class="{'active': content.active }" ng-repeat="(key, content) in buffers | toArray | orderBy:'content.number':true">
<a href="#" ng-click="setActiveBuffer(content.id)" title="{{ content.fullName }}">{{ content.shortName }}<span ng-hide="content.shortName">{{ content.fullName }}</span> <span class="badge" ng-class="{'danger': content.notification }" ng-bind="content.unread"></span></a>
</li>
</ul>
</div>
</nav>
<div ng-hide="connected" class="container"> <div ng-hide="connected" class="container">
<h2> <h2>
<img src="img/favicon.png"> <img src="img/favicon.png">
@ -87,6 +70,16 @@ $ openssl req -nodes -newkey rsa:2048 -keyout relay.pem -x509 -days 365 -out rel
</form> </form>
</div> </div>
<div class="content" ng-show="connected"> <div class="content" ng-show="connected">
<div id="sidebar">
<ul class="nav nav-pills nav-stacked">
<li class="label" ng-class="{'active': content.active }" ng-repeat="(key, content) in buffers | toArray | orderBy:'content.number':true">
<a href="#" ng-click="setActiveBuffer(content.id)" title="{{ content.fullName }}">
<span class="badge pull-right" ng-class="{'danger': content.notification }" ng-bind="content.unread"></span>
{{ content.shortName }}<span ng-hide="content.shortName">{{ content.fullName }}</span>
</a>
</li>
</ul>
</div>
<div class="bufferlines"> <div class="bufferlines">
<div class="bufferline" ng-repeat="bufferline in activeBuffer().lines"> <div class="bufferline" ng-repeat="bufferline in activeBuffer().lines">
<span class="date text-muted"> <span class="date text-muted">