[frontend/fix] Mobile css tweaks (#1605)

* mobile css tweaks

* bulk process list mobile css
This commit is contained in:
f0x52
2023-03-11 10:49:44 +01:00
committed by GitHub
parent a312238e79
commit cb2f84e551
6 changed files with 149 additions and 85 deletions

View File

@@ -22,26 +22,28 @@ const React = require("react");
module.exports = function ExportFormatTable() {
return (
<table className="export-format-table">
<thead>
<tr>
<th rowSpan={2} />
<th colSpan={2}>Includes</th>
<th colSpan={2}>Importable by</th>
</tr>
<tr>
<th>Domain</th>
<th>Public comment</th>
<th>GoToSocial</th>
<th>Mastodon</th>
</tr>
</thead>
<tbody>
<Format name="Text" info={[true, false, true, false]} />
<Format name="JSON" info={[true, true, true, false]} />
<Format name="CSV" info={[true, true, true, true]} />
</tbody>
</table>
<div className="export-format-table-wrapper without-border">
<table className="export-format-table">
<thead>
<tr>
<th rowSpan={2} />
<th colSpan={2}>Includes</th>
<th colSpan={2}>Importable by</th>
</tr>
<tr>
<th>Domain</th>
<th>Public comment</th>
<th>GoToSocial</th>
<th>Mastodon</th>
</tr>
</thead>
<tbody>
<Format name="Text" info={[true, false, true, false]} />
<Format name="JSON" info={[true, true, true, false]} />
<Format name="CSV" info={[true, true, true, true]} />
</tbody>
</table>
</div>
);
};

View File

@@ -77,7 +77,8 @@ module.exports = function ImportExportForm({ form, submitParse, parseResult }) {
result={parseResult}
showError={false}
/>
<label className="button">
<label className="button with-icon">
<i class="fa fa-fw " aria-hidden="true" />
Import file
<input
type="file"
@@ -93,7 +94,14 @@ module.exports = function ImportExportForm({ form, submitParse, parseResult }) {
onClick={() => submitExport("export")}
result={exportResult} showError={false}
/>
<MutationButton label="Export to file" type="button" onClick={() => submitExport("export-file")} result={exportResult} showError={false} />
<MutationButton
label="Export to file"
wrapperClassName="export-file-button"
type="button"
onClick={() => submitExport("export-file")}
result={exportResult}
showError={false}
/>
<div className="export-file">
<span>
as

View File

@@ -127,11 +127,13 @@ function ImportList({ list, data: blockedInstances }) {
} />
}
<DomainCheckList
field={form.domains}
blockedInstances={blockedInstances}
commentType={showComment.value}
/>
<div className="checkbox-list-wrapper">
<DomainCheckList
field={form.domains}
blockedInstances={blockedInstances}
commentType={showComment.value}
/>
</div>
<TextArea
field={form.privateComment}
@@ -182,7 +184,6 @@ function DomainCheckList({ field, blockedInstances, commentType }) {
field={field}
header={<>
<b>Domain</b>
<b></b>
<b>
{commentType == "public_comment" && "Public comment"}
{commentType == "private_comment" && "Private comment"}
@@ -287,16 +288,18 @@ function DomainEntry({ entry, onChange, extraProps: { alreadyExists, comment } }
return (
<>
<TextInput
field={domainField}
onChange={(e) => {
domainField.onChange(e);
onChange({ domain: e.target.value, checked: true });
}}
/>
<span id="icon" onClick={clickIcon}>
<DomainEntryIcon alreadyExists={alreadyExists} suggestion={entry.suggest} onChange={onChange} />
</span>
<div className="domain-input">
<TextInput
field={domainField}
onChange={(e) => {
domainField.onChange(e);
onChange({ domain: e.target.value, checked: true });
}}
/>
<span id="icon" onClick={clickIcon}>
<DomainEntryIcon alreadyExists={alreadyExists} suggestion={entry.suggest} onChange={onChange} />
</span>
</div>
<p>{comment}</p>
</>
);
@@ -320,7 +323,7 @@ function DomainEntryIcon({ alreadyExists, suggestion }) {
return (
<>
<i className={`fa ${icon}`} aria-hidden="true" title={text}></i>
<i className={`fa fa-fw ${icon}`} aria-hidden="true" title={text}></i>
<span className="sr-only">{text}</span>
</>
);