mirror of
https://github.com/superseriousbusiness/gotosocial.git
synced 2025-10-29 02:12:25 -05:00
[frogend] Settings refactor (#1318)
* yakshave new form field structure * fully refactor user profile settings form * use rtk query api for profile settings * refactor user post settings * refactor password change form * refactor admin settings * FormWithData structure for user forms * admin actions refactor * whitespace * fix user settings data prop * remove superfluous logging * cleanup old code * refactor federation/suspend (overview, detail) * mostly abstracted (emoji) checkbox list * refactor parse-from-toot * refactor custom-emoji, progress on federation bulk * loading icon styling to prevent big spinny * refactor federation import-export interface * cleanup old files * [chore] Update/add license headers for 2023 * redux fixes * text-field exports * appease the linter * refactor authentication with RTK Query * fix login/logout state transition weirdness * fixes/cleanup * small linter-related fixes * add eslint license header check, fix existing files * remove old code, clarify comment * clarify suspend on subdomains * collapse if/else * fa-fw width info comment
This commit is contained in:
f0x52
GitHub
parent
974ec80a20
commit
9b139b6320
69 changed files with 3129 additions and 2663 deletions
|
|
@ -16,6 +16,11 @@
|
|||
along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
/* Fork-Awesome 'fa-fw' fixed icon width
|
||||
keep in sync with https://github.com/ForkAwesome/Fork-Awesome/blob/a99579ae3e735ee70e51ed62dfcee3172b5b2db7/css/fork-awesome.css#L50
|
||||
*/
|
||||
$fa-fw: 1.28571429em;
|
||||
|
||||
body {
|
||||
grid-template-rows: auto 1fr;
|
||||
}
|
||||
|
|
@ -40,7 +45,7 @@ section {
|
|||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
|
||||
& > div {
|
||||
& > div, & > form {
|
||||
border-left: 0.2rem solid $border-accent;
|
||||
padding-left: 0.4rem;
|
||||
display: flex;
|
||||
|
|
@ -50,7 +55,7 @@ section {
|
|||
|
||||
h2 {
|
||||
margin: 0;
|
||||
margin-bottom: 0.5rem;
|
||||
margin-top: 0.1rem;
|
||||
}
|
||||
|
||||
&:only-child {
|
||||
|
|
@ -213,7 +218,7 @@ input, select, textarea {
|
|||
) !important;
|
||||
}
|
||||
|
||||
section.with-sidebar > div {
|
||||
section.with-sidebar > div, section.with-sidebar > form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
|
|
@ -223,19 +228,17 @@ section.with-sidebar > div {
|
|||
line-height: 1.5rem;
|
||||
}
|
||||
|
||||
button {
|
||||
width: auto;
|
||||
align-self: flex-start;
|
||||
line-height: 1.5rem;
|
||||
}
|
||||
|
||||
input[type=checkbox] {
|
||||
justify-self: start;
|
||||
width: initial;
|
||||
}
|
||||
|
||||
input:read-only {
|
||||
border: none;
|
||||
}
|
||||
|
||||
input:invalid {
|
||||
border-color: red;
|
||||
}
|
||||
|
||||
textarea {
|
||||
width: 100%;
|
||||
}
|
||||
|
|
@ -337,15 +340,24 @@ section.with-sidebar > div {
|
|||
}
|
||||
}
|
||||
|
||||
form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.form-field label {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.form-field.file {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
}
|
||||
.form-field.file label {
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
|
||||
.label {
|
||||
grid-column: 1 / span 2;
|
||||
}
|
||||
}
|
||||
|
||||
span.form-info {
|
||||
flex: 1 1 auto;
|
||||
|
|
@ -353,39 +365,70 @@ span.form-info {
|
|||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
padding: 0.3rem 0;
|
||||
font-weight: initial;
|
||||
}
|
||||
|
||||
.list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-top: 0.5rem;
|
||||
max-height: 40rem;
|
||||
overflow: auto;
|
||||
|
||||
&.scrolling {
|
||||
max-height: 40rem;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.header, .entry {
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
.header {
|
||||
border: 0.1rem solid transparent; /* for alignment with .entry border padding */
|
||||
background: $gray2;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
input[type=checkbox] {
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
|
||||
.entry {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
background: $settings-entry-bg;
|
||||
border: 0.1rem solid transparent;
|
||||
|
||||
&:nth-child(even) {
|
||||
background: $settings-entry-alternate-bg;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: $settings-entry-hover-bg;
|
||||
}
|
||||
|
||||
&:active, &:focus, &:hover {
|
||||
border-color: $fg-accent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.checkbox-list {
|
||||
.header, .entry {
|
||||
gap: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.instance-list {
|
||||
p {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.filter {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
|
||||
input {
|
||||
width: auto;
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
}
|
||||
|
||||
.entry {
|
||||
padding: 0.3rem;
|
||||
padding: 0.5rem;
|
||||
margin: 0.2rem 0;
|
||||
|
||||
#domain {
|
||||
|
|
@ -406,9 +449,12 @@ span.form-info {
|
|||
background: $settings-entry-bg;
|
||||
|
||||
.entry {
|
||||
padding: 0.5rem;
|
||||
flex-direction: column;
|
||||
|
||||
b {
|
||||
padding-left: 0.4rem;
|
||||
}
|
||||
|
||||
.emoji-group {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
|
@ -550,6 +596,7 @@ span.form-info {
|
|||
|
||||
.row {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.emoji-detail {
|
||||
|
|
@ -566,6 +613,12 @@ span.form-info {
|
|||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
|
||||
div {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
img {
|
||||
height: 8.5rem;
|
||||
width: 8.5rem;
|
||||
|
|
@ -576,15 +629,13 @@ span.form-info {
|
|||
}
|
||||
|
||||
.update-category {
|
||||
margin-bottom: 1rem;
|
||||
.combobox-wrapper button {
|
||||
font-size: 1rem;
|
||||
margin: 0.15rem 0;
|
||||
}
|
||||
|
||||
.row {
|
||||
margin-top: 0.4rem;
|
||||
gap: 0.5rem;
|
||||
margin-top: 0.1rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -607,36 +658,18 @@ span.form-info {
|
|||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
|
||||
& > span {
|
||||
margin-bottom: -1rem;
|
||||
span {
|
||||
margin-bottom: -0.5rem;
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.emoji-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
& > * {
|
||||
gap: 1rem;
|
||||
align-items: center;
|
||||
padding: 0.5rem 1rem;
|
||||
}
|
||||
|
||||
.header {
|
||||
background: $gray2;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.row {
|
||||
.checkbox-list {
|
||||
.entry {
|
||||
display: grid;
|
||||
grid-template-columns: auto auto 1fr;
|
||||
|
||||
&:hover {
|
||||
background: $settings-entry-hover-bg;
|
||||
}
|
||||
}
|
||||
|
||||
.emoji {
|
||||
|
|
@ -646,4 +679,94 @@ span.form-info {
|
|||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.info {
|
||||
color: $info-fg;
|
||||
background: $info-bg;
|
||||
padding: 0.5rem;
|
||||
border-radius: $br;
|
||||
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
align-items: center;
|
||||
|
||||
i {
|
||||
margin-top: 0.1em;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $info-link;
|
||||
}
|
||||
}
|
||||
|
||||
button.with-icon {
|
||||
display: flex;
|
||||
align-content: center;
|
||||
padding-right: calc(0.5rem + $fa-fw);
|
||||
|
||||
.fa {
|
||||
align-self: center;
|
||||
}
|
||||
}
|
||||
|
||||
button.with-padding {
|
||||
padding: 0.5rem calc(0.5rem + $fa-fw);
|
||||
}
|
||||
|
||||
.loading-icon {
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
.fadeout {
|
||||
animation-name: fadeout;
|
||||
animation-duration: 0.5s;
|
||||
animation-delay: 2s;
|
||||
animation-fill-mode: forwards;
|
||||
}
|
||||
|
||||
.suspend-import-list {
|
||||
.checkbox-list {
|
||||
.header, .entry {
|
||||
display: grid;
|
||||
grid-template-columns: auto 25ch auto 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.entry {
|
||||
#icon {
|
||||
margin-left: -0.5rem;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
#icon .already-blocked {
|
||||
color: $green1;
|
||||
}
|
||||
|
||||
p {
|
||||
align-self: center;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-field.radio {
|
||||
&, label {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
input {
|
||||
width: auto;
|
||||
place-self: center;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeout {
|
||||
from {
|
||||
opacity: 1;
|
||||
}
|
||||
to {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue