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

* 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
commit cb2f84e551
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 149 additions and 85 deletions

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