rafaelcaricio/gotosocial
1
0
Fork 0
forked from mirrors/gotosocial
Code Issues Pull requests Projects Releases Packages 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; display: grid;
min-height: 100vh; min-height: 100vh;
grid-template-columns: auto minmax(auto, 50rem) auto; grid-template-columns: 1fr minmax(auto, 50rem) 1fr;
grid-template-columns: auto min(92%, 50rem) auto; grid-template-columns: 1fr min(92%, 50rem) 1fr;
grid-template-rows: auto 1fr auto; 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() { module.exports = function ExportFormatTable() {
return ( return (
<table className="export-format-table"> <div className="export-format-table-wrapper without-border">
<thead> <table className="export-format-table">
<tr> <thead>
<th rowSpan={2} /> <tr>
<th colSpan={2}>Includes</th> <th rowSpan={2} />
<th colSpan={2}>Importable by</th> <th colSpan={2}>Includes</th>
</tr> <th colSpan={2}>Importable by</th>
<tr> </tr>
<th>Domain</th> <tr>
<th>Public comment</th> <th>Domain</th>
<th>GoToSocial</th> <th>Public comment</th>
<th>Mastodon</th> <th>GoToSocial</th>
</tr> <th>Mastodon</th>
</thead> </tr>
<tbody> </thead>
<Format name="Text" info={[true, false, true, false]} /> <tbody>
<Format name="JSON" info={[true, true, true, false]} /> <Format name="Text" info={[true, false, true, false]} />
<Format name="CSV" info={[true, true, true, true]} /> <Format name="JSON" info={[true, true, true, false]} />
</tbody> <Format name="CSV" info={[true, true, true, true]} />
</table> </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} result={parseResult}
showError={false} showError={false}
/> />
<label className="button"> <label className="button with-icon">
<i class="fa fa-fw " aria-hidden="true" />
Import file Import file
<input <input
type="file" type="file"
@ -93,7 +94,14 @@ module.exports = function ImportExportForm({ form, submitParse, parseResult }) {
onClick={() => submitExport("export")} onClick={() => submitExport("export")}
result={exportResult} showError={false} 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"> <div className="export-file">
<span> <span>
as as

37
web/source/settings/admin/federation/import-export/process.jsx
View file

@ -127,11 +127,13 @@ function ImportList({ list, data: blockedInstances }) {
} /> } />
} }
<DomainCheckList <div className="checkbox-list-wrapper">
field={form.domains} <DomainCheckList
blockedInstances={blockedInstances} field={form.domains}
commentType={showComment.value} blockedInstances={blockedInstances}
/> commentType={showComment.value}
/>
</div>
<TextArea <TextArea
field={form.privateComment} field={form.privateComment}
@ -182,7 +184,6 @@ function DomainCheckList({ field, blockedInstances, commentType }) {
field={field} field={field}
header={<> header={<>
<b>Domain</b> <b>Domain</b>
<b></b>
<b> <b>
{commentType == "public_comment" && "Public comment"} {commentType == "public_comment" && "Public comment"}
{commentType == "private_comment" && "Private comment"} {commentType == "private_comment" && "Private comment"}
@ -287,16 +288,18 @@ function DomainEntry({ entry, onChange, extraProps: { alreadyExists, comment } }
return ( return (
<> <>
<TextInput <div className="domain-input">
field={domainField} <TextInput
onChange={(e) => { field={domainField}
domainField.onChange(e); onChange={(e) => {
onChange({ domain: e.target.value, checked: true }); domainField.onChange(e);
}} onChange({ domain: e.target.value, checked: true });
/> }}
<span id="icon" onClick={clickIcon}> />
<DomainEntryIcon alreadyExists={alreadyExists} suggestion={entry.suggest} onChange={onChange} /> <span id="icon" onClick={clickIcon}>
</span> <DomainEntryIcon alreadyExists={alreadyExists} suggestion={entry.suggest} onChange={onChange} />
</span>
</div>
<p>{comment}</p> <p>{comment}</p>
</> </>
); );
@ -320,7 +323,7 @@ function DomainEntryIcon({ alreadyExists, suggestion }) {
return ( 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> <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 React = require("react");
const { Error } = require("../error"); 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 = ""; let iconClass = "";
const targetsThisButton = result.action == inputProps.name; // can also both be undefined, which is correct 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) && {(showError && targetsThisButton && result.error) &&
<Error error={result.error} /> <Error error={result.error} />
} }

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

@ -27,6 +27,7 @@ body {
.content { .content {
grid-column: 1 / span 3; /* stretch entire width, to fit panel + sidebar nav */ grid-column: 1 / span 3; /* stretch entire width, to fit panel + sidebar nav */
width: 100%;
} }
section { section {
@ -51,7 +52,7 @@ section {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 0.5rem; gap: 0.5rem;
margin: 2rem 0; margin: 1rem 0;
h2 { h2 {
margin: 0; margin: 0;
@ -72,6 +73,7 @@ section {
&.without-border { &.without-border {
border-left: 0; border-left: 0;
padding-left: 0;
} }
} }
} }
@ -668,7 +670,7 @@ span.form-info {
} }
} }
button.with-icon { button.with-icon, .button.with-icon {
display: flex; display: flex;
align-content: center; align-content: center;
padding-right: calc(0.5rem + $fa-fw); padding-right: calc(0.5rem + $fa-fw);
@ -694,37 +696,58 @@ button.with-padding {
} }
.suspend-import-list { .suspend-import-list {
.checkbox-list-wrapper {
overflow-x: auto;
display: grid;
gap: 1rem;
}
.checkbox-list { .checkbox-list {
.header {
input[type="checkbox"] {
align-self: start;
height: 1.5rem;
}
}
.entry { .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; 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 { p {
align-self: center;
margin: 0;
grid-column: 4; grid-column: 4;
grid-row: 1 / span 2; 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 { .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 { .update-hints {
background: $list-entry-alternate-bg; background: $list-entry-alternate-bg;
border: 0.1rem solid $border-accent; border: 0.1rem solid $border-accent;
@ -769,29 +813,36 @@ button.with-padding {
} }
} }
.export-format-table { .export-format-table-wrapper {
width: 100%; overflow-x: auto;
background: $list-entry-alternate-bg;
border-collapse: collapse;
th, td { &, th, td {
border: 0.1rem solid $gray1; border: 0.1rem solid $gray1 !important;
padding: 0.3rem;
} }
th { .export-format-table {
background: $list-entry-bg; background: $list-entry-alternate-bg;
} border-style: hidden;
border-collapse: collapse;
td { th, td {
text-align: center; padding: 0.3rem;
.fa-check {
color: $green1;
} }
.fa-times { th {
color: $error3; background: $list-entry-bg;
}
td {
text-align: center;
.fa-check {
color: $green1;
}
.fa-times {
color: $error3;
}
} }
} }
} }