style: expand name cell

pull/63/head
sualko 2020-06-17 11:08:31 +02:00
parent ad7eedf14b
commit d577968d4f
3 changed files with 12 additions and 7 deletions

View File

@ -74,6 +74,11 @@
width: 100%; width: 100%;
} }
.bbb-shrink {
width: 44px;
white-space: nowrap;
}
tr { tr {
min-height: 62px; min-height: 62px;
} }
@ -83,7 +88,7 @@
cursor: pointer; cursor: pointer;
.sort_arrow { .sort_arrow {
float: right; display: inline-block;
color: #888; color: #888;
} }
} }

View File

@ -108,10 +108,10 @@ const App: React.FC<Props> = () => {
{t('bbb', 'Name')} <SortArrow name='name' value={orderBy} direction={sortOrder} /> {t('bbb', 'Name')} <SortArrow name='name' value={orderBy} direction={sortOrder} />
</th> </th>
<th /> <th />
<th onClick={() => onOrderBy('maxParticipants')}> <th onClick={() => onOrderBy('maxParticipants')} className="bbb-shrink">
{t('bbb', 'Max')} <SortArrow name='maxParticipants' value={orderBy} direction={sortOrder} /> {t('bbb', 'Max')} <SortArrow name='maxParticipants' value={orderBy} direction={sortOrder} />
</th> </th>
<th onClick={() => onOrderBy('record')}> <th onClick={() => onOrderBy('record')} className="bbb-shrink">
{t('bbb', 'Record')} <SortArrow name='record' value={orderBy} direction={sortOrder} /> {t('bbb', 'Record')} <SortArrow name='record' value={orderBy} direction={sortOrder} />
</th> </th>
<th> <th>

View File

@ -181,17 +181,17 @@ const RoomRow: React.FC<Props> = (props) => {
<td className="name"> <td className="name">
{edit('name')} {edit('name')}
</td> </td>
<td> <td className="bbb-shrink">
{room.userId !== OC.currentUser && <img src={avatarUrl} alt="Avatar" className="bbb-avatar" />} {room.userId !== OC.currentUser && <img src={avatarUrl} alt="Avatar" className="bbb-avatar" />}
</td> </td>
<td className="max-participants"> <td className="max-participants bbb-shrink">
{edit('maxParticipants', 'number')} {edit('maxParticipants', 'number')}
</td> </td>
<td className="record"> <td className="record bbb-shrink">
<input id={`bbb-record-${room.id}`} type="checkbox" className="checkbox" checked={room.record} onChange={(event) => updateRoom('record', event.target.checked)} /> <input id={`bbb-record-${room.id}`} type="checkbox" className="checkbox" checked={room.record} onChange={(event) => updateRoom('record', event.target.checked)} />
<label htmlFor={`bbb-record-${room.id}`}></label> <label htmlFor={`bbb-record-${room.id}`}></label>
</td> </td>
<td><RecordingsNumber recordings={recordings} showRecordings={showRecordings} setShowRecordings={setShowRecordings} /></td> <td className="bbb-shrink"><RecordingsNumber recordings={recordings} showRecordings={showRecordings} setShowRecordings={setShowRecordings} /></td>
<td className="edit icon-col"> <td className="edit icon-col">
<EditRoom room={props.room} updateProperty={updateRoom} /> <EditRoom room={props.room} updateProperty={updateRoom} />
</td> </td>