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

* mobile css tweaks

* bulk process list mobile css
---
 web/source/css/base.css                       |   4 +-
 .../import-export/export-format-table.jsx     |  42 +++---
 .../admin/federation/import-export/form.jsx   |  12 +-
 .../federation/import-export/process.jsx      |  37 ++---
 .../components/form/mutation-button.jsx       |   4 +-
 web/source/settings/style.css                 | 135 ++++++++++++------
 6 files changed, 149 insertions(+), 85 deletions(-)

diff --git a/web/source/css/base.css b/web/source/css/base.css
index 29dafef84..c30b72373 100644
--- a/web/source/css/base.css
+++ b/web/source/css/base.css
@@ -66,8 +66,8 @@ body {
 	display: grid;
 	min-height: 100vh;
 
-	grid-template-columns: auto minmax(auto, 50rem) auto;
-	grid-template-columns: auto min(92%, 50rem) auto;
+	grid-template-columns: 1fr minmax(auto, 50rem) 1fr;
+	grid-template-columns: 1fr min(92%, 50rem) 1fr;
 	grid-template-rows: auto 1fr auto;
 }
 
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>
 		</>
 	);
diff --git a/web/source/settings/components/form/mutation-button.jsx b/web/source/settings/components/form/mutation-button.jsx
index 97bcdf08d..9f0a1eb42 100644
--- a/web/source/settings/components/form/mutation-button.jsx
+++ b/web/source/settings/components/form/mutation-button.jsx
@@ -21,7 +21,7 @@
 const React = require("react");
 const { Error } = require("../error");
 
-module.exports = function MutationButton({ label, result, disabled, showError = true, className = "", ...inputProps }) {
+module.exports = function MutationButton({ label, result, disabled, showError = true, className = "", wrapperClassName = "", ...inputProps }) {
 	let iconClass = "";
 	const targetsThisButton = result.action == inputProps.name; // can also both be undefined, which is correct
 
@@ -33,7 +33,7 @@ module.exports = function MutationButton({ label, result, disabled, showError =
 		}
 	}
 
-	return (<div>
+	return (<div className={wrapperClassName}>
 		{(showError && targetsThisButton && result.error) &&
 			<Error error={result.error} />
 		}
diff --git a/web/source/settings/style.css b/web/source/settings/style.css
index e401a64a1..c2ebd6c01 100644
--- a/web/source/settings/style.css
+++ b/web/source/settings/style.css
@@ -27,6 +27,7 @@ body {
 
 .content {
 	grid-column: 1 / span 3; /* stretch entire width, to fit panel + sidebar nav */
+	width: 100%;
 }
 
 section {
@@ -51,7 +52,7 @@ section {
 			display: flex;
 			flex-direction: column;
 			gap: 0.5rem;
-			margin: 2rem 0;
+			margin: 1rem 0;
 
 			h2 {
 				margin: 0;
@@ -72,6 +73,7 @@ section {
 
 			&.without-border {
 				border-left: 0;
+				padding-left: 0;
 			}
 		}
 	}
@@ -668,7 +670,7 @@ span.form-info {
 	}
 }
 
-button.with-icon {
+button.with-icon, .button.with-icon {
 	display: flex;
 	align-content: center;
 	padding-right: calc(0.5rem + $fa-fw);
@@ -694,37 +696,58 @@ button.with-padding {
 }
 
 .suspend-import-list {
+	.checkbox-list-wrapper {
+		overflow-x: auto;
+		display: grid;
+		gap: 1rem;
+	}
+
 	.checkbox-list {
+
+		.header {
+			input[type="checkbox"] {
+				align-self: start;
+				height: 1.5rem;
+			}
+		}
+
 		.entry {
-			grid-template-columns: auto 25ch auto 1fr;
+			gap: 0;
+			width: 100%;
+			grid-template-columns: auto minmax(25ch, 2fr) minmax(40ch, 1fr);
 			grid-template-rows: auto 1fr;
 
+			input[type="checkbox"] {
+				margin-right: 1rem;
+			}
+
+			.domain-input {
+				margin-right: 0.5rem;
+				display: grid;
+				grid-template-columns: 1fr $fa-fw;
+				gap: 0.5rem;
+
+				#icon {
+					align-self: center;
+	
+					.already-blocked {
+						color: $green1;
+					}
+		
+					.suggest-changes {
+						color: $orange2;
+					}
+				}
+			}
+
 			p {
+				align-self: center;
+				margin: 0;
 				grid-column: 4;
 				grid-row: 1 / span 2;
 			}
 		}
 	}
-
-	.entry {
-		#icon {
-			margin-left: -0.5rem;
-			align-self: center;
-		}
-
-		#icon .already-blocked {
-			color: $green1;
-		}
-
-		#icon .suggest-changes {
-			color: $orange2;
-		}
-
-		p {
-			align-self: center;
-			margin: 0;
-		}
-	}
 }
 
 .import-export {
@@ -750,6 +773,27 @@ button.with-padding {
 	}
 }
 
+@media screen and (max-width: 35rem) {
+	.import-export {
+		.button-grid {
+			grid-template-columns: auto auto;
+
+			b { /* filler item */
+				display: none;
+			}
+
+			& > * {
+				grid-column: 1 / span 2;
+				justify-self: start;
+			}
+
+			.export-file-button, .export-file {
+				grid-column: span 1;
+			}
+		}
+	}
+}
+
 .update-hints {
 	background: $list-entry-alternate-bg;
 	border: 0.1rem solid $border-accent;
@@ -769,29 +813,36 @@ button.with-padding {
 	}
 }
 
-.export-format-table {
-	width: 100%;
-	background: $list-entry-alternate-bg;
-	border-collapse: collapse;
+.export-format-table-wrapper {
+	overflow-x: auto;
 
-	th, td {
-		border: 0.1rem solid $gray1;
-		padding: 0.3rem;
+	&, th, td {
+		border: 0.1rem solid $gray1 !important;
 	}
 
-	th {
-		background: $list-entry-bg;
-	}
-
-	td {
-		text-align: center;
-
-		.fa-check {
-			color: $green1;
+	.export-format-table {
+		background: $list-entry-alternate-bg;
+		border-style: hidden;
+		border-collapse: collapse;
+	
+		th, td {
+			padding: 0.3rem;
 		}
-
-		.fa-times {
-			color: $error3;
+	
+		th {
+			background: $list-entry-bg;
+		}
+	
+		td {
+			text-align: center;
+	
+			.fa-check {
+				color: $green1;
+			}
+	
+			.fa-times {
+				color: $error3;
+			}
 		}
 	}
 }