From 49ba0cb9841abe7d8b723fbe5dd4aef2d1800cf4 Mon Sep 17 00:00:00 2001
From: Samuel Couillard <43917914+scouillard@users.noreply.github.com>
Date: Wed, 16 Nov 2022 09:38:24 -0500
Subject: [PATCH] Add min-width to columns (#4130)
---
app/assets/stylesheets/admin_panel.scss | 90 +++++++++++++++++--
app/assets/stylesheets/variables.scss | 7 ++
.../admin/manage_users/ManageUsersTable.jsx | 2 +-
.../admin/server_rooms/ServerRooms.jsx | 2 +-
.../components/recordings/RecordingRow.jsx | 2 +-
.../components/recordings/RecordingsList.jsx | 2 +-
public/locales/en.json | 2 +-
7 files changed, 97 insertions(+), 10 deletions(-)
diff --git a/app/assets/stylesheets/admin_panel.scss b/app/assets/stylesheets/admin_panel.scss
index 39d37978..cfb5f8e1 100644
--- a/app/assets/stylesheets/admin_panel.scss
+++ b/app/assets/stylesheets/admin_panel.scss
@@ -1,5 +1,3 @@
-$admin-card-height: 550px;
-
#admin-panel {
#admin-sidebar {
height: 100%;
@@ -35,9 +33,6 @@ $admin-card-height: 550px;
table, td, tr {
border-color: whitesmoke !important;
}
- td {
- max-width: 200px;
- }
}
.dropdown-item {
@@ -55,6 +50,91 @@ $admin-card-height: 550px;
}
}
+#manage-users-table {
+ @include media-breakpoint-down(xl) {
+ td, tr {
+ // Full name and creation date
+ &:nth-child(1) {
+ min-width: $column-lg-width;
+ }
+ // Email address
+ &:nth-child(2) {
+ min-width: $column-lg-width;
+ }
+ // Role
+ &:nth-child(3) {
+ min-width: $column-md-width;
+ }
+ // Dropdown button
+ &:nth-child(4) {
+ min-width: $column-sm-width;
+ }
+ }
+ }
+}
+
+#server-rooms-table {
+ @include media-breakpoint-down(xl) {
+ td, tr {
+ // Full name and last meeting date
+ &:nth-child(1) {
+ min-width: $column-lg-width;
+ }
+ // Owner name
+ &:nth-child(2) {
+ min-width: $column-md-width;
+ }
+ // Room ID
+ &:nth-child(3) {
+ min-width: $column-md-width;
+ }
+ // # of participants
+ &:nth-child(4) {
+ min-width: $column-sm-width;
+ }
+ // Status
+ &:nth-child(5) {
+ min-width: $column-sm-width;
+ }
+ // Dropdown button
+ &:nth-child(6) {
+ min-width: $column-xs-width;
+ }
+ }
+ }
+}
+
+#recordings-table {
+ @include media-breakpoint-down(xl) {
+ td, tr {
+ // Name and recording date
+ &:nth-child(1) {
+ min-width: $column-lg-width;
+ }
+ // Length
+ &:nth-child(2) {
+ min-width: $column-sm-width;
+ }
+ // # of users
+ &:nth-child(3) {
+ min-width: $column-xs-width;
+ }
+ // Visibility dropdown
+ &:nth-child(4) {
+ min-width: $column-md-width;
+ }
+ // Format badges
+ &:nth-child(4) {
+ min-width: $column-lg-width;
+ }
+ // Dropdown button
+ &:nth-child(4) {
+ min-width: $column-xs-width;
+ }
+ }
+ }
+}
+
.color-picker {
width: 200px;
min-height: 330px;
diff --git a/app/assets/stylesheets/variables.scss b/app/assets/stylesheets/variables.scss
index 705f20fa..4f147550 100644
--- a/app/assets/stylesheets/variables.scss
+++ b/app/assets/stylesheets/variables.scss
@@ -16,4 +16,11 @@ $footer-height: 35px;
$table-hover-bg: #F8F8F8;
+$admin-card-height: 550px;
+
$button-min-width: 120px;
+
+$column-xs-width: 50px;
+$column-sm-width: 100px;
+$column-md-width: 150px;
+$column-lg-width: 325px;
diff --git a/app/javascript/components/admin/manage_users/ManageUsersTable.jsx b/app/javascript/components/admin/manage_users/ManageUsersTable.jsx
index 7468be98..26cac41f 100644
--- a/app/javascript/components/admin/manage_users/ManageUsersTable.jsx
+++ b/app/javascript/components/admin/manage_users/ManageUsersTable.jsx
@@ -9,7 +9,7 @@ export default function ManageUsersTable({ users }) {
const { t } = useTranslation();
return (
- <Table className="table-bordered border border-2 mb-0" hover responsive>
+ <Table id="manage-users-table" className="table-bordered border border-2 mb-0" hover responsive>
<thead>
<tr className="text-muted small">
<th className="fw-normal border-end-0">{ t('user.name') }<SortBy fieldName="name" /></th>
diff --git a/app/javascript/components/admin/server_rooms/ServerRooms.jsx b/app/javascript/components/admin/server_rooms/ServerRooms.jsx
index 3d7f8cd6..c947bf56 100644
--- a/app/javascript/components/admin/server_rooms/ServerRooms.jsx
+++ b/app/javascript/components/admin/server_rooms/ServerRooms.jsx
@@ -44,7 +44,7 @@ export default function ServerRooms() {
</div>
<div className="p-4">
<SearchBar searchInput={searchInput} setSearchInput={setSearchInput} />
- <Table className="table-bordered border border-2 mt-4 mb-0" hover responsive>
+ <Table id="server-rooms-table" className="table-bordered border border-2 mt-4 mb-0" hover responsive>
<thead>
<tr className="text-muted small">
<th className="fw-normal border-end-0">{ t('admin.server_rooms.name') }<SortBy fieldName="name" /></th>
diff --git a/app/javascript/components/recordings/RecordingRow.jsx b/app/javascript/components/recordings/RecordingRow.jsx
index 035fad5e..43d564a9 100644
--- a/app/javascript/components/recordings/RecordingRow.jsx
+++ b/app/javascript/components/recordings/RecordingRow.jsx
@@ -95,7 +95,7 @@ export default function RecordingRow({
{recording.formats.map((format) => (
<Button
onClick={() => window.open(format.url, '_blank')}
- className={`btn-sm rounded-pill me-1 border-0 btn-format-${format.recording_type.toLowerCase()}`}
+ className={`btn-sm rounded-pill me-1 mt-1 border-0 btn-format-${format.recording_type.toLowerCase()}`}
key={format.id}
>
{format.recording_type}
diff --git a/app/javascript/components/recordings/RecordingsList.jsx b/app/javascript/components/recordings/RecordingsList.jsx
index b96d8567..be206359 100644
--- a/app/javascript/components/recordings/RecordingsList.jsx
+++ b/app/javascript/components/recordings/RecordingsList.jsx
@@ -12,7 +12,7 @@ export default function RecordingsList({
const { t } = useTranslation();
return (
- <Table className="table-bordered border border-2 mb-0 recordings-list" hover responsive>
+ <Table id="recordings-table" className="table-bordered border border-2 mb-0 recordings-list" hover responsive>
<thead>
<tr className="text-muted small">
<th className="fw-normal border-end-0">{ t('recording.name') }<SortBy fieldName="name" /></th>
diff --git a/public/locales/en.json b/public/locales/en.json
index 5adfeeb7..a6f3f5db 100644
--- a/public/locales/en.json
+++ b/public/locales/en.json
@@ -145,7 +145,7 @@
"published": "Published",
"unpublished": "Unpublished",
"protected": "Protected",
- "length_in_minutes": "{{recording.length}} minutes",
+ "length_in_minutes": "{{recording.length}} min.",
"processing_recording": "Processing recording...",
"copy_recording_urls": "Copy Recording Url(s)",
"no_recording_found": "No recording found",
--
GitLab