Commit 3e710080 authored by Lyza Danger Gardner's avatar Lyza Danger Gardner Committed by Lyza Gardner

Transition VersionInfo to tailwind

parent 7f1ff242
import { LabeledButton } from '@hypothesis/frontend-shared'; import { LabeledButton } from '@hypothesis/frontend-shared';
import classnames from 'classnames';
import { copyText } from '../util/copy-to-clipboard'; import { copyText } from '../util/copy-to-clipboard';
import { withServices } from '../service-context'; import { withServices } from '../service-context';
...@@ -9,6 +10,27 @@ import { withServices } from '../service-context'; ...@@ -9,6 +10,27 @@ import { withServices } from '../service-context';
* @prop {import('../services/toast-messenger').ToastMessengerService} toastMessenger * @prop {import('../services/toast-messenger').ToastMessengerService} toastMessenger
*/ */
/**
* @param {Object} props
* @param {string} props.label
* @param {import('preact').ComponentChildren} props.children
* @param {string} [props.classes]
*/
function VersionInfoItem({ label, children, classes }) {
return (
<>
<dt className="col-span-1 sm:text-right font-medium">{label}</dt>
<dd
className={classnames(
'col-span-1 sm:col-span-3 text-color-text-light break-words',
classes
)}
>
{children}
</dd>
</>
);
}
/** /**
* Display current client version info * Display current client version info
* *
...@@ -25,22 +47,33 @@ function VersionInfo({ toastMessenger, versionData }) { ...@@ -25,22 +47,33 @@ function VersionInfo({ toastMessenger, versionData }) {
}; };
return ( return (
<div className="hyp-u-vertical-spacing"> <div className="space-y-4">
<dl className="VersionInfo"> <dl className="grid grid-cols-1 sm:grid-cols-4 sm:gap-x-2">
<dt className="VersionInfo__key">Version</dt> <VersionInfoItem label="Version">{versionData.version}</VersionInfoItem>
<dd className="VersionInfo__value">{versionData.version}</dd> <VersionInfoItem label="User Agent">
<dt className="VersionInfo__key">User Agent</dt> {versionData.userAgent}
<dd className="VersionInfo__value">{versionData.userAgent}</dd> </VersionInfoItem>
<dt className="VersionInfo__key">URL</dt> <VersionInfoItem
<dd className="VersionInfo__value">{versionData.urls}</dd> classes={classnames(
<dt className="VersionInfo__key">Fingerprint</dt> // Intermittent odd overflow behavior in Safari causes long strings
<dd className="VersionInfo__value">{versionData.fingerprint}</dd> // with no wrap points to break layout — `overflow-wrap: break-words`
<dt className="VersionInfo__key">Account</dt> // is not reliable in this case. Use `break-all` here, which causes
<dd className="VersionInfo__value">{versionData.account}</dd> // more inelgant wrapping in all browsers, but is safely contained
<dt className="VersionInfo__key">Date</dt> // in the layout.
<dd className="VersionInfo__value">{versionData.timestamp}</dd> // See: https://github.com/hypothesis/client/issues/4469
'break-all'
)}
label="URL"
>
{versionData.urls}
</VersionInfoItem>
<VersionInfoItem label="Fingerprint">
{versionData.fingerprint}
</VersionInfoItem>
<VersionInfoItem label="Account">{versionData.account}</VersionInfoItem>
<VersionInfoItem label="Date">{versionData.timestamp}</VersionInfoItem>
</dl> </dl>
<div className="hyp-u-layout-row--justify-center"> <div className="flex items-center justify-center">
<LabeledButton onClick={copyVersionData} icon="copy"> <LabeledButton onClick={copyVersionData} icon="copy">
Copy version details Copy version details
</LabeledButton> </LabeledButton>
......
@use '../../variables' as var;
@use '../../mixins/layout';
@use '../../mixins/responsive';
.VersionInfo {
// Lay out version info as a column when viewport (sidebar) is narrow
@include layout.column;
&__key {
font-weight: 500;
}
&__value {
color: var.$color-text--light;
}
@media only screen and (min-width: 20em) {
// Change to a layout that puts key-value pairs on a single line
// when space allows
@include layout.row;
// Allow multiple lines of content
flex-wrap: wrap;
&__key {
flex-basis: 25%;
text-align: right;
}
&__value {
margin-left: 1em; // Space between key and value
flex-basis: 70%;
flex-grow: 1;
overflow-wrap: anywhere; // Keep long userids and urls from overflowing
}
}
}
...@@ -19,7 +19,6 @@ ...@@ -19,7 +19,6 @@
@use './NotebookResultCount'; @use './NotebookResultCount';
@use './PaginationNavigation'; @use './PaginationNavigation';
@use './StyledText'; @use './StyledText';
@use './VersionInfo';
// TODO: Evaluate all classes below after components have been converted to // TODO: Evaluate all classes below after components have been converted to
// Tailwind. // Tailwind.
......
...@@ -169,6 +169,7 @@ export default { ...@@ -169,6 +169,7 @@ export default {
}, },
screens: { screens: {
touch: { raw: '(pointer: coarse)' }, touch: { raw: '(pointer: coarse)' },
sm: '360px',
md: '480px', md: '480px',
lg: '768px', lg: '768px',
// Narrow mobile screens // Narrow mobile screens
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment