From cb2f84e551727bd1852ed5fd93777289d3439bbf Mon Sep 17 00:00:00 2001
From: f0x52 <f0x@cthu.lu>
Date: Sat, 11 Mar 2023 10:49:44 +0100
Subject: [frontend/fix] Mobile css tweaks (#1605)

* mobile css tweaks

* bulk process list mobile css
---
 .../import-export/export-format-table.jsx          | 42 +++++++++++-----------
 .../admin/federation/import-export/form.jsx        | 12 +++++--
 .../admin/federation/import-export/process.jsx     | 37 ++++++++++---------
 3 files changed, 52 insertions(+), 39 deletions(-)

(limited to 'web/source/settings/admin')

diff --git a/web/source/settings/admin/federation/import-export/export-format-table.jsx b/web/source/settings/admin/federation/import-export/export-format-table.jsx
index 72b2db04f..54092944a 100644
--- a/web/source/settings/admin/federation/import-export/export-format-table.jsx
+++ b/web/source/settings/admin/federation/import-export/export-format-table.jsx
@@ -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>
 	);
 };
 
diff --git a/web/source/settings/admin/federation/import-export/form.jsx b/web/source/settings/admin/federation/import-export/form.jsx
index 7b6ad9206..0176b73a2 100644
--- a/web/source/settings/admin/federation/import-export/form.jsx
+++ b/web/source/settings/admin/federation/import-export/form.jsx
@@ -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
diff --git a/web/source/settings/admin/federation/import-export/process.jsx b/web/source/settings/admin/federation/import-export/process.jsx
index 6b9d98f01..feb3631e1 100644
--- a/web/source/settings/admin/federation/import-export/process.jsx
+++ b/web/source/settings/admin/federation/import-export/process.jsx
@@ -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>
 		</>
 	);
-- 
cgit v1.2.3