tobast/glowingbear-mainbox
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Merge pull request #313 from glowing-bear/mobiledesign

Browse source 
Improve mobile design
This commit is contained in:
Tor Hveem 2014-06-10 16:56:43 +02:00
commit 3bb18cb8f3
3 changed files with 38 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

45
css/glowingbear.css
View file

@ -2,11 +2,14 @@ html,
body { body {
height: 100%; height: 100%;
/* The html and body elements cannot have any padding or margin. */ /* The html and body elements cannot have any padding or margin. */
overflow:hidden;
color: #ddd; color: #ddd;
background-color: #181818; background-color: #181818;
} }
.no-overflow {
overflow: hidden;
}
.horizontal-line { .horizontal-line {
-webkit-box-shadow: rgba(255, 255, 255, 0.07) 0 1px 0; -webkit-box-shadow: rgba(255, 255, 255, 0.07) 0 1px 0;
-moz-box-shadow: rgba(255, 255, 255, 0.07) 0 1px 0; -moz-box-shadow: rgba(255, 255, 255, 0.07) 0 1px 0;
@ -239,6 +242,12 @@ input[type=text], input[type=password], #sendMessage, .badge {
.nav-pills > li > a:hover, .nav-pills > li > a:hover span { .nav-pills > li > a:hover, .nav-pills > li > a:hover span {
color: #222; color: #222;
} }
/* fix for mobile firefox which ignores :hover */
.nav-pills > li > a:active, .nav-pills > li > a:active span {
text-decoration: none;
background-color: #eee;
color: #222;
}
.content { .content {
height: 100%; height: 100%;
min-height: 100%; min-height: 100%;
@ -368,15 +377,14 @@ h2 span, h2 small {
/* Mobile layout */ /* Mobile layout */
/* */ /* */
@media (max-width: 968px) { @media (max-width: 968px) {
.message span { .monospace {
color: #C7C7C7; /* readability on mobile +9001% */
font-family: sans-serif;
} }
.bufferline { #bufferlines table {
display: inline-block; border-collapse: separate;
padding-top: 4px; border-spacing: 2px 3px;
padding-bottom: 3px;
line-height: 15px;
} }
#sidebar { #sidebar {
@ -440,14 +448,21 @@ h2 span, h2 small {
} }
#bufferlines td.time { #bufferlines td.time {
display: inline; padding-right: 3px;
padding-right: 0; font-size: 12px;
}
#bufferlines td.time span.date {
display: block;
margin-top: -2px;
} }
#bufferlines td.prefix { #bufferlines td.prefix {
display: inline; display: inline;
padding-right: 0; padding-right: 0;
border: 0; border: 0;
font-weight: bold;
font-size: 15px;
} }
#bufferlines td.message { #bufferlines td.message {
@ -455,12 +470,10 @@ h2 span, h2 small {
display: inline; display: inline;
} }
#bufferlines td.prefix:before { /* a different colour is too irregular on mobile */
content: "<"; .repeated-time .cof-chat_time,
} .repeated-time .cof-chat_time_delimiters {
color: #999;
#bufferlines td.prefix:after {
content: ">";
} }
.footer { .footer {

8
index.html
View file

@ -32,7 +32,7 @@
<script type="text/javascript" src="3rdparty/favico-0.3.4-mod.min.js"></script> <script type="text/javascript" src="3rdparty/favico-0.3.4-mod.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head> </head>
<body ng-controller="WeechatCtrl" ng-keydown="handleKeyPress($event)"> <body ng-controller="WeechatCtrl" ng-keydown="handleKeyPress($event)" ng-class="{'no-overflow': connected}">
<div ng-hide="connected" class="container"> <div ng-hide="connected" class="container">
<h2> <h2>
<img alt="logo" src="assets/img/glowing-bear.svg"> <img alt="logo" src="assets/img/glowing-bear.svg">
@ -231,7 +231,7 @@ $ openssl req -nodes -newkey rsa:4096 -keyout relay.pem -x509 -days 365 -out rel
</li> </li>
</ul> </ul>
</div> </div>
<table ng-class="{'notimestamp':notimestamp}"> <table ng-class="{'notimestamp':!showtimestamp}">
<tbody> <tbody>
<tr class="bufferline"> <tr class="bufferline">
<td ng-hide="activeBuffer().allLinesFetched" colspan="3"> <td ng-hide="activeBuffer().allLinesFetched" colspan="3">
@ -290,8 +290,8 @@ $ openssl req -nodes -newkey rsa:4096 -keyout relay.pem -x509 -days 365 -out rel
<form class="form-inline" role="form"> <form class="form-inline" role="form">
<div class="checkbox"> <div class="checkbox">
<label> <label>
<input type="checkbox" ng-model="notimestamp"> <input type="checkbox" ng-model="showtimestamp">
Hide timestamps Show timestamps
</label> </label>
</div> </div>
</form> </form>

7
js/glowingbear.js
View file

@ -786,14 +786,13 @@ weechat.controller('WeechatCtrl', ['$rootScope', '$scope', '$store', '$timeout',
// We use 968 px as the cutoff, which should match the value in glowingbear.css // We use 968 px as the cutoff, which should match the value in glowingbear.css
var nonicklist = false; var nonicklist = false;
var noembed = false; var noembed = false;
var notimestamp = false; var showtimestamp = true;
$rootScope.wasMobileUi = false; $rootScope.wasMobileUi = false;
if ($rootScope.isMobileUi()) { if ($rootScope.isMobileUi()) {
nonicklist = true; nonicklist = true;
noembed = true; noembed = true;
notimestamp = true;
$rootScope.wasMobileUi = true; $rootScope.wasMobileUi = true;
} }
@ -811,8 +810,8 @@ weechat.controller('WeechatCtrl', ['$rootScope', '$scope', '$store', '$timeout',
$store.bind($scope, "orderbyserver", false); $store.bind($scope, "orderbyserver", false);
// Save setting for updating favicon // Save setting for updating favicon
$store.bind($scope, "useFavico", true); $store.bind($scope, "useFavico", true);
// Save setting for notimestamp // Save setting for showtimestamp
$store.bind($scope, "notimestamp", notimestamp); $store.bind($scope, "showtimestamp", showtimestamp);
// Save setting for playing sound on notification // Save setting for playing sound on notification
$store.bind($scope, "soundnotification", false); $store.bind($scope, "soundnotification", false);