rejig css:

* sans-serif font * use display: table for the message list so that everything lines up nicely * switch to flexbox layout rather than position absolutes to avoid assuming a full screen UI and improve maintainability (and better match atomify) * neutralise the colouring and styling of highlighted rooms in the recents list * switch from ul + li's to a series of divs in some places where the li's are achieving nothing but adding more complexity to the DOM * add mx_MessageTileType as a generic css base class for all message tiles
2015-07-07 02:10:10 +01:00 · 2015-07-07 02:10:10 +01:00 · ffac30083e
commit ffac30083e
parent aaa38d95ba
15 changed files with 139 additions and 88 deletions
--- a/skins/base/css/atoms/MessageTimestamp.css
+++ b/skins/base/css/atoms/MessageTimestamp.css
@ -15,6 +15,6 @@ limitations under the License.
 */

 .mx_MessageTimestamp {
-    width: 75px;
-    display: inline-block;
+    display: table-cell;
+    white-space: pre;
 }
--- a/skins/base/css/common.css
+++ b/skins/base/css/common.css
@ -14,6 +14,10 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */

+body {
+	font-family: Helvetica, Arial, Sans-Serif;
+}
+
 div.error {
    color: red;
 }
--- a/skins/base/css/molecules/MessageComposer.css
+++ b/skins/base/css/molecules/MessageComposer.css
@ -14,13 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */

-.mx_MessageComposer {
-}
-
 .mx_MessageComposer textarea {
-    position: absolute;
    width: 100%;
-    margin-left: auto;
-    margin-right: auto;
-    padding: 0px;
+    margin: auto;
 }
