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

10 years ago · 9f7c5f161c
parent 60a9f27edb
commit 9f7c5f161c
5 changed files with 36 additions and 36 deletions
--- a/webclient/app.css
+++ b/webclient/app.css
@ -10,7 +10,7 @@ h1 {

 /*** Overall page layout ***/

-.page {
+#page {
    position: absolute;
    top: 80px;
    bottom: 100px;
@ -20,13 +20,13 @@ h1 {
    margin: 20px;
 }

-.wrapper {
+#wrapper {
    margin: auto;
    max-width: 1280px;
    height: 100%;
 }

-.roomName {
+#roomName {
    max-width: 1280px;
    width: 100%;
    text-align: right;
@ -36,7 +36,7 @@ h1 {
    margin-bottom: 10px;
 }

-.controlPanel {
+#controlPanel {
    position: absolute;
    bottom: 0px;
    width: 100%;
@ -44,39 +44,39 @@ h1 {
    border-top: #aaa 1px solid;
 }

-.controls {
+#controls {
    max-width: 1280px;
    padding: 12px;
    margin: auto;
 }

-.inputBarTable {
+#inputBarTable {
    width: 100%;
 }

-.inputBarTable tr td {
+#inputBarTable tr td {
    padding: 1px 4px;
 }

-.mainInput {
+#mainInput {
    width: 100%;
 }

 /*** Participant list ***/

-.usersTableWrapper {
+#usersTableWrapper {
    float: right;
    width: 120px;
    height: 100%;
    overflow-y: auto;
 }

-.usersTable {
+#usersTable {
    width: 100%;
    border-collapse: collapse;
 }

-.usersTable td {
+#usersTable td {
    padding: 0px;
 }

@ -124,21 +124,21 @@ h1 {

 /*** Message table ***/

-.messageTableWrapper {
+#messageTableWrapper {
    height: 100%;
    margin-right: 140px;
    overflow-y: auto;
    width: auto;
 }

-.messageTable {
+#messageTable {
    margin: auto;
    max-width: 1280px;
    width: 100%;
    border-collapse: collapse;
 }
        
-.messageTable td {
+#messageTable td {
    padding: 0px;
 }

@ -235,18 +235,18 @@ h1 {

 /******************************/

-.header {
+#header {
    padding-left: 20px;
    padding-right: 20px;
    max-width: 1280px;
    margin: auto;
 }

-.header-buttons {
+#header-buttons {
    float: right;
 }

-.config {
+#config {
    position: absolute;
    z-index: 100;
    top: 100px;
--- a/webclient/index.html
+++ b/webclient/index.html
@ -24,9 +24,9 @@

 <body>

-    <header class="header">
+    <header id="header">
        <!-- 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="logout()">Log out</button>
        </div>
@ -34,7 +34,7 @@
        <h1>[matrix]</h1>
    </header>

-    <div class="config" ng-hide="!config">
+    <div id="config" ng-hide="!config">
        <div>Home server: {{ config.homeserver }} </div>
        <div>User ID: {{ config.user_id }} </div>
        <div>Access token: {{ config.access_token }} </div>
--- a/webclient/login/login.html
+++ b/webclient/login/login.html
@ -1,6 +1,6 @@
 <div ng-controller="LoginController" class="login">
-    <div class="page">
-    <div class="wrapper">
+    <div id="page">
+    <div id="wrapper">

    {{ feedback }}
        
--- a/webclient/room/room.html
+++ b/webclient/room/room.html
@ -1,14 +1,14 @@
 <div ng-controller="RoomController" data-ng-init="onInit()" class="room">

-    <div class="page">
-    <div class="wrapper">
+    <div id="page">
+    <div id="wrapper">

-    <div class="roomName">
+    <div id="roomName">
        {{ room_alias || room_id }}
    </div>
    
-    <div class="usersTableWrapper">
-        <table class="usersTable">
+    <div id="usersTableWrapper">
+        <table id="usersTable">
            <tr ng-repeat="(name, info) in members">
                <td class="userAvatar">
                    <img class="userAvatarImage" ng-src="{{info.avatar_url || 'img/default-profile.jpg'}}" width="80" height="80"/>
@ -20,8 +20,8 @@
        </table>
    </div>
    
-    <div class="messageTableWrapper" keep-scroll>
-        <table class="messageTable" infinite-scroll="paginateMore()">
+    <div id="messageTableWrapper" keep-scroll>
+        <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>
                <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>
@ -49,15 +49,15 @@
    </div>
    </div>

-    <div class="controlPanel">
-        <div class="controls">
-            <table class="inputBarTable">
+    <div id="controlPanel">
+        <div id="controls">
+            <table id="inputBarTable">
                <tr>
                    <td width="1">
                        {{ state.user_id }} 
                    </td>
                    <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 width="1">
                        <button ng-click="send()">Send</button>
@ -70,7 +70,7 @@
                    <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  width="100px">
                        <button ng-click="sendImage(imageURLToSend)">Send Image</button>
--- a/webclient/rooms/rooms.html
+++ b/webclient/rooms/rooms.html
@ -1,7 +1,7 @@
 <div ng-controller="RoomsController" class="rooms">

-    <div class="page">
-    <div class="wrapper">
+    <div id="page">
+    <div id="wrapper">
            
    <div>
        <form>