switch some elements from being styled by class to styled by id

This commit is contained in:
Matthew Hodgson 2014-08-15 23:24:42 +01:00
parent 60a9f27edb
commit 9f7c5f161c
5 changed files with 36 additions and 36 deletions

View File

@ -10,7 +10,7 @@ h1 {
/*** Overall page layout ***/ /*** Overall page layout ***/
.page { #page {
position: absolute; position: absolute;
top: 80px; top: 80px;
bottom: 100px; bottom: 100px;
@ -20,13 +20,13 @@ h1 {
margin: 20px; margin: 20px;
} }
.wrapper { #wrapper {
margin: auto; margin: auto;
max-width: 1280px; max-width: 1280px;
height: 100%; height: 100%;
} }
.roomName { #roomName {
max-width: 1280px; max-width: 1280px;
width: 100%; width: 100%;
text-align: right; text-align: right;
@ -36,7 +36,7 @@ h1 {
margin-bottom: 10px; margin-bottom: 10px;
} }
.controlPanel { #controlPanel {
position: absolute; position: absolute;
bottom: 0px; bottom: 0px;
width: 100%; width: 100%;
@ -44,39 +44,39 @@ h1 {
border-top: #aaa 1px solid; border-top: #aaa 1px solid;
} }
.controls { #controls {
max-width: 1280px; max-width: 1280px;
padding: 12px; padding: 12px;
margin: auto; margin: auto;
} }
.inputBarTable { #inputBarTable {
width: 100%; width: 100%;
} }
.inputBarTable tr td { #inputBarTable tr td {
padding: 1px 4px; padding: 1px 4px;
} }
.mainInput { #mainInput {
width: 100%; width: 100%;
} }
/*** Participant list ***/ /*** Participant list ***/
.usersTableWrapper { #usersTableWrapper {
float: right; float: right;
width: 120px; width: 120px;
height: 100%; height: 100%;
overflow-y: auto; overflow-y: auto;
} }
.usersTable { #usersTable {
width: 100%; width: 100%;
border-collapse: collapse; border-collapse: collapse;
} }
.usersTable td { #usersTable td {
padding: 0px; padding: 0px;
} }
@ -124,21 +124,21 @@ h1 {
/*** Message table ***/ /*** Message table ***/
.messageTableWrapper { #messageTableWrapper {
height: 100%; height: 100%;
margin-right: 140px; margin-right: 140px;
overflow-y: auto; overflow-y: auto;
width: auto; width: auto;
} }
.messageTable { #messageTable {
margin: auto; margin: auto;
max-width: 1280px; max-width: 1280px;
width: 100%; width: 100%;
border-collapse: collapse; border-collapse: collapse;
} }
.messageTable td { #messageTable td {
padding: 0px; padding: 0px;
} }
@ -235,18 +235,18 @@ h1 {
/******************************/ /******************************/
.header { #header {
padding-left: 20px; padding-left: 20px;
padding-right: 20px; padding-right: 20px;
max-width: 1280px; max-width: 1280px;
margin: auto; margin: auto;
} }
.header-buttons { #header-buttons {
float: right; float: right;
} }
.config { #config {
position: absolute; position: absolute;
z-index: 100; z-index: 100;
top: 100px; top: 100px;

View File

@ -24,9 +24,9 @@
<body> <body>
<header class="header"> <header id="header">
<!-- Do not show buttons on the login page --> <!-- Do not show buttons on the login page -->
<div class="header-buttons" ng-hide="'/login' == location "> <div id="header-buttons" ng-hide="'/login' == location ">
<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>
@ -34,7 +34,7 @@
<h1>[matrix]</h1> <h1>[matrix]</h1>
</header> </header>
<div class="config" ng-hide="!config"> <div id="config" ng-hide="!config">
<div>Home server: {{ config.homeserver }} </div> <div>Home server: {{ config.homeserver }} </div>
<div>User ID: {{ config.user_id }} </div> <div>User ID: {{ config.user_id }} </div>
<div>Access token: {{ config.access_token }} </div> <div>Access token: {{ config.access_token }} </div>

View File

@ -1,6 +1,6 @@
<div ng-controller="LoginController" class="login"> <div ng-controller="LoginController" class="login">
<div class="page"> <div id="page">
<div class="wrapper"> <div id="wrapper">
{{ feedback }} {{ feedback }}

View File

@ -1,14 +1,14 @@
<div ng-controller="RoomController" data-ng-init="onInit()" class="room"> <div ng-controller="RoomController" data-ng-init="onInit()" class="room">
<div class="page"> <div id="page">
<div class="wrapper"> <div id="wrapper">
<div class="roomName"> <div id="roomName">
{{ room_alias || room_id }} {{ room_alias || room_id }}
</div> </div>
<div class="usersTableWrapper"> <div id="usersTableWrapper">
<table class="usersTable"> <table id="usersTable">
<tr ng-repeat="(name, info) in members"> <tr ng-repeat="(name, info) in members">
<td class="userAvatar"> <td class="userAvatar">
<img class="userAvatarImage" ng-src="{{info.avatar_url || 'img/default-profile.jpg'}}" width="80" height="80"/> <img class="userAvatarImage" ng-src="{{info.avatar_url || 'img/default-profile.jpg'}}" width="80" height="80"/>
@ -20,8 +20,8 @@
</table> </table>
</div> </div>
<div class="messageTableWrapper" keep-scroll> <div id="messageTableWrapper" keep-scroll>
<table class="messageTable" infinite-scroll="paginateMore()"> <table id="messageTable" infinite-scroll="paginateMore()">
<tr ng-repeat="msg in events.rooms[room_id].messages" ng-class="msg.user_id === state.user_id ? 'mine' : ''" scroll-item> <tr ng-repeat="msg in events.rooms[room_id].messages" ng-class="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>
@ -49,15 +49,15 @@
</div> </div>
</div> </div>
<div class="controlPanel"> <div id="controlPanel">
<div class="controls"> <div id="controls">
<table class="inputBarTable"> <table id="inputBarTable">
<tr> <tr>
<td width="1"> <td width="1">
{{ state.user_id }} {{ state.user_id }}
</td> </td>
<td width="*" style="min-width: 100px"> <td width="*" style="min-width: 100px">
<input class="mainInput" ng-model="textInput" ng-enter="send()" ng-focus="true"/> <input id="mainInput" ng-model="textInput" ng-enter="send()" ng-focus="true"/>
</td> </td>
<td width="1"> <td width="1">
<button ng-click="send()">Send</button> <button ng-click="send()">Send</button>
@ -70,7 +70,7 @@
<td> <td>
</td> </td>
<td> <td>
<input class="mainInput" ng-model="imageURLToSend" ng-enter="sendImage()" placeholder="Image URL"/> <input id="mainInput" ng-model="imageURLToSend" ng-enter="sendImage()" placeholder="Image URL"/>
</td> </td>
<td width="100px"> <td width="100px">
<button ng-click="sendImage(imageURLToSend)">Send Image</button> <button ng-click="sendImage(imageURLToSend)">Send Image</button>

View File

@ -1,7 +1,7 @@
<div ng-controller="RoomsController" class="rooms"> <div ng-controller="RoomsController" class="rooms">
<div class="page"> <div id="page">
<div class="wrapper"> <div id="wrapper">
<div> <div>
<form> <form>