[mirotalkwebrtc] - improve UI for mobile

miroslavpejic85 · Nov 28, 2024 · 546a59a · 546a59a
1 parent 49bccee
commit 546a59a
Show file tree

Hide file tree

Showing 7 changed files with 118 additions and 41 deletions.
diff --git a/CODE_OF_CONDUCT.md b/CODE_OF_CONDUCT.md
@@ -35,23 +35,23 @@ socioeconomic status, or other similar personal characteristics.
 Examples of behavior that contributes to creating a positive environment
 include:
 
--   Using welcoming and inclusive language
--   Being respectful of differing viewpoints and experiences
--   Gracefully accepting constructive criticism
--   Focusing on what is best for the community
--   Showing empathy toward other community members
+- Using welcoming and inclusive language
+- Being respectful of differing viewpoints and experiences
+- Gracefully accepting constructive criticism
+- Focusing on what is best for the community
+- Showing empathy toward other community members
 
 Examples of unacceptable behavior by participants include:
 
--   The use of sexualized language or imagery and unwelcome sexual attention or
-    advances
--   Personal attacks, insulting/derogatory comments, or trolling
--   Public or private harassment
--   Publishing, or threatening to publish, others' private information—such as
-    a physical or electronic address—without explicit permission
--   Other conduct which could reasonably be considered inappropriate in a
-    professional setting
--   Advocating for or encouraging any of the above behaviors
+- The use of sexualized language or imagery and unwelcome sexual attention or
+  advances
+- Personal attacks, insulting/derogatory comments, or trolling
+- Public or private harassment
+- Publishing, or threatening to publish, others' private information—such as
+  a physical or electronic address—without explicit permission
+- Other conduct which could reasonably be considered inappropriate in a
+  professional setting
+- Advocating for or encouraging any of the above behaviors
 
 ## Our Responsibilities
 

diff --git a/README.md b/README.md
@@ -24,9 +24,9 @@ MiroTalk WEB is a platform that allows for the management of an unlimited number
 
 For demonstration purposes, below the credentials:
 
--   `Username`: demo
--   `Email`: [email protected]
--   `Password`: Demo@123
+- `Username`: demo
+- `Email`: [email protected]
+- `Password`: Demo@123
 
 ---
 
@@ -182,13 +182,13 @@ Open in browser: [http://localhost:9000](http://localhost:9000)
 
 <br>
 
--   `MongoDB Migrations:` For MongoDB migrations follow [this README](./database/README.md).
+- `MongoDB Migrations:` For MongoDB migrations follow [this README](./database/README.md).
 
--   `Ngrok:` You can start MiroTalk WEB directly from your local PC and make it accessible from any device outside your network by following [these instructions](docs/ngrok.md).
+- `Ngrok:` You can start MiroTalk WEB directly from your local PC and make it accessible from any device outside your network by following [these instructions](docs/ngrok.md).
 
--   `Self-hosting:` For `self-hosting MiroTalk WEB` on your own dedicated server, please refer to [this comprehensive guide](https://docs.mirotalk.com/mirotalk-web/self-hosting/). It will provide you with all the necessary instructions to get your MiroTalk WEB instance up and running smoothly.
+- `Self-hosting:` For `self-hosting MiroTalk WEB` on your own dedicated server, please refer to [this comprehensive guide](https://docs.mirotalk.com/mirotalk-web/self-hosting/). It will provide you with all the necessary instructions to get your MiroTalk WEB instance up and running smoothly.
 
--   `Rest API:` You can check the swagger document at http://localhost:9000/api/v1/docs, or live [here](https://webrtc.mirotalk.com/api/v1/docs).
+- `Rest API:` You can check the swagger document at http://localhost:9000/api/v1/docs, or live [here](https://webrtc.mirotalk.com/api/v1/docs).
 
 </details>
 

diff --git a/SECURITY.md b/SECURITY.md
@@ -9,10 +9,10 @@ We prefer a Coordinated Vulnerability Disclosure (CVD) to properly understand an
 
 Your report should include:
 
--   Product version ([GitHub](https://github.com/miroslavpejic85/mirotalkwebrtc/commits/master) commit hash or [DockerHub](https://hub.docker.com/r/mirotalk/webrtc) sha256 digest hash)
--   The affected component if possible (client.js, server.js, etc.)
--   A vulnerability description
--   Reproduction steps
+- Product version ([GitHub](https://github.com/miroslavpejic85/mirotalkwebrtc/commits/master) commit hash or [DockerHub](https://hub.docker.com/r/mirotalk/webrtc) sha256 digest hash)
+- The affected component if possible (client.js, server.js, etc.)
+- A vulnerability description
+- Reproduction steps
 
 A member of the security team will confirm the vulnerability, determine its impact, and develop a fix.
 The fix will be applied to the master branch, tested, and packaged in the next security release.

diff --git a/frontend/css/client.css b/frontend/css/client.css
@@ -458,11 +458,88 @@ iframe {
     transition: var(--tran-03);
 }
 
-#mytable {
+/* Base table styling for larger screens */
+#myTable {
     width: 100%;
+    border-collapse: collapse;
+    background-color: var(--panel-color);
+    color: var(--text-color);
+    overflow: hidden;
+    border-radius: 8px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
 }
-#myTable td i {
+
+#myTable th,
+#myTable td {
+    padding: 12px 16px;
+    border: 1px solid var(--border-color);
+    text-align: left;
     font-size: 1.4rem;
+    word-wrap: break-word;
+}
+
+#myTable th {
+    background-color: var(--box1-color);
+    color: var(--white-color);
+    font-weight: 600;
+    text-transform: uppercase;
+}
+
+#myTable tr:nth-child(even) {
+    background-color: var(--panel-light-color);
+}
+
+#myTable tr:hover {
+    background-color: var(--hover-color);
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+}
+
+/* Responsive table card styling for mobile */
+@media (max-width: 560px) {
+    #myTable {
+        display: block;
+        width: 100%;
+        border: none;
+    }
+
+    #myTable tr {
+        display: block;
+        width: 100%;
+        margin-bottom: 15px;
+    }
+
+    #myTable th,
+    #myTable td {
+        display: block;
+        width: 100%;
+        box-sizing: border-box;
+        text-align: left;
+    }
+
+    #myTable th {
+        font-size: 12px;
+        font-weight: bold;
+        text-transform: uppercase;
+        padding: 8px 12px;
+        background-color: var(--box1-color);
+        color: var(--white-color);
+    }
+
+    #myTable td {
+        width: 93vw;
+        font-size: 2rem;
+        padding: 10px 12px;
+        color: var(--text-color);
+        position: relative;
+        border-top: 1px solid var(--border-color);
+    }
+}
+
+@media (max-width: 360px) {
+    #myTable td {
+        font-size: 1.5rem;
+    }
 }
 
 .accountDiv,

