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 classnames from 'classnames';
import { copyText } from '../util/copy-to-clipboard';
import { withServices } from '../service-context';
......@@ -9,6 +10,27 @@ import { withServices } from '../service-context';
* @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
*
......@@ -25,22 +47,33 @@ function VersionInfo({ toastMessenger, versionData }) {
};
return (
<div className="hyp-u-vertical-spacing">
<dl className="VersionInfo">
<dt className="VersionInfo__key">Version</dt>
<dd className="VersionInfo__value">{versionData.version}</dd>
<dt className="VersionInfo__key">User Agent</dt>
<dd className="VersionInfo__value">{versionData.userAgent}</dd>
<dt className="VersionInfo__key">URL</dt>
<dd className="VersionInfo__value">{versionData.urls}</dd>
<dt className="VersionInfo__key">Fingerprint</dt>
<dd className="VersionInfo__value">{versionData.fingerprint}</dd>
<dt className="VersionInfo__key">Account</dt>
<dd className="VersionInfo__value">{versionData.account}</dd>
<dt className="VersionInfo__key">Date</dt>
<dd className="VersionInfo__value">{versionData.timestamp}</dd>
<div className="space-y-4">
<dl className="grid grid-cols-1 sm:grid-cols-4 sm:gap-x-2">
<VersionInfoItem label="Version">{versionData.version}</VersionInfoItem>
<VersionInfoItem label="User Agent">
{versionData.userAgent}
</VersionInfoItem>
<VersionInfoItem
classes={classnames(
// Intermittent odd overflow behavior in Safari causes long strings
// with no wrap points to break layout — `overflow-wrap: break-words`
// is not reliable in this case. Use `break-all` here, which causes
// more inelgant wrapping in all browsers, but is safely contained
// in the layout.
// 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>
<div className="hyp-u-layout-row--justify-center">
<div className="flex items-center justify-center">
<LabeledButton onClick={copyVersionData} icon="copy">
Copy version details
</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 @@
@use './NotebookResultCount';
@use './PaginationNavigation';
@use './StyledText';
@use './VersionInfo';
// TODO: Evaluate all classes below after components have been converted to
// Tailwind.
......
......@@ -169,6 +169,7 @@ export default {
},
screens: {
touch: { raw: '(pointer: coarse)' },
sm: '360px',
md: '480px',
lg: '768px',
// 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