Skip to content

Commit

Permalink
Cohorts: simplify cohort admin layout on mobile
Browse files Browse the repository at this point in the history
  • Loading branch information
@rwaldron
rwaldron committed Jul 23, 2020
1 parent 86e6048 commit 9631a98
Show file tree
Hide file tree
Showing 4 changed files with 75 additions and 57 deletions.
41 changes: 22 additions & 19 deletions client/components/Cohorts/Cohort.css
View file
@@ -1,37 +1,37 @@
.cohort__scrolling-tbody {
.c__scrolling-tbody {
display: block;
height: 231px;
min-height: 143px;
overflow: auto;
}

.cohort__table-container {
.c__table-container {
margin-bottom: 1rem;
}

@media only screen and (max-width: 767px) {
.ui.container.cohort__table-container {
.ui.container.c__table-container {
width: auto !important;
margin-left: 0em !important;
margin-right: 0em !important;
}
}

.cohort__table-thead-tbody-tr {
.c__table-thead-tbody-tr {
display: table;
width: 100%;
table-layout: fixed;
}

.cohort__button--transparent {
.c__button--transparent {
background: none !important;
}

.cohort__button-group--transparent {
.c__button-group--transparent {
background: none !important;
}

.cohort__button--spacing {
.c__button--spacing {
padding-top: 0rem !important;
padding-right: 0.5rem !important;
padding-bottom: 0rem !important;
Expand All @@ -43,50 +43,53 @@
padding: 0.428571em 1.14285714em !important;
}

.cohort__table--constraints {
.c__table--constraints {
width: 100%;
white-space: nowrap;
table-layout: fixed;
}

.cohort__table-cell-first {
.c__table-cell-first {
width: 40px;
text-overflow: unset !important;
}

.cohort__table-cell-options {
.c__table-cell-options {
width: 15rem !important;
}

.cohort__table-cell-content {
.c__table-cell-content {
overflow: hidden;
text-overflow: ellipsis;
}

@media only screen and (max-width: 767px) {
.cohort__table-cell-content {
display: none !important;
}
.c__table-cell-content {
display: none !important;
}
.c__hidden-on-mobile {
display: none !important;
}
}

.cohort__table--search {
.c__table--search {
margin-left: 0.5rem !important;
}

.cohort__table-cell--title-button {
.c__table-cell--title-button {
background: none;
}

.cohort__tab-menu--overflow {
.c__tab-menu--overflow {
overflow-x: auto;
overflow-y: hidden;
}
.cohort__tab-menu--overflow::-webkit-scrollbar {
.c__tab-menu--overflow::-webkit-scrollbar {
height: 2px !important;
}


.cohort__tab-menu--button-transparent {
.c__tab-menu--button-transparent {
background-color: none !important;
margin: -2.5em 0 !important;
}
Expand Down
2 changes: 1 addition & 1 deletion client/components/Cohorts/Cohort.jsx
View file
Expand Up @@ -176,7 +176,7 @@ export class Cohort extends React.Component {

return (
<div>
<Menu attached="top" tabular className="cohort__tab-menu--overflow">
<Menu attached="top" tabular className="c__tab-menu--overflow">
<Menu.Item
active={activeTabKey === 'cohort'}
content={name}
Expand Down
53 changes: 34 additions & 19 deletions client/components/Cohorts/CohortParticipants.jsx
View file
Expand Up @@ -30,6 +30,7 @@ import './Cohort.css';

const { facilitator, researcher } = COHORT_ROLE_GROUPS;

const MOBILE_WIDTH = 767;
const ROWS_PER_PAGE = 10;

export class CohortParticipants extends React.Component {
Expand Down Expand Up @@ -203,6 +204,8 @@ export class CohortParticipants extends React.Component {
scrollIntoView
} = this;

const IS_ON_MOBILE = window.innerWidth <= MOBILE_WIDTH;

// Ensure that Facilitator access is applied even if the user just
// became a facilitator and their session roles haven't updated.
const isFacilitator =
Expand All @@ -226,15 +229,15 @@ export class CohortParticipants extends React.Component {
const users = cohort.users.slice(index, index + ROWS_PER_PAGE);
const columns = {
data: {
className: 'cohort__table-cell-first',
className: 'c__table-cell-first c__hidden-on-mobile',
content: ''
},
username: {
className: 'users__col-large',
content: 'Username'
content: 'User'
},
email: {
className: 'users__col-large',
className: 'users__col-large c__hidden-on-mobile',
content: 'Email'
}
};
Expand Down Expand Up @@ -262,7 +265,7 @@ export class CohortParticipants extends React.Component {
};
const trigger = (
<Table.Cell.Clickable
className="cohort__table-cell-first"
className="c__table-cell-first c__hidden-on-mobile"
key={`clickabletablecell-${cohortUser.id}`}
content={<Icon name="file alternate outline" />}
onClick={onClickAddTab}
Expand All @@ -282,17 +285,27 @@ export class CohortParticipants extends React.Component {
</ConfirmAuth>
);

const key = hash(cohortUser);
const { is_super } = (usersById && usersById[cohortUser.id]) || {};

const username = <Username {...cohortUser} is_super={is_super} />;

const usernameCell = cohortUser.roles.includes('owner') ? (
<Table.Cell key={hash(cohortUser)}>{username} (owner)</Table.Cell>
<Table.Cell key={key}>{username} (owner)</Table.Cell>
) : (
<Table.Cell key={hash(cohortUser)}>{username}</Table.Cell>
<Table.Cell key={key}>{username}</Table.Cell>
);

accum[cohortUser.id] = [popup, usernameCell, cohortUser.email || ''];
accum[cohortUser.id] = [
<Table.Cell className="c__hidden-on-mobile" key={`popup-${key}`}>
{popup}
</Table.Cell>,
usernameCell,
<Table.Cell className="c__hidden-on-mobile" key={`email-${key}`}>
{cohortUser.email}
</Table.Cell>
];

return accum;
}, {});

Expand All @@ -317,17 +330,19 @@ export class CohortParticipants extends React.Component {
</Icon.Group>
Participants ({this.props.cohort.users.length})
</Menu.Item>,
<Menu.Item
key="menu-item-cohort-participants"
name="Control participant list refresh"
onClick={onParticipantRefreshChange}
>
<Icon.Group className="em__icon-group-margin">
<Icon name="refresh" />
<Icon corner="top right" name={refreshIcon} color={refreshColor} />
</Icon.Group>
{refreshLabel}
</Menu.Item>
!IS_ON_MOBILE ? (
<Menu.Item
key="menu-item-cohort-participants"
name="Control participant list refresh"
onClick={onParticipantRefreshChange}
>
<Icon.Group className="em__icon-group-margin">
<Icon name="refresh" />
<Icon corner="top right" name={refreshIcon} color={refreshColor} />
</Icon.Group>
{refreshLabel}
</Menu.Item>
) : null
];

const right = [
Expand Down Expand Up @@ -357,7 +372,7 @@ export class CohortParticipants extends React.Component {
</Ref>
);
return (
<Container fluid className="cohort__table-container">
<Container fluid className="c__table-container">
{editorMenu}
<UsersTable {...usersTableProps} />
</Container>
Expand Down
36 changes: 18 additions & 18 deletions client/components/Cohorts/CohortScenarios.jsx
View file
Expand Up @@ -230,48 +230,48 @@ export class CohortScenarios extends React.Component {
);

return (
<Container fluid className="cohort__table-container">
<Container fluid className="c__table-container">
{editorMenu}
<Table
fixed
striped
selectable
role="grid"
aria-labelledby="header"
className="cohort__table--constraints"
className="c__table--constraints"
unstackable
>
<Table.Header className="cohort__table-thead-tbody-tr">
<Table.Header className="c__table-thead-tbody-tr">
<Table.Row>
<ConfirmAuth
isAuthorized={isFacilitator}
requiredPermission="edit_scenarios_in_cohort"
isAuthorized={isFacilitator}
>
<Table.HeaderCell className="cohort__table-cell-first">
<Table.HeaderCell className="c__table-cell-first">
<Icon.Group className="em__icon-group-margin">
<Icon name="newspaper outline" />
<Icon corner="top right" name="add" color="green" />
</Icon.Group>
</Table.HeaderCell>
<Table.HeaderCell className="cohort__table-cell-options">
<Table.HeaderCell className="c__table-cell-options c__hidden-on-mobile">
Tools
</Table.HeaderCell>
</ConfirmAuth>
<Table.HeaderCell>Title</Table.HeaderCell>
<Table.HeaderCell className="cohort__table-cell-content">
<Table.HeaderCell className="c__table-cell-content">
{isFacilitator ? 'Author' : 'Started'}
</Table.HeaderCell>
<Table.HeaderCell className="cohort__table-cell-content">
<Table.HeaderCell className="c__table-cell-content">
{isFacilitator ? 'Description' : 'Completed'}
</Table.HeaderCell>
</Table.Row>
</Table.Header>

{scenarios.length ? (
<Sortable
isAuthorized={isFacilitator}
tag="tbody"
className="cohort__scrolling-tbody"
className="c__scrolling-tbody"
isAuthorized={isFacilitator}
onChange={onScenarioOrderChange}
tableRef={this.tableBody}
options={{
Expand Down Expand Up @@ -355,7 +355,7 @@ export class CohortScenarios extends React.Component {
>
<Table.Row
key={`row-${index}`}
className="cohort__table-thead-tbody-tr"
className="c__table-thead-tbody-tr"
style={{ cursor: 'pointer' }}
{...completionStatus}
>
Expand All @@ -365,7 +365,7 @@ export class CohortScenarios extends React.Component {
>
<Table.Cell
key={`cell-checkbox-${index}`}
className="cohort__table-cell-first"
className="c__table-cell-first"
>
<Checkbox
key={`checkbox-${index}`}
Expand All @@ -379,13 +379,13 @@ export class CohortScenarios extends React.Component {
isAuthorized={isFacilitator}
requiredPermission="edit_scenarios_in_cohort"
>
<Table.Cell className="cohort__table-cell-options">
<Table.Cell className="c__table-cell-options c__hidden-on-mobile">
{checked ? (
<Button.Group
hidden
basic
size="small"
className="cohort__button-group--transparent"
className="c__button-group--transparent"
>
<Popup
size="tiny"
Expand Down Expand Up @@ -471,14 +471,14 @@ export class CohortScenarios extends React.Component {
href={pathname}
content={scenario.title}
/>
<Table.Cell className="cohort__table-cell-content">
<Table.Cell className="c__table-cell-content">
{isFacilitator ? (
<Username {...usersById[scenario.author.id]} />
) : (
startedAtDisplay
)}
</Table.Cell>
<Table.Cell className="cohort__table-cell-content">
<Table.Cell className="c__table-cell-content">
{isFacilitator ? scenario.description : endedAtDisplay}
</Table.Cell>
</Table.Row>
Expand All @@ -487,10 +487,10 @@ export class CohortScenarios extends React.Component {
})}
</Sortable>
) : (
<Table.Body className="cohort__scrolling-tbody">
<Table.Body className="c__scrolling-tbody">
<Table.Row
key={`row-empty-results`}
className="cohort__table-thead-tbody-tr"
className="c__table-thead-tbody-tr"
>
<Table.Cell>No scenarios match your search</Table.Cell>
</Table.Row>
Expand Down

0 comments on commit 9631a98

Please sign in to comment.