From abefa7430a05c31eb424e85337cabe2e5c882391 Mon Sep 17 00:00:00 2001 From: creesch Date: Tue, 18 Feb 2014 14:40:02 +0100 Subject: [PATCH 1/2] Implement swiping for mobile devices --- js/glowingbear.js | 31 +++++++++++++++++++++++++++++-- 1 file changed, 29 insertions(+), 2 deletions(-) diff --git a/js/glowingbear.js b/js/glowingbear.js index 7de20f9..9efc3e2 100644 --- a/js/glowingbear.js +++ b/js/glowingbear.js @@ -1,4 +1,4 @@ -var weechat = angular.module('weechat', ['ngRoute', 'localStorage', 'weechatModels', 'plugins', 'ngSanitize', 'ngWebsockets', 'pasvaz.bindonce']); +var weechat = angular.module('weechat', ['ngRoute', 'localStorage', 'weechatModels', 'plugins', 'ngSanitize', 'ngWebsockets', 'pasvaz.bindonce', 'ngTouch']); weechat.filter('toArray', function () { 'use strict'; @@ -618,7 +618,29 @@ weechat.controller('WeechatCtrl', ['$rootScope', '$scope', '$store', '$timeout', $scope.noembed = true; $scope.notimestamp = true; } - + // Open and close panels while on mobile devices through swiping + $scope.swipeSidebar = function() { + if (document.body.clientWidth < 968) { + $('#sidebar').collapse('toggle'); + } + }; + + + $scope.openNick = function() { + if (document.body.clientWidth < 968) { + if($scope.nonicklist) { + $scope.nonicklist = false; + } + } + }; + + $scope.closeNick = function() { + if (document.body.clientWidth < 968) { + if(!$scope.nonicklist) { + $scope.nonicklist = true; + } + } + }; // Watch model and update show setting when it changes $scope.$watch('noembed', function() { @@ -632,6 +654,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('toggle'); + } return models.setActiveBuffer(bufferId, key); }; From 14706d1e33ce3985e75d425eafe093a683e4c4ce Mon Sep 17 00:00:00 2001 From: Creesch Date: Tue, 18 Feb 2014 14:50:38 +0100 Subject: [PATCH 2/2] html&css changes for mobile usage --- css/glowingbear.css | 138 ++++++++++++++++++++++++++++---------------- index.html | 7 ++- 2 files changed, 91 insertions(+), 54 deletions(-) diff --git a/css/glowingbear.css b/css/glowingbear.css index 5942a90..3ffe1bb 100644 --- a/css/glowingbear.css +++ b/css/glowingbear.css @@ -263,19 +263,85 @@ input[type=text], input[type=password], .badge { .navbar-inverse { background-color: #181818; } + +.color-light-green { + color: chartreuse; +} + +.color-27 { + color: deepskyblue; +} + +.danger, .alert-danger, .badge .alert-danger { + background-color: rgb(217, 83, 79); + color: #ddd; +} +.alert-danger { + border-color: #121212; + color: black; +} + +li.notification { + color: green; +} + +[ng-click], +[data-ng-click], +[x-ng-click] { + cursor: pointer; +} +::-webkit-scrollbar { + width: 10px; + height: 10px; +} +::-webkit-scrollbar-track-piece { + background-color: black; +} +::-webkit-scrollbar-thumb:vertical { + height: 15px; + background: rgba(255,255,255,0.5); +} + +img.embed { + max-height: 300px; +} + + +table.notimestamp td.time { + display: none; +} + + +/* */ +/* Mobile layout */ +/* */ @media (max-width: 968px) { + .message span { + color: #C7C7C7; + } + + .bufferline { + line-height: 25px; + } + #sidebar { font-size: normal; z-index: 1; - width: 0; + bottom: 0px; + width: 60%; + top: 0px; } + #sidebar.in, #sidebar.collapsing { -webkit-box-shadow: 0px 0px 120px #000; - box-shadow: 0px 0px 120px #000; + box-shadow: 0px 0px 120px #000; + bottom: 0px; } + #topbar .title { left: 40px; } + #bufferlines, #nicklist { position: relative; min-height: 0; @@ -284,82 +350,52 @@ input[type=text], input[type=password], .badge { max-width: 100%; border: 0; } + #nicklist { - width: 100%; + width: 160px; text-align: center; + -webkit-box-shadow: 0px 0px 120px #000; + box-shadow: 0px 0px 120px #000; + position: fixed; + margin-top: 10px; + background: #282828; + bottom: 0px; } + #bufferlines { - padding-bottom: 38px; /* navbar fixed bottom */ + padding-bottom: 38px; + /* navbar fixed bottom */; } + .navbar-fixed-bottom { margin: 0; } + .navbar { min-height: 0%; } + #bufferlines td.time { display: inline; padding-right: 0; } + #bufferlines td.prefix { display: inline; padding-right: 0; border: 0; } + #bufferlines td.message { padding-left: 0; display: inline; } + #bufferlines td.prefix:before { content: "<"; } + #bufferlines td.prefix:after { content: ">"; } -} -.color-light-green { - color: chartreuse; -} - -.color-27 { - color: deepskyblue; -} - -.danger, .alert-danger, .badge .alert-danger { - background-color: rgb(217, 83, 79); - color: #ddd; -} -.alert-danger { - border-color: #121212; - color: black; -} - -li.notification { - color: green; -} - -[ng-click], -[data-ng-click], -[x-ng-click] { - cursor: pointer; -} -::-webkit-scrollbar { - width: 10px; - height: 10px; -} -::-webkit-scrollbar-track-piece { - background-color: black; -} -::-webkit-scrollbar-thumb:vertical { - height: 15px; - background: rgba(255,255,255,0.5); -} - -img.embed { - max-height: 300px; -} - - -table.notimestamp td.time { - display: none; -} +} \ No newline at end of file diff --git a/index.html b/index.html index e26fd18..f63b735 100644 --- a/index.html +++ b/index.html @@ -17,6 +17,7 @@ + @@ -270,7 +271,7 @@ $ openssl req -nodes -newkey rsa:4096 -keyout relay.pem -x509 -days 365 -out rel -