BigBlueButton/bigbluebutton-Github
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: table sizing (learning dashboard)

Browse Source
This commit is contained in:
Joao Victor 2021-11-16 09:17:35 -03:00
parent f449a1893c
commit 8fcfed64c5
3 changed files with 35 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
bbb-learning-dashboard/src/components/PollsTable.jsx
View File

@ -15,10 +15,10 @@ class PollsTable extends React.Component {
}
return (
<table className="w-full whitespace-nowrap">
<table className="w-full">
<thead>
<tr className="text-xs font-semibold tracking-wide col-text-left text-gray-500 uppercase border-b bg-gray-100">
<th className="px-4 py-3">
<th className="px-3.5 2xl:px-4 py-3">
<FormattedMessage id="app.learningDashboard.user" defaultMessage="User" />
<svg
xmlns="http://www.w3.org/2000/svg"
@ -31,11 +31,11 @@ class PollsTable extends React.Component {
</svg>
</th>
{typeof polls === 'object' && Object.values(polls || {}).length > 0 ? (
Object.values(polls || {}).map((poll, index) => <th className="px-4 py-3 text-center">{poll.question || `Poll ${index + 1}`}</th>)
Object.values(polls || {}).map((poll, index) => <th className="px-3.5 2xl:px-4 py-3 text-center">{poll.question || `Poll ${index + 1}`}</th>)
) : null }
</tr>
</thead>
<tbody className="bg-white divide-y">
<tbody className="bg-white divide-y whitespace-nowrap">
{ typeof allUsers === 'object' && Object.values(allUsers || {}).length > 0 ? (
Object.values(allUsers || {})
.filter((user) => Object.values(user.answers).length > 0)
@ -48,7 +48,7 @@ class PollsTable extends React.Component {
})
.map((user) => (
<tr className="text-gray-700">
<td className="px-4 py-3">
<td className="px-3.5 2xl:px-4 py-3">
<div className="flex items-center text-sm">
<div className="relative hidden w-8 h-8 rounded-full md:block">
<UserAvatar user={user} />
@ -62,7 +62,7 @@ class PollsTable extends React.Component {
{typeof polls === 'object' && Object.values(polls || {}).length > 0 ? (
Object.values(polls || {}).map((poll) => (
<td className="px-4 py-3 text-sm text-center">
<td className="px-3.5 2xl:px-4 py-3 text-sm text-center">
{ getUserAnswer(user, poll) }
{ poll.anonymous
? (
@ -94,7 +94,7 @@ class PollsTable extends React.Component {
</tr>
))) : null }
<tr className="text-gray-700">
<td className="px-4 py-3">
<td className="px-3.5 2xl:px-4 py-3">
<div className="flex items-center text-sm">
<div className="relative hidden w-8 h-8 mr-3 rounded-full md:block">
{/* <img className="object-cover w-full h-full rounded-full" */}
@ -128,7 +128,7 @@ class PollsTable extends React.Component {
</td>
{typeof polls === 'object' && Object.values(polls || {}).length > 0 ? (
Object.values(polls || {}).map((poll) => (
<td className="px-4 py-3 text-sm text-center">
<td className="px-3.5 2xl:px-4 py-3 text-sm text-center">
{ poll.anonymousAnswers.map((answer) => <p>{answer}</p>) }
</td>
))

12
bbb-learning-dashboard/src/components/StatusTable.jsx
View File

@ -29,10 +29,10 @@ class StatusTable extends React.Component {
}
return (
<table className="w-full whitespace-nowrap">
<table className="w-full">
<thead>
<tr className="text-xs font-semibold tracking-wide text-gray-500 uppercase border-b bg-gray-100">
<th className="px-4 py-3 col-text-left">
<th className="px-3.5 2xl:px-4 py-3 col-text-left">
<FormattedMessage id="app.learningDashboard.user" defaultMessage="User" />
<svg
xmlns="http://www.w3.org/2000/svg"
@ -44,10 +44,10 @@ class StatusTable extends React.Component {
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M17 13l-5 5m0 0l-5-5m5 5V6" />
</svg>
</th>
{ periods.map((period) => <th className="px-4 py-3 col-text-left">{ `${tsToHHmmss(period - firstRegisteredOnTime)}` }</th>) }
{ periods.map((period) => <th className="px-3.5 2xl:px-4 py-3 col-text-left">{ `${tsToHHmmss(period - firstRegisteredOnTime)}` }</th>) }
</tr>
</thead>
<tbody className="bg-white divide-y">
<tbody className="bg-white divide-y whitespace-nowrap">
{ typeof allUsers === 'object' && Object.values(allUsers || {}).length > 0 ? (
Object.values(allUsers || {})
.sort((a, b) => {
@ -59,7 +59,7 @@ class StatusTable extends React.Component {
})
.map((user) => (
<tr className="text-gray-700">
<td className="px-4 py-3">
<td className="px-3.5 2xl:px-4 py-3">
<div className="flex items-center text-sm">
<div className="relative hidden w-8 h-8 rounded-full md:block">
<UserAvatar user={user} />
@ -76,7 +76,7 @@ class StatusTable extends React.Component {
period,
period + spanMinutes);
return (
<td className="px-4 py-3 text-sm col-text-left">
<td className="px-3.5 2xl:px-4 py-3 text-sm col-text-left">
{
user.registeredOn > period && user.registeredOn < period + spanMinutes
? (

42
bbb-learning-dashboard/src/components/UsersTable.jsx
View File

@ -101,10 +101,10 @@ class UsersTable extends React.Component {
});
return (
<table className="w-full whitespace-nowrap">
<table className="w-full">
<thead>
<tr className="text-xs font-semibold tracking-wide text-left text-gray-500 uppercase border-b bg-gray-100">
<th className="px-4 py-3 col-text-left">
<th className="px-3.5 2xl:px-4 py-3 col-text-left">
<FormattedMessage id="app.learningDashboard.user" defaultMessage="User" />
{
tab === 'overview'
@ -122,26 +122,26 @@ class UsersTable extends React.Component {
: null
}
</th>
<th className="px-4 py-3 text-center">
<th className="px-3.5 2xl:px-4 py-3 text-center">
<FormattedMessage id="app.learningDashboard.usersTable.colOnline" defaultMessage="Online time" />
</th>
<th className="px-4 py-3 text-center">
<th className="px-3.5 2xl:px-4 py-3 text-center">
<FormattedMessage id="app.learningDashboard.usersTable.colTalk" defaultMessage="Talk time" />
</th>
<th className="px-4 py-3 text-center">
<th className="px-3.5 2xl:px-4 py-3 text-center">
<FormattedMessage id="app.learningDashboard.usersTable.colWebcam" defaultMessage="Webcam Time" />
</th>
<th className="px-4 py-3 text-center">
<th className="px-3.5 2xl:px-4 py-3 text-center">
<FormattedMessage id="app.learningDashboard.usersTable.colMessages" defaultMessage="Messages" />
</th>
<th className="px-4 py-3 col-text-left">
<th className="px-3.5 2xl:px-4 py-3 col-text-left">
<FormattedMessage id="app.learningDashboard.usersTable.colEmojis" defaultMessage="Emojis" />
</th>
<th className="px-4 py-3 text-center">
<th className="px-3.5 2xl:px-4 py-3 text-center">
<FormattedMessage id="app.learningDashboard.usersTable.colRaiseHands" defaultMessage="Raise Hand" />
</th>
<th
className={`px-4 py-3 text-center ${tab === 'overview_activityscore' ? 'cursor-pointer' : ''}`}
className={`px-3.5 2xl:px-4 py-3 text-center ${tab === 'overview_activityscore' ? 'cursor-pointer' : ''}`}
onClick={() => { if (tab === 'overview_activityscore') this.toggleActivityScoreOrder(); }}
>
<FormattedMessage id="app.learningDashboard.usersTable.colActivityScore" defaultMessage="Activity Score" />
@ -166,12 +166,12 @@ class UsersTable extends React.Component {
: null
}
</th>
<th className="px-4 py-3 text-center">
<th className="px-3.5 2xl:px-4 py-3 text-center">
<FormattedMessage id="app.learningDashboard.usersTable.colStatus" defaultMessage="Status" />
</th>
</tr>
</thead>
<tbody className="bg-white divide-y">
<tbody className="bg-white divide-y whitespace-nowrap">
{ typeof allUsers === 'object' && Object.values(allUsers || {}).length > 0 ? (
Object.values(allUsers || {})
.sort((a, b) => {
@ -189,7 +189,7 @@ class UsersTable extends React.Component {
})
.map((user) => (
<tr key={user} className="text-gray-700">
<td className="px-4 py-3 col-text-left text-sm">
<td className="px-3.5 2xl:px-4 py-3 col-text-left text-sm">
<div className="inline-block relative w-8 h-8 rounded-full">
{/* <img className="object-cover w-full h-full rounded-full" */}
{/* src="" */}
@ -262,7 +262,7 @@ class UsersTable extends React.Component {
}
</div>
</td>
<td className="px-4 py-3 text-sm text-center items-center">
<td className="px-3.5 2xl:px-4 py-3 text-sm text-center items-center">
<svg
xmlns="http://www.w3.org/2000/svg"
className="h-4 w-4 inline"
@ -296,7 +296,7 @@ class UsersTable extends React.Component {
/>
</div>
</td>
<td className="px-4 py-3 text-sm text-center">
<td className="px-3.5 2xl:px-4 py-3 text-sm text-center">
{ user.talk.totalTime > 0
? (
<span className="text-center">
@ -319,7 +319,7 @@ class UsersTable extends React.Component {
</span>
) : null }
</td>
<td className="px-4 py-3 text-sm text-center">
<td className="px-3.5 2xl:px-4 py-3 text-sm text-center">
{ getSumOfTime(user.webcams) > 0
? (
<span className="text-center">
@ -342,7 +342,7 @@ class UsersTable extends React.Component {
</span>
) : null }
</td>
<td className="px-4 py-3 text-sm text-center">
<td className="px-3.5 2xl:px-4 py-3 text-sm text-center">
{ user.totalOfMessages > 0
? (
<span>
@ -365,7 +365,7 @@ class UsersTable extends React.Component {
</span>
) : null }
</td>
<td className="px-4 py-3 text-sm col-text-left">
<td className="px-3.5 2xl:px-4 py-3 text-sm col-text-left">
{
Object.keys(usersEmojisSummary[user.intId] || {}).map((emoji) => (
<div className="text-xs whitespace-nowrap">
@ -381,7 +381,7 @@ class UsersTable extends React.Component {
))
}
</td>
<td className="px-4 py-3 text-sm text-center">
<td className="px-3.5 2xl:px-4 py-3 text-sm text-center">
{ user.emojis.filter((emoji) => emoji.name === 'raiseHand').length > 0
? (
<span>
@ -406,7 +406,7 @@ class UsersTable extends React.Component {
</td>
{
!user.isModerator ? (
<td className="px-4 py-3 text-sm text-center items">
<td className="px-3.5 2xl:px-4 py-3 text-sm text-center items">
<svg viewBox="0 0 82 12" width="82" height="12" className="flex-none m-auto inline">
<rect width="12" height="12" fill={usersActivityScore[user.intId] > 0 ? '#A7F3D0' : '#e4e4e7'} />
<rect width="12" height="12" x="14" fill={usersActivityScore[user.intId] > 2 ? '#6EE7B7' : '#e4e4e7'} />
@ -422,7 +422,7 @@ class UsersTable extends React.Component {
</td>
) : <td />
}
<td className="px-4 py-3 text-xs text-center">
<td className="px-3.5 2xl:px-4 py-3 text-xs text-center">
{
user.leftOn > 0
? (
@ -441,7 +441,7 @@ class UsersTable extends React.Component {
))
) : (
<tr className="text-gray-700">
<td colSpan="8" className="px-4 py-3 text-sm text-center">
<td colSpan="8" className="px-3.5 2xl:px-4 py-3 text-sm text-center">
<FormattedMessage id="app.learningDashboard.usersTable.noUsers" defaultMessage="No users" />
</td>
</tr>