github/karma
1
0
Fork 0
mirror of https://github.com/prymitive/karma synced 2026-05-09 03:36:44 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(ui): try to fix silence duration layout on small screens

Browse Source
This commit is contained in:
Łukasz Mierzwa
2018-08-15 20:46:16 +01:00
parent b71612b9a9
commit 2eceda44b6
1 changed files with 40 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
ui/src/Components/SilenceModal/DateTimeSelect/Duration.js
View File

@@ -20,44 +20,46 @@ const Duration = observer(
const { value, label, onInc, onDec } = this.props;
return (
<table>
<tbody>
<tr>
<td className="text-center">
<span onClick={onInc}>
<FontAwesomeIcon
icon={faAngleUp}
size="2x"
className="text-muted cursor-pointer"
/>
</span>
</td>
<td width="50%" />
</tr>
<tr>
<td className="text-center">
<h2>{value}</h2>
</td>
<td width="50%">
{label ? (
<span className="text-muted ml-2">{label}</span>
) : null}
</td>
</tr>
<tr>
<td className="text-center">
<span onClick={onDec}>
<FontAwesomeIcon
icon={faAngleDown}
size="2x"
className="text-muted cursor-pointer"
/>
</span>
</td>
<td width="50%" />
</tr>
</tbody>
</table>
<div>
<table className="w-100">
<tbody>
<tr>
<td className="w-50 text-center">
<span onClick={onInc}>
<FontAwesomeIcon
icon={faAngleUp}
size="2x"
className="text-muted cursor-pointer"
/>
</span>
</td>
<td className="w-50" />
</tr>
<tr>
<td className="w-50 text-center">
<h2>{value}</h2>
</td>
<td className="w-50">
{label ? (
<span className="text-muted ml-2">{label}</span>
) : null}
</td>
</tr>
<tr>
<td className="w-50 text-center">
<span onClick={onDec}>
<FontAwesomeIcon
icon={faAngleDown}
size="2x"
className="text-muted cursor-pointer"
/>
</span>
</td>
<td className="w-50" />
</tr>
</tbody>
</table>
</div>
);
}
}