Mirrors
/
synapse
mirror of https://github.com/element-hq/synapse.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

very quick and dirty responsive design for iPhones

This commit is contained in:
Matthew Hodgson 2014-08-23 20:45:00 +01:00
parent 45e70a6b70
commit d2bb28d2df
6 changed files with 110 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

98
webclient/app.css
View File

@ -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 { body {
font-family: "Myriad Pro", "Myriad", Helvetica, Arial, sans-serif; font-family: "Myriad Pro", "Myriad", Helvetica, Arial, sans-serif;
font-size: 12pt; font-size: 12pt;
@ -17,7 +85,6 @@ h1 {
left: 0px; left: 0px;
right: 0px; right: 0px;
margin: 20px; margin: 20px;
margin: 20px;
} }
#wrapper { #wrapper {
@ -32,8 +99,7 @@ h1 {
text-align: right; text-align: right;
top: -40px; top: -40px;
position: absolute; position: absolute;
font-size: 16pt; font-size: 16px;
margin-bottom: 10px;
} }
#controlPanel { #controlPanel {
@ -50,6 +116,10 @@ h1 {
margin: auto; margin: auto;
} }
#buttonsCell {
width: 150px;
}
#inputBarTable { #inputBarTable {
width: 100%; width: 100%;
} }
@ -111,13 +181,13 @@ h1 {
color: #fff; color: #fff;
margin: 2px; margin: 2px;
bottom: 0px; bottom: 0px;
font-size: 8pt; font-size: 12px;
word-break: break-all; word-break: break-all;
} }
.userPresence { .userPresence {
text-align: center; text-align: center;
font-size: 8pt; font-size: 12px;
color: #fff; color: #fff;
background-color: #aaa; background-color: #aaa;
border-bottom: 1px #ddd solid; border-bottom: 1px #ddd solid;
@ -159,7 +229,7 @@ h1 {
background-color: #fff; background-color: #fff;
color: #888; color: #888;
font-weight: medium; font-weight: medium;
font-size: 8pt; font-size: 12px;
text-align: right; text-align: right;
border-top: 1px #ddd solid; border-top: 1px #ddd solid;
} }
@ -277,7 +347,7 @@ h1 {
.profile-avatar { .profile-avatar {
width: 160px; width: 160px;
height: 160px; height: 160px;
display:table-cell; display: table-cell;
vertical-align: middle; vertical-align: middle;
text-align: center; text-align: center;
} }
@ -293,13 +363,19 @@ h1 {
} }
#user-displayname { #user-displayname {
font-size: 16pt; font-size: 24px;
} }
/******************************/ /******************************/
#header { #header
padding-left: 20px; {
padding-right: 20px; padding: 20px;
max-width: 1280px;
margin: auto;
}
#logo,
#roomLogo {
max-width: 1280px; max-width: 1280px;
margin: auto; margin: auto;
} }

6
webclient/index.html
View File

@ -2,10 +2,12 @@
<html xmlns:ng="http://angularjs.org" ng-app="matrixWebClient" ng-controller="MatrixWebClientController"> <html xmlns:ng="http://angularjs.org" ng-app="matrixWebClient" ng-controller="MatrixWebClientController">
<head> <head>
<title>[matrix]</title> <title>[matrix]</title>
<link rel="stylesheet" href="app.css"> <link rel="stylesheet" href="app.css">
<link rel="icon" href="favicon.ico"> <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 type='text/javascript' src='js/jquery-1.8.3.min.js'></script>
<script src="js/angular.min.js"></script> <script src="js/angular.min.js"></script>
<script src="js/angular-route.min.js"></script> <script src="js/angular-route.min.js"></script>
@ -36,8 +38,6 @@
<button ng-click="showConfig()">Config</button> <button ng-click="showConfig()">Config</button>
<button ng-click="logout()">Log out</button> <button ng-click="logout()">Log out</button>
</div> </div>
<h1>[matrix]</h1>
</header> </header>
<div id="config" ng-hide="!config"> <div id="config" ng-hide="!config">

4
webclient/login/login.html
View File

@ -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="page">
<div id="wrapper"> <div id="wrapper">

30
webclient/room/room.html
View File

@ -1,4 +1,5 @@
<div ng-controller="RoomController" data-ng-init="onInit()" class="room"> <div ng-controller="RoomController" data-ng-init="onInit()" class="room">
<h1 id="roomLogo">[matrix]</h1>
<div id="page"> <div id="page">
<div id="wrapper"> <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> 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"> <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="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>
<td class="avatar"> <td class="avatar">
<img class="avatarImage" ng-src="{{ members[msg.user_id].avatar_url || 'img/default-profile.jpg' }}" width="32" height="32" <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"> <div id="controls">
<table id="inputBarTable"> <table id="inputBarTable">
<tr> <tr>
<td width="1"> <td id="userIdCell" width="1px">
{{ state.user_id }} {{ state.user_id }}
</td> </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/> <input id="mainInput" ng-model="textInput" ng-enter="send()" ng-focus="true" autocomplete="off" tab-complete/>
</td> </td>
<td width="150px"> <td id="buttonsCell">
<button ng-click="send()">Send</button> <button ng-click="send()">Send</button>
<button m-file-input="imageFileToSend">Send Image</button> <button m-file-input="imageFileToSend">Image</button>
</td>
<td width="1">
</td> </td>
</tr> </tr>
</table> </table>
<span> <div id="extraControls">
Invite a user: <span>
<input ng-model="userIDToInvite" size="32" type="text" placeholder="User ID (ex:@user:homeserver)"/> Invite a user:
<button ng-click="inviteUser(userIDToInvite)">Invite</button> <input ng-model="userIDToInvite" size="32" type="text" placeholder="User ID (ex:@user:homeserver)"/>
</span> <button ng-click="inviteUser(userIDToInvite)">Invite</button>
<button ng-click="leaveRoom()">Leave</button> </span>
<button ng-click="loadMoreHistory()" ng-disabled="!state.can_paginate">Load more history</button> <button ng-click="leaveRoom()">Leave</button>
</div>
{{ feedback }} {{ feedback }}
<div ng-hide="!state.stream_failure"> <div ng-hide="!state.stream_failure">
{{ state.stream_failure.data.error || "Connection failure" }} {{ state.stream_failure.data.error || "Connection failure" }}

1
webclient/rooms/rooms.html
View File

@ -1,4 +1,5 @@
<div ng-controller="RoomsController" class="rooms"> <div ng-controller="RoomsController" class="rooms">
<h1 id="logo">[matrix]</h1>
<div id="page"> <div id="page">
<div id="wrapper"> <div id="wrapper">

1
webclient/user/user.html
View File

@ -1,4 +1,5 @@
<div ng-controller="UserController" class="user"> <div ng-controller="UserController" class="user">
<h1 id="logo">[matrix]</h1>
<div id="page"> <div id="page">
<div id="wrapper"> <div id="wrapper">