diff --git a/app/assets/stylesheets/admin_panel.scss b/app/assets/stylesheets/admin_panel.scss index 39d379785408bc3b193a4c5a3868739fafb80617..cfb5f8e1e7958687a7e56a44ed2dad3e5f8e36d8 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 705f20fa8a7376accf37f3e83e4df3b81617bf4b..4f1475508620ad5782b3c4556155e81d59270074 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 7468be980572f2c7b013e8f008085406594756fc..26cac41f480c875cba764ff19e9a27cdec66fb04 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 3d7f8cd66da81c4c7a5de4ac9b3a74d475a2ee88..c947bf562e9b45a8b13749e7e932d1f1f75dd68b 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 035fad5ef355b2c1c67567e26c30aae3a3471876..43d564a95163be8507937b5ea3bed00683cddc81 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 b96d85674328b83e82dfbb98e9e64a133e42110b..be2063598c8ffb228e8796ca7943b0f924fb5174 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 5adfeeb7ab4b4451d9cba947593bded11aaafd23..a6f3f5dba46ff9e42894ace65e95682dae5ee3b3 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",