From 546a59a4dea0a12943b6e89ce73cf16416263a91 Mon Sep 17 00:00:00 2001 From: Miroslav Pejic Date: Thu, 28 Nov 2024 21:36:54 +0100 Subject: [PATCH] [mirotalkwebrtc] - improve UI for mobile --- CODE_OF_CONDUCT.md | 28 +++++++------- README.md | 14 +++---- SECURITY.md | 8 ++-- frontend/css/client.css | 81 ++++++++++++++++++++++++++++++++++++++- frontend/html/client.html | 12 +++--- frontend/js/client.js | 14 +++---- package.json | 2 +- 7 files changed, 118 insertions(+), 41 deletions(-) diff --git a/CODE_OF_CONDUCT.md b/CODE_OF_CONDUCT.md index e68a1ec..56e6000 100644 --- 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 index 1b4fc17..349edd4 100644 --- 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`: demo@gmail.com -- `Password`: Demo@123 +- `Username`: demo +- `Email`: demo@gmail.com +- `Password`: Demo@123 --- @@ -182,13 +182,13 @@ Open in browser: [http://localhost:9000](http://localhost:9000)
-- `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). diff --git a/SECURITY.md b/SECURITY.md index 8aa28c5..7c1e756 100644 --- 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 index 57d4f60..e3f2232 100644 --- 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 index 01f2df0..d0cba33 100644 --- a/frontend/html/client.html +++ b/frontend/html/client.html @@ -267,19 +267,19 @@ - + - + - +
- - + +
- +
diff --git a/frontend/js/client.js b/frontend/js/client.js index 5ccbfe6..fa03d6e 100644 --- a/frontend/js/client.js +++ b/frontend/js/client.js @@ -9,7 +9,7 @@ * @license For private project or commercial purposes contact us at: license.mirotalk@gmail.com or purchase it directly via Code Canyon: * @license https://codecanyon.net/item/a-selfhosted-mirotalks-webrtc-rooms-scheduler-server/42643313 * @author Miroslav Pejic - miroslav.pejic.85@gmail.com - * @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) { ? `` : ''; - let rooms = ``; + let rooms = ``; if (!user.allowedRoomsALL) { rooms = ` `, - ``, - ``, - ``, - ``, - ``, + ``, + ``, + ``, + ``, + ``, `${rooms}`, ` ${setRandomRoomIcon} diff --git a/package.json b/package.json index e5f6387..34902c7 100644 --- 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": {