Collapsable sidebar for mobile sized screens
This commit is contained in:
Tor Hveem
parent
51e01ec6d4
commit
f9ba30f102
3 changed files with 43 additions and 33 deletions
|
|
@ -116,19 +116,19 @@ input[type=text], input[type=password], .badge {
|
|||
#topbar {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 25px;
|
||||
max-height: 25px;
|
||||
z-index: 1;
|
||||
line-height: 25px;
|
||||
height: 35px;
|
||||
max-height: 35px;
|
||||
z-index: 2;
|
||||
line-height: 35px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
#topbar .brand {
|
||||
float: left;
|
||||
height: 25px;
|
||||
height: 35px;
|
||||
padding-left: 5px;
|
||||
}
|
||||
#topbar .brand img {
|
||||
height: 25px;
|
||||
height: 32px;
|
||||
}
|
||||
#topbar .title {
|
||||
position: fixed;
|
||||
|
|
@ -155,8 +155,9 @@ input[type=text], input[type=password], .badge {
|
|||
width: 140px;
|
||||
min-height: 100%;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
padding-top: 35px; /* topbar */
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
margin-top: 35px; /* topbar */
|
||||
font-size: smaller;
|
||||
}
|
||||
#sidebar form {
|
||||
|
|
@ -175,7 +176,7 @@ input[type=text], input[type=password], .badge {
|
|||
overflow-x: hidden;
|
||||
right: 0;
|
||||
top: 0;
|
||||
padding-top: 25px;
|
||||
padding-top: 35px;
|
||||
padding-left: 5px;
|
||||
padding-bottom: 35px;
|
||||
}
|
||||
|
|
@ -225,7 +226,7 @@ input[type=text], input[type=password], .badge {
|
|||
overflow-y: auto;
|
||||
margin-left: 145px; /* sidebar */
|
||||
width: auto;
|
||||
top: 25px; /* topbar */
|
||||
top: 35px; /* topbar */
|
||||
padding-bottom: 10px;
|
||||
margin-right: -5px;
|
||||
}
|
||||
|
|
@ -243,10 +244,19 @@ input[type=text], input[type=password], .badge {
|
|||
background-color: #181818;
|
||||
}
|
||||
@media (max-width: 968px) {
|
||||
#topbar .title {
|
||||
left: 36px;
|
||||
#sidebar {
|
||||
font-size: normal;
|
||||
z-index: 1;
|
||||
width: 60%;
|
||||
}
|
||||
#sidebar, #bufferlines, #nicklist {
|
||||
#sidebar.in, #sidebar.collapsing {
|
||||
-webkit-box-shadow: 0px 0px 120px #000;
|
||||
box-shadow: 0px 0px 120px #000;
|
||||
}
|
||||
#topbar .title {
|
||||
left: 40px;
|
||||
}
|
||||
#bufferlines, #nicklist {
|
||||
position: relative;
|
||||
min-height: 0;
|
||||
margin-left: 0;
|
||||
|
|
@ -254,7 +264,7 @@ input[type=text], input[type=password], .badge {
|
|||
max-width: 100%;
|
||||
border: 0;
|
||||
}
|
||||
#sidebar, #nicklist {
|
||||
#nicklist {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
|
@ -287,23 +297,6 @@ input[type=text], input[type=password], .badge {
|
|||
#bufferlines td.prefix:after {
|
||||
content: ">";
|
||||
}
|
||||
.nav li.bufferfilter {
|
||||
margin-top: 2px;
|
||||
height: 47px;
|
||||
}
|
||||
.nav li form, .nav li form input {
|
||||
height: 100%;
|
||||
}
|
||||
.nav-stacked li {
|
||||
float: left;
|
||||
}
|
||||
.nav-stacked li a {
|
||||
min-width: 80px;
|
||||
padding: 15px;
|
||||
}
|
||||
.hide-mobile {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.color-light-green {
|
||||
color: chartreuse;
|
||||
|
|
|
|||
|
|
@ -163,7 +163,9 @@ $ openssl req -nodes -newkey rsa:2048 -keyout relay.pem -x509 -days 365 -out rel
|
|||
<div class="content" ng-show="connected">
|
||||
<div id="topbar" class="horizontal-line">
|
||||
<div class="brand">
|
||||
<img alt="brand" src="img/favicon.png" title="Connected to {{ host }}:{{ port}}">
|
||||
<a href="#" data-target="#sidebar" data-toggle="collapse">
|
||||
<img alt="brand" src="img/favicon.png" title="Connected to {{ host }}:{{ port}}">
|
||||
</a>
|
||||
</div>
|
||||
<button ng-show="debugMode" ng-click="countWatchers()">Count Watchers</button>
|
||||
<div class="title" ng-bind-html="activeBuffer().title | linky:'_blank'"></div>
|
||||
|
|
@ -251,7 +253,7 @@ $ openssl req -nodes -newkey rsa:2048 -keyout relay.pem -x509 -days 365 -out rel
|
|||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div id="sidebar" class="vertical-line">
|
||||
<div id="sidebar" class="vertical-line collapse in">
|
||||
<ul class="nav nav-pills nav-stacked">
|
||||
<li class="bufferfilter">
|
||||
<form role="form">
|
||||
|
|
|
|||
|
|
@ -552,6 +552,16 @@ weechat.controller('WeechatCtrl', ['$rootScope', '$scope', '$store', '$timeout',
|
|||
$store.bind($scope, "orderbyserver", false);
|
||||
// Save setting for displaying embeds in rootscope so it can be used from service
|
||||
$rootScope.visible = $scope.noembed === false;
|
||||
|
||||
// If we are on mobile chhange some defaults
|
||||
// We use 968 px as the cutoff, which should match the value in glowingbear.css
|
||||
if(document.body.clientWidth < 968) {
|
||||
$scope.nonicklist = true;
|
||||
$scope.noembed = true;
|
||||
$scope.notimestamp = true;
|
||||
}
|
||||
|
||||
|
||||
// Watch model and update show setting when it changes
|
||||
$scope.$watch('noembed', function() {
|
||||
$rootScope.visible = $scope.noembed === false;
|
||||
|
|
@ -564,6 +574,11 @@ weechat.controller('WeechatCtrl', ['$rootScope', '$scope', '$store', '$timeout',
|
|||
$rootScope.predicate = $scope.orderbyserver ? 'serverSortKey' : 'number';
|
||||
|
||||
$scope.setActiveBuffer = function(bufferId, key) {
|
||||
// If we are on mobile we need to collapse the menu on sidebar clicks
|
||||
// We use 968 px as the cutoff, which should match the value in glowingbear.css
|
||||
if(document.body.clientWidth<968) {
|
||||
$('#sidebar').collapse();
|
||||
}
|
||||
return models.setActiveBuffer(bufferId, key);
|
||||
};
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue