Merge pull request #313 from glowing-bear/mobiledesign
Improve mobile design
This commit is contained in:
Tor Hveem
commit
3bb18cb8f3
3 changed files with 38 additions and 26 deletions
|
|
@ -2,11 +2,14 @@ html,
|
|||
body {
|
||||
height: 100%;
|
||||
/* The html and body elements cannot have any padding or margin. */
|
||||
overflow:hidden;
|
||||
color: #ddd;
|
||||
background-color: #181818;
|
||||
}
|
||||
|
||||
.no-overflow {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.horizontal-line {
|
||||
-webkit-box-shadow: rgba(255, 255, 255, 0.07) 0 1px 0;
|
||||
-moz-box-shadow: rgba(255, 255, 255, 0.07) 0 1px 0;
|
||||
|
|
@ -239,9 +242,15 @@ input[type=text], input[type=password], #sendMessage, .badge {
|
|||
.nav-pills > li > a:hover, .nav-pills > li > a:hover span {
|
||||
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 {
|
||||
height: 100%;
|
||||
min-height: 100%;
|
||||
height: 100%;
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
.monospace {
|
||||
|
|
@ -368,15 +377,14 @@ h2 span, h2 small {
|
|||
/* Mobile layout */
|
||||
/* */
|
||||
@media (max-width: 968px) {
|
||||
.message span {
|
||||
color: #C7C7C7;
|
||||
.monospace {
|
||||
/* readability on mobile +9001% */
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
.bufferline {
|
||||
display: inline-block;
|
||||
padding-top: 4px;
|
||||
padding-bottom: 3px;
|
||||
line-height: 15px;
|
||||
#bufferlines table {
|
||||
border-collapse: separate;
|
||||
border-spacing: 2px 3px;
|
||||
}
|
||||
|
||||
#sidebar {
|
||||
|
|
@ -440,14 +448,21 @@ h2 span, h2 small {
|
|||
}
|
||||
|
||||
#bufferlines td.time {
|
||||
display: inline;
|
||||
padding-right: 0;
|
||||
padding-right: 3px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
#bufferlines td.time span.date {
|
||||
display: block;
|
||||
margin-top: -2px;
|
||||
}
|
||||
|
||||
#bufferlines td.prefix {
|
||||
display: inline;
|
||||
padding-right: 0;
|
||||
border: 0;
|
||||
font-weight: bold;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
#bufferlines td.message {
|
||||
|
|
@ -455,12 +470,10 @@ h2 span, h2 small {
|
|||
display: inline;
|
||||
}
|
||||
|
||||
#bufferlines td.prefix:before {
|
||||
content: "<";
|
||||
}
|
||||
|
||||
#bufferlines td.prefix:after {
|
||||
content: ">";
|
||||
/* a different colour is too irregular on mobile */
|
||||
.repeated-time .cof-chat_time,
|
||||
.repeated-time .cof-chat_time_delimiters {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.footer {
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@
|
|||
<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>
|
||||
</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">
|
||||
<h2>
|
||||
<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>
|
||||
</ul>
|
||||
</div>
|
||||
<table ng-class="{'notimestamp':notimestamp}">
|
||||
<table ng-class="{'notimestamp':!showtimestamp}">
|
||||
<tbody>
|
||||
<tr class="bufferline">
|
||||
<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">
|
||||
<div class="checkbox">
|
||||
<label>
|
||||
<input type="checkbox" ng-model="notimestamp">
|
||||
Hide timestamps
|
||||
<input type="checkbox" ng-model="showtimestamp">
|
||||
Show timestamps
|
||||
</label>
|
||||
</div>
|
||||
</form>
|
||||
|
|
|
|||
|
|
@ -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
|
||||
var nonicklist = false;
|
||||
var noembed = false;
|
||||
var notimestamp = false;
|
||||
var showtimestamp = true;
|
||||
|
||||
$rootScope.wasMobileUi = false;
|
||||
|
||||
if ($rootScope.isMobileUi()) {
|
||||
nonicklist = true;
|
||||
noembed = true;
|
||||
notimestamp = true;
|
||||
$rootScope.wasMobileUi = true;
|
||||
}
|
||||
|
||||
|
|
@ -811,8 +810,8 @@ weechat.controller('WeechatCtrl', ['$rootScope', '$scope', '$store', '$timeout',
|
|||
$store.bind($scope, "orderbyserver", false);
|
||||
// Save setting for updating favicon
|
||||
$store.bind($scope, "useFavico", true);
|
||||
// Save setting for notimestamp
|
||||
$store.bind($scope, "notimestamp", notimestamp);
|
||||
// Save setting for showtimestamp
|
||||
$store.bind($scope, "showtimestamp", showtimestamp);
|
||||
// Save setting for playing sound on notification
|
||||
$store.bind($scope, "soundnotification", false);
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue