very quick and dirty responsive design for iPhones
Matthew Hodgson
parent
45e70a6b70
commit
d2bb28d2df
|
|
@ -1,3 +1,71 @@
|
|||
/*** Mobile voodoo ***/
|
||||
@media all and (max-device-width: 640px) {
|
||||
|
||||
#messageTableWrapper {
|
||||
margin-right: 0px ! important;
|
||||
}
|
||||
|
||||
.leftBlock {
|
||||
width: 8em ! important;
|
||||
}
|
||||
|
||||
#header,
|
||||
#messageTable,
|
||||
#wrapper,
|
||||
#roomName,
|
||||
#controls {
|
||||
max-width: 640px ! important;
|
||||
}
|
||||
|
||||
#userIdCell,
|
||||
#usersTableWrapper,
|
||||
#extraControls {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#buttonsCell {
|
||||
width: 60px ! important;
|
||||
padding-left: 20px ! important;
|
||||
}
|
||||
|
||||
#roomLogo {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#roomName {
|
||||
text-align: left ! important;
|
||||
top: -35px ! important;
|
||||
}
|
||||
|
||||
.bubble {
|
||||
font-size: 12px ! important;
|
||||
height: 20px ! important;
|
||||
}
|
||||
|
||||
#page {
|
||||
top: 35px ! important;
|
||||
bottom: 70px ! important;
|
||||
}
|
||||
|
||||
#header,
|
||||
#page {
|
||||
margin: 5px ! important;
|
||||
}
|
||||
|
||||
#header {
|
||||
padding: 5px ! important;
|
||||
}
|
||||
|
||||
/* stop zoom on select */
|
||||
select:focus,
|
||||
textarea,
|
||||
input
|
||||
{
|
||||
font-size: 16px ! important;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Myriad Pro", "Myriad", Helvetica, Arial, sans-serif;
|
||||
font-size: 12pt;
|
||||
|
|
@ -17,7 +85,6 @@ h1 {
|
|||
left: 0px;
|
||||
right: 0px;
|
||||
margin: 20px;
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
#wrapper {
|
||||
|
|
@ -32,8 +99,7 @@ h1 {
|
|||
text-align: right;
|
||||
top: -40px;
|
||||
position: absolute;
|
||||
font-size: 16pt;
|
||||
margin-bottom: 10px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
#controlPanel {
|
||||
|
|
@ -50,6 +116,10 @@ h1 {
|
|||
margin: auto;
|
||||
}
|
||||
|
||||
#buttonsCell {
|
||||
width: 150px;
|
||||
}
|
||||
|
||||
#inputBarTable {
|
||||
width: 100%;
|
||||
}
|
||||
|
|
@ -111,13 +181,13 @@ h1 {
|
|||
color: #fff;
|
||||
margin: 2px;
|
||||
bottom: 0px;
|
||||
font-size: 8pt;
|
||||
font-size: 12px;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.userPresence {
|
||||
text-align: center;
|
||||
font-size: 8pt;
|
||||
font-size: 12px;
|
||||
color: #fff;
|
||||
background-color: #aaa;
|
||||
border-bottom: 1px #ddd solid;
|
||||
|
|
@ -159,7 +229,7 @@ h1 {
|
|||
background-color: #fff;
|
||||
color: #888;
|
||||
font-weight: medium;
|
||||
font-size: 8pt;
|
||||
font-size: 12px;
|
||||
text-align: right;
|
||||
border-top: 1px #ddd solid;
|
||||
}
|
||||
|
|
@ -277,7 +347,7 @@ h1 {
|
|||
.profile-avatar {
|
||||
width: 160px;
|
||||
height: 160px;
|
||||
display:table-cell;
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
text-align: center;
|
||||
}
|
||||
|
|
@ -293,13 +363,19 @@ h1 {
|
|||
}
|
||||
|
||||
#user-displayname {
|
||||
font-size: 16pt;
|
||||
font-size: 24px;
|
||||
}
|
||||
/******************************/
|
||||
|
||||
#header {
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
#header
|
||||
{
|
||||
padding: 20px;
|
||||
max-width: 1280px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
#logo,
|
||||
#roomLogo {
|
||||
max-width: 1280px;
|
||||
margin: auto;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,10 +2,12 @@
|
|||
<html xmlns:ng="http://angularjs.org" ng-app="matrixWebClient" ng-controller="MatrixWebClientController">
|
||||
<head>
|
||||
<title>[matrix]</title>
|
||||
|
||||
|
||||
<link rel="stylesheet" href="app.css">
|
||||
<link rel="icon" href="favicon.ico">
|
||||
|
||||
<meta name="viewport" content="width=device-width">
|
||||
|
||||
<script type='text/javascript' src='js/jquery-1.8.3.min.js'></script>
|
||||
<script src="js/angular.min.js"></script>
|
||||
<script src="js/angular-route.min.js"></script>
|
||||
|
|
@ -36,8 +38,6 @@
|
|||
<button ng-click="showConfig()">Config</button>
|
||||
<button ng-click="logout()">Log out</button>
|
||||
</div>
|
||||
|
||||
<h1>[matrix]</h1>
|
||||
</header>
|
||||
|
||||
<div id="config" ng-hide="!config">
|
||||
|
|
|
|||
|
|
@ -1,4 +1,6 @@
|
|||
<div ng-controller="LoginController" class="login">
|
||||
<div ng-controller="LoginController" class="login">
|
||||
<h1 id="logo">[matrix]</h1>
|
||||
|
||||
<div id="page">
|
||||
<div id="wrapper">
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
<div ng-controller="RoomController" data-ng-init="onInit()" class="room">
|
||||
<h1 id="roomLogo">[matrix]</h1>
|
||||
|
||||
<div id="page">
|
||||
<div id="wrapper">
|
||||
|
|
@ -32,7 +33,7 @@
|
|||
ng-class="(events.rooms[room_id].messages[$index + 1].user_id !== msg.user_id ? 'differentUser' : '') + (msg.user_id === state.user_id ? ' mine' : '')" scroll-item>
|
||||
<td class="leftBlock">
|
||||
<div class="sender" ng-hide="events.rooms[room_id].messages[$index - 1].user_id === msg.user_id">{{ members[msg.user_id].displayname || msg.user_id }}</div>
|
||||
<div class="timestamp">{{ (msg.content.hsob_ts || msg.ts) | date:'MMM d HH:mm:ss' }}</div>
|
||||
<div class="timestamp">{{ (msg.content.hsob_ts || msg.ts) | date:'MMM d HH:mm' }}</div>
|
||||
</td>
|
||||
<td class="avatar">
|
||||
<img class="avatarImage" ng-src="{{ members[msg.user_id].avatar_url || 'img/default-profile.jpg' }}" width="32" height="32"
|
||||
|
|
@ -73,29 +74,28 @@
|
|||
<div id="controls">
|
||||
<table id="inputBarTable">
|
||||
<tr>
|
||||
<td width="1">
|
||||
<td id="userIdCell" width="1px">
|
||||
{{ state.user_id }}
|
||||
</td>
|
||||
<td width="*" style="min-width: 100px">
|
||||
<td width="*">
|
||||
<input id="mainInput" ng-model="textInput" ng-enter="send()" ng-focus="true" autocomplete="off" tab-complete/>
|
||||
</td>
|
||||
<td width="150px">
|
||||
<td id="buttonsCell">
|
||||
<button ng-click="send()">Send</button>
|
||||
<button m-file-input="imageFileToSend">Send Image</button>
|
||||
</td>
|
||||
<td width="1">
|
||||
|
||||
<button m-file-input="imageFileToSend">Image</button>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<span>
|
||||
Invite a user:
|
||||
<input ng-model="userIDToInvite" size="32" type="text" placeholder="User ID (ex:@user:homeserver)"/>
|
||||
<button ng-click="inviteUser(userIDToInvite)">Invite</button>
|
||||
</span>
|
||||
<button ng-click="leaveRoom()">Leave</button>
|
||||
<button ng-click="loadMoreHistory()" ng-disabled="!state.can_paginate">Load more history</button>
|
||||
<div id="extraControls">
|
||||
<span>
|
||||
Invite a user:
|
||||
<input ng-model="userIDToInvite" size="32" type="text" placeholder="User ID (ex:@user:homeserver)"/>
|
||||
<button ng-click="inviteUser(userIDToInvite)">Invite</button>
|
||||
</span>
|
||||
<button ng-click="leaveRoom()">Leave</button>
|
||||
</div>
|
||||
|
||||
{{ feedback }}
|
||||
<div ng-hide="!state.stream_failure">
|
||||
{{ state.stream_failure.data.error || "Connection failure" }}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
<div ng-controller="RoomsController" class="rooms">
|
||||
<h1 id="logo">[matrix]</h1>
|
||||
|
||||
<div id="page">
|
||||
<div id="wrapper">
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
<div ng-controller="UserController" class="user">
|
||||
<h1 id="logo">[matrix]</h1>
|
||||
|
||||
<div id="page">
|
||||
<div id="wrapper">
|
||||
|
|
|
|||
Loading…
Reference in New Issue