diff --git a/frontend/html/client.html b/frontend/html/client.html
@@ -267,19 +267,19 @@
                         <option value="BRO">BRO</option>
                     </select>
                     <label for="tag">Tag</label>
-                    <input id="add-tag" type="text" name="tag" required />
+                    <input id="add-tag" type="text" placeholder="Tag" name="tag" required />
                     <label for="email">Email</label>
-                    <input id="add-email" type="email" name="email" required />
+                    <input id="add-email" type="email" placeholder="Email address" name="email" required />
                     <label for="phone">Phone</label>
-                    <input id="add-phone" type="text" name="phone" />
+                    <input id="add-phone" type="text" placeholder="Phone number" name="phone" />
                     <label for="date-time">Date - Time</label>
                     <div class="date-time">
-                        <input id="add-date" type="date" name="date" required />
-                        <input id="add-time" type="time" name="time" required />
+                        <input id="add-date" type="date" placeholder="Date" name="date" required />
+                        <input id="add-time" type="time" placeholder="Time" name="time" required />
                     </div>
                     <label for="room">Room</label>
                     <div class="room">
-                        <input id="add-room" type="text" name="room" required />
+                        <input id="add-room" type="text" placeholder="Room name" name="room" required />
                         <button id="gen-room" class="uil uil-sync"></button>
                     </div>
                     <select class="add-row-select-options" id="sel-room"></select>

diff --git a/frontend/js/client.js b/frontend/js/client.js
@@ -9,7 +9,7 @@
  * @license For private project or commercial purposes contact us at: [email protected] or purchase it directly via Code Canyon:
  * @license https://codecanyon.net/item/a-selfhosted-mirotalks-webrtc-rooms-scheduler-server/42643313
  * @author  Miroslav Pejic - [email protected]
- * @version 1.1.19
+ * @version 1.1.20
  */
 
 const isMobile = !!/Android|webOS|iPhone|iPad|iPod|BB10|BlackBerry|IEMobile|Opera Mini|Mobile|mobile/i.test(
@@ -563,7 +563,7 @@ function getRow(obj) {
         ? `<i id="${obj._id}_delete" onclick="delRow('${obj._id}')" class="uil uil-multiply"></i>`
         : '';
 
-    let rooms = `<td><input id="${obj._id}_room" type="text" name="room" value="${obj.room}"/></td>`;
+    let rooms = `<td><input id="${obj._id}_room" type="text" placeholder="Room name" name="room" value="${obj.room}"/></td>`;
 
     if (!user.allowedRoomsALL) {
         rooms = `<select id="${obj._id}_room" class="select-options">`;
@@ -585,11 +585,11 @@ function getRow(obj) {
                 ${optionBRO}
             </select>
         </td>`,
-        `<td><input id="${obj._id}_tag" type="text" name="tag" value="${obj.tag}"/></td>`,
-        `<td><input id="${obj._id}_email" type="email" name="email" value="${obj.email}"/></td>`,
-        `<td><input id="${obj._id}_phone" type="text" name="text" value="${obj.phone}"/></td>`,
-        `<td><input id="${obj._id}_date" type="date" name="date" value="${obj.date}"/></td>`,
-        `<td><input id="${obj._id}_time" type="time" name="time" value="${obj.time}"/></td>`,
+        `<td><input id="${obj._id}_tag" type="text" name="tag" placeholder="Tag" value="${obj.tag}"/></td>`,
+        `<td><input id="${obj._id}_email" type="email" name="email" placeholder="Email address" value="${obj.email}"/></td>`,
+        `<td><input id="${obj._id}_phone" type="text" name="text" placeholder="Phone number" value="${obj.phone}"/></td>`,
+        `<td><input id="${obj._id}_date" type="date" name="date" placeholder="Date" value="${obj.date}"/></td>`,
+        `<td><input id="${obj._id}_time" type="time" name="time" placeholder="Time" value="${obj.time}"/></td>`,
         `<td>${rooms}</td>`,
         `<td>
             ${setRandomRoomIcon}

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "mirotalkwebrtc",
-    "version": "1.1.19",
+    "version": "1.1.20",
     "description": "MiroTalk WebRTC admin",
     "main": "server.js",
     "scripts": {