html&css changes for mobile usage
This commit is contained in:
Creesch
parent
abefa7430a
commit
14706d1e33
2 changed files with 94 additions and 57 deletions
|
|
@ -263,60 +263,7 @@ input[type=text], input[type=password], .badge {
|
|||
.navbar-inverse {
|
||||
background-color: #181818;
|
||||
}
|
||||
@media (max-width: 968px) {
|
||||
#sidebar {
|
||||
font-size: normal;
|
||||
z-index: 1;
|
||||
width: 0;
|
||||
}
|
||||
#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;
|
||||
height: auto;
|
||||
max-width: 100%;
|
||||
border: 0;
|
||||
}
|
||||
#nicklist {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
#bufferlines {
|
||||
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;
|
||||
}
|
||||
|
|
@ -363,3 +310,92 @@ img.embed {
|
|||
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;
|
||||
bottom: 0px;
|
||||
width: 60%;
|
||||
top: 0px;
|
||||
}
|
||||
|
||||
#sidebar.in, #sidebar.collapsing {
|
||||
-webkit-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;
|
||||
margin-left: 0;
|
||||
height: auto;
|
||||
max-width: 100%;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
#nicklist {
|
||||
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 */;
|
||||
}
|
||||
|
||||
.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: ">";
|
||||
}
|
||||
}
|
||||
|
|
@ -17,6 +17,7 @@
|
|||
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.min.js"></script>
|
||||
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular-route.min.js"></script>
|
||||
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular-sanitize.min.js"></script>
|
||||
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular-touch.js"></script>
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"></script>
|
||||
<script type="text/javascript" src="3rdparty/inflate.min.js"></script>
|
||||
<script type="text/javascript" src="js/localstorage.js"></script>
|
||||
|
|
@ -270,7 +271,7 @@ $ openssl req -nodes -newkey rsa:4096 -keyout relay.pem -x509 -days 365 -out rel
|
|||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div bindonce id="sidebar" class="vertical-line collapse in">
|
||||
<div bindonce id="sidebar" ng-swipe-left="swipeSidebar()" class="vertical-line collapse in">
|
||||
<ul class="nav nav-pills nav-stacked" ng-class="{'indented': (predicate === 'serverSortKey')}">
|
||||
<li class="bufferfilter">
|
||||
<form role="form">
|
||||
|
|
@ -287,7 +288,7 @@ $ openssl req -nodes -newkey rsa:4096 -keyout relay.pem -x509 -days 365 -out rel
|
|||
</ul>
|
||||
</div>
|
||||
<div bindonce id="bufferlines" class="monospace" ng-class="{'withnicklist': showNicklist}">
|
||||
<div id="nicklist" ng-show="showNicklist" class="vertical-line-left">
|
||||
<div id="nicklist" ng-show="showNicklist" ng-swipe-right="closeNick()" class="vertical-line-left">
|
||||
<ul class="nicklistgroup list-unstyled" ng-repeat="group in activeBuffer().nicklist">
|
||||
<li ng-repeat="nick in group.nicks|orderBy:'name'" ng-click="openBuffer(nick.name)">
|
||||
<a ng-click="nickAction(nick)"><span bo-class="nick.prefixClasses" bo-text="nick.prefix"></span><span bo-class="nick.nameClasses" bo-text="nick.name"></span></a>
|
||||
|
|
@ -305,7 +306,7 @@ $ openssl req -nodes -newkey rsa:4096 -keyout relay.pem -x509 -days 365 -out rel
|
|||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody ng-repeat="bufferline in (bufferlines = activeBuffer().lines)">
|
||||
<tbody ng-swipe-right="swipeSidebar()" ng-swipe-left="openNick()" ng-repeat="bufferline in (bufferlines = activeBuffer().lines)">
|
||||
<tr class="bufferline">
|
||||
<td class="time">
|
||||
<span class="date" bo-class="{'repeated-time': bufferline.shortTime==bufferlines[$index-1].shortTime}">
|
||||
|
|
|
|||
Loading…
Reference in a new issue