qugalet/gotosocial
1
0
Fork 0
mirror of https://github.com/superseriousbusiness/gotosocial.git synced 2024-11-22 11:46:40 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

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

Browse source 
* 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
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 149 additions and 85 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
web/source/css/base.css
View file

@ -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;
}

42
web/source/settings/admin/federation/import-export/export-format-table.jsx
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>
);
};

12
web/source/settings/admin/federation/import-export/form.jsx
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

37
web/source/settings/admin/federation/import-export/process.jsx
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>
</>
);

4
web/source/settings/components/form/mutation-button.jsx
View file

@ -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} />
}

135
web/source/settings/style.css
View file

@ -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;
}
}
}
}