From 9664d247823b8bf14f1d726bafbc6f534d956895 Mon Sep 17 00:00:00 2001
From: netpro2k <netpro2k@gmail.com>
Date: Tue, 14 Nov 2017 17:43:39 -0800
Subject: [PATCH] Change lobby items to anchros
---
src/lobby.css | 13 +++++++++++--
src/lobby.js | 48 +++++++++++++++++++++---------------------------
2 files changed, 32 insertions(+), 29 deletions(-)
diff --git a/src/lobby.css b/src/lobby.css
index ffb15cf97..50867b63f 100644
--- a/src/lobby.css
+++ b/src/lobby.css
@@ -33,9 +33,18 @@ body {
}
.room-item {
- cursor: pointer;
+ padding: 0;
}
-.room-item:hover {
+.room-item a {
+ width: 100%;
+ height: 100%;
+ padding: 16px;
+ color: inherit;
+ text-decoration: none;
+}
+
+
+.room-item a:hover {
background: #eaeaea;
}
diff --git a/src/lobby.js b/src/lobby.js
index dc84a820f..4ae9eeef7 100644
--- a/src/lobby.js
+++ b/src/lobby.js
@@ -76,47 +76,41 @@ class Lobby extends React.Component {
}
}
-const goToRoom = roomId => {
- window.open(`room.html?room=${roomId}`, "_self");
-};
-
-const goToNewRoom = () => {
- const publicRooms = Config.public_rooms.length + 1;
- const roomId =
- publicRooms +
- Math.floor(Math.random() * (Number.MAX_SAFE_INTEGER - publicRooms));
- goToRoom(roomId);
-};
-
const RoomListItem = ({ room }) => {
return (
- <li
- className="room-item mdl-list__item mdl-list__item--two-line"
- onClick={() => goToRoom(room.id)}
- >
- <span className="mdl-list__item-primary-content">
- <i className="material-icons mdl-list__item-icon">room</i>
- <span>Meeting room {room.id}</span>
- <span className="mdl-list__item-sub-title">
- {room.users.length}/{room.limit}
+ <li className="room-item mdl-list__item mdl-list__item--two-line">
+ <a href={`room.html?room=${room.id}`}>
+ <span className="mdl-list__item-primary-content">
+ <i className="material-icons mdl-list__item-icon">room</i>
+ <span>Meeting room {room.id}</span>
+ <span className="mdl-list__item-sub-title">
+ {room.users.length}/{room.limit}
+ </span>
</span>
- </span>
+ </a>
</li>
);
};
const RoomList = ({ rooms }) => {
+ const publicRooms = Config.public_rooms.length + 1;
+ const roomId =
+ publicRooms +
+ Math.floor(Math.random() * (Number.MAX_SAFE_INTEGER - publicRooms));
+
return (
<div className="mdl-card mdl-shadow--2dp panel">
<ul className="mdl-list scroll">
{rooms.map(room => <RoomListItem key={room.id} room={room} />)}
</ul>
<ul className="mdl-list">
- <li className="mdl-list__item room-item" onClick={goToNewRoom}>
- <span className="mdl-list__item-primary-content">
- <i className="material-icons mdl-list__item-icon">add</i>
- New Meeting Room
- </span>
+ <li className="mdl-list__item room-item">
+ <a href={`room.html?room=${roomId}`}>
+ <span className="mdl-list__item-primary-content">
+ <i className="material-icons mdl-list__item-icon">add</i>
+ New Meeting Room
+ </span>
+ </a>
</li>
</ul>
</div>
--
GitLab