commit cb2f84e551727bd1852ed5fd93777289d3439bbf
parent a312238e7909c6451e608a91c326ad250dda875c
Author: f0x52 <f0x@cthu.lu>
Date: Sat, 11 Mar 2023 10:49:44 +0100
[frontend/fix] Mobile css tweaks (#1605)
* mobile css tweaks
* bulk process list mobile css
Diffstat:
6 files changed, 149 insertions(+), 85 deletions(-)
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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,35 +696,56 @@ button.with-padding {
}
.suspend-import-list {
+ .checkbox-list-wrapper {
+ overflow-x: auto;
+ display: grid;
+ gap: 1rem;
+ }
+
.checkbox-list {
- .entry {
- grid-template-columns: auto 25ch auto 1fr;
- grid-template-rows: auto 1fr;
- p {
- grid-column: 4;
- grid-row: 1 / span 2;
+ .header {
+ input[type="checkbox"] {
+ align-self: start;
+ height: 1.5rem;
}
}
- }
- .entry {
- #icon {
- margin-left: -0.5rem;
- align-self: center;
- }
+ .entry {
+ gap: 0;
+ width: 100%;
+ grid-template-columns: auto minmax(25ch, 2fr) minmax(40ch, 1fr);
+ grid-template-rows: auto 1fr;
- #icon .already-blocked {
- color: $green1;
- }
+ input[type="checkbox"] {
+ margin-right: 1rem;
+ }
- #icon .suggest-changes {
- color: $orange2;
- }
+ .domain-input {
+ margin-right: 0.5rem;
+ display: grid;
+ grid-template-columns: 1fr $fa-fw;
+ gap: 0.5rem;
- p {
- align-self: center;
- margin: 0;
+ #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;
+ }
}
}
}
@@ -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 {
- background: $list-entry-bg;
+ &, th, td {
+ border: 0.1rem solid $gray1 !important;
}
- 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;
+ }
}
}
}