--- a/skins/base/css/molecules/MessageTile.css
+++ b/skins/base/css/molecules/MessageTile.css
@ -15,6 +15,11 @@ limitations under the License.
 */

 .mx_MessageTile {
+	display: table-row;
+}
+
+.mx_MessageTile .mx_MessageTileType {
+	display: table-cell;
 }

 .mx_MessageTile.sending {
--- a/skins/base/css/molecules/RoomTile.css
+++ b/skins/base/css/molecules/RoomTile.css
@ -23,12 +23,10 @@ limitations under the License.
 }

 .mx_RoomTile.selected {
-    border: 2px inset #eee;
+    text-decoration: underline;
 }

 .mx_RoomTile_name {
-    font-size: 80%;
-    font-weight: bold;
 }

 .mx_RoomTile div {
@ -37,11 +35,11 @@ limitations under the License.
 }

 .mx_RoomTile.unread {
-    background-color: #66e;
+    font-weight: bold;
 }

 .mx_RoomTile.invited {
-    background-color: #6e6;
+    font-weight: bold;
 }

 .mx_RoomTile:hover {
--- a/skins/base/css/molecules/SenderProfile.css
+++ b/skins/base/css/molecules/SenderProfile.css
@ -15,6 +15,6 @@ limitations under the License.
 */

 .mx_SenderProfile {
-    display: inline-block;
-    width: 150px;
+    display: table-cell;
+    padding: 0px 1em 0em 1em;
 }
--- a/skins/base/css/organisms/RoomList.css
+++ b/skins/base/css/organisms/RoomList.css
@ -16,12 +16,3 @@ limitations under the License.

 .mx_RoomList {
 }
-
-.mx_RoomList ul {
-    padding: 0px;
-    margin: 0px;
-}
-
-.mx_RoomList ul li {
-    list-style-type: none;
-}
--- a/skins/base/css/organisms/RoomView.css
+++ b/skins/base/css/organisms/RoomView.css
@ -16,52 +16,67 @@ limitations under the License.

 .mx_RoomView {
    word-wrap: break-word;
+    position: relative;
 }

-.mx_RoomView .mx_RoomHeader {
-    position: absolute;
-    top: 0px;
-    width: 100%;
+.mx_RoomHeader {
    height: 30px;
 }

-.mx_RoomView .mx_RoomView_MessageList {
-    padding: 0px;
-    margin: 0px;
+.mx_RoomView_roomWrapper {
+    display: -webkit-box;
+    display: -moz-box;
+    display: -ms-flexbox;
+    display: -webkit-flex;
+    display: flex;    
    position: absolute;
-    top: 35px;
-    bottom: 40px;
-    left: 0px;
-    right: 150px;
+    width: 100%;
+    top: 32px;
+    bottom: 0px;
+}
+
+.mx_RoomView_messagePanel {
+    -webkit-box-ordinal-group: 1;
+    -moz-box-ordinal-group: 1;
+    -ms-flex-order: 1;
+    -webkit-order: 1;
+    order: 1;
+    width: 100%;
+    height: 100%;
+    /* background-color: #ff0; */
+}
+
+.mx_RoomView_messageListWrapper {
+    height: 100%;
    overflow-y: scroll;    
 }

-.mx_RoomView ul li {
-    list-style-type: none;
+.mx_RoomView_MessageList {
+    display: table;
 }

-.mx_RoomView .mx_RoomView_invitePrompt {
+.mx_RoomView_invitePrompt {
 }

-.mx_RoomView .mx_MemberList {
-    position: absolute;
-    top: 35px;
-    bottom: 40px;
-    right: 0px;
-    width: 150px;
+.mx_MemberList {
+    -webkit-box-ordinal-group: 2;
+    -moz-box-ordinal-group: 2;
+    -ms-flex-order: 2;
+    -webkit-order: 2;
+    order: 2;
+
+    /* background-color: #0f0; */
+    width: 250px;
+    overflow-y: scroll;
+    height: 100%;
+}
+
+.mx_MemberList ul {
    margin: 0px;
    padding: 0px;
 }

-.mx_RoomView .mx_MemberList ul {
-    margin: 0px;
-    padding: 0px;
-}
-
-.mx_RoomView .mx_MessageComposer {
-    position: absolute;
-    bottom: 5px;
-    right: 0px;
-    left: 0px;
-    height: 36px;
+.mx_MessageComposer {
+    width: 100%;
+    bottom: 0px;
 }
--- a/skins/base/css/pages/MatrixChat.css
+++ b/skins/base/css/pages/MatrixChat.css
@ -20,29 +20,69 @@ limitations under the License.
    height: 100%;
 }

-.mx_MatrixChat_leftPanel {
+.mx_MatrixChat_chatWrapper {
+    display: -webkit-box;
+    display: -moz-box;
+    display: -ms-flexbox;
+    display: -webkit-flex;
+    display: flex;
    position: absolute;
-    left: 0px;
+    width: 100%;
+    top: 0px;
+    bottom: 42px;
+}
+
+.mx_MatrixChat_leftPanel {
+    -webkit-box-ordinal-group: 1;
+    -moz-box-ordinal-group: 1;
+    -ms-flex-order: 1;
+    -webkit-order: 1;
+    order: 1;
+
+    display: -webkit-box;
+    display: -moz-box;
+    display: -ms-flexbox;
+    display: -webkit-flex;
+    display: flex;
+    flex-direction: column;
+
+    /* background-color: #f00; */
    width: 250px;
    height: 100%;
 }

 .mx_MatrixChat_leftPanel .mx_MatrixToolbar {
-    position: absolute;
-    height: 20px;
+    -webkit-box-ordinal-group: 1;
+    -moz-box-ordinal-group: 1;
+    -ms-flex-order: 1;
+    -webkit-order: 1;
+    order: 1;
+
+    width: 100%;
+    height: 40px;
 }

 .mx_MatrixChat_leftPanel .mx_RoomList {
-    position: absolute;
-    top: 20px;
-    bottom: 0px;
-    width: 250px;
+    -webkit-box-ordinal-group: 2;
+    -moz-box-ordinal-group: 2;
+    -ms-flex-order: 2;
+    -webkit-order: 2;
+    order: 2;
+
+    /* background-color: #0ff; */
+    width: 100%;
+    height: 100%;
    overflow-y: scroll;
 }

 .mx_MatrixChat .mx_RoomView {
-    position: absolute;
-    left: 255px;
-    right: 0px;
+    -webkit-box-ordinal-group: 2;
+    -moz-box-ordinal-group: 2;
+    -ms-flex-order: 2;
+    -webkit-order: 2;
+    order: 2;
+
+    /* background-color: #00f; */
+    width: 100%;
    height: 100%;       
 }
--- a/skins/base/views/molecules/MEmoteTile.js
+++ b/skins/base/views/molecules/MEmoteTile.js
@ -29,7 +29,7 @@ module.exports = React.createClass({
        var content = mxEvent.getContent();
        var name = mxEvent.sender ? mxEvent.sender.name : mxEvent.getSender();
        return (
-            <span className="mx_MEmoteTile">
+            <span className="mx_MEmoteTile mx_MessageTileType">
                {name} {content.body}
            </span>
        );
--- a/skins/base/views/molecules/MNoticeTile.js
+++ b/skins/base/views/molecules/MNoticeTile.js
@ -27,7 +27,7 @@ module.exports = React.createClass({
    render: function() {
        var content = this.props.mxEvent.getContent();
        return (
-            <span className="mx_MNoticeTile">
+            <span className="mx_MNoticeTile mx_MessageTileType">
                {content.body}
            </span>
        );
--- a/skins/base/views/molecules/MTextTile.js
+++ b/skins/base/views/molecules/MTextTile.js
@ -27,7 +27,7 @@ module.exports = React.createClass({
    render: function() {
        var content = this.props.mxEvent.getContent();
        return (
-            <span className="mx_MTextTile">
+            <span className="mx_MTextTile mx_MessageTileType">
                {content.body}
            </span>
        );
--- a/skins/base/views/organisms/RoomList.js
+++ b/skins/base/views/organisms/RoomList.js
@ -28,9 +28,7 @@ module.exports = React.createClass({
    render: function() {
        return (
            <div className="mx_RoomList">
-                <ul>
-                    {this.makeRoomTiles()}
-                </ul>
+                {this.makeRoomTiles()}
            </div>
        );
    }
--- a/skins/base/views/organisms/RoomView.js
+++ b/skins/base/views/organisms/RoomView.js
@ -39,7 +39,7 @@ module.exports = React.createClass({
    getMessageTiles: function() {
        return this.state.room.timeline.map(function(mxEv) {
            return (
-                <li key={mxEv.getId()}><MessageTile mxEvent={mxEv} /></li>
+                <MessageTile key={mxEv.getId()} mxEvent={mxEv} />
            );
        });
    },
@ -71,13 +71,17 @@ module.exports = React.createClass({
            return (
                <div className="mx_RoomView">
                    <RoomHeader room={this.state.room} />
-                    <div className="mx_RoomView_HSplit">
-                        <ul className="mx_RoomView_MessageList" ref="messageList">
-                            {this.getMessageTiles()}
-                        </ul>
+                    <div className="mx_RoomView_roomWrapper">
+                        <div className="mx_RoomView_messagePanel">
+                            <div className="mx_RoomView_messageListWrapper">
+                                <div className="mx_RoomView_MessageList" ref="messageList">
+                                    {this.getMessageTiles()}
+                                </div>
+                            </div>
+                            <MessageComposer roomId={this.props.roomId} />
+                        </div>
                        <MemberList roomId={this.props.roomId} key={this.props.roomId} />
                    </div>
-                    <MessageComposer roomId={this.props.roomId} />
                </div>
            );
        }
--- a/skins/base/views/pages/MatrixChat.js
+++ b/skins/base/views/pages/MatrixChat.js
@ -38,11 +38,13 @@ module.exports = React.createClass({
        if (this.state.logged_in && this.state.ready) {
            return (
                <div className="mx_MatrixChat">
-                    <div className="mx_MatrixChat_leftPanel">
-                        <MatrixToolbar />
-                        <RoomList selectedRoom={this.state.currentRoom} />
+                    <div className="mx_MatrixChat_chatWrapper">
+                        <div className="mx_MatrixChat_leftPanel">
+                            <MatrixToolbar />
+                            <RoomList selectedRoom={this.state.currentRoom} />
+                        </div>
+                        <RoomView roomId={this.state.currentRoom} key={this.state.currentRoom} />
                    </div>
-                    <RoomView roomId={this.state.currentRoom} key={this.state.currentRoom} />
                </div>
            );
        } else if (this.state.logged_in) {