Compare commits
23 commits
main
...
large-scre
| Author | SHA1 | Date | |
|---|---|---|---|
|
ca6584f760 | ||
|
|
bd536760f7 | ||
|
|
73fccfb1bd | ||
|
|
9f74c3908c | ||
|
|
e6c95177e2 | ||
|
|
538e4a5181 | ||
|
|
8b1e92d57a | ||
|
|
83b49dbe4e | ||
|
|
2bc1ab5f13 | ||
|
|
2a9b60f1d2 | ||
|
|
8e757a8c3d | ||
|
|
8d8369b644 | ||
|
|
3525a10f6a | ||
|
|
4091fb6891 | ||
|
|
39756f9730 | ||
|
|
3ed17a362b | ||
|
|
fe1b9239d2 | ||
|
|
b5d0159e89 | ||
|
|
ce967e3663 | ||
|
|
787eba9e17 | ||
|
|
3f5e6bed4d | ||
|
|
7ab788589f | ||
|
|
71e997cee4 |
39 changed files with 1535 additions and 1857 deletions
|
|
@ -198,8 +198,7 @@ blockquote {
|
|||
|
||||
.thumbnail {
|
||||
object-fit: cover;
|
||||
min-height: 60px;
|
||||
max-height: 80px;
|
||||
aspect-ratio: 4/3;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
|
@ -431,3 +430,8 @@ br.big {
|
|||
.skip-link:focus {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.comment,
|
||||
.markdown-textarea {
|
||||
max-width: 50rem;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,2 @@
|
|||
$link-decoration: none;
|
||||
$min-contrast-ratio: 3;
|
||||
|
||||
$container-max-widths: (
|
||||
lg: 1140px,
|
||||
);
|
||||
|
|
|
|||
|
|
@ -309,11 +309,9 @@ p {
|
|||
}
|
||||
|
||||
abbr[title] {
|
||||
-webkit-text-decoration: underline dotted;
|
||||
text-decoration: underline dotted;
|
||||
text-decoration: underline dotted;
|
||||
cursor: help;
|
||||
-webkit-text-decoration-skip-ink: none;
|
||||
text-decoration-skip-ink: none;
|
||||
text-decoration-skip-ink: none;
|
||||
}
|
||||
|
||||
address {
|
||||
|
|
@ -2131,9 +2129,7 @@ progress {
|
|||
background-color: #444;
|
||||
background-clip: padding-box;
|
||||
border: var(--bs-border-width) solid #222;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
appearance: none;
|
||||
border-radius: var(--bs-border-radius);
|
||||
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
|
||||
}
|
||||
|
|
@ -2164,10 +2160,6 @@ progress {
|
|||
display: block;
|
||||
padding: 0;
|
||||
}
|
||||
.form-control::-moz-placeholder {
|
||||
color: var(--bs-secondary-color);
|
||||
opacity: 1;
|
||||
}
|
||||
.form-control::placeholder {
|
||||
color: var(--bs-secondary-color);
|
||||
opacity: 1;
|
||||
|
|
@ -2179,8 +2171,7 @@ progress {
|
|||
.form-control::file-selector-button {
|
||||
padding: 0.375rem 0.75rem;
|
||||
margin: -0.375rem -0.75rem;
|
||||
-webkit-margin-end: 0.75rem;
|
||||
margin-inline-end: 0.75rem;
|
||||
margin-inline-end: 0.75rem;
|
||||
color: #fff;
|
||||
background-color: var(--bs-tertiary-bg);
|
||||
pointer-events: none;
|
||||
|
|
@ -2228,8 +2219,7 @@ progress {
|
|||
.form-control-sm::file-selector-button {
|
||||
padding: 0.25rem 0.5rem;
|
||||
margin: -0.25rem -0.5rem;
|
||||
-webkit-margin-end: 0.5rem;
|
||||
margin-inline-end: 0.5rem;
|
||||
margin-inline-end: 0.5rem;
|
||||
}
|
||||
|
||||
.form-control-lg {
|
||||
|
|
@ -2241,8 +2231,7 @@ progress {
|
|||
.form-control-lg::file-selector-button {
|
||||
padding: 0.5rem 1rem;
|
||||
margin: -0.5rem -1rem;
|
||||
-webkit-margin-end: 1rem;
|
||||
margin-inline-end: 1rem;
|
||||
margin-inline-end: 1rem;
|
||||
}
|
||||
|
||||
textarea.form-control {
|
||||
|
|
@ -2295,9 +2284,7 @@ textarea.form-control-lg {
|
|||
border: var(--bs-border-width) solid #222;
|
||||
border-radius: var(--bs-border-radius);
|
||||
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
appearance: none;
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.form-select {
|
||||
|
|
@ -2375,11 +2362,8 @@ textarea.form-control-lg {
|
|||
background-position: center;
|
||||
background-size: contain;
|
||||
border: var(--bs-border-width) solid var(--bs-border-color);
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
-webkit-print-color-adjust: exact;
|
||||
print-color-adjust: exact;
|
||||
appearance: none;
|
||||
print-color-adjust: exact;
|
||||
}
|
||||
.form-check-input[type=checkbox] {
|
||||
border-radius: 0.25em;
|
||||
|
|
@ -2478,9 +2462,7 @@ textarea.form-control-lg {
|
|||
height: 1.5rem;
|
||||
padding: 0;
|
||||
background-color: transparent;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
appearance: none;
|
||||
}
|
||||
.form-range:focus {
|
||||
outline: 0;
|
||||
|
|
@ -2501,14 +2483,11 @@ textarea.form-control-lg {
|
|||
background-color: #00bc8c;
|
||||
border: 0;
|
||||
border-radius: 1rem;
|
||||
-webkit-transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
|
||||
transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
appearance: none;
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.form-range::-webkit-slider-thumb {
|
||||
-webkit-transition: none;
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
|
|
@ -2530,14 +2509,11 @@ textarea.form-control-lg {
|
|||
background-color: #00bc8c;
|
||||
border: 0;
|
||||
border-radius: 1rem;
|
||||
-moz-transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
|
||||
transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
appearance: none;
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.form-range::-moz-range-thumb {
|
||||
-moz-transition: none;
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
|
|
@ -2598,17 +2574,10 @@ textarea.form-control-lg {
|
|||
.form-floating > .form-control-plaintext {
|
||||
padding: 1rem 0.75rem;
|
||||
}
|
||||
.form-floating > .form-control::-moz-placeholder, .form-floating > .form-control-plaintext::-moz-placeholder {
|
||||
color: transparent;
|
||||
}
|
||||
.form-floating > .form-control::placeholder,
|
||||
.form-floating > .form-control-plaintext::placeholder {
|
||||
color: transparent;
|
||||
}
|
||||
.form-floating > .form-control:not(:-moz-placeholder-shown), .form-floating > .form-control-plaintext:not(:-moz-placeholder-shown) {
|
||||
padding-top: 1.625rem;
|
||||
padding-bottom: 0.625rem;
|
||||
}
|
||||
.form-floating > .form-control:focus, .form-floating > .form-control:not(:placeholder-shown),
|
||||
.form-floating > .form-control-plaintext:focus,
|
||||
.form-floating > .form-control-plaintext:not(:placeholder-shown) {
|
||||
|
|
@ -2624,10 +2593,6 @@ textarea.form-control-lg {
|
|||
padding-top: 1.625rem;
|
||||
padding-bottom: 0.625rem;
|
||||
}
|
||||
.form-floating > .form-control:not(:-moz-placeholder-shown) ~ label {
|
||||
color: rgba(var(--bs-body-color-rgb), 0.65);
|
||||
transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
|
||||
}
|
||||
.form-floating > .form-control:focus ~ label,
|
||||
.form-floating > .form-control:not(:placeholder-shown) ~ label,
|
||||
.form-floating > .form-control-plaintext ~ label,
|
||||
|
|
@ -2635,15 +2600,6 @@ textarea.form-control-lg {
|
|||
color: rgba(var(--bs-body-color-rgb), 0.65);
|
||||
transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
|
||||
}
|
||||
.form-floating > .form-control:not(:-moz-placeholder-shown) ~ label::after {
|
||||
position: absolute;
|
||||
inset: 1rem 0.375rem;
|
||||
z-index: -1;
|
||||
height: 1.5em;
|
||||
content: "";
|
||||
background-color: #444;
|
||||
border-radius: var(--bs-border-radius);
|
||||
}
|
||||
.form-floating > .form-control:focus ~ label::after,
|
||||
.form-floating > .form-control:not(:placeholder-shown) ~ label::after,
|
||||
.form-floating > .form-control-plaintext ~ label::after,
|
||||
|
|
@ -2967,9 +2923,7 @@ textarea.form-control-lg {
|
|||
text-align: center;
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
user-select: none;
|
||||
user-select: none;
|
||||
border: var(--bs-btn-border-width) solid var(--bs-btn-border-color);
|
||||
border-radius: var(--bs-btn-border-radius);
|
||||
background-color: var(--bs-btn-bg);
|
||||
|
|
@ -5354,9 +5308,7 @@ textarea.form-control-lg {
|
|||
}
|
||||
.btn-close:disabled, .btn-close.disabled {
|
||||
pointer-events: none;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
user-select: none;
|
||||
user-select: none;
|
||||
opacity: var(--bs-btn-close-disabled-opacity);
|
||||
}
|
||||
|
||||
|
|
@ -5406,7 +5358,6 @@ textarea.form-control-lg {
|
|||
--bs-toast-zindex: 1090;
|
||||
position: absolute;
|
||||
z-index: var(--bs-toast-zindex);
|
||||
width: -moz-max-content;
|
||||
width: max-content;
|
||||
max-width: 100%;
|
||||
pointer-events: none;
|
||||
|
|
@ -6307,8 +6258,6 @@ textarea.form-control-lg {
|
|||
border-right: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
}
|
||||
@media (max-width: 575.98px) {
|
||||
.offcanvas-sm.offcanvas-end {
|
||||
top: 0;
|
||||
right: 0;
|
||||
|
|
@ -6316,8 +6265,6 @@ textarea.form-control-lg {
|
|||
border-left: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
|
||||
transform: translateX(100%);
|
||||
}
|
||||
}
|
||||
@media (max-width: 575.98px) {
|
||||
.offcanvas-sm.offcanvas-top {
|
||||
top: 0;
|
||||
right: 0;
|
||||
|
|
@ -6327,8 +6274,6 @@ textarea.form-control-lg {
|
|||
border-bottom: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
|
||||
transform: translateY(-100%);
|
||||
}
|
||||
}
|
||||
@media (max-width: 575.98px) {
|
||||
.offcanvas-sm.offcanvas-bottom {
|
||||
right: 0;
|
||||
left: 0;
|
||||
|
|
@ -6337,13 +6282,9 @@ textarea.form-control-lg {
|
|||
border-top: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
|
||||
transform: translateY(100%);
|
||||
}
|
||||
}
|
||||
@media (max-width: 575.98px) {
|
||||
.offcanvas-sm.showing, .offcanvas-sm.show:not(.hiding) {
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
@media (max-width: 575.98px) {
|
||||
.offcanvas-sm.showing, .offcanvas-sm.hiding, .offcanvas-sm.show {
|
||||
visibility: visible;
|
||||
}
|
||||
|
|
@ -6395,8 +6336,6 @@ textarea.form-control-lg {
|
|||
border-right: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
}
|
||||
@media (max-width: 767.98px) {
|
||||
.offcanvas-md.offcanvas-end {
|
||||
top: 0;
|
||||
right: 0;
|
||||
|
|
@ -6404,8 +6343,6 @@ textarea.form-control-lg {
|
|||
border-left: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
|
||||
transform: translateX(100%);
|
||||
}
|
||||
}
|
||||
@media (max-width: 767.98px) {
|
||||
.offcanvas-md.offcanvas-top {
|
||||
top: 0;
|
||||
right: 0;
|
||||
|
|
@ -6415,8 +6352,6 @@ textarea.form-control-lg {
|
|||
border-bottom: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
|
||||
transform: translateY(-100%);
|
||||
}
|
||||
}
|
||||
@media (max-width: 767.98px) {
|
||||
.offcanvas-md.offcanvas-bottom {
|
||||
right: 0;
|
||||
left: 0;
|
||||
|
|
@ -6425,13 +6360,9 @@ textarea.form-control-lg {
|
|||
border-top: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
|
||||
transform: translateY(100%);
|
||||
}
|
||||
}
|
||||
@media (max-width: 767.98px) {
|
||||
.offcanvas-md.showing, .offcanvas-md.show:not(.hiding) {
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
@media (max-width: 767.98px) {
|
||||
.offcanvas-md.showing, .offcanvas-md.hiding, .offcanvas-md.show {
|
||||
visibility: visible;
|
||||
}
|
||||
|
|
@ -6483,8 +6414,6 @@ textarea.form-control-lg {
|
|||
border-right: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
}
|
||||
@media (max-width: 991.98px) {
|
||||
.offcanvas-lg.offcanvas-end {
|
||||
top: 0;
|
||||
right: 0;
|
||||
|
|
@ -6492,8 +6421,6 @@ textarea.form-control-lg {
|
|||
border-left: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
|
||||
transform: translateX(100%);
|
||||
}
|
||||
}
|
||||
@media (max-width: 991.98px) {
|
||||
.offcanvas-lg.offcanvas-top {
|
||||
top: 0;
|
||||
right: 0;
|
||||
|
|
@ -6503,8 +6430,6 @@ textarea.form-control-lg {
|
|||
border-bottom: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
|
||||
transform: translateY(-100%);
|
||||
}
|
||||
}
|
||||
@media (max-width: 991.98px) {
|
||||
.offcanvas-lg.offcanvas-bottom {
|
||||
right: 0;
|
||||
left: 0;
|
||||
|
|
@ -6513,13 +6438,9 @@ textarea.form-control-lg {
|
|||
border-top: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
|
||||
transform: translateY(100%);
|
||||
}
|
||||
}
|
||||
@media (max-width: 991.98px) {
|
||||
.offcanvas-lg.showing, .offcanvas-lg.show:not(.hiding) {
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
@media (max-width: 991.98px) {
|
||||
.offcanvas-lg.showing, .offcanvas-lg.hiding, .offcanvas-lg.show {
|
||||
visibility: visible;
|
||||
}
|
||||
|
|
@ -6571,8 +6492,6 @@ textarea.form-control-lg {
|
|||
border-right: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
}
|
||||
@media (max-width: 1199.98px) {
|
||||
.offcanvas-xl.offcanvas-end {
|
||||
top: 0;
|
||||
right: 0;
|
||||
|
|
@ -6580,8 +6499,6 @@ textarea.form-control-lg {
|
|||
border-left: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
|
||||
transform: translateX(100%);
|
||||
}
|
||||
}
|
||||
@media (max-width: 1199.98px) {
|
||||
.offcanvas-xl.offcanvas-top {
|
||||
top: 0;
|
||||
right: 0;
|
||||
|
|
@ -6591,8 +6508,6 @@ textarea.form-control-lg {
|
|||
border-bottom: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
|
||||
transform: translateY(-100%);
|
||||
}
|
||||
}
|
||||
@media (max-width: 1199.98px) {
|
||||
.offcanvas-xl.offcanvas-bottom {
|
||||
right: 0;
|
||||
left: 0;
|
||||
|
|
@ -6601,13 +6516,9 @@ textarea.form-control-lg {
|
|||
border-top: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
|
||||
transform: translateY(100%);
|
||||
}
|
||||
}
|
||||
@media (max-width: 1199.98px) {
|
||||
.offcanvas-xl.showing, .offcanvas-xl.show:not(.hiding) {
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1199.98px) {
|
||||
.offcanvas-xl.showing, .offcanvas-xl.hiding, .offcanvas-xl.show {
|
||||
visibility: visible;
|
||||
}
|
||||
|
|
@ -6659,8 +6570,6 @@ textarea.form-control-lg {
|
|||
border-right: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
}
|
||||
@media (max-width: 1399.98px) {
|
||||
.offcanvas-xxl.offcanvas-end {
|
||||
top: 0;
|
||||
right: 0;
|
||||
|
|
@ -6668,8 +6577,6 @@ textarea.form-control-lg {
|
|||
border-left: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
|
||||
transform: translateX(100%);
|
||||
}
|
||||
}
|
||||
@media (max-width: 1399.98px) {
|
||||
.offcanvas-xxl.offcanvas-top {
|
||||
top: 0;
|
||||
right: 0;
|
||||
|
|
@ -6679,8 +6586,6 @@ textarea.form-control-lg {
|
|||
border-bottom: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
|
||||
transform: translateY(-100%);
|
||||
}
|
||||
}
|
||||
@media (max-width: 1399.98px) {
|
||||
.offcanvas-xxl.offcanvas-bottom {
|
||||
right: 0;
|
||||
left: 0;
|
||||
|
|
@ -6689,13 +6594,9 @@ textarea.form-control-lg {
|
|||
border-top: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
|
||||
transform: translateY(100%);
|
||||
}
|
||||
}
|
||||
@media (max-width: 1399.98px) {
|
||||
.offcanvas-xxl.showing, .offcanvas-xxl.show:not(.hiding) {
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1399.98px) {
|
||||
.offcanvas-xxl.showing, .offcanvas-xxl.hiding, .offcanvas-xxl.show {
|
||||
visibility: visible;
|
||||
}
|
||||
|
|
@ -6850,17 +6751,14 @@ textarea.form-control-lg {
|
|||
}
|
||||
}
|
||||
.placeholder-wave {
|
||||
-webkit-mask-image: linear-gradient(130deg, #000 55%, rgba(0, 0, 0, 0.8) 75%, #000 95%);
|
||||
mask-image: linear-gradient(130deg, #000 55%, rgba(0, 0, 0, 0.8) 75%, #000 95%);
|
||||
-webkit-mask-size: 200% 100%;
|
||||
mask-size: 200% 100%;
|
||||
mask-image: linear-gradient(130deg, #000 55%, rgba(0, 0, 0, 0.8) 75%, #000 95%);
|
||||
mask-size: 200% 100%;
|
||||
animation: placeholder-wave 2s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes placeholder-wave {
|
||||
100% {
|
||||
-webkit-mask-position: -200% 0%;
|
||||
mask-position: -200% 0%;
|
||||
mask-position: -200% 0%;
|
||||
}
|
||||
}
|
||||
.clearfix::after {
|
||||
|
|
@ -7233,28 +7131,23 @@ textarea.form-control-lg {
|
|||
}
|
||||
|
||||
.object-fit-contain {
|
||||
-o-object-fit: contain !important;
|
||||
object-fit: contain !important;
|
||||
object-fit: contain !important;
|
||||
}
|
||||
|
||||
.object-fit-cover {
|
||||
-o-object-fit: cover !important;
|
||||
object-fit: cover !important;
|
||||
object-fit: cover !important;
|
||||
}
|
||||
|
||||
.object-fit-fill {
|
||||
-o-object-fit: fill !important;
|
||||
object-fit: fill !important;
|
||||
object-fit: fill !important;
|
||||
}
|
||||
|
||||
.object-fit-scale {
|
||||
-o-object-fit: scale-down !important;
|
||||
object-fit: scale-down !important;
|
||||
object-fit: scale-down !important;
|
||||
}
|
||||
|
||||
.object-fit-none {
|
||||
-o-object-fit: none !important;
|
||||
object-fit: none !important;
|
||||
object-fit: none !important;
|
||||
}
|
||||
|
||||
.opacity-0 {
|
||||
|
|
@ -8334,33 +8227,27 @@ textarea.form-control-lg {
|
|||
}
|
||||
|
||||
.column-gap-0 {
|
||||
-moz-column-gap: 0 !important;
|
||||
column-gap: 0 !important;
|
||||
column-gap: 0 !important;
|
||||
}
|
||||
|
||||
.column-gap-1 {
|
||||
-moz-column-gap: 0.25rem !important;
|
||||
column-gap: 0.25rem !important;
|
||||
column-gap: 0.25rem !important;
|
||||
}
|
||||
|
||||
.column-gap-2 {
|
||||
-moz-column-gap: 0.5rem !important;
|
||||
column-gap: 0.5rem !important;
|
||||
column-gap: 0.5rem !important;
|
||||
}
|
||||
|
||||
.column-gap-3 {
|
||||
-moz-column-gap: 1rem !important;
|
||||
column-gap: 1rem !important;
|
||||
column-gap: 1rem !important;
|
||||
}
|
||||
|
||||
.column-gap-4 {
|
||||
-moz-column-gap: 1.5rem !important;
|
||||
column-gap: 1.5rem !important;
|
||||
column-gap: 1.5rem !important;
|
||||
}
|
||||
|
||||
.column-gap-5 {
|
||||
-moz-column-gap: 3rem !important;
|
||||
column-gap: 3rem !important;
|
||||
column-gap: 3rem !important;
|
||||
}
|
||||
|
||||
.font-monospace {
|
||||
|
|
@ -8916,21 +8803,15 @@ textarea.form-control-lg {
|
|||
}
|
||||
|
||||
.user-select-all {
|
||||
-webkit-user-select: all !important;
|
||||
-moz-user-select: all !important;
|
||||
user-select: all !important;
|
||||
user-select: all !important;
|
||||
}
|
||||
|
||||
.user-select-auto {
|
||||
-webkit-user-select: auto !important;
|
||||
-moz-user-select: auto !important;
|
||||
user-select: auto !important;
|
||||
user-select: auto !important;
|
||||
}
|
||||
|
||||
.user-select-none {
|
||||
-webkit-user-select: none !important;
|
||||
-moz-user-select: none !important;
|
||||
user-select: none !important;
|
||||
user-select: none !important;
|
||||
}
|
||||
|
||||
.pe-none {
|
||||
|
|
@ -9196,24 +9077,19 @@ textarea.form-control-lg {
|
|||
float: none !important;
|
||||
}
|
||||
.object-fit-sm-contain {
|
||||
-o-object-fit: contain !important;
|
||||
object-fit: contain !important;
|
||||
object-fit: contain !important;
|
||||
}
|
||||
.object-fit-sm-cover {
|
||||
-o-object-fit: cover !important;
|
||||
object-fit: cover !important;
|
||||
object-fit: cover !important;
|
||||
}
|
||||
.object-fit-sm-fill {
|
||||
-o-object-fit: fill !important;
|
||||
object-fit: fill !important;
|
||||
object-fit: fill !important;
|
||||
}
|
||||
.object-fit-sm-scale {
|
||||
-o-object-fit: scale-down !important;
|
||||
object-fit: scale-down !important;
|
||||
object-fit: scale-down !important;
|
||||
}
|
||||
.object-fit-sm-none {
|
||||
-o-object-fit: none !important;
|
||||
object-fit: none !important;
|
||||
object-fit: none !important;
|
||||
}
|
||||
.d-sm-inline {
|
||||
display: inline !important;
|
||||
|
|
@ -9713,28 +9589,22 @@ textarea.form-control-lg {
|
|||
row-gap: 3rem !important;
|
||||
}
|
||||
.column-gap-sm-0 {
|
||||
-moz-column-gap: 0 !important;
|
||||
column-gap: 0 !important;
|
||||
column-gap: 0 !important;
|
||||
}
|
||||
.column-gap-sm-1 {
|
||||
-moz-column-gap: 0.25rem !important;
|
||||
column-gap: 0.25rem !important;
|
||||
column-gap: 0.25rem !important;
|
||||
}
|
||||
.column-gap-sm-2 {
|
||||
-moz-column-gap: 0.5rem !important;
|
||||
column-gap: 0.5rem !important;
|
||||
column-gap: 0.5rem !important;
|
||||
}
|
||||
.column-gap-sm-3 {
|
||||
-moz-column-gap: 1rem !important;
|
||||
column-gap: 1rem !important;
|
||||
column-gap: 1rem !important;
|
||||
}
|
||||
.column-gap-sm-4 {
|
||||
-moz-column-gap: 1.5rem !important;
|
||||
column-gap: 1.5rem !important;
|
||||
column-gap: 1.5rem !important;
|
||||
}
|
||||
.column-gap-sm-5 {
|
||||
-moz-column-gap: 3rem !important;
|
||||
column-gap: 3rem !important;
|
||||
column-gap: 3rem !important;
|
||||
}
|
||||
.text-sm-start {
|
||||
text-align: left !important;
|
||||
|
|
@ -9757,24 +9627,19 @@ textarea.form-control-lg {
|
|||
float: none !important;
|
||||
}
|
||||
.object-fit-md-contain {
|
||||
-o-object-fit: contain !important;
|
||||
object-fit: contain !important;
|
||||
object-fit: contain !important;
|
||||
}
|
||||
.object-fit-md-cover {
|
||||
-o-object-fit: cover !important;
|
||||
object-fit: cover !important;
|
||||
object-fit: cover !important;
|
||||
}
|
||||
.object-fit-md-fill {
|
||||
-o-object-fit: fill !important;
|
||||
object-fit: fill !important;
|
||||
object-fit: fill !important;
|
||||
}
|
||||
.object-fit-md-scale {
|
||||
-o-object-fit: scale-down !important;
|
||||
object-fit: scale-down !important;
|
||||
object-fit: scale-down !important;
|
||||
}
|
||||
.object-fit-md-none {
|
||||
-o-object-fit: none !important;
|
||||
object-fit: none !important;
|
||||
object-fit: none !important;
|
||||
}
|
||||
.d-md-inline {
|
||||
display: inline !important;
|
||||
|
|
@ -10274,28 +10139,22 @@ textarea.form-control-lg {
|
|||
row-gap: 3rem !important;
|
||||
}
|
||||
.column-gap-md-0 {
|
||||
-moz-column-gap: 0 !important;
|
||||
column-gap: 0 !important;
|
||||
column-gap: 0 !important;
|
||||
}
|
||||
.column-gap-md-1 {
|
||||
-moz-column-gap: 0.25rem !important;
|
||||
column-gap: 0.25rem !important;
|
||||
column-gap: 0.25rem !important;
|
||||
}
|
||||
.column-gap-md-2 {
|
||||
-moz-column-gap: 0.5rem !important;
|
||||
column-gap: 0.5rem !important;
|
||||
column-gap: 0.5rem !important;
|
||||
}
|
||||
.column-gap-md-3 {
|
||||
-moz-column-gap: 1rem !important;
|
||||
column-gap: 1rem !important;
|
||||
column-gap: 1rem !important;
|
||||
}
|
||||
.column-gap-md-4 {
|
||||
-moz-column-gap: 1.5rem !important;
|
||||
column-gap: 1.5rem !important;
|
||||
column-gap: 1.5rem !important;
|
||||
}
|
||||
.column-gap-md-5 {
|
||||
-moz-column-gap: 3rem !important;
|
||||
column-gap: 3rem !important;
|
||||
column-gap: 3rem !important;
|
||||
}
|
||||
.text-md-start {
|
||||
text-align: left !important;
|
||||
|
|
@ -10318,24 +10177,19 @@ textarea.form-control-lg {
|
|||
float: none !important;
|
||||
}
|
||||
.object-fit-lg-contain {
|
||||
-o-object-fit: contain !important;
|
||||
object-fit: contain !important;
|
||||
object-fit: contain !important;
|
||||
}
|
||||
.object-fit-lg-cover {
|
||||
-o-object-fit: cover !important;
|
||||
object-fit: cover !important;
|
||||
object-fit: cover !important;
|
||||
}
|
||||
.object-fit-lg-fill {
|
||||
-o-object-fit: fill !important;
|
||||
object-fit: fill !important;
|
||||
object-fit: fill !important;
|
||||
}
|
||||
.object-fit-lg-scale {
|
||||
-o-object-fit: scale-down !important;
|
||||
object-fit: scale-down !important;
|
||||
object-fit: scale-down !important;
|
||||
}
|
||||
.object-fit-lg-none {
|
||||
-o-object-fit: none !important;
|
||||
object-fit: none !important;
|
||||
object-fit: none !important;
|
||||
}
|
||||
.d-lg-inline {
|
||||
display: inline !important;
|
||||
|
|
@ -10835,28 +10689,22 @@ textarea.form-control-lg {
|
|||
row-gap: 3rem !important;
|
||||
}
|
||||
.column-gap-lg-0 {
|
||||
-moz-column-gap: 0 !important;
|
||||
column-gap: 0 !important;
|
||||
column-gap: 0 !important;
|
||||
}
|
||||
.column-gap-lg-1 {
|
||||
-moz-column-gap: 0.25rem !important;
|
||||
column-gap: 0.25rem !important;
|
||||
column-gap: 0.25rem !important;
|
||||
}
|
||||
.column-gap-lg-2 {
|
||||
-moz-column-gap: 0.5rem !important;
|
||||
column-gap: 0.5rem !important;
|
||||
column-gap: 0.5rem !important;
|
||||
}
|
||||
.column-gap-lg-3 {
|
||||
-moz-column-gap: 1rem !important;
|
||||
column-gap: 1rem !important;
|
||||
column-gap: 1rem !important;
|
||||
}
|
||||
.column-gap-lg-4 {
|
||||
-moz-column-gap: 1.5rem !important;
|
||||
column-gap: 1.5rem !important;
|
||||
column-gap: 1.5rem !important;
|
||||
}
|
||||
.column-gap-lg-5 {
|
||||
-moz-column-gap: 3rem !important;
|
||||
column-gap: 3rem !important;
|
||||
column-gap: 3rem !important;
|
||||
}
|
||||
.text-lg-start {
|
||||
text-align: left !important;
|
||||
|
|
@ -10879,24 +10727,19 @@ textarea.form-control-lg {
|
|||
float: none !important;
|
||||
}
|
||||
.object-fit-xl-contain {
|
||||
-o-object-fit: contain !important;
|
||||
object-fit: contain !important;
|
||||
object-fit: contain !important;
|
||||
}
|
||||
.object-fit-xl-cover {
|
||||
-o-object-fit: cover !important;
|
||||
object-fit: cover !important;
|
||||
object-fit: cover !important;
|
||||
}
|
||||
.object-fit-xl-fill {
|
||||
-o-object-fit: fill !important;
|
||||
object-fit: fill !important;
|
||||
object-fit: fill !important;
|
||||
}
|
||||
.object-fit-xl-scale {
|
||||
-o-object-fit: scale-down !important;
|
||||
object-fit: scale-down !important;
|
||||
object-fit: scale-down !important;
|
||||
}
|
||||
.object-fit-xl-none {
|
||||
-o-object-fit: none !important;
|
||||
object-fit: none !important;
|
||||
object-fit: none !important;
|
||||
}
|
||||
.d-xl-inline {
|
||||
display: inline !important;
|
||||
|
|
@ -11396,28 +11239,22 @@ textarea.form-control-lg {
|
|||
row-gap: 3rem !important;
|
||||
}
|
||||
.column-gap-xl-0 {
|
||||
-moz-column-gap: 0 !important;
|
||||
column-gap: 0 !important;
|
||||
column-gap: 0 !important;
|
||||
}
|
||||
.column-gap-xl-1 {
|
||||
-moz-column-gap: 0.25rem !important;
|
||||
column-gap: 0.25rem !important;
|
||||
column-gap: 0.25rem !important;
|
||||
}
|
||||
.column-gap-xl-2 {
|
||||
-moz-column-gap: 0.5rem !important;
|
||||
column-gap: 0.5rem !important;
|
||||
column-gap: 0.5rem !important;
|
||||
}
|
||||
.column-gap-xl-3 {
|
||||
-moz-column-gap: 1rem !important;
|
||||
column-gap: 1rem !important;
|
||||
column-gap: 1rem !important;
|
||||
}
|
||||
.column-gap-xl-4 {
|
||||
-moz-column-gap: 1.5rem !important;
|
||||
column-gap: 1.5rem !important;
|
||||
column-gap: 1.5rem !important;
|
||||
}
|
||||
.column-gap-xl-5 {
|
||||
-moz-column-gap: 3rem !important;
|
||||
column-gap: 3rem !important;
|
||||
column-gap: 3rem !important;
|
||||
}
|
||||
.text-xl-start {
|
||||
text-align: left !important;
|
||||
|
|
@ -11440,24 +11277,19 @@ textarea.form-control-lg {
|
|||
float: none !important;
|
||||
}
|
||||
.object-fit-xxl-contain {
|
||||
-o-object-fit: contain !important;
|
||||
object-fit: contain !important;
|
||||
object-fit: contain !important;
|
||||
}
|
||||
.object-fit-xxl-cover {
|
||||
-o-object-fit: cover !important;
|
||||
object-fit: cover !important;
|
||||
object-fit: cover !important;
|
||||
}
|
||||
.object-fit-xxl-fill {
|
||||
-o-object-fit: fill !important;
|
||||
object-fit: fill !important;
|
||||
object-fit: fill !important;
|
||||
}
|
||||
.object-fit-xxl-scale {
|
||||
-o-object-fit: scale-down !important;
|
||||
object-fit: scale-down !important;
|
||||
object-fit: scale-down !important;
|
||||
}
|
||||
.object-fit-xxl-none {
|
||||
-o-object-fit: none !important;
|
||||
object-fit: none !important;
|
||||
object-fit: none !important;
|
||||
}
|
||||
.d-xxl-inline {
|
||||
display: inline !important;
|
||||
|
|
@ -11957,28 +11789,22 @@ textarea.form-control-lg {
|
|||
row-gap: 3rem !important;
|
||||
}
|
||||
.column-gap-xxl-0 {
|
||||
-moz-column-gap: 0 !important;
|
||||
column-gap: 0 !important;
|
||||
column-gap: 0 !important;
|
||||
}
|
||||
.column-gap-xxl-1 {
|
||||
-moz-column-gap: 0.25rem !important;
|
||||
column-gap: 0.25rem !important;
|
||||
column-gap: 0.25rem !important;
|
||||
}
|
||||
.column-gap-xxl-2 {
|
||||
-moz-column-gap: 0.5rem !important;
|
||||
column-gap: 0.5rem !important;
|
||||
column-gap: 0.5rem !important;
|
||||
}
|
||||
.column-gap-xxl-3 {
|
||||
-moz-column-gap: 1rem !important;
|
||||
column-gap: 1rem !important;
|
||||
column-gap: 1rem !important;
|
||||
}
|
||||
.column-gap-xxl-4 {
|
||||
-moz-column-gap: 1.5rem !important;
|
||||
column-gap: 1.5rem !important;
|
||||
column-gap: 1.5rem !important;
|
||||
}
|
||||
.column-gap-xxl-5 {
|
||||
-moz-column-gap: 3rem !important;
|
||||
column-gap: 3rem !important;
|
||||
column-gap: 3rem !important;
|
||||
}
|
||||
.text-xxl-start {
|
||||
text-align: left !important;
|
||||
|
|
@ -12038,4 +11864,6 @@ textarea.form-control-lg {
|
|||
.d-print-none {
|
||||
display: none !important;
|
||||
}
|
||||
}/*# sourceMappingURL=darkly-compact.css.map */
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=darkly-compact.css.map */
|
||||
|
|
|
|||
|
|
@ -726,7 +726,11 @@ progress {
|
|||
|
||||
.container,
|
||||
.container-fluid,
|
||||
.container-lg {
|
||||
.container-xxl,
|
||||
.container-xl,
|
||||
.container-lg,
|
||||
.container-md,
|
||||
.container-sm {
|
||||
--bs-gutter-x: 1.5rem;
|
||||
--bs-gutter-y: 0;
|
||||
width: 100%;
|
||||
|
|
@ -736,11 +740,31 @@ progress {
|
|||
margin-left: auto;
|
||||
}
|
||||
|
||||
@media (min-width: 576px) {
|
||||
.container-sm, .container {
|
||||
max-width: 540px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.container-md, .container-sm, .container {
|
||||
max-width: 720px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 992px) {
|
||||
.container-lg, .container-md, .container-sm, .container {
|
||||
max-width: 960px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1200px) {
|
||||
.container-xl, .container-lg, .container-md, .container-sm, .container {
|
||||
max-width: 1140px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1400px) {
|
||||
.container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container {
|
||||
max-width: 1320px;
|
||||
}
|
||||
}
|
||||
:root {
|
||||
--bs-breakpoint-xs: 0;
|
||||
--bs-breakpoint-sm: 576px;
|
||||
|
|
@ -3867,7 +3891,11 @@ textarea.form-control-lg {
|
|||
}
|
||||
.navbar > .container,
|
||||
.navbar > .container-fluid,
|
||||
.navbar > .container-lg {
|
||||
.navbar > .container-sm,
|
||||
.navbar > .container-md,
|
||||
.navbar > .container-lg,
|
||||
.navbar > .container-xl,
|
||||
.navbar > .container-xxl {
|
||||
display: flex;
|
||||
flex-wrap: inherit;
|
||||
align-items: center;
|
||||
|
|
|
|||
|
|
@ -726,7 +726,11 @@ progress {
|
|||
|
||||
.container,
|
||||
.container-fluid,
|
||||
.container-lg {
|
||||
.container-xxl,
|
||||
.container-xl,
|
||||
.container-lg,
|
||||
.container-md,
|
||||
.container-sm {
|
||||
--bs-gutter-x: 1.5rem;
|
||||
--bs-gutter-y: 0;
|
||||
width: 100%;
|
||||
|
|
@ -736,11 +740,31 @@ progress {
|
|||
margin-left: auto;
|
||||
}
|
||||
|
||||
@media (min-width: 576px) {
|
||||
.container-sm, .container {
|
||||
max-width: 540px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.container-md, .container-sm, .container {
|
||||
max-width: 720px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 992px) {
|
||||
.container-lg, .container-md, .container-sm, .container {
|
||||
max-width: 960px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1200px) {
|
||||
.container-xl, .container-lg, .container-md, .container-sm, .container {
|
||||
max-width: 1140px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1400px) {
|
||||
.container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container {
|
||||
max-width: 1320px;
|
||||
}
|
||||
}
|
||||
:root {
|
||||
--bs-breakpoint-xs: 0;
|
||||
--bs-breakpoint-sm: 576px;
|
||||
|
|
@ -3867,7 +3891,11 @@ textarea.form-control-lg {
|
|||
}
|
||||
.navbar > .container,
|
||||
.navbar > .container-fluid,
|
||||
.navbar > .container-lg {
|
||||
.navbar > .container-sm,
|
||||
.navbar > .container-md,
|
||||
.navbar > .container-lg,
|
||||
.navbar > .container-xl,
|
||||
.navbar > .container-xxl {
|
||||
display: flex;
|
||||
flex-wrap: inherit;
|
||||
align-items: center;
|
||||
|
|
|
|||
|
|
@ -309,11 +309,9 @@ p {
|
|||
}
|
||||
|
||||
abbr[title] {
|
||||
-webkit-text-decoration: underline dotted;
|
||||
text-decoration: underline dotted;
|
||||
text-decoration: underline dotted;
|
||||
cursor: help;
|
||||
-webkit-text-decoration-skip-ink: none;
|
||||
text-decoration-skip-ink: none;
|
||||
text-decoration-skip-ink: none;
|
||||
}
|
||||
|
||||
address {
|
||||
|
|
@ -2130,9 +2128,7 @@ progress {
|
|||
background-color: var(--bs-body-bg);
|
||||
background-clip: padding-box;
|
||||
border: var(--bs-border-width) solid var(--bs-border-color);
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
appearance: none;
|
||||
border-radius: var(--bs-border-radius);
|
||||
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
|
||||
}
|
||||
|
|
@ -2163,10 +2159,6 @@ progress {
|
|||
display: block;
|
||||
padding: 0;
|
||||
}
|
||||
.form-control::-moz-placeholder {
|
||||
color: var(--bs-secondary-color);
|
||||
opacity: 1;
|
||||
}
|
||||
.form-control::placeholder {
|
||||
color: var(--bs-secondary-color);
|
||||
opacity: 1;
|
||||
|
|
@ -2178,8 +2170,7 @@ progress {
|
|||
.form-control::file-selector-button {
|
||||
padding: 0.375rem 0.75rem;
|
||||
margin: -0.375rem -0.75rem;
|
||||
-webkit-margin-end: 0.75rem;
|
||||
margin-inline-end: 0.75rem;
|
||||
margin-inline-end: 0.75rem;
|
||||
color: var(--bs-body-color);
|
||||
background-color: var(--bs-tertiary-bg);
|
||||
pointer-events: none;
|
||||
|
|
@ -2227,8 +2218,7 @@ progress {
|
|||
.form-control-sm::file-selector-button {
|
||||
padding: 0.25rem 0.5rem;
|
||||
margin: -0.25rem -0.5rem;
|
||||
-webkit-margin-end: 0.5rem;
|
||||
margin-inline-end: 0.5rem;
|
||||
margin-inline-end: 0.5rem;
|
||||
}
|
||||
|
||||
.form-control-lg {
|
||||
|
|
@ -2240,8 +2230,7 @@ progress {
|
|||
.form-control-lg::file-selector-button {
|
||||
padding: 0.5rem 1rem;
|
||||
margin: -0.5rem -1rem;
|
||||
-webkit-margin-end: 1rem;
|
||||
margin-inline-end: 1rem;
|
||||
margin-inline-end: 1rem;
|
||||
}
|
||||
|
||||
textarea.form-control {
|
||||
|
|
@ -2294,9 +2283,7 @@ textarea.form-control-lg {
|
|||
border: var(--bs-border-width) solid var(--bs-border-color);
|
||||
border-radius: var(--bs-border-radius);
|
||||
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
appearance: none;
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.form-select {
|
||||
|
|
@ -2374,11 +2361,8 @@ textarea.form-control-lg {
|
|||
background-position: center;
|
||||
background-size: contain;
|
||||
border: var(--bs-border-width) solid var(--bs-border-color);
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
-webkit-print-color-adjust: exact;
|
||||
print-color-adjust: exact;
|
||||
appearance: none;
|
||||
print-color-adjust: exact;
|
||||
}
|
||||
.form-check-input[type=checkbox] {
|
||||
border-radius: 0.25em;
|
||||
|
|
@ -2477,9 +2461,7 @@ textarea.form-control-lg {
|
|||
height: 1.5rem;
|
||||
padding: 0;
|
||||
background-color: transparent;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
appearance: none;
|
||||
}
|
||||
.form-range:focus {
|
||||
outline: 0;
|
||||
|
|
@ -2500,14 +2482,11 @@ textarea.form-control-lg {
|
|||
background-color: #f1641e;
|
||||
border: 0;
|
||||
border-radius: 1rem;
|
||||
-webkit-transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
|
||||
transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
appearance: none;
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.form-range::-webkit-slider-thumb {
|
||||
-webkit-transition: none;
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
|
|
@ -2529,14 +2508,11 @@ textarea.form-control-lg {
|
|||
background-color: #f1641e;
|
||||
border: 0;
|
||||
border-radius: 1rem;
|
||||
-moz-transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
|
||||
transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
appearance: none;
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.form-range::-moz-range-thumb {
|
||||
-moz-transition: none;
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
|
|
@ -2597,17 +2573,10 @@ textarea.form-control-lg {
|
|||
.form-floating > .form-control-plaintext {
|
||||
padding: 1rem 0.75rem;
|
||||
}
|
||||
.form-floating > .form-control::-moz-placeholder, .form-floating > .form-control-plaintext::-moz-placeholder {
|
||||
color: transparent;
|
||||
}
|
||||
.form-floating > .form-control::placeholder,
|
||||
.form-floating > .form-control-plaintext::placeholder {
|
||||
color: transparent;
|
||||
}
|
||||
.form-floating > .form-control:not(:-moz-placeholder-shown), .form-floating > .form-control-plaintext:not(:-moz-placeholder-shown) {
|
||||
padding-top: 1.625rem;
|
||||
padding-bottom: 0.625rem;
|
||||
}
|
||||
.form-floating > .form-control:focus, .form-floating > .form-control:not(:placeholder-shown),
|
||||
.form-floating > .form-control-plaintext:focus,
|
||||
.form-floating > .form-control-plaintext:not(:placeholder-shown) {
|
||||
|
|
@ -2623,10 +2592,6 @@ textarea.form-control-lg {
|
|||
padding-top: 1.625rem;
|
||||
padding-bottom: 0.625rem;
|
||||
}
|
||||
.form-floating > .form-control:not(:-moz-placeholder-shown) ~ label {
|
||||
color: rgba(var(--bs-body-color-rgb), 0.65);
|
||||
transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
|
||||
}
|
||||
.form-floating > .form-control:focus ~ label,
|
||||
.form-floating > .form-control:not(:placeholder-shown) ~ label,
|
||||
.form-floating > .form-control-plaintext ~ label,
|
||||
|
|
@ -2634,15 +2599,6 @@ textarea.form-control-lg {
|
|||
color: rgba(var(--bs-body-color-rgb), 0.65);
|
||||
transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
|
||||
}
|
||||
.form-floating > .form-control:not(:-moz-placeholder-shown) ~ label::after {
|
||||
position: absolute;
|
||||
inset: 1rem 0.375rem;
|
||||
z-index: -1;
|
||||
height: 1.5em;
|
||||
content: "";
|
||||
background-color: var(--bs-body-bg);
|
||||
border-radius: var(--bs-border-radius);
|
||||
}
|
||||
.form-floating > .form-control:focus ~ label::after,
|
||||
.form-floating > .form-control:not(:placeholder-shown) ~ label::after,
|
||||
.form-floating > .form-control-plaintext ~ label::after,
|
||||
|
|
@ -2966,9 +2922,7 @@ textarea.form-control-lg {
|
|||
text-align: center;
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
user-select: none;
|
||||
user-select: none;
|
||||
border: var(--bs-btn-border-width) solid var(--bs-btn-border-color);
|
||||
border-radius: var(--bs-btn-border-radius);
|
||||
background-color: var(--bs-btn-bg);
|
||||
|
|
@ -5353,9 +5307,7 @@ textarea.form-control-lg {
|
|||
}
|
||||
.btn-close:disabled, .btn-close.disabled {
|
||||
pointer-events: none;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
user-select: none;
|
||||
user-select: none;
|
||||
opacity: var(--bs-btn-close-disabled-opacity);
|
||||
}
|
||||
|
||||
|
|
@ -5405,7 +5357,6 @@ textarea.form-control-lg {
|
|||
--bs-toast-zindex: 1090;
|
||||
position: absolute;
|
||||
z-index: var(--bs-toast-zindex);
|
||||
width: -moz-max-content;
|
||||
width: max-content;
|
||||
max-width: 100%;
|
||||
pointer-events: none;
|
||||
|
|
@ -6306,8 +6257,6 @@ textarea.form-control-lg {
|
|||
border-right: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
}
|
||||
@media (max-width: 575.98px) {
|
||||
.offcanvas-sm.offcanvas-end {
|
||||
top: 0;
|
||||
right: 0;
|
||||
|
|
@ -6315,8 +6264,6 @@ textarea.form-control-lg {
|
|||
border-left: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
|
||||
transform: translateX(100%);
|
||||
}
|
||||
}
|
||||
@media (max-width: 575.98px) {
|
||||
.offcanvas-sm.offcanvas-top {
|
||||
top: 0;
|
||||
right: 0;
|
||||
|
|
@ -6326,8 +6273,6 @@ textarea.form-control-lg {
|
|||
border-bottom: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
|
||||
transform: translateY(-100%);
|
||||
}
|
||||
}
|
||||
@media (max-width: 575.98px) {
|
||||
.offcanvas-sm.offcanvas-bottom {
|
||||
right: 0;
|
||||
left: 0;
|
||||
|
|
@ -6336,13 +6281,9 @@ textarea.form-control-lg {
|
|||
border-top: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
|
||||
transform: translateY(100%);
|
||||
}
|
||||
}
|
||||
@media (max-width: 575.98px) {
|
||||
.offcanvas-sm.showing, .offcanvas-sm.show:not(.hiding) {
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
@media (max-width: 575.98px) {
|
||||
.offcanvas-sm.showing, .offcanvas-sm.hiding, .offcanvas-sm.show {
|
||||
visibility: visible;
|
||||
}
|
||||
|
|
@ -6394,8 +6335,6 @@ textarea.form-control-lg {
|
|||
border-right: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
}
|
||||
@media (max-width: 767.98px) {
|
||||
.offcanvas-md.offcanvas-end {
|
||||
top: 0;
|
||||
right: 0;
|
||||
|
|
@ -6403,8 +6342,6 @@ textarea.form-control-lg {
|
|||
border-left: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
|
||||
transform: translateX(100%);
|
||||
}
|
||||
}
|
||||
@media (max-width: 767.98px) {
|
||||
.offcanvas-md.offcanvas-top {
|
||||
top: 0;
|
||||
right: 0;
|
||||
|
|
@ -6414,8 +6351,6 @@ textarea.form-control-lg {
|
|||
border-bottom: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
|
||||
transform: translateY(-100%);
|
||||
}
|
||||
}
|
||||
@media (max-width: 767.98px) {
|
||||
.offcanvas-md.offcanvas-bottom {
|
||||
right: 0;
|
||||
left: 0;
|
||||
|
|
@ -6424,13 +6359,9 @@ textarea.form-control-lg {
|
|||
border-top: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
|
||||
transform: translateY(100%);
|
||||
}
|
||||
}
|
||||
@media (max-width: 767.98px) {
|
||||
.offcanvas-md.showing, .offcanvas-md.show:not(.hiding) {
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
@media (max-width: 767.98px) {
|
||||
.offcanvas-md.showing, .offcanvas-md.hiding, .offcanvas-md.show {
|
||||
visibility: visible;
|
||||
}
|
||||
|
|
@ -6482,8 +6413,6 @@ textarea.form-control-lg {
|
|||
border-right: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
}
|
||||
@media (max-width: 991.98px) {
|
||||
.offcanvas-lg.offcanvas-end {
|
||||
top: 0;
|
||||
right: 0;
|
||||
|
|
@ -6491,8 +6420,6 @@ textarea.form-control-lg {
|
|||
border-left: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
|
||||
transform: translateX(100%);
|
||||
}
|
||||
}
|
||||
@media (max-width: 991.98px) {
|
||||
.offcanvas-lg.offcanvas-top {
|
||||
top: 0;
|
||||
right: 0;
|
||||
|
|
@ -6502,8 +6429,6 @@ textarea.form-control-lg {
|
|||
border-bottom: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
|
||||
transform: translateY(-100%);
|
||||
}
|
||||
}
|
||||
@media (max-width: 991.98px) {
|
||||
.offcanvas-lg.offcanvas-bottom {
|
||||
right: 0;
|
||||
left: 0;
|
||||
|
|
@ -6512,13 +6437,9 @@ textarea.form-control-lg {
|
|||
border-top: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
|
||||
transform: translateY(100%);
|
||||
}
|
||||
}
|
||||
@media (max-width: 991.98px) {
|
||||
.offcanvas-lg.showing, .offcanvas-lg.show:not(.hiding) {
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
@media (max-width: 991.98px) {
|
||||
.offcanvas-lg.showing, .offcanvas-lg.hiding, .offcanvas-lg.show {
|
||||
visibility: visible;
|
||||
}
|
||||
|
|
@ -6570,8 +6491,6 @@ textarea.form-control-lg {
|
|||
border-right: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
}
|
||||
@media (max-width: 1199.98px) {
|
||||
.offcanvas-xl.offcanvas-end {
|
||||
top: 0;
|
||||
right: 0;
|
||||
|
|
@ -6579,8 +6498,6 @@ textarea.form-control-lg {
|
|||
border-left: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
|
||||
transform: translateX(100%);
|
||||
}
|
||||
}
|
||||
@media (max-width: 1199.98px) {
|
||||
.offcanvas-xl.offcanvas-top {
|
||||
top: 0;
|
||||
right: 0;
|
||||
|
|
@ -6590,8 +6507,6 @@ textarea.form-control-lg {
|
|||
border-bottom: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
|
||||
transform: translateY(-100%);
|
||||
}
|
||||
}
|
||||
@media (max-width: 1199.98px) {
|
||||
.offcanvas-xl.offcanvas-bottom {
|
||||
right: 0;
|
||||
left: 0;
|
||||
|
|
@ -6600,13 +6515,9 @@ textarea.form-control-lg {
|
|||
border-top: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
|
||||
transform: translateY(100%);
|
||||
}
|
||||
}
|
||||
@media (max-width: 1199.98px) {
|
||||
.offcanvas-xl.showing, .offcanvas-xl.show:not(.hiding) {
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1199.98px) {
|
||||
.offcanvas-xl.showing, .offcanvas-xl.hiding, .offcanvas-xl.show {
|
||||
visibility: visible;
|
||||
}
|
||||
|
|
@ -6658,8 +6569,6 @@ textarea.form-control-lg {
|
|||
border-right: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
}
|
||||
@media (max-width: 1399.98px) {
|
||||
.offcanvas-xxl.offcanvas-end {
|
||||
top: 0;
|
||||
right: 0;
|
||||
|
|
@ -6667,8 +6576,6 @@ textarea.form-control-lg {
|
|||
border-left: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
|
||||
transform: translateX(100%);
|
||||
}
|
||||
}
|
||||
@media (max-width: 1399.98px) {
|
||||
.offcanvas-xxl.offcanvas-top {
|
||||
top: 0;
|
||||
right: 0;
|
||||
|
|
@ -6678,8 +6585,6 @@ textarea.form-control-lg {
|
|||
border-bottom: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
|
||||
transform: translateY(-100%);
|
||||
}
|
||||
}
|
||||
@media (max-width: 1399.98px) {
|
||||
.offcanvas-xxl.offcanvas-bottom {
|
||||
right: 0;
|
||||
left: 0;
|
||||
|
|
@ -6688,13 +6593,9 @@ textarea.form-control-lg {
|
|||
border-top: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
|
||||
transform: translateY(100%);
|
||||
}
|
||||
}
|
||||
@media (max-width: 1399.98px) {
|
||||
.offcanvas-xxl.showing, .offcanvas-xxl.show:not(.hiding) {
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1399.98px) {
|
||||
.offcanvas-xxl.showing, .offcanvas-xxl.hiding, .offcanvas-xxl.show {
|
||||
visibility: visible;
|
||||
}
|
||||
|
|
@ -6849,17 +6750,14 @@ textarea.form-control-lg {
|
|||
}
|
||||
}
|
||||
.placeholder-wave {
|
||||
-webkit-mask-image: linear-gradient(130deg, #222 55%, rgba(0, 0, 0, 0.8) 75%, #222 95%);
|
||||
mask-image: linear-gradient(130deg, #222 55%, rgba(0, 0, 0, 0.8) 75%, #222 95%);
|
||||
-webkit-mask-size: 200% 100%;
|
||||
mask-size: 200% 100%;
|
||||
mask-image: linear-gradient(130deg, #222 55%, rgba(0, 0, 0, 0.8) 75%, #222 95%);
|
||||
mask-size: 200% 100%;
|
||||
animation: placeholder-wave 2s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes placeholder-wave {
|
||||
100% {
|
||||
-webkit-mask-position: -200% 0%;
|
||||
mask-position: -200% 0%;
|
||||
mask-position: -200% 0%;
|
||||
}
|
||||
}
|
||||
.clearfix::after {
|
||||
|
|
@ -7232,28 +7130,23 @@ textarea.form-control-lg {
|
|||
}
|
||||
|
||||
.object-fit-contain {
|
||||
-o-object-fit: contain !important;
|
||||
object-fit: contain !important;
|
||||
object-fit: contain !important;
|
||||
}
|
||||
|
||||
.object-fit-cover {
|
||||
-o-object-fit: cover !important;
|
||||
object-fit: cover !important;
|
||||
object-fit: cover !important;
|
||||
}
|
||||
|
||||
.object-fit-fill {
|
||||
-o-object-fit: fill !important;
|
||||
object-fit: fill !important;
|
||||
object-fit: fill !important;
|
||||
}
|
||||
|
||||
.object-fit-scale {
|
||||
-o-object-fit: scale-down !important;
|
||||
object-fit: scale-down !important;
|
||||
object-fit: scale-down !important;
|
||||
}
|
||||
|
||||
.object-fit-none {
|
||||
-o-object-fit: none !important;
|
||||
object-fit: none !important;
|
||||
object-fit: none !important;
|
||||
}
|
||||
|
||||
.opacity-0 {
|
||||
|
|
@ -8333,33 +8226,27 @@ textarea.form-control-lg {
|
|||
}
|
||||
|
||||
.column-gap-0 {
|
||||
-moz-column-gap: 0 !important;
|
||||
column-gap: 0 !important;
|
||||
column-gap: 0 !important;
|
||||
}
|
||||
|
||||
.column-gap-1 {
|
||||
-moz-column-gap: 0.25rem !important;
|
||||
column-gap: 0.25rem !important;
|
||||
column-gap: 0.25rem !important;
|
||||
}
|
||||
|
||||
.column-gap-2 {
|
||||
-moz-column-gap: 0.5rem !important;
|
||||
column-gap: 0.5rem !important;
|
||||
column-gap: 0.5rem !important;
|
||||
}
|
||||
|
||||
.column-gap-3 {
|
||||
-moz-column-gap: 1rem !important;
|
||||
column-gap: 1rem !important;
|
||||
column-gap: 1rem !important;
|
||||
}
|
||||
|
||||
.column-gap-4 {
|
||||
-moz-column-gap: 1.5rem !important;
|
||||
column-gap: 1.5rem !important;
|
||||
column-gap: 1.5rem !important;
|
||||
}
|
||||
|
||||
.column-gap-5 {
|
||||
-moz-column-gap: 3rem !important;
|
||||
column-gap: 3rem !important;
|
||||
column-gap: 3rem !important;
|
||||
}
|
||||
|
||||
.font-monospace {
|
||||
|
|
@ -8915,21 +8802,15 @@ textarea.form-control-lg {
|
|||
}
|
||||
|
||||
.user-select-all {
|
||||
-webkit-user-select: all !important;
|
||||
-moz-user-select: all !important;
|
||||
user-select: all !important;
|
||||
user-select: all !important;
|
||||
}
|
||||
|
||||
.user-select-auto {
|
||||
-webkit-user-select: auto !important;
|
||||
-moz-user-select: auto !important;
|
||||
user-select: auto !important;
|
||||
user-select: auto !important;
|
||||
}
|
||||
|
||||
.user-select-none {
|
||||
-webkit-user-select: none !important;
|
||||
-moz-user-select: none !important;
|
||||
user-select: none !important;
|
||||
user-select: none !important;
|
||||
}
|
||||
|
||||
.pe-none {
|
||||
|
|
@ -9195,24 +9076,19 @@ textarea.form-control-lg {
|
|||
float: none !important;
|
||||
}
|
||||
.object-fit-sm-contain {
|
||||
-o-object-fit: contain !important;
|
||||
object-fit: contain !important;
|
||||
object-fit: contain !important;
|
||||
}
|
||||
.object-fit-sm-cover {
|
||||
-o-object-fit: cover !important;
|
||||
object-fit: cover !important;
|
||||
object-fit: cover !important;
|
||||
}
|
||||
.object-fit-sm-fill {
|
||||
-o-object-fit: fill !important;
|
||||
object-fit: fill !important;
|
||||
object-fit: fill !important;
|
||||
}
|
||||
.object-fit-sm-scale {
|
||||
-o-object-fit: scale-down !important;
|
||||
object-fit: scale-down !important;
|
||||
object-fit: scale-down !important;
|
||||
}
|
||||
.object-fit-sm-none {
|
||||
-o-object-fit: none !important;
|
||||
object-fit: none !important;
|
||||
object-fit: none !important;
|
||||
}
|
||||
.d-sm-inline {
|
||||
display: inline !important;
|
||||
|
|
@ -9712,28 +9588,22 @@ textarea.form-control-lg {
|
|||
row-gap: 3rem !important;
|
||||
}
|
||||
.column-gap-sm-0 {
|
||||
-moz-column-gap: 0 !important;
|
||||
column-gap: 0 !important;
|
||||
column-gap: 0 !important;
|
||||
}
|
||||
.column-gap-sm-1 {
|
||||
-moz-column-gap: 0.25rem !important;
|
||||
column-gap: 0.25rem !important;
|
||||
column-gap: 0.25rem !important;
|
||||
}
|
||||
.column-gap-sm-2 {
|
||||
-moz-column-gap: 0.5rem !important;
|
||||
column-gap: 0.5rem !important;
|
||||
column-gap: 0.5rem !important;
|
||||
}
|
||||
.column-gap-sm-3 {
|
||||
-moz-column-gap: 1rem !important;
|
||||
column-gap: 1rem !important;
|
||||
column-gap: 1rem !important;
|
||||
}
|
||||
.column-gap-sm-4 {
|
||||
-moz-column-gap: 1.5rem !important;
|
||||
column-gap: 1.5rem !important;
|
||||
column-gap: 1.5rem !important;
|
||||
}
|
||||
.column-gap-sm-5 {
|
||||
-moz-column-gap: 3rem !important;
|
||||
column-gap: 3rem !important;
|
||||
column-gap: 3rem !important;
|
||||
}
|
||||
.text-sm-start {
|
||||
text-align: left !important;
|
||||
|
|
@ -9756,24 +9626,19 @@ textarea.form-control-lg {
|
|||
float: none !important;
|
||||
}
|
||||
.object-fit-md-contain {
|
||||
-o-object-fit: contain !important;
|
||||
object-fit: contain !important;
|
||||
object-fit: contain !important;
|
||||
}
|
||||
.object-fit-md-cover {
|
||||
-o-object-fit: cover !important;
|
||||
object-fit: cover !important;
|
||||
object-fit: cover !important;
|
||||
}
|
||||
.object-fit-md-fill {
|
||||
-o-object-fit: fill !important;
|
||||
object-fit: fill !important;
|
||||
object-fit: fill !important;
|
||||
}
|
||||
.object-fit-md-scale {
|
||||
-o-object-fit: scale-down !important;
|
||||
object-fit: scale-down !important;
|
||||
object-fit: scale-down !important;
|
||||
}
|
||||
.object-fit-md-none {
|
||||
-o-object-fit: none !important;
|
||||
object-fit: none !important;
|
||||
object-fit: none !important;
|
||||
}
|
||||
.d-md-inline {
|
||||
display: inline !important;
|
||||
|
|
@ -10273,28 +10138,22 @@ textarea.form-control-lg {
|
|||
row-gap: 3rem !important;
|
||||
}
|
||||
.column-gap-md-0 {
|
||||
-moz-column-gap: 0 !important;
|
||||
column-gap: 0 !important;
|
||||
column-gap: 0 !important;
|
||||
}
|
||||
.column-gap-md-1 {
|
||||
-moz-column-gap: 0.25rem !important;
|
||||
column-gap: 0.25rem !important;
|
||||
column-gap: 0.25rem !important;
|
||||
}
|
||||
.column-gap-md-2 {
|
||||
-moz-column-gap: 0.5rem !important;
|
||||
column-gap: 0.5rem !important;
|
||||
column-gap: 0.5rem !important;
|
||||
}
|
||||
.column-gap-md-3 {
|
||||
-moz-column-gap: 1rem !important;
|
||||
column-gap: 1rem !important;
|
||||
column-gap: 1rem !important;
|
||||
}
|
||||
.column-gap-md-4 {
|
||||
-moz-column-gap: 1.5rem !important;
|
||||
column-gap: 1.5rem !important;
|
||||
column-gap: 1.5rem !important;
|
||||
}
|
||||
.column-gap-md-5 {
|
||||
-moz-column-gap: 3rem !important;
|
||||
column-gap: 3rem !important;
|
||||
column-gap: 3rem !important;
|
||||
}
|
||||
.text-md-start {
|
||||
text-align: left !important;
|
||||
|
|
@ -10317,24 +10176,19 @@ textarea.form-control-lg {
|
|||
float: none !important;
|
||||
}
|
||||
.object-fit-lg-contain {
|
||||
-o-object-fit: contain !important;
|
||||
object-fit: contain !important;
|
||||
object-fit: contain !important;
|
||||
}
|
||||
.object-fit-lg-cover {
|
||||
-o-object-fit: cover !important;
|
||||
object-fit: cover !important;
|
||||
object-fit: cover !important;
|
||||
}
|
||||
.object-fit-lg-fill {
|
||||
-o-object-fit: fill !important;
|
||||
object-fit: fill !important;
|
||||
object-fit: fill !important;
|
||||
}
|
||||
.object-fit-lg-scale {
|
||||
-o-object-fit: scale-down !important;
|
||||
object-fit: scale-down !important;
|
||||
object-fit: scale-down !important;
|
||||
}
|
||||
.object-fit-lg-none {
|
||||
-o-object-fit: none !important;
|
||||
object-fit: none !important;
|
||||
object-fit: none !important;
|
||||
}
|
||||
.d-lg-inline {
|
||||
display: inline !important;
|
||||
|
|
@ -10834,28 +10688,22 @@ textarea.form-control-lg {
|
|||
row-gap: 3rem !important;
|
||||
}
|
||||
.column-gap-lg-0 {
|
||||
-moz-column-gap: 0 !important;
|
||||
column-gap: 0 !important;
|
||||
column-gap: 0 !important;
|
||||
}
|
||||
.column-gap-lg-1 {
|
||||
-moz-column-gap: 0.25rem !important;
|
||||
column-gap: 0.25rem !important;
|
||||
column-gap: 0.25rem !important;
|
||||
}
|
||||
.column-gap-lg-2 {
|
||||
-moz-column-gap: 0.5rem !important;
|
||||
column-gap: 0.5rem !important;
|
||||
column-gap: 0.5rem !important;
|
||||
}
|
||||
.column-gap-lg-3 {
|
||||
-moz-column-gap: 1rem !important;
|
||||
column-gap: 1rem !important;
|
||||
column-gap: 1rem !important;
|
||||
}
|
||||
.column-gap-lg-4 {
|
||||
-moz-column-gap: 1.5rem !important;
|
||||
column-gap: 1.5rem !important;
|
||||
column-gap: 1.5rem !important;
|
||||
}
|
||||
.column-gap-lg-5 {
|
||||
-moz-column-gap: 3rem !important;
|
||||
column-gap: 3rem !important;
|
||||
column-gap: 3rem !important;
|
||||
}
|
||||
.text-lg-start {
|
||||
text-align: left !important;
|
||||
|
|
@ -10878,24 +10726,19 @@ textarea.form-control-lg {
|
|||
float: none !important;
|
||||
}
|
||||
.object-fit-xl-contain {
|
||||
-o-object-fit: contain !important;
|
||||
object-fit: contain !important;
|
||||
object-fit: contain !important;
|
||||
}
|
||||
.object-fit-xl-cover {
|
||||
-o-object-fit: cover !important;
|
||||
object-fit: cover !important;
|
||||
object-fit: cover !important;
|
||||
}
|
||||
.object-fit-xl-fill {
|
||||
-o-object-fit: fill !important;
|
||||
object-fit: fill !important;
|
||||
object-fit: fill !important;
|
||||
}
|
||||
.object-fit-xl-scale {
|
||||
-o-object-fit: scale-down !important;
|
||||
object-fit: scale-down !important;
|
||||
object-fit: scale-down !important;
|
||||
}
|
||||
.object-fit-xl-none {
|
||||
-o-object-fit: none !important;
|
||||
object-fit: none !important;
|
||||
object-fit: none !important;
|
||||
}
|
||||
.d-xl-inline {
|
||||
display: inline !important;
|
||||
|
|
@ -11395,28 +11238,22 @@ textarea.form-control-lg {
|
|||
row-gap: 3rem !important;
|
||||
}
|
||||
.column-gap-xl-0 {
|
||||
-moz-column-gap: 0 !important;
|
||||
column-gap: 0 !important;
|
||||
column-gap: 0 !important;
|
||||
}
|
||||
.column-gap-xl-1 {
|
||||
-moz-column-gap: 0.25rem !important;
|
||||
column-gap: 0.25rem !important;
|
||||
column-gap: 0.25rem !important;
|
||||
}
|
||||
.column-gap-xl-2 {
|
||||
-moz-column-gap: 0.5rem !important;
|
||||
column-gap: 0.5rem !important;
|
||||
column-gap: 0.5rem !important;
|
||||
}
|
||||
.column-gap-xl-3 {
|
||||
-moz-column-gap: 1rem !important;
|
||||
column-gap: 1rem !important;
|
||||
column-gap: 1rem !important;
|
||||
}
|
||||
.column-gap-xl-4 {
|
||||
-moz-column-gap: 1.5rem !important;
|
||||
column-gap: 1.5rem !important;
|
||||
column-gap: 1.5rem !important;
|
||||
}
|
||||
.column-gap-xl-5 {
|
||||
-moz-column-gap: 3rem !important;
|
||||
column-gap: 3rem !important;
|
||||
column-gap: 3rem !important;
|
||||
}
|
||||
.text-xl-start {
|
||||
text-align: left !important;
|
||||
|
|
@ -11439,24 +11276,19 @@ textarea.form-control-lg {
|
|||
float: none !important;
|
||||
}
|
||||
.object-fit-xxl-contain {
|
||||
-o-object-fit: contain !important;
|
||||
object-fit: contain !important;
|
||||
object-fit: contain !important;
|
||||
}
|
||||
.object-fit-xxl-cover {
|
||||
-o-object-fit: cover !important;
|
||||
object-fit: cover !important;
|
||||
object-fit: cover !important;
|
||||
}
|
||||
.object-fit-xxl-fill {
|
||||
-o-object-fit: fill !important;
|
||||
object-fit: fill !important;
|
||||
object-fit: fill !important;
|
||||
}
|
||||
.object-fit-xxl-scale {
|
||||
-o-object-fit: scale-down !important;
|
||||
object-fit: scale-down !important;
|
||||
object-fit: scale-down !important;
|
||||
}
|
||||
.object-fit-xxl-none {
|
||||
-o-object-fit: none !important;
|
||||
object-fit: none !important;
|
||||
object-fit: none !important;
|
||||
}
|
||||
.d-xxl-inline {
|
||||
display: inline !important;
|
||||
|
|
@ -11956,28 +11788,22 @@ textarea.form-control-lg {
|
|||
row-gap: 3rem !important;
|
||||
}
|
||||
.column-gap-xxl-0 {
|
||||
-moz-column-gap: 0 !important;
|
||||
column-gap: 0 !important;
|
||||
column-gap: 0 !important;
|
||||
}
|
||||
.column-gap-xxl-1 {
|
||||
-moz-column-gap: 0.25rem !important;
|
||||
column-gap: 0.25rem !important;
|
||||
column-gap: 0.25rem !important;
|
||||
}
|
||||
.column-gap-xxl-2 {
|
||||
-moz-column-gap: 0.5rem !important;
|
||||
column-gap: 0.5rem !important;
|
||||
column-gap: 0.5rem !important;
|
||||
}
|
||||
.column-gap-xxl-3 {
|
||||
-moz-column-gap: 1rem !important;
|
||||
column-gap: 1rem !important;
|
||||
column-gap: 1rem !important;
|
||||
}
|
||||
.column-gap-xxl-4 {
|
||||
-moz-column-gap: 1.5rem !important;
|
||||
column-gap: 1.5rem !important;
|
||||
column-gap: 1.5rem !important;
|
||||
}
|
||||
.column-gap-xxl-5 {
|
||||
-moz-column-gap: 3rem !important;
|
||||
column-gap: 3rem !important;
|
||||
column-gap: 3rem !important;
|
||||
}
|
||||
.text-xxl-start {
|
||||
text-align: left !important;
|
||||
|
|
@ -12037,4 +11863,6 @@ textarea.form-control-lg {
|
|||
.d-print-none {
|
||||
display: none !important;
|
||||
}
|
||||
}/*# sourceMappingURL=litely-compact.css.map */
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=litely-compact.css.map */
|
||||
|
|
|
|||
|
|
@ -725,7 +725,11 @@ progress {
|
|||
|
||||
.container,
|
||||
.container-fluid,
|
||||
.container-lg {
|
||||
.container-xxl,
|
||||
.container-xl,
|
||||
.container-lg,
|
||||
.container-md,
|
||||
.container-sm {
|
||||
--bs-gutter-x: 1.5rem;
|
||||
--bs-gutter-y: 0;
|
||||
width: 100%;
|
||||
|
|
@ -735,11 +739,31 @@ progress {
|
|||
margin-left: auto;
|
||||
}
|
||||
|
||||
@media (min-width: 576px) {
|
||||
.container-sm, .container {
|
||||
max-width: 540px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.container-md, .container-sm, .container {
|
||||
max-width: 720px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 992px) {
|
||||
.container-lg, .container-md, .container-sm, .container {
|
||||
max-width: 960px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1200px) {
|
||||
.container-xl, .container-lg, .container-md, .container-sm, .container {
|
||||
max-width: 1140px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1400px) {
|
||||
.container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container {
|
||||
max-width: 1320px;
|
||||
}
|
||||
}
|
||||
:root {
|
||||
--bs-breakpoint-xs: 0;
|
||||
--bs-breakpoint-sm: 576px;
|
||||
|
|
@ -3866,7 +3890,11 @@ textarea.form-control-lg {
|
|||
}
|
||||
.navbar > .container,
|
||||
.navbar > .container-fluid,
|
||||
.navbar > .container-lg {
|
||||
.navbar > .container-sm,
|
||||
.navbar > .container-md,
|
||||
.navbar > .container-lg,
|
||||
.navbar > .container-xl,
|
||||
.navbar > .container-xxl {
|
||||
display: flex;
|
||||
flex-wrap: inherit;
|
||||
align-items: center;
|
||||
|
|
|
|||
|
|
@ -725,7 +725,11 @@ progress {
|
|||
|
||||
.container,
|
||||
.container-fluid,
|
||||
.container-lg {
|
||||
.container-xxl,
|
||||
.container-xl,
|
||||
.container-lg,
|
||||
.container-md,
|
||||
.container-sm {
|
||||
--bs-gutter-x: 1.5rem;
|
||||
--bs-gutter-y: 0;
|
||||
width: 100%;
|
||||
|
|
@ -735,11 +739,31 @@ progress {
|
|||
margin-left: auto;
|
||||
}
|
||||
|
||||
@media (min-width: 576px) {
|
||||
.container-sm, .container {
|
||||
max-width: 540px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.container-md, .container-sm, .container {
|
||||
max-width: 720px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 992px) {
|
||||
.container-lg, .container-md, .container-sm, .container {
|
||||
max-width: 960px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1200px) {
|
||||
.container-xl, .container-lg, .container-md, .container-sm, .container {
|
||||
max-width: 1140px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1400px) {
|
||||
.container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container {
|
||||
max-width: 1320px;
|
||||
}
|
||||
}
|
||||
:root {
|
||||
--bs-breakpoint-xs: 0;
|
||||
--bs-breakpoint-sm: 576px;
|
||||
|
|
@ -3866,7 +3890,11 @@ textarea.form-control-lg {
|
|||
}
|
||||
.navbar > .container,
|
||||
.navbar > .container-fluid,
|
||||
.navbar > .container-lg {
|
||||
.navbar > .container-sm,
|
||||
.navbar > .container-md,
|
||||
.navbar > .container-lg,
|
||||
.navbar > .container-xl,
|
||||
.navbar > .container-xxl {
|
||||
display: flex;
|
||||
flex-wrap: inherit;
|
||||
align-items: center;
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ import { Theme } from "./theme";
|
|||
|
||||
export class App extends Component<any, any> {
|
||||
private isoData: IsoDataOptionalSite = setIsoData(this.context);
|
||||
private readonly mainContentRef: RefObject<HTMLElement>;
|
||||
private readonly mainContentRef: RefObject<HTMLDivElement>;
|
||||
constructor(props: any, context: any) {
|
||||
super(props, context);
|
||||
this.mainContentRef = createRef();
|
||||
|
|
@ -44,7 +44,11 @@ export class App extends Component<any, any> {
|
|||
<Theme defaultTheme={siteView.local_site.default_theme} />
|
||||
)}
|
||||
<Navbar siteRes={siteRes} />
|
||||
<div className="mt-4 p-0 fl-1">
|
||||
<div
|
||||
tabIndex={-1}
|
||||
ref={this.mainContentRef}
|
||||
className="mt-4 p-0 fl-1"
|
||||
>
|
||||
<Switch>
|
||||
{routes.map(
|
||||
({ path, component: RouteComponent, fetchInitialData }) => (
|
||||
|
|
@ -59,16 +63,14 @@ export class App extends Component<any, any> {
|
|||
|
||||
return (
|
||||
<ErrorGuard>
|
||||
<main tabIndex={-1} ref={this.mainContentRef}>
|
||||
{RouteComponent &&
|
||||
(isAuthPath(path ?? "") ? (
|
||||
<AuthGuard>
|
||||
<RouteComponent {...routeProps} />
|
||||
</AuthGuard>
|
||||
) : (
|
||||
{RouteComponent &&
|
||||
(isAuthPath(path ?? "") ? (
|
||||
<AuthGuard>
|
||||
<RouteComponent {...routeProps} />
|
||||
))}
|
||||
</main>
|
||||
</AuthGuard>
|
||||
) : (
|
||||
<RouteComponent {...routeProps} />
|
||||
))}
|
||||
</ErrorGuard>
|
||||
);
|
||||
}}
|
||||
|
|
|
|||
|
|
@ -80,255 +80,245 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
|
|||
const person = UserService.Instance.myUserInfo?.local_user_view.person;
|
||||
return (
|
||||
<nav
|
||||
className="navbar navbar-expand-md navbar-light shadow-sm p-0 px-3 container-lg"
|
||||
className="navbar navbar-expand-md navbar-light shadow-sm p-0 px-3 container-flex"
|
||||
id="navbar"
|
||||
>
|
||||
<NavLink
|
||||
id="navTitle"
|
||||
to="/"
|
||||
title={siteView?.site.description ?? siteView?.site.name}
|
||||
className="d-flex align-items-center navbar-brand me-md-3"
|
||||
onMouseUp={linkEvent(this, handleCollapseClick)}
|
||||
>
|
||||
{siteView?.site.icon && showAvatars() && (
|
||||
<PictrsImage src={siteView.site.icon} icon />
|
||||
)}
|
||||
{siteView?.site.name}
|
||||
</NavLink>
|
||||
{person && (
|
||||
<ul className="navbar-nav d-flex flex-row ms-auto d-md-none">
|
||||
<li id="navMessages" className="nav-item nav-item-icon">
|
||||
<NavLink
|
||||
to="/inbox"
|
||||
className="p-1 nav-link border-0 nav-messages"
|
||||
title={I18NextService.i18n.t("unread_messages", {
|
||||
count: Number(this.state.unreadApplicationCountRes.state),
|
||||
formattedCount: numToSI(this.unreadInboxCount),
|
||||
})}
|
||||
onMouseUp={linkEvent(this, handleCollapseClick)}
|
||||
>
|
||||
<Icon icon="bell" />
|
||||
{this.unreadInboxCount > 0 && (
|
||||
<span className="mx-1 badge text-bg-light">
|
||||
{numToSI(this.unreadInboxCount)}
|
||||
</span>
|
||||
)}
|
||||
</NavLink>
|
||||
</li>
|
||||
{this.moderatesSomething && (
|
||||
<li className="nav-item nav-item-icon">
|
||||
<div className="container-lg">
|
||||
<NavLink
|
||||
id="navTitle"
|
||||
to="/"
|
||||
title={siteView?.site.description ?? siteView?.site.name}
|
||||
className="d-flex align-items-center navbar-brand me-md-3"
|
||||
onMouseUp={linkEvent(this, handleCollapseClick)}
|
||||
>
|
||||
{siteView?.site.icon && showAvatars() && (
|
||||
<PictrsImage src={siteView.site.icon} icon />
|
||||
)}
|
||||
{siteView?.site.name}
|
||||
</NavLink>
|
||||
{person && (
|
||||
<ul className="navbar-nav d-flex flex-row ms-auto d-md-none">
|
||||
<li id="navMessages" className="nav-item nav-item-icon">
|
||||
<NavLink
|
||||
to="/reports"
|
||||
className="p-1 nav-link border-0"
|
||||
title={I18NextService.i18n.t("unread_reports", {
|
||||
count: Number(this.unreadReportCount),
|
||||
formattedCount: numToSI(this.unreadReportCount),
|
||||
to="/inbox"
|
||||
className="p-1 nav-link border-0 nav-messages"
|
||||
title={I18NextService.i18n.t("unread_messages", {
|
||||
count: Number(this.state.unreadApplicationCountRes.state),
|
||||
formattedCount: numToSI(this.unreadInboxCount),
|
||||
})}
|
||||
onMouseUp={linkEvent(this, handleCollapseClick)}
|
||||
>
|
||||
<Icon icon="shield" />
|
||||
{this.unreadReportCount > 0 && (
|
||||
<Icon icon="bell" />
|
||||
{this.unreadInboxCount > 0 && (
|
||||
<span className="mx-1 badge text-bg-light">
|
||||
{numToSI(this.unreadReportCount)}
|
||||
{numToSI(this.unreadInboxCount)}
|
||||
</span>
|
||||
)}
|
||||
</NavLink>
|
||||
</li>
|
||||
)}
|
||||
{amAdmin() && (
|
||||
<li className="nav-item nav-item-icon">
|
||||
<NavLink
|
||||
to="/registration_applications"
|
||||
className="p-1 nav-link border-0"
|
||||
title={I18NextService.i18n.t(
|
||||
"unread_registration_applications",
|
||||
{
|
||||
count: Number(this.unreadApplicationCount),
|
||||
formattedCount: numToSI(this.unreadApplicationCount),
|
||||
}
|
||||
)}
|
||||
onMouseUp={linkEvent(this, handleCollapseClick)}
|
||||
>
|
||||
<Icon icon="clipboard" />
|
||||
{this.unreadApplicationCount > 0 && (
|
||||
<span className="mx-1 badge text-bg-light">
|
||||
{numToSI(this.unreadApplicationCount)}
|
||||
</span>
|
||||
)}
|
||||
</NavLink>
|
||||
</li>
|
||||
)}
|
||||
</ul>
|
||||
)}
|
||||
<button
|
||||
className="navbar-toggler border-0 p-1"
|
||||
type="button"
|
||||
aria-label="menu"
|
||||
data-tippy-content={I18NextService.i18n.t("expand_here")}
|
||||
data-bs-toggle="collapse"
|
||||
data-bs-target="#navbarDropdown"
|
||||
aria-controls="navbarDropdown"
|
||||
aria-expanded="false"
|
||||
ref={this.collapseButtonRef}
|
||||
>
|
||||
<Icon icon="menu" />
|
||||
</button>
|
||||
<div
|
||||
className="collapse navbar-collapse my-2"
|
||||
id="navbarDropdown"
|
||||
ref={this.mobileMenuRef}
|
||||
>
|
||||
<ul id="navbarLinks" className="me-auto navbar-nav">
|
||||
<li className="nav-item">
|
||||
<NavLink
|
||||
to="/communities"
|
||||
className="nav-link"
|
||||
title={I18NextService.i18n.t("communities")}
|
||||
onMouseUp={linkEvent(this, handleCollapseClick)}
|
||||
>
|
||||
{I18NextService.i18n.t("communities")}
|
||||
</NavLink>
|
||||
</li>
|
||||
<li className="nav-item">
|
||||
{/* TODO make sure this works: https://github.com/infernojs/inferno/issues/1608 */}
|
||||
<NavLink
|
||||
to={{
|
||||
pathname: "/create_post",
|
||||
search: "",
|
||||
hash: "",
|
||||
key: "",
|
||||
state: { prevPath: this.currentLocation },
|
||||
}}
|
||||
className="nav-link"
|
||||
title={I18NextService.i18n.t("create_post")}
|
||||
onMouseUp={linkEvent(this, handleCollapseClick)}
|
||||
>
|
||||
{I18NextService.i18n.t("create_post")}
|
||||
</NavLink>
|
||||
</li>
|
||||
{this.props.siteRes && canCreateCommunity(this.props.siteRes) && (
|
||||
<li className="nav-item">
|
||||
<NavLink
|
||||
to="/create_community"
|
||||
className="nav-link"
|
||||
title={I18NextService.i18n.t("create_community")}
|
||||
onMouseUp={linkEvent(this, handleCollapseClick)}
|
||||
>
|
||||
{I18NextService.i18n.t("create_community")}
|
||||
</NavLink>
|
||||
</li>
|
||||
)}
|
||||
<li className="nav-item">
|
||||
<a
|
||||
className="nav-link d-inline-flex align-items-center d-md-inline-block"
|
||||
title={I18NextService.i18n.t("support_lemmy")}
|
||||
href={donateLemmyUrl}
|
||||
>
|
||||
<Icon icon="heart" classes="small" />
|
||||
<span className="d-inline ms-1 d-md-none ms-md-0">
|
||||
{I18NextService.i18n.t("support_lemmy")}
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<ul id="navbarIcons" className="navbar-nav">
|
||||
<li id="navSearch" className="nav-item">
|
||||
<NavLink
|
||||
to="/search"
|
||||
className="nav-link d-inline-flex align-items-center d-md-inline-block"
|
||||
title={I18NextService.i18n.t("search")}
|
||||
onMouseUp={linkEvent(this, handleCollapseClick)}
|
||||
>
|
||||
<Icon icon="search" />
|
||||
<span className="d-inline ms-1 d-md-none ms-md-0">
|
||||
{I18NextService.i18n.t("search")}
|
||||
</span>
|
||||
</NavLink>
|
||||
</li>
|
||||
{amAdmin() && (
|
||||
<li id="navAdmin" className="nav-item">
|
||||
<NavLink
|
||||
to="/admin"
|
||||
className="nav-link d-inline-flex align-items-center d-md-inline-block"
|
||||
title={I18NextService.i18n.t("admin_settings")}
|
||||
onMouseUp={linkEvent(this, handleCollapseClick)}
|
||||
>
|
||||
<Icon icon="settings" />
|
||||
<span className="d-inline ms-1 d-md-none ms-md-0">
|
||||
{I18NextService.i18n.t("admin_settings")}
|
||||
</span>
|
||||
</NavLink>
|
||||
</li>
|
||||
)}
|
||||
{person ? (
|
||||
<>
|
||||
<li id="navMessages" className="nav-item">
|
||||
{this.moderatesSomething && (
|
||||
<li className="nav-item nav-item-icon">
|
||||
<NavLink
|
||||
className="nav-link d-inline-flex align-items-center d-md-inline-block"
|
||||
to="/inbox"
|
||||
title={I18NextService.i18n.t("unread_messages", {
|
||||
count: Number(this.unreadInboxCount),
|
||||
formattedCount: numToSI(this.unreadInboxCount),
|
||||
to="/reports"
|
||||
className="p-1 nav-link border-0"
|
||||
title={I18NextService.i18n.t("unread_reports", {
|
||||
count: Number(this.unreadReportCount),
|
||||
formattedCount: numToSI(this.unreadReportCount),
|
||||
})}
|
||||
onMouseUp={linkEvent(this, handleCollapseClick)}
|
||||
>
|
||||
<Icon icon="bell" />
|
||||
<span className="badge text-bg-light d-inline ms-1 d-md-none ms-md-0">
|
||||
{I18NextService.i18n.t("unread_messages", {
|
||||
count: Number(this.unreadInboxCount),
|
||||
formattedCount: numToSI(this.unreadInboxCount),
|
||||
})}
|
||||
</span>
|
||||
{this.unreadInboxCount > 0 && (
|
||||
<Icon icon="shield" />
|
||||
{this.unreadReportCount > 0 && (
|
||||
<span className="mx-1 badge text-bg-light">
|
||||
{numToSI(this.unreadInboxCount)}
|
||||
{numToSI(this.unreadReportCount)}
|
||||
</span>
|
||||
)}
|
||||
</NavLink>
|
||||
</li>
|
||||
{this.moderatesSomething && (
|
||||
<li id="navModeration" className="nav-item">
|
||||
)}
|
||||
{amAdmin() && (
|
||||
<li className="nav-item nav-item-icon">
|
||||
<NavLink
|
||||
to="/registration_applications"
|
||||
className="p-1 nav-link border-0"
|
||||
title={I18NextService.i18n.t(
|
||||
"unread_registration_applications",
|
||||
{
|
||||
count: Number(this.unreadApplicationCount),
|
||||
formattedCount: numToSI(this.unreadApplicationCount),
|
||||
}
|
||||
)}
|
||||
onMouseUp={linkEvent(this, handleCollapseClick)}
|
||||
>
|
||||
<Icon icon="clipboard" />
|
||||
{this.unreadApplicationCount > 0 && (
|
||||
<span className="mx-1 badge text-bg-light">
|
||||
{numToSI(this.unreadApplicationCount)}
|
||||
</span>
|
||||
)}
|
||||
</NavLink>
|
||||
</li>
|
||||
)}
|
||||
</ul>
|
||||
)}
|
||||
<button
|
||||
className="navbar-toggler border-0 p-1"
|
||||
type="button"
|
||||
aria-label="menu"
|
||||
data-tippy-content={I18NextService.i18n.t("expand_here")}
|
||||
data-bs-toggle="collapse"
|
||||
data-bs-target="#navbarDropdown"
|
||||
aria-controls="navbarDropdown"
|
||||
aria-expanded="false"
|
||||
ref={this.collapseButtonRef}
|
||||
>
|
||||
<Icon icon="menu" />
|
||||
</button>
|
||||
<div
|
||||
className="collapse navbar-collapse my-2"
|
||||
id="navbarDropdown"
|
||||
ref={this.mobileMenuRef}
|
||||
>
|
||||
<ul id="navbarLinks" className="me-auto navbar-nav">
|
||||
<li className="nav-item">
|
||||
<NavLink
|
||||
to="/communities"
|
||||
className="nav-link"
|
||||
title={I18NextService.i18n.t("communities")}
|
||||
onMouseUp={linkEvent(this, handleCollapseClick)}
|
||||
>
|
||||
{I18NextService.i18n.t("communities")}
|
||||
</NavLink>
|
||||
</li>
|
||||
<li className="nav-item">
|
||||
{/* TODO make sure this works: https://github.com/infernojs/inferno/issues/1608 */}
|
||||
<NavLink
|
||||
to={{
|
||||
pathname: "/create_post",
|
||||
search: "",
|
||||
hash: "",
|
||||
key: "",
|
||||
state: { prevPath: this.currentLocation },
|
||||
}}
|
||||
className="nav-link"
|
||||
title={I18NextService.i18n.t("create_post")}
|
||||
onMouseUp={linkEvent(this, handleCollapseClick)}
|
||||
>
|
||||
{I18NextService.i18n.t("create_post")}
|
||||
</NavLink>
|
||||
</li>
|
||||
{this.props.siteRes && canCreateCommunity(this.props.siteRes) && (
|
||||
<li className="nav-item">
|
||||
<NavLink
|
||||
to="/create_community"
|
||||
className="nav-link"
|
||||
title={I18NextService.i18n.t("create_community")}
|
||||
onMouseUp={linkEvent(this, handleCollapseClick)}
|
||||
>
|
||||
{I18NextService.i18n.t("create_community")}
|
||||
</NavLink>
|
||||
</li>
|
||||
)}
|
||||
<li className="nav-item">
|
||||
<a
|
||||
className="nav-link d-inline-flex align-items-center d-md-inline-block"
|
||||
title={I18NextService.i18n.t("support_lemmy")}
|
||||
href={donateLemmyUrl}
|
||||
>
|
||||
<Icon icon="heart" classes="small" />
|
||||
<span className="d-inline ms-1 d-md-none ms-md-0">
|
||||
{I18NextService.i18n.t("support_lemmy")}
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<ul id="navbarIcons" className="navbar-nav">
|
||||
<li id="navSearch" className="nav-item">
|
||||
<NavLink
|
||||
to="/search"
|
||||
className="nav-link d-inline-flex align-items-center d-md-inline-block"
|
||||
title={I18NextService.i18n.t("search")}
|
||||
onMouseUp={linkEvent(this, handleCollapseClick)}
|
||||
>
|
||||
<Icon icon="search" />
|
||||
<span className="d-inline ms-1 d-md-none ms-md-0">
|
||||
{I18NextService.i18n.t("search")}
|
||||
</span>
|
||||
</NavLink>
|
||||
</li>
|
||||
{amAdmin() && (
|
||||
<li id="navAdmin" className="nav-item">
|
||||
<NavLink
|
||||
to="/admin"
|
||||
className="nav-link d-inline-flex align-items-center d-md-inline-block"
|
||||
title={I18NextService.i18n.t("admin_settings")}
|
||||
onMouseUp={linkEvent(this, handleCollapseClick)}
|
||||
>
|
||||
<Icon icon="settings" />
|
||||
<span className="d-inline ms-1 d-md-none ms-md-0">
|
||||
{I18NextService.i18n.t("admin_settings")}
|
||||
</span>
|
||||
</NavLink>
|
||||
</li>
|
||||
)}
|
||||
{person ? (
|
||||
<>
|
||||
<li id="navMessages" className="nav-item">
|
||||
<NavLink
|
||||
className="nav-link d-inline-flex align-items-center d-md-inline-block"
|
||||
to="/reports"
|
||||
title={I18NextService.i18n.t("unread_reports", {
|
||||
count: Number(this.unreadReportCount),
|
||||
formattedCount: numToSI(this.unreadReportCount),
|
||||
to="/inbox"
|
||||
title={I18NextService.i18n.t("unread_messages", {
|
||||
count: Number(this.unreadInboxCount),
|
||||
formattedCount: numToSI(this.unreadInboxCount),
|
||||
})}
|
||||
onMouseUp={linkEvent(this, handleCollapseClick)}
|
||||
>
|
||||
<Icon icon="shield" />
|
||||
<Icon icon="bell" />
|
||||
<span className="badge text-bg-light d-inline ms-1 d-md-none ms-md-0">
|
||||
{I18NextService.i18n.t("unread_reports", {
|
||||
count: Number(this.unreadReportCount),
|
||||
formattedCount: numToSI(this.unreadReportCount),
|
||||
{I18NextService.i18n.t("unread_messages", {
|
||||
count: Number(this.unreadInboxCount),
|
||||
formattedCount: numToSI(this.unreadInboxCount),
|
||||
})}
|
||||
</span>
|
||||
{this.unreadReportCount > 0 && (
|
||||
{this.unreadInboxCount > 0 && (
|
||||
<span className="mx-1 badge text-bg-light">
|
||||
{numToSI(this.unreadReportCount)}
|
||||
{numToSI(this.unreadInboxCount)}
|
||||
</span>
|
||||
)}
|
||||
</NavLink>
|
||||
</li>
|
||||
)}
|
||||
{amAdmin() && (
|
||||
<li id="navApplications" className="nav-item">
|
||||
<NavLink
|
||||
to="/registration_applications"
|
||||
className="nav-link d-inline-flex align-items-center d-md-inline-block"
|
||||
title={I18NextService.i18n.t(
|
||||
"unread_registration_applications",
|
||||
{
|
||||
count: Number(this.unreadApplicationCount),
|
||||
formattedCount: numToSI(this.unreadApplicationCount),
|
||||
}
|
||||
)}
|
||||
onMouseUp={linkEvent(this, handleCollapseClick)}
|
||||
>
|
||||
<Icon icon="clipboard" />
|
||||
<span className="badge text-bg-light d-inline ms-1 d-md-none ms-md-0">
|
||||
{I18NextService.i18n.t(
|
||||
{this.moderatesSomething && (
|
||||
<li id="navModeration" className="nav-item">
|
||||
<NavLink
|
||||
className="nav-link d-inline-flex align-items-center d-md-inline-block"
|
||||
to="/reports"
|
||||
title={I18NextService.i18n.t("unread_reports", {
|
||||
count: Number(this.unreadReportCount),
|
||||
formattedCount: numToSI(this.unreadReportCount),
|
||||
})}
|
||||
onMouseUp={linkEvent(this, handleCollapseClick)}
|
||||
>
|
||||
<Icon icon="shield" />
|
||||
<span className="badge text-bg-light d-inline ms-1 d-md-none ms-md-0">
|
||||
{I18NextService.i18n.t("unread_reports", {
|
||||
count: Number(this.unreadReportCount),
|
||||
formattedCount: numToSI(this.unreadReportCount),
|
||||
})}
|
||||
</span>
|
||||
{this.unreadReportCount > 0 && (
|
||||
<span className="mx-1 badge text-bg-light">
|
||||
{numToSI(this.unreadReportCount)}
|
||||
</span>
|
||||
)}
|
||||
</NavLink>
|
||||
</li>
|
||||
)}
|
||||
{amAdmin() && (
|
||||
<li id="navApplications" className="nav-item">
|
||||
<NavLink
|
||||
to="/registration_applications"
|
||||
className="nav-link d-inline-flex align-items-center d-md-inline-block"
|
||||
title={I18NextService.i18n.t(
|
||||
"unread_registration_applications",
|
||||
{
|
||||
count: Number(this.unreadApplicationCount),
|
||||
|
|
@ -337,95 +327,109 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
|
|||
),
|
||||
}
|
||||
)}
|
||||
</span>
|
||||
{this.unreadApplicationCount > 0 && (
|
||||
<span className="mx-1 badge text-bg-light">
|
||||
{numToSI(this.unreadApplicationCount)}
|
||||
onMouseUp={linkEvent(this, handleCollapseClick)}
|
||||
>
|
||||
<Icon icon="clipboard" />
|
||||
<span className="badge text-bg-light d-inline ms-1 d-md-none ms-md-0">
|
||||
{I18NextService.i18n.t(
|
||||
"unread_registration_applications",
|
||||
{
|
||||
count: Number(this.unreadApplicationCount),
|
||||
formattedCount: numToSI(
|
||||
this.unreadApplicationCount
|
||||
),
|
||||
}
|
||||
)}
|
||||
</span>
|
||||
)}
|
||||
{this.unreadApplicationCount > 0 && (
|
||||
<span className="mx-1 badge text-bg-light">
|
||||
{numToSI(this.unreadApplicationCount)}
|
||||
</span>
|
||||
)}
|
||||
</NavLink>
|
||||
</li>
|
||||
)}
|
||||
{person && (
|
||||
<li id="dropdownUser" className="dropdown">
|
||||
<button
|
||||
type="button"
|
||||
className="btn dropdown-toggle"
|
||||
aria-expanded="false"
|
||||
data-bs-toggle="dropdown"
|
||||
>
|
||||
{showAvatars() && person.avatar && (
|
||||
<PictrsImage src={person.avatar} icon />
|
||||
)}
|
||||
{person.display_name ?? person.name}
|
||||
</button>
|
||||
<ul
|
||||
className="dropdown-menu"
|
||||
style={{ "min-width": "fit-content" }}
|
||||
>
|
||||
<li>
|
||||
<NavLink
|
||||
to={`/u/${person.name}`}
|
||||
className="dropdown-item px-2"
|
||||
title={I18NextService.i18n.t("profile")}
|
||||
onMouseUp={linkEvent(this, handleCollapseClick)}
|
||||
>
|
||||
<Icon icon="user" classes="me-1" />
|
||||
{I18NextService.i18n.t("profile")}
|
||||
</NavLink>
|
||||
</li>
|
||||
<li>
|
||||
<NavLink
|
||||
to="/settings"
|
||||
className="dropdown-item px-2"
|
||||
title={I18NextService.i18n.t("settings")}
|
||||
onMouseUp={linkEvent(this, handleCollapseClick)}
|
||||
>
|
||||
<Icon icon="settings" classes="me-1" />
|
||||
{I18NextService.i18n.t("settings")}
|
||||
</NavLink>
|
||||
</li>
|
||||
<li>
|
||||
<hr className="dropdown-divider" />
|
||||
</li>
|
||||
<li>
|
||||
<button
|
||||
className="dropdown-item btn btn-link px-2"
|
||||
onClick={linkEvent(this, handleLogOut)}
|
||||
>
|
||||
<Icon icon="log-out" classes="me-1" />
|
||||
{I18NextService.i18n.t("logout")}
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<li className="nav-item">
|
||||
<NavLink
|
||||
to="/login"
|
||||
className="nav-link"
|
||||
title={I18NextService.i18n.t("login")}
|
||||
onMouseUp={linkEvent(this, handleCollapseClick)}
|
||||
>
|
||||
{I18NextService.i18n.t("login")}
|
||||
</NavLink>
|
||||
</li>
|
||||
)}
|
||||
{person && (
|
||||
<li id="dropdownUser" className="dropdown">
|
||||
<button
|
||||
type="button"
|
||||
className="btn dropdown-toggle"
|
||||
aria-expanded="false"
|
||||
data-bs-toggle="dropdown"
|
||||
<li className="nav-item">
|
||||
<NavLink
|
||||
to="/signup"
|
||||
className="nav-link"
|
||||
title={I18NextService.i18n.t("sign_up")}
|
||||
onMouseUp={linkEvent(this, handleCollapseClick)}
|
||||
>
|
||||
{showAvatars() && person.avatar && (
|
||||
<PictrsImage src={person.avatar} icon />
|
||||
)}
|
||||
{person.display_name ?? person.name}
|
||||
</button>
|
||||
<ul
|
||||
className="dropdown-menu"
|
||||
style={{ "min-width": "fit-content" }}
|
||||
>
|
||||
<li>
|
||||
<NavLink
|
||||
to={`/u/${person.name}`}
|
||||
className="dropdown-item px-2"
|
||||
title={I18NextService.i18n.t("profile")}
|
||||
onMouseUp={linkEvent(this, handleCollapseClick)}
|
||||
>
|
||||
<Icon icon="user" classes="me-1" />
|
||||
{I18NextService.i18n.t("profile")}
|
||||
</NavLink>
|
||||
</li>
|
||||
<li>
|
||||
<NavLink
|
||||
to="/settings"
|
||||
className="dropdown-item px-2"
|
||||
title={I18NextService.i18n.t("settings")}
|
||||
onMouseUp={linkEvent(this, handleCollapseClick)}
|
||||
>
|
||||
<Icon icon="settings" classes="me-1" />
|
||||
{I18NextService.i18n.t("settings")}
|
||||
</NavLink>
|
||||
</li>
|
||||
<li>
|
||||
<hr className="dropdown-divider" />
|
||||
</li>
|
||||
<li>
|
||||
<button
|
||||
className="dropdown-item btn btn-link px-2"
|
||||
onClick={linkEvent(this, handleLogOut)}
|
||||
>
|
||||
<Icon icon="log-out" classes="me-1" />
|
||||
{I18NextService.i18n.t("logout")}
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
{I18NextService.i18n.t("sign_up")}
|
||||
</NavLink>
|
||||
</li>
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<li className="nav-item">
|
||||
<NavLink
|
||||
to="/login"
|
||||
className="nav-link"
|
||||
title={I18NextService.i18n.t("login")}
|
||||
onMouseUp={linkEvent(this, handleCollapseClick)}
|
||||
>
|
||||
{I18NextService.i18n.t("login")}
|
||||
</NavLink>
|
||||
</li>
|
||||
<li className="nav-item">
|
||||
<NavLink
|
||||
to="/signup"
|
||||
className="nav-link"
|
||||
title={I18NextService.i18n.t("sign_up")}
|
||||
onMouseUp={linkEvent(this, handleCollapseClick)}
|
||||
>
|
||||
{I18NextService.i18n.t("sign_up")}
|
||||
</NavLink>
|
||||
</li>
|
||||
</>
|
||||
)}
|
||||
</ul>
|
||||
</>
|
||||
)}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
import { myAuthRequired } from "@utils/app";
|
||||
import getUserInterfaceLangId from "@utils/app/user-interface-language";
|
||||
import { capitalizeFirstLetter } from "@utils/helpers";
|
||||
import classNames from "classnames";
|
||||
import { Component } from "inferno";
|
||||
import { T } from "inferno-i18next-dess";
|
||||
import { Link } from "inferno-router";
|
||||
|
|
@ -45,9 +46,7 @@ export class CommentForm extends Component<CommentFormProps, any> {
|
|||
|
||||
return (
|
||||
<div
|
||||
className={["comment-form", "mb-3", this.props.containerClass].join(
|
||||
" "
|
||||
)}
|
||||
className={classNames("comment-form mb-3", this.props.containerClass)}
|
||||
>
|
||||
{UserService.Instance.myUserInfo ? (
|
||||
<MarkdownTextArea
|
||||
|
|
|
|||
|
|
@ -156,171 +156,160 @@ export class MarkdownTextArea extends Component<
|
|||
!this.state.submitted
|
||||
}
|
||||
/>
|
||||
<div className="mb-3 row">
|
||||
<div className="col-12">
|
||||
<div className="rounded bg-light border">
|
||||
<div className="d-flex flex-wrap border-bottom">
|
||||
{this.getFormatButton("bold", this.handleInsertBold)}
|
||||
{this.getFormatButton("italic", this.handleInsertItalic)}
|
||||
{this.getFormatButton("link", this.handleInsertLink)}
|
||||
<EmojiPicker
|
||||
onEmojiClick={e => this.handleEmoji(this, e)}
|
||||
disabled={this.isDisabled}
|
||||
></EmojiPicker>
|
||||
<form className="btn btn-sm text-muted fw-bold">
|
||||
<label
|
||||
htmlFor={`file-upload-${this.id}`}
|
||||
className={`mb-0 ${
|
||||
UserService.Instance.myUserInfo && "pointer"
|
||||
}`}
|
||||
data-tippy-content={I18NextService.i18n.t("upload_image")}
|
||||
>
|
||||
{this.state.imageUploadStatus ? (
|
||||
<Spinner />
|
||||
) : (
|
||||
<Icon icon="image" classes="icon-inline" />
|
||||
)}
|
||||
</label>
|
||||
<input
|
||||
id={`file-upload-${this.id}`}
|
||||
type="file"
|
||||
accept="image/*,video/*"
|
||||
name="file"
|
||||
className="d-none"
|
||||
multiple
|
||||
disabled={
|
||||
!UserService.Instance.myUserInfo || this.isDisabled
|
||||
}
|
||||
onChange={linkEvent(this, this.handleImageUpload)}
|
||||
/>
|
||||
</form>
|
||||
{this.getFormatButton("header", this.handleInsertHeader)}
|
||||
{this.getFormatButton(
|
||||
"strikethrough",
|
||||
this.handleInsertStrikethrough
|
||||
<div className="rounded bg-light border mb-3">
|
||||
<div className="d-flex flex-wrap border-bottom">
|
||||
{this.getFormatButton("bold", this.handleInsertBold)}
|
||||
{this.getFormatButton("italic", this.handleInsertItalic)}
|
||||
{this.getFormatButton("link", this.handleInsertLink)}
|
||||
<EmojiPicker
|
||||
onEmojiClick={e => this.handleEmoji(this, e)}
|
||||
disabled={this.isDisabled}
|
||||
></EmojiPicker>
|
||||
<form className="btn btn-sm text-muted fw-bold">
|
||||
<label
|
||||
htmlFor={`file-upload-${this.id}`}
|
||||
className={`mb-0 ${
|
||||
UserService.Instance.myUserInfo && "pointer"
|
||||
}`}
|
||||
data-tippy-content={I18NextService.i18n.t("upload_image")}
|
||||
>
|
||||
{this.state.imageUploadStatus ? (
|
||||
<Spinner />
|
||||
) : (
|
||||
<Icon icon="image" classes="icon-inline" />
|
||||
)}
|
||||
{this.getFormatButton("quote", this.handleInsertQuote)}
|
||||
{this.getFormatButton("list", this.handleInsertList)}
|
||||
{this.getFormatButton("code", this.handleInsertCode)}
|
||||
{this.getFormatButton("subscript", this.handleInsertSubscript)}
|
||||
{this.getFormatButton(
|
||||
"superscript",
|
||||
this.handleInsertSuperscript
|
||||
)}
|
||||
{this.getFormatButton("spoiler", this.handleInsertSpoiler)}
|
||||
<a
|
||||
href={markdownHelpUrl}
|
||||
className="btn btn-sm text-muted fw-bold"
|
||||
title={I18NextService.i18n.t("formatting_help")}
|
||||
rel={relTags}
|
||||
>
|
||||
<Icon icon="help-circle" classes="icon-inline" />
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<textarea
|
||||
id={this.id}
|
||||
className={classNames(
|
||||
"form-control border-0 rounded-top-0 rounded-bottom",
|
||||
{
|
||||
"d-none": this.state.previewMode,
|
||||
}
|
||||
)}
|
||||
value={this.state.content}
|
||||
onInput={linkEvent(this, this.handleContentChange)}
|
||||
onPaste={linkEvent(this, this.handleImageUploadPaste)}
|
||||
onKeyDown={linkEvent(this, this.handleKeyBinds)}
|
||||
required
|
||||
disabled={this.isDisabled}
|
||||
rows={2}
|
||||
maxLength={
|
||||
this.props.maxLength ?? markdownFieldCharacterLimit
|
||||
}
|
||||
placeholder={this.props.placeholder}
|
||||
/>
|
||||
{this.state.previewMode && this.state.content && (
|
||||
<div
|
||||
className="card border-secondary card-body md-div"
|
||||
dangerouslySetInnerHTML={mdToHtml(this.state.content)}
|
||||
/>
|
||||
)}
|
||||
{this.state.imageUploadStatus &&
|
||||
this.state.imageUploadStatus.total > 1 && (
|
||||
<ProgressBar
|
||||
className="mt-2"
|
||||
striped
|
||||
animated
|
||||
value={this.state.imageUploadStatus.uploaded}
|
||||
max={this.state.imageUploadStatus.total}
|
||||
text={
|
||||
I18NextService.i18n.t("pictures_uploded_progess", {
|
||||
uploaded: this.state.imageUploadStatus.uploaded,
|
||||
total: this.state.imageUploadStatus.total,
|
||||
}) ?? undefined
|
||||
}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
<label className="visually-hidden" htmlFor={this.id}>
|
||||
{I18NextService.i18n.t("body")}
|
||||
</label>
|
||||
</div>
|
||||
<input
|
||||
id={`file-upload-${this.id}`}
|
||||
type="file"
|
||||
accept="image/*,video/*"
|
||||
name="file"
|
||||
className="d-none"
|
||||
multiple
|
||||
disabled={!UserService.Instance.myUserInfo || this.isDisabled}
|
||||
onChange={linkEvent(this, this.handleImageUpload)}
|
||||
/>
|
||||
</form>
|
||||
{this.getFormatButton("header", this.handleInsertHeader)}
|
||||
{this.getFormatButton(
|
||||
"strikethrough",
|
||||
this.handleInsertStrikethrough
|
||||
)}
|
||||
{this.getFormatButton("quote", this.handleInsertQuote)}
|
||||
{this.getFormatButton("list", this.handleInsertList)}
|
||||
{this.getFormatButton("code", this.handleInsertCode)}
|
||||
{this.getFormatButton("subscript", this.handleInsertSubscript)}
|
||||
{this.getFormatButton("superscript", this.handleInsertSuperscript)}
|
||||
{this.getFormatButton("spoiler", this.handleInsertSpoiler)}
|
||||
<a
|
||||
href={markdownHelpUrl}
|
||||
className="btn btn-sm text-muted fw-bold"
|
||||
title={I18NextService.i18n.t("formatting_help")}
|
||||
rel={relTags}
|
||||
>
|
||||
<Icon icon="help-circle" classes="icon-inline" />
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div className="col-12 d-flex align-items-center flex-wrap mt-2">
|
||||
{this.props.showLanguage && (
|
||||
<LanguageSelect
|
||||
iconVersion
|
||||
allLanguages={this.props.allLanguages}
|
||||
// Only set the selected language ID if it exists as an option
|
||||
// in the dropdown; otherwise, set it to 0 (Undetermined)
|
||||
selectedLanguageIds={
|
||||
languageId && this.props.siteLanguages.includes(languageId)
|
||||
? [languageId]
|
||||
: [0]
|
||||
<div>
|
||||
<textarea
|
||||
id={this.id}
|
||||
className={classNames(
|
||||
"form-control border-0 rounded-top-0 rounded-bottom",
|
||||
{
|
||||
"d-none": this.state.previewMode,
|
||||
}
|
||||
siteLanguages={this.props.siteLanguages}
|
||||
onChange={this.handleLanguageChange}
|
||||
disabled={this.isDisabled}
|
||||
)}
|
||||
value={this.state.content}
|
||||
onInput={linkEvent(this, this.handleContentChange)}
|
||||
onPaste={linkEvent(this, this.handleImageUploadPaste)}
|
||||
onKeyDown={linkEvent(this, this.handleKeyBinds)}
|
||||
required
|
||||
disabled={this.isDisabled}
|
||||
rows={2}
|
||||
maxLength={this.props.maxLength ?? markdownFieldCharacterLimit}
|
||||
placeholder={this.props.placeholder}
|
||||
/>
|
||||
{this.state.previewMode && this.state.content && (
|
||||
<div
|
||||
className="card border-secondary card-body md-div"
|
||||
dangerouslySetInnerHTML={mdToHtml(this.state.content)}
|
||||
/>
|
||||
)}
|
||||
{this.state.imageUploadStatus &&
|
||||
this.state.imageUploadStatus.total > 1 && (
|
||||
<ProgressBar
|
||||
className="mt-2"
|
||||
striped
|
||||
animated
|
||||
value={this.state.imageUploadStatus.uploaded}
|
||||
max={this.state.imageUploadStatus.total}
|
||||
text={
|
||||
I18NextService.i18n.t("pictures_uploded_progess", {
|
||||
uploaded: this.state.imageUploadStatus.uploaded,
|
||||
total: this.state.imageUploadStatus.total,
|
||||
}) ?? undefined
|
||||
}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
<label className="visually-hidden" htmlFor={this.id}>
|
||||
{I18NextService.i18n.t("body")}
|
||||
</label>
|
||||
</div>
|
||||
|
||||
{/* A flex expander */}
|
||||
<div className="flex-grow-1"></div>
|
||||
<div className="d-flex align-items-center flex-wrap mt-2">
|
||||
{this.props.showLanguage && (
|
||||
<LanguageSelect
|
||||
iconVersion
|
||||
allLanguages={this.props.allLanguages}
|
||||
// Only set the selected language ID if it exists as an option
|
||||
// in the dropdown; otherwise, set it to 0 (Undetermined)
|
||||
selectedLanguageIds={
|
||||
languageId && this.props.siteLanguages.includes(languageId)
|
||||
? [languageId]
|
||||
: [0]
|
||||
}
|
||||
siteLanguages={this.props.siteLanguages}
|
||||
onChange={this.handleLanguageChange}
|
||||
disabled={this.isDisabled}
|
||||
/>
|
||||
)}
|
||||
|
||||
{this.props.replyType && (
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-sm btn-secondary ms-2"
|
||||
onClick={linkEvent(this, this.handleReplyCancel)}
|
||||
>
|
||||
{I18NextService.i18n.t("cancel")}
|
||||
</button>
|
||||
)}
|
||||
{/* A flex expander */}
|
||||
<div className="flex-grow-1"></div>
|
||||
|
||||
{this.props.replyType && (
|
||||
<button
|
||||
type="button"
|
||||
disabled={!this.state.content}
|
||||
className={classNames("btn btn-sm btn-secondary ms-2", {
|
||||
active: this.state.previewMode,
|
||||
})}
|
||||
onClick={linkEvent(this, this.handlePreviewToggle)}
|
||||
className="btn btn-sm btn-secondary ms-2"
|
||||
onClick={linkEvent(this, this.handleReplyCancel)}
|
||||
>
|
||||
{this.state.previewMode
|
||||
? I18NextService.i18n.t("edit")
|
||||
: I18NextService.i18n.t("preview")}
|
||||
{I18NextService.i18n.t("cancel")}
|
||||
</button>
|
||||
{this.props.buttonTitle && (
|
||||
<button
|
||||
type="submit"
|
||||
className="btn btn-sm btn-secondary ms-2"
|
||||
disabled={this.isDisabled || !this.state.content}
|
||||
>
|
||||
{this.state.loading && <Spinner className="me-1" />}
|
||||
{this.props.buttonTitle}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
<button
|
||||
type="button"
|
||||
disabled={!this.state.content}
|
||||
className={classNames("btn btn-sm btn-secondary ms-2", {
|
||||
active: this.state.previewMode,
|
||||
})}
|
||||
onClick={linkEvent(this, this.handlePreviewToggle)}
|
||||
>
|
||||
{this.state.previewMode
|
||||
? I18NextService.i18n.t("edit")
|
||||
: I18NextService.i18n.t("preview")}
|
||||
</button>
|
||||
{this.props.buttonTitle && (
|
||||
<button
|
||||
type="submit"
|
||||
className="btn btn-sm btn-secondary ms-2"
|
||||
disabled={this.isDisabled || !this.state.content}
|
||||
>
|
||||
{this.state.loading && <Spinner className="me-1" />}
|
||||
{this.props.buttonTitle}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -174,7 +174,9 @@ export class VoteButtons extends Component<VoteButtonsProps, VoteButtonsState> {
|
|||
|
||||
render() {
|
||||
return (
|
||||
<div className={`vote-bar col-1 pe-0 small text-center`}>
|
||||
<div
|
||||
className={`vote-bar col-1 pe-0 small text-center d-flex flex-column justify-content-center`}
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
className={`btn-animate btn btn-link p-0 ${
|
||||
|
|
|
|||
|
|
@ -101,7 +101,7 @@ export class Communities extends Component<any, CommunitiesState> {
|
|||
case "success": {
|
||||
const { listingType, page } = this.getCommunitiesQueryParams();
|
||||
return (
|
||||
<div>
|
||||
<>
|
||||
<h1 className="h4">
|
||||
{I18NextService.i18n.t("list_of_communities")}
|
||||
</h1>
|
||||
|
|
@ -114,28 +114,28 @@ export class Communities extends Component<any, CommunitiesState> {
|
|||
onChange={this.handleListingTypeChange}
|
||||
/>
|
||||
</div>
|
||||
<div className="col-auto">{this.searchForm()}</div>
|
||||
{this.searchForm()}
|
||||
</div>
|
||||
|
||||
<div className="table-responsive">
|
||||
<table
|
||||
id="community_table"
|
||||
className="table table-sm table-hover"
|
||||
className="table table-sm table-hover align-middle text-end"
|
||||
>
|
||||
<thead className="pointer">
|
||||
<tr>
|
||||
<th>{I18NextService.i18n.t("name")}</th>
|
||||
<th className="text-right">
|
||||
{I18NextService.i18n.t("subscribers")}
|
||||
<th className="text-start">
|
||||
{I18NextService.i18n.t("name")}
|
||||
</th>
|
||||
<th className="text-right">
|
||||
<th>{I18NextService.i18n.t("subscribers")}</th>
|
||||
<th>
|
||||
{I18NextService.i18n.t("users")} /{" "}
|
||||
{I18NextService.i18n.t("month")}
|
||||
</th>
|
||||
<th className="text-right d-none d-lg-table-cell">
|
||||
<th className="d-none d-lg-table-cell">
|
||||
{I18NextService.i18n.t("posts")}
|
||||
</th>
|
||||
<th className="text-right d-none d-lg-table-cell">
|
||||
<th className="d-none d-lg-table-cell">
|
||||
{I18NextService.i18n.t("comments")}
|
||||
</th>
|
||||
<th></th>
|
||||
|
|
@ -145,56 +145,40 @@ export class Communities extends Component<any, CommunitiesState> {
|
|||
{this.state.listCommunitiesResponse.data.communities.map(
|
||||
cv => (
|
||||
<tr key={cv.community.id}>
|
||||
<td>
|
||||
<td className="text-start">
|
||||
<CommunityLink community={cv.community} />
|
||||
</td>
|
||||
<td className="text-right">
|
||||
{numToSI(cv.counts.subscribers)}
|
||||
</td>
|
||||
<td className="text-right">
|
||||
{numToSI(cv.counts.users_active_month)}
|
||||
</td>
|
||||
<td className="text-right d-none d-lg-table-cell">
|
||||
<td>{numToSI(cv.counts.subscribers)}</td>
|
||||
<td>{numToSI(cv.counts.users_active_month)}</td>
|
||||
<td className="d-none d-lg-table-cell">
|
||||
{numToSI(cv.counts.posts)}
|
||||
</td>
|
||||
<td className="text-right d-none d-lg-table-cell">
|
||||
<td className="d-none d-lg-table-cell">
|
||||
{numToSI(cv.counts.comments)}
|
||||
</td>
|
||||
<td className="text-right">
|
||||
{cv.subscribed == "Subscribed" && (
|
||||
<button
|
||||
className="btn btn-link d-inline-block"
|
||||
onClick={linkEvent(
|
||||
{
|
||||
i: this,
|
||||
communityId: cv.community.id,
|
||||
follow: false,
|
||||
},
|
||||
this.handleFollow
|
||||
)}
|
||||
>
|
||||
{I18NextService.i18n.t("unsubscribe")}
|
||||
</button>
|
||||
)}
|
||||
{cv.subscribed === "NotSubscribed" && (
|
||||
<button
|
||||
className="btn btn-link d-inline-block"
|
||||
onClick={linkEvent(
|
||||
{
|
||||
i: this,
|
||||
communityId: cv.community.id,
|
||||
follow: true,
|
||||
},
|
||||
this.handleFollow
|
||||
)}
|
||||
>
|
||||
{I18NextService.i18n.t("subscribe")}
|
||||
</button>
|
||||
)}
|
||||
{cv.subscribed === "Pending" && (
|
||||
<td>
|
||||
{cv.subscribed === "Pending" ? (
|
||||
<div className="text-warning d-inline-block">
|
||||
{I18NextService.i18n.t("subscribe_pending")}
|
||||
</div>
|
||||
) : (
|
||||
<button
|
||||
className="btn btn-link d-inline-block"
|
||||
onClick={linkEvent(
|
||||
{
|
||||
i: this,
|
||||
communityId: cv.community.id,
|
||||
follow: cv.subscribed !== "Subscribed",
|
||||
},
|
||||
this.handleFollow
|
||||
)}
|
||||
>
|
||||
{I18NextService.i18n.t(
|
||||
`${
|
||||
cv.subscribed === "NotSubscribed" ? "un" : ""
|
||||
}subscribe`
|
||||
)}
|
||||
</button>
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
|
|
@ -204,7 +188,7 @@ export class Communities extends Component<any, CommunitiesState> {
|
|||
</table>
|
||||
</div>
|
||||
<Paginator page={page} onChange={this.handlePageChange} />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
@ -212,42 +196,38 @@ export class Communities extends Component<any, CommunitiesState> {
|
|||
|
||||
render() {
|
||||
return (
|
||||
<div className="communities container-lg">
|
||||
<main className="communities container-lg mx-1 mx-md-auto">
|
||||
<HtmlTags
|
||||
title={this.documentTitle}
|
||||
path={this.context.router.route.match.url}
|
||||
/>
|
||||
{this.renderListings()}
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
searchForm() {
|
||||
return (
|
||||
<form
|
||||
className="row mb-2"
|
||||
className="d-flex mb-2 col-auto flex-nowrap"
|
||||
onSubmit={linkEvent(this, this.handleSearchSubmit)}
|
||||
>
|
||||
<div className="col-auto">
|
||||
<input
|
||||
type="text"
|
||||
id="communities-search"
|
||||
className="form-control"
|
||||
value={this.state.searchText}
|
||||
placeholder={`${I18NextService.i18n.t("search")}...`}
|
||||
onInput={linkEvent(this, this.handleSearchChange)}
|
||||
required
|
||||
minLength={3}
|
||||
/>
|
||||
</div>
|
||||
<div className="col-auto">
|
||||
<label className="visually-hidden" htmlFor="communities-search">
|
||||
{I18NextService.i18n.t("search")}
|
||||
</label>
|
||||
<button type="submit" className="btn btn-secondary">
|
||||
<span>{I18NextService.i18n.t("search")}</span>
|
||||
</button>
|
||||
</div>
|
||||
<label className="visually-hidden" htmlFor="communities-search">
|
||||
{I18NextService.i18n.t("search")}
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="communities-search"
|
||||
className="form-control me-1"
|
||||
value={this.state.searchText}
|
||||
placeholder={`${I18NextService.i18n.t("search")}...`}
|
||||
onInput={linkEvent(this, this.handleSearchChange)}
|
||||
required
|
||||
minLength={3}
|
||||
/>
|
||||
<button type="submit" className="btn btn-secondary">
|
||||
{I18NextService.i18n.t("search")}
|
||||
</button>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -200,41 +200,36 @@ export class CommunityForm extends Component<
|
|||
</div>
|
||||
|
||||
{this.props.enableNsfw && (
|
||||
<div className="mb-3 row">
|
||||
<legend className="col-form-label col-sm-2 pt-0">
|
||||
<div className="form-check mb-3">
|
||||
<label className="form-check-label pt-0" htmlFor="community-nsfw">
|
||||
{I18NextService.i18n.t("nsfw")}
|
||||
</legend>
|
||||
<div className="col-10">
|
||||
<div className="form-check">
|
||||
<input
|
||||
className="form-check-input position-static"
|
||||
id="community-nsfw"
|
||||
type="checkbox"
|
||||
checked={this.state.form.nsfw}
|
||||
onChange={linkEvent(this, this.handleCommunityNsfwChange)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</label>
|
||||
<input
|
||||
className="form-check-input"
|
||||
id="community-nsfw"
|
||||
type="checkbox"
|
||||
checked={this.state.form.nsfw}
|
||||
onChange={linkEvent(this, this.handleCommunityNsfwChange)}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
<div className="mb-3 row">
|
||||
<legend className="col-form-label col-6 pt-0">
|
||||
<div className="form-check mb-3">
|
||||
<label
|
||||
className="form-check-label pt-0"
|
||||
htmlFor="community-only-mods-can-post"
|
||||
>
|
||||
{I18NextService.i18n.t("only_mods_can_post_in_community")}
|
||||
</legend>
|
||||
<div className="col-6">
|
||||
<div className="form-check">
|
||||
<input
|
||||
className="form-check-input position-static"
|
||||
id="community-only-mods-can-post"
|
||||
type="checkbox"
|
||||
checked={this.state.form.posting_restricted_to_mods}
|
||||
onChange={linkEvent(
|
||||
this,
|
||||
this.handleCommunityPostingRestrictedToMods
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</label>
|
||||
<input
|
||||
className="form-check-input"
|
||||
id="community-only-mods-can-post"
|
||||
type="checkbox"
|
||||
checked={this.state.form.posting_restricted_to_mods}
|
||||
onChange={linkEvent(
|
||||
this,
|
||||
this.handleCommunityPostingRestrictedToMods
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<LanguageSelect
|
||||
allLanguages={this.props.allLanguages}
|
||||
|
|
|
|||
|
|
@ -316,33 +316,31 @@ export class Community extends Component<
|
|||
image={res.community_view.community.icon}
|
||||
/>
|
||||
|
||||
<div className="row">
|
||||
<div className="col-12 col-md-8">
|
||||
{this.communityInfo(res)}
|
||||
<div className="d-block d-md-none">
|
||||
<button
|
||||
className="btn btn-secondary d-inline-block mb-2 me-3"
|
||||
onClick={linkEvent(this, this.handleShowSidebarMobile)}
|
||||
>
|
||||
{I18NextService.i18n.t("sidebar")}{" "}
|
||||
<Icon
|
||||
icon={
|
||||
this.state.showSidebarMobile
|
||||
? `minus-square`
|
||||
: `plus-square`
|
||||
}
|
||||
classes="icon-inline"
|
||||
/>
|
||||
</button>
|
||||
{this.state.showSidebarMobile && this.sidebar(res)}
|
||||
</div>
|
||||
{this.selects(res)}
|
||||
{this.listings(res)}
|
||||
<Paginator page={page} onChange={this.handlePageChange} />
|
||||
</div>
|
||||
<div className="d-none d-md-block col-md-4">
|
||||
{this.sidebar(res)}
|
||||
<main className="col-12 col-md-8 col-lg-9">
|
||||
{this.communityInfo(res)}
|
||||
<div className="d-block d-md-none">
|
||||
<button
|
||||
className="btn btn-secondary d-inline-block mb-2 me-3"
|
||||
onClick={linkEvent(this, this.handleShowSidebarMobile)}
|
||||
>
|
||||
{I18NextService.i18n.t("sidebar")}{" "}
|
||||
<Icon
|
||||
icon={
|
||||
this.state.showSidebarMobile
|
||||
? `minus-square`
|
||||
: `plus-square`
|
||||
}
|
||||
classes="icon-inline"
|
||||
/>
|
||||
</button>
|
||||
{this.state.showSidebarMobile && this.sidebar(res)}
|
||||
</div>
|
||||
{this.selects(res)}
|
||||
{this.listings(res)}
|
||||
<Paginator page={page} onChange={this.handlePageChange} />
|
||||
</main>
|
||||
<div className="d-none d-md-block col-md-4 col-lg-3">
|
||||
{this.sidebar(res)}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
|
|
@ -352,7 +350,9 @@ export class Community extends Component<
|
|||
|
||||
render() {
|
||||
return (
|
||||
<div className="community container-lg">{this.renderCommunity()}</div>
|
||||
<div className="community container-lg mx-1 mx-md-auto row">
|
||||
{this.renderCommunity()}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -32,25 +32,23 @@ export class CreateCommunity extends Component<any, CreateCommunityState> {
|
|||
|
||||
render() {
|
||||
return (
|
||||
<div className="create-community container-lg">
|
||||
<main className="create-community container-lg row mx-1 mx-md-auto">
|
||||
<HtmlTags
|
||||
title={this.documentTitle}
|
||||
path={this.context.router.route.match.url}
|
||||
/>
|
||||
<div className="row">
|
||||
<div className="col-12 col-lg-6 offset-lg-3 mb-4">
|
||||
<h5>{I18NextService.i18n.t("create_community")}</h5>
|
||||
<CommunityForm
|
||||
onUpsertCommunity={this.handleCommunityCreate}
|
||||
enableNsfw={enableNsfw(this.state.siteRes)}
|
||||
allLanguages={this.state.siteRes.all_languages}
|
||||
siteLanguages={this.state.siteRes.discussion_languages}
|
||||
communityLanguages={this.state.siteRes.discussion_languages}
|
||||
loading={this.state.loading}
|
||||
/>
|
||||
</div>
|
||||
<div className="col-12 col-lg-6 offset-lg-3 mb-4">
|
||||
<h5>{I18NextService.i18n.t("create_community")}</h5>
|
||||
<CommunityForm
|
||||
onUpsertCommunity={this.handleCommunityCreate}
|
||||
enableNsfw={enableNsfw(this.state.siteRes)}
|
||||
allLanguages={this.state.siteRes.all_languages}
|
||||
siteLanguages={this.state.siteRes.discussion_languages}
|
||||
communityLanguages={this.state.siteRes.discussion_languages}
|
||||
loading={this.state.loading}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -103,7 +103,7 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
|
|||
|
||||
render() {
|
||||
return (
|
||||
<div className="community-sidebar">
|
||||
<aside className="community-sidebar">
|
||||
{!this.state.showEdit ? (
|
||||
this.sidebar()
|
||||
) : (
|
||||
|
|
@ -117,7 +117,7 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
|
|||
enableNsfw={this.props.enableNsfw}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</aside>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -125,42 +125,40 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
|
|||
const myUSerInfo = UserService.Instance.myUserInfo;
|
||||
const { name, actor_id } = this.props.community_view.community;
|
||||
return (
|
||||
<aside className="mb-3">
|
||||
<div id="sidebarContainer">
|
||||
<section id="sidebarMain" className="card border-secondary mb-3">
|
||||
<div className="card-body">
|
||||
{this.communityTitle()}
|
||||
{this.props.editable && this.adminButtons()}
|
||||
{myUSerInfo && this.subscribe()}
|
||||
{this.canPost && this.createPost()}
|
||||
{myUSerInfo && this.blockCommunity()}
|
||||
{!myUSerInfo && (
|
||||
<div className="alert alert-info" role="alert">
|
||||
<T
|
||||
i18nKey="community_not_logged_in_alert"
|
||||
interpolation={{
|
||||
community: name,
|
||||
instance: hostname(actor_id),
|
||||
}}
|
||||
>
|
||||
#<code className="user-select-all">#</code>#
|
||||
</T>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
<section id="sidebarInfo" className="card border-secondary mb-3">
|
||||
<div className="card-body">
|
||||
{this.description()}
|
||||
<Badges
|
||||
communityId={this.props.community_view.community.id}
|
||||
counts={this.props.community_view.counts}
|
||||
/>
|
||||
{this.mods()}
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</aside>
|
||||
<div id="sidebarContainer" className="mb-3">
|
||||
<section id="sidebarMain" className="card border-secondary mb-3">
|
||||
<div className="card-body">
|
||||
{this.communityTitle()}
|
||||
{this.props.editable && this.adminButtons()}
|
||||
{myUSerInfo && this.subscribe()}
|
||||
{this.canPost && this.createPost()}
|
||||
{myUSerInfo && this.blockCommunity()}
|
||||
{!myUSerInfo && (
|
||||
<div className="alert alert-info" role="alert">
|
||||
<T
|
||||
i18nKey="community_not_logged_in_alert"
|
||||
interpolation={{
|
||||
community: name,
|
||||
instance: hostname(actor_id),
|
||||
}}
|
||||
>
|
||||
#<code className="user-select-all">#</code>#
|
||||
</T>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
<section id="sidebarInfo" className="card border-secondary mb-3">
|
||||
<div className="card-body">
|
||||
{this.description()}
|
||||
<Badges
|
||||
communityId={this.props.community_view.community.id}
|
||||
counts={this.props.community_view.counts}
|
||||
/>
|
||||
{this.mods()}
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -117,7 +117,7 @@ export class AdminSettings extends Component<any, AdminSettingsState> {
|
|||
: undefined;
|
||||
|
||||
return (
|
||||
<div className="admin-settings container-lg">
|
||||
<main className="admin-settings container-lg row mx-1 mx-md-auto">
|
||||
<HtmlTags
|
||||
title={this.documentTitle}
|
||||
path={this.context.router.route.match.url}
|
||||
|
|
@ -220,7 +220,7 @@ export class AdminSettings extends Component<any, AdminSettingsState> {
|
|||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -380,27 +380,30 @@ export class Home extends Component<any, HomeState> {
|
|||
} = this.state;
|
||||
|
||||
return (
|
||||
<div className="home container-lg">
|
||||
<div className="home container-lg row mx-1 mx-md-auto">
|
||||
<HtmlTags
|
||||
title={this.documentTitle}
|
||||
path={this.context.router.route.match.url}
|
||||
/>
|
||||
{site_setup && (
|
||||
<div className="row">
|
||||
<main role="main" className="col-12 col-md-8">
|
||||
<>
|
||||
<main role="main" className="col-12 col-md-8 col-lg-9">
|
||||
{tagline && (
|
||||
<div
|
||||
id="tagline"
|
||||
dangerouslySetInnerHTML={mdToHtml(tagline)}
|
||||
></div>
|
||||
)}
|
||||
<div className="d-block d-md-none">{this.mobileView}</div>
|
||||
<div className="d-block d-md-none row">{this.mobileView}</div>
|
||||
{this.posts}
|
||||
</main>
|
||||
<aside className="d-none d-md-block col-md-4">
|
||||
<aside
|
||||
id="sidebarContainer"
|
||||
className="d-none d-md-block col-md-4 col-lg-3"
|
||||
>
|
||||
{this.mySidebar}
|
||||
</aside>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
|
@ -423,45 +426,43 @@ export class Home extends Component<any, HomeState> {
|
|||
} = this.state;
|
||||
|
||||
return (
|
||||
<div className="row">
|
||||
<div className="col-12">
|
||||
{this.hasFollows && (
|
||||
<MobileButton
|
||||
textKey="subscribed"
|
||||
show={showSubscribedMobile}
|
||||
onClick={linkEvent(this, this.handleShowSubscribedMobile)}
|
||||
/>
|
||||
)}
|
||||
<div className="col-12">
|
||||
{this.hasFollows && (
|
||||
<MobileButton
|
||||
textKey="trending"
|
||||
show={showTrendingMobile}
|
||||
onClick={linkEvent(this, this.handleShowTrendingMobile)}
|
||||
textKey="subscribed"
|
||||
show={showSubscribedMobile}
|
||||
onClick={linkEvent(this, this.handleShowSubscribedMobile)}
|
||||
/>
|
||||
<MobileButton
|
||||
textKey="sidebar"
|
||||
show={showSidebarMobile}
|
||||
onClick={linkEvent(this, this.handleShowSidebarMobile)}
|
||||
)}
|
||||
<MobileButton
|
||||
textKey="trending"
|
||||
show={showTrendingMobile}
|
||||
onClick={linkEvent(this, this.handleShowTrendingMobile)}
|
||||
/>
|
||||
<MobileButton
|
||||
textKey="sidebar"
|
||||
show={showSidebarMobile}
|
||||
onClick={linkEvent(this, this.handleShowSidebarMobile)}
|
||||
/>
|
||||
{showSidebarMobile && (
|
||||
<SiteSidebar
|
||||
site={site}
|
||||
admins={admins}
|
||||
counts={counts}
|
||||
showLocal={showLocal(this.isoData)}
|
||||
isMobile={true}
|
||||
/>
|
||||
{showSidebarMobile && (
|
||||
<SiteSidebar
|
||||
site={site}
|
||||
admins={admins}
|
||||
counts={counts}
|
||||
showLocal={showLocal(this.isoData)}
|
||||
isMobile={true}
|
||||
/>
|
||||
)}
|
||||
{showTrendingMobile && (
|
||||
<div className="card border-secondary mb-3">
|
||||
{this.trendingCommunities()}
|
||||
</div>
|
||||
)}
|
||||
{showSubscribedMobile && (
|
||||
<div className="card border-secondary mb-3">
|
||||
{this.subscribedCommunities(true)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
{showTrendingMobile && (
|
||||
<div className="card border-secondary mb-3">
|
||||
{this.trendingCommunities()}
|
||||
</div>
|
||||
)}
|
||||
{showSubscribedMobile && (
|
||||
<div className="card border-secondary mb-3">
|
||||
{this.subscribedCommunities(true)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -475,7 +476,7 @@ export class Home extends Component<any, HomeState> {
|
|||
} = this.state;
|
||||
|
||||
return (
|
||||
<div id="sidebarContainer">
|
||||
<>
|
||||
<section id="sidebarMain" className="card border-secondary mb-3">
|
||||
{this.trendingCommunities()}
|
||||
</section>
|
||||
|
|
@ -495,7 +496,7 @@ export class Home extends Component<any, HomeState> {
|
|||
</section>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -646,11 +647,9 @@ export class Home extends Component<any, HomeState> {
|
|||
|
||||
return (
|
||||
<div className="main-content-wrapper">
|
||||
<div>
|
||||
{this.selects}
|
||||
{this.listings}
|
||||
<Paginator page={page} onChange={this.handlePageChange} />
|
||||
</div>
|
||||
{this.selects}
|
||||
{this.listings}
|
||||
<Paginator page={page} onChange={this.handlePageChange} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -85,24 +85,24 @@ export class Instances extends Component<any, InstancesState> {
|
|||
case "success": {
|
||||
const instances = this.state.instancesRes.data.federated_instances;
|
||||
return instances ? (
|
||||
<div className="row">
|
||||
<div className="col-md-6">
|
||||
<>
|
||||
<div className="col-md-6 col-xl-4">
|
||||
<h5>{I18NextService.i18n.t("linked_instances")}</h5>
|
||||
{this.itemList(instances.linked)}
|
||||
</div>
|
||||
{instances.allowed && instances.allowed.length > 0 && (
|
||||
<div className="col-md-6">
|
||||
<div className="col-md-6 col-xl-4">
|
||||
<h5>{I18NextService.i18n.t("allowed_instances")}</h5>
|
||||
{this.itemList(instances.allowed)}
|
||||
</div>
|
||||
)}
|
||||
{instances.blocked && instances.blocked.length > 0 && (
|
||||
<div className="col-md-6">
|
||||
<div className="col-md-6 col-xl-4">
|
||||
<h5>{I18NextService.i18n.t("blocked_instances")}</h5>
|
||||
{this.itemList(instances.blocked)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<></>
|
||||
);
|
||||
|
|
@ -112,13 +112,13 @@ export class Instances extends Component<any, InstancesState> {
|
|||
|
||||
render() {
|
||||
return (
|
||||
<div className="home-instances container-lg">
|
||||
<main className="home-instances container-lg row mx-1 mx-md-auto">
|
||||
<HtmlTags
|
||||
title={this.documentTitle}
|
||||
path={this.context.router.route.match.url}
|
||||
/>
|
||||
{this.renderInstances()}
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@ export class Legal extends Component<any, LegalState> {
|
|||
render() {
|
||||
const legal = this.state.siteRes.site_view.local_site.legal_information;
|
||||
return (
|
||||
<div className="legal container-lg">
|
||||
<main className="legal container-lg mx-1 mx-md-auto">
|
||||
<HtmlTags
|
||||
title={this.documentTitle}
|
||||
path={this.context.router.route.match.url}
|
||||
|
|
@ -34,7 +34,7 @@ export class Legal extends Component<any, LegalState> {
|
|||
{legal && (
|
||||
<div className="md-div" dangerouslySetInnerHTML={mdToHtml(legal)} />
|
||||
)}
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -53,107 +53,103 @@ export class Login extends Component<any, State> {
|
|||
|
||||
render() {
|
||||
return (
|
||||
<div className="login container-lg">
|
||||
<main className="login container-lg row mx-1 mx-md-auto">
|
||||
<HtmlTags
|
||||
title={this.documentTitle}
|
||||
path={this.context.router.route.match.url}
|
||||
/>
|
||||
<div className="row">
|
||||
<div className="col-12 col-lg-6 offset-lg-3">{this.loginForm()}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-12 col-lg-6 offset-lg-3">{this.loginForm()}</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
loginForm() {
|
||||
return (
|
||||
<div>
|
||||
<form onSubmit={linkEvent(this, this.handleLoginSubmit)}>
|
||||
<h5>{I18NextService.i18n.t("login")}</h5>
|
||||
<form onSubmit={linkEvent(this, this.handleLoginSubmit)}>
|
||||
<h5>{I18NextService.i18n.t("login")}</h5>
|
||||
<div className="mb-3 row">
|
||||
<label
|
||||
className="col-sm-2 col-form-label"
|
||||
htmlFor="login-email-or-username"
|
||||
>
|
||||
{I18NextService.i18n.t("email_or_username")}
|
||||
</label>
|
||||
<div className="col-sm-10">
|
||||
<input
|
||||
type="text"
|
||||
className="form-control"
|
||||
id="login-email-or-username"
|
||||
value={this.state.form.username_or_email}
|
||||
onInput={linkEvent(this, this.handleLoginUsernameChange)}
|
||||
autoComplete="email"
|
||||
required
|
||||
minLength={3}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mb-3 row">
|
||||
<label className="col-sm-2 col-form-label" htmlFor="login-password">
|
||||
{I18NextService.i18n.t("password")}
|
||||
</label>
|
||||
<div className="col-sm-10">
|
||||
<input
|
||||
type="password"
|
||||
id="login-password"
|
||||
value={this.state.form.password}
|
||||
onInput={linkEvent(this, this.handleLoginPasswordChange)}
|
||||
className="form-control"
|
||||
autoComplete="current-password"
|
||||
required
|
||||
maxLength={60}
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={linkEvent(this, this.handlePasswordReset)}
|
||||
className="btn p-0 btn-link d-inline-block float-right text-muted small fw-bold pointer-events not-allowed"
|
||||
disabled={
|
||||
!!this.state.form.username_or_email &&
|
||||
!validEmail(this.state.form.username_or_email)
|
||||
}
|
||||
title={I18NextService.i18n.t("no_password_reset")}
|
||||
>
|
||||
{I18NextService.i18n.t("forgot_password")}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{this.state.showTotp && (
|
||||
<div className="mb-3 row">
|
||||
<label
|
||||
className="col-sm-2 col-form-label"
|
||||
htmlFor="login-email-or-username"
|
||||
className="col-sm-6 col-form-label"
|
||||
htmlFor="login-totp-token"
|
||||
>
|
||||
{I18NextService.i18n.t("email_or_username")}
|
||||
{I18NextService.i18n.t("two_factor_token")}
|
||||
</label>
|
||||
<div className="col-sm-10">
|
||||
<div className="col-sm-6">
|
||||
<input
|
||||
type="text"
|
||||
type="number"
|
||||
inputMode="numeric"
|
||||
className="form-control"
|
||||
id="login-email-or-username"
|
||||
value={this.state.form.username_or_email}
|
||||
onInput={linkEvent(this, this.handleLoginUsernameChange)}
|
||||
autoComplete="email"
|
||||
required
|
||||
minLength={3}
|
||||
id="login-totp-token"
|
||||
pattern="[0-9]*"
|
||||
autoComplete="one-time-code"
|
||||
value={this.state.form.totp_2fa_token}
|
||||
onInput={linkEvent(this, this.handleLoginTotpChange)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mb-3 row">
|
||||
<label className="col-sm-2 col-form-label" htmlFor="login-password">
|
||||
{I18NextService.i18n.t("password")}
|
||||
</label>
|
||||
<div className="col-sm-10">
|
||||
<input
|
||||
type="password"
|
||||
id="login-password"
|
||||
value={this.state.form.password}
|
||||
onInput={linkEvent(this, this.handleLoginPasswordChange)}
|
||||
className="form-control"
|
||||
autoComplete="current-password"
|
||||
required
|
||||
maxLength={60}
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={linkEvent(this, this.handlePasswordReset)}
|
||||
className="btn p-0 btn-link d-inline-block float-right text-muted small fw-bold pointer-events not-allowed"
|
||||
disabled={
|
||||
!!this.state.form.username_or_email &&
|
||||
!validEmail(this.state.form.username_or_email)
|
||||
}
|
||||
title={I18NextService.i18n.t("no_password_reset")}
|
||||
>
|
||||
{I18NextService.i18n.t("forgot_password")}
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
<div className="mb-3 row">
|
||||
<div className="col-sm-10">
|
||||
<button type="submit" className="btn btn-secondary">
|
||||
{this.state.loginRes.state == "loading" ? (
|
||||
<Spinner />
|
||||
) : (
|
||||
I18NextService.i18n.t("login")
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
{this.state.showTotp && (
|
||||
<div className="mb-3 row">
|
||||
<label
|
||||
className="col-sm-6 col-form-label"
|
||||
htmlFor="login-totp-token"
|
||||
>
|
||||
{I18NextService.i18n.t("two_factor_token")}
|
||||
</label>
|
||||
<div className="col-sm-6">
|
||||
<input
|
||||
type="number"
|
||||
inputMode="numeric"
|
||||
className="form-control"
|
||||
id="login-totp-token"
|
||||
pattern="[0-9]*"
|
||||
autoComplete="one-time-code"
|
||||
value={this.state.form.totp_2fa_token}
|
||||
onInput={linkEvent(this, this.handleLoginTotpChange)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div className="mb-3 row">
|
||||
<div className="col-sm-10">
|
||||
<button type="submit" className="btn btn-secondary">
|
||||
{this.state.loginRes.state == "loading" ? (
|
||||
<Spinner />
|
||||
) : (
|
||||
I18NextService.i18n.t("login")
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -59,25 +59,23 @@ export class Setup extends Component<any, State> {
|
|||
|
||||
render() {
|
||||
return (
|
||||
<div className="home-setup container-lg">
|
||||
<main className="home-setup container-lg row mx-1 mx-md-auto">
|
||||
<Helmet title={this.documentTitle} />
|
||||
<div className="row">
|
||||
<div className="col-12 offset-lg-3 col-lg-6">
|
||||
<h3>{I18NextService.i18n.t("lemmy_instance_setup")}</h3>
|
||||
{!this.state.doneRegisteringUser ? (
|
||||
this.registerUser()
|
||||
) : (
|
||||
<SiteForm
|
||||
showLocal
|
||||
onSaveSite={this.handleCreateSite}
|
||||
siteRes={this.state.siteRes}
|
||||
themeList={this.state.themeList}
|
||||
loading={false}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
<div className="col-12 offset-lg-3 col-lg-6">
|
||||
<h3>{I18NextService.i18n.t("lemmy_instance_setup")}</h3>
|
||||
{!this.state.doneRegisteringUser ? (
|
||||
this.registerUser()
|
||||
) : (
|
||||
<SiteForm
|
||||
showLocal
|
||||
onSaveSite={this.handleCreateSite}
|
||||
siteRes={this.state.siteRes}
|
||||
themeList={this.state.themeList}
|
||||
loading={false}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -123,17 +123,13 @@ export class Signup extends Component<any, State> {
|
|||
|
||||
render() {
|
||||
return (
|
||||
<div className="home-signup container-lg">
|
||||
<main className="home-signup container-lg row mx-1 mx-md-auto">
|
||||
<HtmlTags
|
||||
title={this.documentTitle}
|
||||
path={this.context.router.route.match.url}
|
||||
/>
|
||||
<div className="row">
|
||||
<div className="col-12 col-lg-6 offset-lg-3">
|
||||
{this.registerForm()}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-12 col-lg-6 offset-lg-3">{this.registerForm()}</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -583,7 +583,7 @@ const Filter = ({
|
|||
options: Choice[];
|
||||
loading: boolean;
|
||||
}) => (
|
||||
<div className="col-sm-6 mb-3">
|
||||
<div className="col-sm-6 col-xl-4 col-xxl-3 mb-3">
|
||||
<label className="mb-2" htmlFor={`filter-${filterType}`}>
|
||||
{I18NextService.i18n.t(`filter_by_${filterType}` as NoOptionI18nKeys)}
|
||||
</label>
|
||||
|
|
@ -745,94 +745,88 @@ export class Modlog extends Component<
|
|||
const { actionType, modId, userId } = getModlogQueryParams();
|
||||
|
||||
return (
|
||||
<div className="modlog container-lg">
|
||||
<main className="modlog container-lg row mx-1 mx-md-auto">
|
||||
<HtmlTags
|
||||
title={this.documentTitle}
|
||||
path={this.context.router.route.match.url}
|
||||
/>
|
||||
|
||||
<div>
|
||||
<div
|
||||
className="alert alert-warning text-sm-start text-xs-center"
|
||||
role="alert"
|
||||
>
|
||||
<Icon
|
||||
icon="alert-triangle"
|
||||
inline
|
||||
classes="me-sm-2 mx-auto d-sm-inline d-block"
|
||||
/>
|
||||
<T i18nKey="modlog_content_warning" class="d-inline">
|
||||
#<strong>#</strong>#
|
||||
</T>
|
||||
</div>
|
||||
{this.state.communityRes.state === "success" && (
|
||||
<h5>
|
||||
<Link
|
||||
className="text-body"
|
||||
to={`/c/${this.state.communityRes.data.community_view.community.name}`}
|
||||
>
|
||||
/c/{this.state.communityRes.data.community_view.community.name}{" "}
|
||||
</Link>
|
||||
<span>{I18NextService.i18n.t("modlog")}</span>
|
||||
</h5>
|
||||
)}
|
||||
<div className="row mb-2">
|
||||
<div className="col-sm-6">
|
||||
<select
|
||||
value={actionType}
|
||||
onChange={linkEvent(this, this.handleFilterActionChange)}
|
||||
className="form-select"
|
||||
aria-label="action"
|
||||
>
|
||||
<option disabled aria-hidden="true">
|
||||
{I18NextService.i18n.t("filter_by_action")}
|
||||
</option>
|
||||
<option value={"All"}>{I18NextService.i18n.t("all")}</option>
|
||||
<option value={"ModRemovePost"}>Removing Posts</option>
|
||||
<option value={"ModLockPost"}>Locking Posts</option>
|
||||
<option value={"ModFeaturePost"}>Featuring Posts</option>
|
||||
<option value={"ModRemoveComment"}>Removing Comments</option>
|
||||
<option value={"ModRemoveCommunity"}>
|
||||
Removing Communities
|
||||
</option>
|
||||
<option value={"ModBanFromCommunity"}>
|
||||
Banning From Communities
|
||||
</option>
|
||||
<option value={"ModAddCommunity"}>
|
||||
Adding Mod to Community
|
||||
</option>
|
||||
<option value={"ModTransferCommunity"}>
|
||||
Transferring Communities
|
||||
</option>
|
||||
<option value={"ModAdd"}>Adding Mod to Site</option>
|
||||
<option value={"ModBan"}>Banning From Site</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div className="row mb-2">
|
||||
<Filter
|
||||
filterType="user"
|
||||
onChange={this.handleUserChange}
|
||||
onSearch={this.handleSearchUsers}
|
||||
value={userId}
|
||||
options={userSearchOptions}
|
||||
loading={loadingUserSearch}
|
||||
/>
|
||||
{!this.isoData.site_res.site_view.local_site
|
||||
.hide_modlog_mod_names && (
|
||||
<Filter
|
||||
filterType="mod"
|
||||
onChange={this.handleModChange}
|
||||
onSearch={this.handleSearchMods}
|
||||
value={modId}
|
||||
options={modSearchOptions}
|
||||
loading={loadingModSearch}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
{this.renderModlogTable()}
|
||||
<div
|
||||
className="alert alert-warning text-sm-start text-xs-center"
|
||||
role="alert"
|
||||
>
|
||||
<Icon
|
||||
icon="alert-triangle"
|
||||
inline
|
||||
classes="me-sm-2 mx-auto d-sm-inline d-block"
|
||||
/>
|
||||
<T i18nKey="modlog_content_warning" class="d-inline">
|
||||
#<strong>#</strong>#
|
||||
</T>
|
||||
</div>
|
||||
</div>
|
||||
{this.state.communityRes.state === "success" && (
|
||||
<h5>
|
||||
<Link
|
||||
className="text-body"
|
||||
to={`/c/${this.state.communityRes.data.community_view.community.name}`}
|
||||
>
|
||||
/c/{this.state.communityRes.data.community_view.community.name}{" "}
|
||||
</Link>
|
||||
<span>{I18NextService.i18n.t("modlog")}</span>
|
||||
</h5>
|
||||
)}
|
||||
<div className="row mb-2">
|
||||
<div className="col-sm-6 col-xl-4 col-xxl-3">
|
||||
<select
|
||||
value={actionType}
|
||||
onChange={linkEvent(this, this.handleFilterActionChange)}
|
||||
className="form-select"
|
||||
aria-label="action"
|
||||
>
|
||||
<option disabled aria-hidden="true">
|
||||
{I18NextService.i18n.t("filter_by_action")}
|
||||
</option>
|
||||
<option value={"All"}>{I18NextService.i18n.t("all")}</option>
|
||||
<option value={"ModRemovePost"}>Removing Posts</option>
|
||||
<option value={"ModLockPost"}>Locking Posts</option>
|
||||
<option value={"ModFeaturePost"}>Featuring Posts</option>
|
||||
<option value={"ModRemoveComment"}>Removing Comments</option>
|
||||
<option value={"ModRemoveCommunity"}>Removing Communities</option>
|
||||
<option value={"ModBanFromCommunity"}>
|
||||
Banning From Communities
|
||||
</option>
|
||||
<option value={"ModAddCommunity"}>Adding Mod to Community</option>
|
||||
<option value={"ModTransferCommunity"}>
|
||||
Transferring Communities
|
||||
</option>
|
||||
<option value={"ModAdd"}>Adding Mod to Site</option>
|
||||
<option value={"ModBan"}>Banning From Site</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div className="row mb-2">
|
||||
<Filter
|
||||
filterType="user"
|
||||
onChange={this.handleUserChange}
|
||||
onSearch={this.handleSearchUsers}
|
||||
value={userId}
|
||||
options={userSearchOptions}
|
||||
loading={loadingUserSearch}
|
||||
/>
|
||||
{!this.isoData.site_res.site_view.local_site
|
||||
.hide_modlog_mod_names && (
|
||||
<Filter
|
||||
filterType="mod"
|
||||
onChange={this.handleModChange}
|
||||
onSearch={this.handleSearchMods}
|
||||
value={modId}
|
||||
options={modSearchOptions}
|
||||
loading={loadingModSearch}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
{this.renderModlogTable()}
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -213,49 +213,44 @@ export class Inbox extends Component<any, InboxState> {
|
|||
const auth = myAuth();
|
||||
const inboxRss = auth ? `/feeds/inbox/${auth}.xml` : undefined;
|
||||
return (
|
||||
<div className="inbox container-lg">
|
||||
<div className="row">
|
||||
<div className="col-12">
|
||||
<HtmlTags
|
||||
title={this.documentTitle}
|
||||
path={this.context.router.route.match.url}
|
||||
/>
|
||||
<h5 className="mb-2">
|
||||
{I18NextService.i18n.t("inbox")}
|
||||
{inboxRss && (
|
||||
<small>
|
||||
<a href={inboxRss} title="RSS" rel={relTags}>
|
||||
<Icon icon="rss" classes="ms-2 text-muted small" />
|
||||
</a>
|
||||
<link
|
||||
rel="alternate"
|
||||
type="application/atom+xml"
|
||||
href={inboxRss}
|
||||
/>
|
||||
</small>
|
||||
)}
|
||||
</h5>
|
||||
{this.hasUnreads && (
|
||||
<button
|
||||
className="btn btn-secondary mb-2"
|
||||
onClick={linkEvent(this, this.handleMarkAllAsRead)}
|
||||
>
|
||||
{this.state.markAllAsReadRes.state == "loading" ? (
|
||||
<Spinner />
|
||||
) : (
|
||||
I18NextService.i18n.t("mark_all_as_read")
|
||||
)}
|
||||
</button>
|
||||
<main className="inbox container-lg row mx-1 mx-md-auto">
|
||||
<div className="col-12">
|
||||
<HtmlTags
|
||||
title={this.documentTitle}
|
||||
path={this.context.router.route.match.url}
|
||||
/>
|
||||
<h5 className="mb-2">
|
||||
{I18NextService.i18n.t("inbox")}
|
||||
{inboxRss && (
|
||||
<small>
|
||||
<a href={inboxRss} title="RSS" rel={relTags}>
|
||||
<Icon icon="rss" classes="ms-2 text-muted small" />
|
||||
</a>
|
||||
<link
|
||||
rel="alternate"
|
||||
type="application/atom+xml"
|
||||
href={inboxRss}
|
||||
/>
|
||||
</small>
|
||||
)}
|
||||
{this.selects()}
|
||||
{this.section}
|
||||
<Paginator
|
||||
page={this.state.page}
|
||||
onChange={this.handlePageChange}
|
||||
/>
|
||||
</div>
|
||||
</h5>
|
||||
{this.hasUnreads && (
|
||||
<button
|
||||
className="btn btn-secondary mb-2"
|
||||
onClick={linkEvent(this, this.handleMarkAllAsRead)}
|
||||
>
|
||||
{this.state.markAllAsReadRes.state === "loading" ? (
|
||||
<Spinner />
|
||||
) : (
|
||||
I18NextService.i18n.t("mark_all_as_read")
|
||||
)}
|
||||
</button>
|
||||
)}
|
||||
{this.selects()}
|
||||
{this.section}
|
||||
<Paginator page={this.state.page} onChange={this.handlePageChange} />
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -533,9 +528,9 @@ export class Inbox extends Component<any, InboxState> {
|
|||
|
||||
all() {
|
||||
if (
|
||||
this.state.repliesRes.state == "loading" ||
|
||||
this.state.mentionsRes.state == "loading" ||
|
||||
this.state.messagesRes.state == "loading"
|
||||
this.state.repliesRes.state === "loading" ||
|
||||
this.state.mentionsRes.state === "loading" ||
|
||||
this.state.messagesRes.state === "loading"
|
||||
) {
|
||||
return (
|
||||
<h5>
|
||||
|
|
@ -543,9 +538,7 @@ export class Inbox extends Component<any, InboxState> {
|
|||
</h5>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<div>{this.buildCombined().map(r => this.renderReplyType(r))}</div>
|
||||
);
|
||||
return <>{this.buildCombined().map(r => this.renderReplyType(r))}</>;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -560,37 +553,35 @@ export class Inbox extends Component<any, InboxState> {
|
|||
case "success": {
|
||||
const replies = this.state.repliesRes.data.replies;
|
||||
return (
|
||||
<div>
|
||||
<CommentNodes
|
||||
nodes={commentsToFlatNodes(replies)}
|
||||
viewType={CommentViewType.Flat}
|
||||
finished={this.state.finished}
|
||||
markable
|
||||
showCommunity
|
||||
showContext
|
||||
enableDownvotes={enableDownvotes(this.state.siteRes)}
|
||||
allLanguages={this.state.siteRes.all_languages}
|
||||
siteLanguages={this.state.siteRes.discussion_languages}
|
||||
onSaveComment={this.handleSaveComment}
|
||||
onBlockPerson={this.handleBlockPerson}
|
||||
onDeleteComment={this.handleDeleteComment}
|
||||
onRemoveComment={this.handleRemoveComment}
|
||||
onCommentVote={this.handleCommentVote}
|
||||
onCommentReport={this.handleCommentReport}
|
||||
onDistinguishComment={this.handleDistinguishComment}
|
||||
onAddModToCommunity={this.handleAddModToCommunity}
|
||||
onAddAdmin={this.handleAddAdmin}
|
||||
onTransferCommunity={this.handleTransferCommunity}
|
||||
onPurgeComment={this.handlePurgeComment}
|
||||
onPurgePerson={this.handlePurgePerson}
|
||||
onCommentReplyRead={this.handleCommentReplyRead}
|
||||
onPersonMentionRead={this.handlePersonMentionRead}
|
||||
onBanPersonFromCommunity={this.handleBanFromCommunity}
|
||||
onBanPerson={this.handleBanPerson}
|
||||
onCreateComment={this.handleCreateComment}
|
||||
onEditComment={this.handleEditComment}
|
||||
/>
|
||||
</div>
|
||||
<CommentNodes
|
||||
nodes={commentsToFlatNodes(replies)}
|
||||
viewType={CommentViewType.Flat}
|
||||
finished={this.state.finished}
|
||||
markable
|
||||
showCommunity
|
||||
showContext
|
||||
enableDownvotes={enableDownvotes(this.state.siteRes)}
|
||||
allLanguages={this.state.siteRes.all_languages}
|
||||
siteLanguages={this.state.siteRes.discussion_languages}
|
||||
onSaveComment={this.handleSaveComment}
|
||||
onBlockPerson={this.handleBlockPerson}
|
||||
onDeleteComment={this.handleDeleteComment}
|
||||
onRemoveComment={this.handleRemoveComment}
|
||||
onCommentVote={this.handleCommentVote}
|
||||
onCommentReport={this.handleCommentReport}
|
||||
onDistinguishComment={this.handleDistinguishComment}
|
||||
onAddModToCommunity={this.handleAddModToCommunity}
|
||||
onAddAdmin={this.handleAddAdmin}
|
||||
onTransferCommunity={this.handleTransferCommunity}
|
||||
onPurgeComment={this.handlePurgeComment}
|
||||
onPurgePerson={this.handlePurgePerson}
|
||||
onCommentReplyRead={this.handleCommentReplyRead}
|
||||
onPersonMentionRead={this.handlePersonMentionRead}
|
||||
onBanPersonFromCommunity={this.handleBanFromCommunity}
|
||||
onBanPerson={this.handleBanPerson}
|
||||
onCreateComment={this.handleCreateComment}
|
||||
onEditComment={this.handleEditComment}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
@ -607,7 +598,7 @@ export class Inbox extends Component<any, InboxState> {
|
|||
case "success": {
|
||||
const mentions = this.state.mentionsRes.data.mentions;
|
||||
return (
|
||||
<div>
|
||||
<>
|
||||
{mentions.map(umv => (
|
||||
<CommentNodes
|
||||
key={umv.person_mention.id}
|
||||
|
|
@ -640,7 +631,7 @@ export class Inbox extends Component<any, InboxState> {
|
|||
onEditComment={this.handleEditComment}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
@ -657,7 +648,7 @@ export class Inbox extends Component<any, InboxState> {
|
|||
case "success": {
|
||||
const messages = this.state.messagesRes.data.private_messages;
|
||||
return (
|
||||
<div>
|
||||
<>
|
||||
{messages.map(pmv => (
|
||||
<PrivateMessage
|
||||
key={pmv.private_message.id}
|
||||
|
|
@ -669,7 +660,7 @@ export class Inbox extends Component<any, InboxState> {
|
|||
onEdit={this.handleEditMessage}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -40,18 +40,16 @@ export class PasswordChange extends Component<any, State> {
|
|||
|
||||
render() {
|
||||
return (
|
||||
<div className="password-change container-lg">
|
||||
<main className="password-change container-lg row mx-1 mx-md-auto">
|
||||
<HtmlTags
|
||||
title={this.documentTitle}
|
||||
path={this.context.router.route.match.url}
|
||||
/>
|
||||
<div className="row">
|
||||
<div className="col-12 col-lg-6 offset-lg-3 mb-4">
|
||||
<h5>{I18NextService.i18n.t("password_change")}</h5>
|
||||
{this.passwordChangeForm()}
|
||||
</div>
|
||||
<div className="col-12 col-lg-6 offset-lg-3 mb-4">
|
||||
<h5>{I18NextService.i18n.t("password_change")}</h5>
|
||||
{this.passwordChangeForm()}
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -316,7 +316,7 @@ export class Profile extends Component<
|
|||
const { page, sort, view } = getProfileQueryParams();
|
||||
|
||||
return (
|
||||
<div className="row">
|
||||
<>
|
||||
<div className="col-12 col-md-8">
|
||||
<HtmlTags
|
||||
title={this.documentTitle}
|
||||
|
|
@ -379,7 +379,7 @@ export class Profile extends Component<
|
|||
<Moderates moderates={personRes.moderates} />
|
||||
{this.amCurrentUser && <Follows />}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
@ -387,9 +387,9 @@ export class Profile extends Component<
|
|||
|
||||
render() {
|
||||
return (
|
||||
<div className="person-profile container-lg">
|
||||
<main className="person-profile container-lg row mx-1 mx-md-auto">
|
||||
{this.renderPersonRes()}
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -466,163 +466,150 @@ export class Profile extends Component<
|
|||
/>
|
||||
)}
|
||||
<div className="mb-3">
|
||||
<div className="">
|
||||
<div className="mb-0 d-flex flex-wrap">
|
||||
<div>
|
||||
{pv.person.display_name && (
|
||||
<h5 className="mb-0">{pv.person.display_name}</h5>
|
||||
)}
|
||||
<ul className="list-inline mb-2">
|
||||
<li className="list-inline-item">
|
||||
<PersonListing
|
||||
person={pv.person}
|
||||
realLink
|
||||
useApubName
|
||||
muted
|
||||
hideAvatar
|
||||
/>
|
||||
</li>
|
||||
{isBanned(pv.person) && (
|
||||
<li className="list-inline-item badge text-bg-danger">
|
||||
{I18NextService.i18n.t("banned")}
|
||||
</li>
|
||||
)}
|
||||
{pv.person.deleted && (
|
||||
<li className="list-inline-item badge text-bg-danger">
|
||||
{I18NextService.i18n.t("deleted")}
|
||||
</li>
|
||||
)}
|
||||
{pv.person.admin && (
|
||||
<li className="list-inline-item badge text-bg-light">
|
||||
{I18NextService.i18n.t("admin")}
|
||||
</li>
|
||||
)}
|
||||
{pv.person.bot_account && (
|
||||
<li className="list-inline-item badge text-bg-light">
|
||||
{I18NextService.i18n.t("bot_account").toLowerCase()}
|
||||
</li>
|
||||
)}
|
||||
</ul>
|
||||
</div>
|
||||
{this.banDialog(pv)}
|
||||
<div className="flex-grow-1 unselectable pointer mx-2"></div>
|
||||
{!this.amCurrentUser && UserService.Instance.myUserInfo && (
|
||||
<>
|
||||
<a
|
||||
className={`d-flex align-self-start btn btn-secondary me-2 ${
|
||||
!pv.person.matrix_user_id && "invisible"
|
||||
}`}
|
||||
rel={relTags}
|
||||
href={`https://matrix.to/#/${pv.person.matrix_user_id}`}
|
||||
>
|
||||
{I18NextService.i18n.t("send_secure_message")}
|
||||
</a>
|
||||
<Link
|
||||
className={
|
||||
"d-flex align-self-start btn btn-secondary me-2"
|
||||
}
|
||||
to={`/create_private_message/${pv.person.id}`}
|
||||
>
|
||||
{I18NextService.i18n.t("send_message")}
|
||||
</Link>
|
||||
{personBlocked ? (
|
||||
<button
|
||||
className={
|
||||
"d-flex align-self-start btn btn-secondary me-2"
|
||||
}
|
||||
onClick={linkEvent(
|
||||
pv.person.id,
|
||||
this.handleUnblockPerson
|
||||
)}
|
||||
>
|
||||
{I18NextService.i18n.t("unblock_user")}
|
||||
</button>
|
||||
) : (
|
||||
<button
|
||||
className={
|
||||
"d-flex align-self-start btn btn-secondary me-2"
|
||||
}
|
||||
onClick={linkEvent(
|
||||
pv.person.id,
|
||||
this.handleBlockPerson
|
||||
)}
|
||||
>
|
||||
{I18NextService.i18n.t("block_user")}
|
||||
</button>
|
||||
)}
|
||||
</>
|
||||
<div className="mb-0 d-flex flex-wrap">
|
||||
<div>
|
||||
{pv.person.display_name && (
|
||||
<h5 className="mb-0">{pv.person.display_name}</h5>
|
||||
)}
|
||||
|
||||
{canMod(pv.person.id, undefined, admins) &&
|
||||
!isAdmin(pv.person.id, admins) &&
|
||||
!showBanDialog &&
|
||||
(!isBanned(pv.person) ? (
|
||||
<ul className="list-inline mb-2">
|
||||
<li className="list-inline-item">
|
||||
<PersonListing
|
||||
person={pv.person}
|
||||
realLink
|
||||
useApubName
|
||||
muted
|
||||
hideAvatar
|
||||
/>
|
||||
</li>
|
||||
{isBanned(pv.person) && (
|
||||
<li className="list-inline-item badge text-bg-danger">
|
||||
{I18NextService.i18n.t("banned")}
|
||||
</li>
|
||||
)}
|
||||
{pv.person.deleted && (
|
||||
<li className="list-inline-item badge text-bg-danger">
|
||||
{I18NextService.i18n.t("deleted")}
|
||||
</li>
|
||||
)}
|
||||
{pv.person.admin && (
|
||||
<li className="list-inline-item badge text-bg-light">
|
||||
{I18NextService.i18n.t("admin")}
|
||||
</li>
|
||||
)}
|
||||
{pv.person.bot_account && (
|
||||
<li className="list-inline-item badge text-bg-light">
|
||||
{I18NextService.i18n.t("bot_account").toLowerCase()}
|
||||
</li>
|
||||
)}
|
||||
</ul>
|
||||
</div>
|
||||
{this.banDialog(pv)}
|
||||
<div className="flex-grow-1 unselectable pointer mx-2"></div>
|
||||
{!this.amCurrentUser && UserService.Instance.myUserInfo && (
|
||||
<>
|
||||
<a
|
||||
className={`d-flex align-self-start btn btn-secondary me-2 ${
|
||||
!pv.person.matrix_user_id && "invisible"
|
||||
}`}
|
||||
rel={relTags}
|
||||
href={`https://matrix.to/#/${pv.person.matrix_user_id}`}
|
||||
>
|
||||
{I18NextService.i18n.t("send_secure_message")}
|
||||
</a>
|
||||
<Link
|
||||
className={"d-flex align-self-start btn btn-secondary me-2"}
|
||||
to={`/create_private_message/${pv.person.id}`}
|
||||
>
|
||||
{I18NextService.i18n.t("send_message")}
|
||||
</Link>
|
||||
{personBlocked ? (
|
||||
<button
|
||||
className={
|
||||
"d-flex align-self-start btn btn-secondary me-2"
|
||||
}
|
||||
onClick={linkEvent(this, this.handleModBanShow)}
|
||||
aria-label={I18NextService.i18n.t("ban")}
|
||||
onClick={linkEvent(
|
||||
pv.person.id,
|
||||
this.handleUnblockPerson
|
||||
)}
|
||||
>
|
||||
{capitalizeFirstLetter(I18NextService.i18n.t("ban"))}
|
||||
{I18NextService.i18n.t("unblock_user")}
|
||||
</button>
|
||||
) : (
|
||||
<button
|
||||
className={
|
||||
"d-flex align-self-start btn btn-secondary me-2"
|
||||
}
|
||||
onClick={linkEvent(this, this.handleModBanSubmit)}
|
||||
aria-label={I18NextService.i18n.t("unban")}
|
||||
onClick={linkEvent(pv.person.id, this.handleBlockPerson)}
|
||||
>
|
||||
{capitalizeFirstLetter(I18NextService.i18n.t("unban"))}
|
||||
{I18NextService.i18n.t("block_user")}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
{pv.person.bio && (
|
||||
<div className="d-flex align-items-center mb-2">
|
||||
<div
|
||||
className="md-div"
|
||||
dangerouslySetInnerHTML={mdToHtml(pv.person.bio)}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
<div>
|
||||
<ul className="list-inline mb-2">
|
||||
<li className="list-inline-item badge text-bg-light">
|
||||
{I18NextService.i18n.t("number_of_posts", {
|
||||
count: Number(pv.counts.post_count),
|
||||
formattedCount: numToSI(pv.counts.post_count),
|
||||
})}
|
||||
</li>
|
||||
<li className="list-inline-item badge text-bg-light">
|
||||
{I18NextService.i18n.t("number_of_comments", {
|
||||
count: Number(pv.counts.comment_count),
|
||||
formattedCount: numToSI(pv.counts.comment_count),
|
||||
})}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="text-muted">
|
||||
{I18NextService.i18n.t("joined")}{" "}
|
||||
<MomentTime
|
||||
published={pv.person.published}
|
||||
showAgo
|
||||
ignoreUpdated
|
||||
|
||||
{canMod(pv.person.id, undefined, admins) &&
|
||||
!isAdmin(pv.person.id, admins) &&
|
||||
!showBanDialog &&
|
||||
(!isBanned(pv.person) ? (
|
||||
<button
|
||||
className={"d-flex align-self-start btn btn-secondary me-2"}
|
||||
onClick={linkEvent(this, this.handleModBanShow)}
|
||||
aria-label={I18NextService.i18n.t("ban")}
|
||||
>
|
||||
{capitalizeFirstLetter(I18NextService.i18n.t("ban"))}
|
||||
</button>
|
||||
) : (
|
||||
<button
|
||||
className={"d-flex align-self-start btn btn-secondary me-2"}
|
||||
onClick={linkEvent(this, this.handleModBanSubmit)}
|
||||
aria-label={I18NextService.i18n.t("unban")}
|
||||
>
|
||||
{capitalizeFirstLetter(I18NextService.i18n.t("unban"))}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
{pv.person.bio && (
|
||||
<div className="d-flex align-items-center mb-2">
|
||||
<div
|
||||
className="md-div"
|
||||
dangerouslySetInnerHTML={mdToHtml(pv.person.bio)}
|
||||
/>
|
||||
</div>
|
||||
<div className="d-flex align-items-center text-muted mb-2">
|
||||
<Icon icon="cake" />
|
||||
<span className="ms-2">
|
||||
{I18NextService.i18n.t("cake_day_title")}{" "}
|
||||
{format(parseISO(pv.person.published), "PPP")}
|
||||
</span>
|
||||
</div>
|
||||
{!UserService.Instance.myUserInfo && (
|
||||
<div className="alert alert-info" role="alert">
|
||||
{I18NextService.i18n.t("profile_not_logged_in_alert")}
|
||||
</div>
|
||||
)}
|
||||
)}
|
||||
<ul className="list-inline mb-2">
|
||||
<li className="list-inline-item badge text-bg-light">
|
||||
{I18NextService.i18n.t("number_of_posts", {
|
||||
count: Number(pv.counts.post_count),
|
||||
formattedCount: numToSI(pv.counts.post_count),
|
||||
})}
|
||||
</li>
|
||||
<li className="list-inline-item badge text-bg-light">
|
||||
{I18NextService.i18n.t("number_of_comments", {
|
||||
count: Number(pv.counts.comment_count),
|
||||
formattedCount: numToSI(pv.counts.comment_count),
|
||||
})}
|
||||
</li>
|
||||
</ul>
|
||||
<div className="text-muted">
|
||||
{I18NextService.i18n.t("joined")}{" "}
|
||||
<MomentTime
|
||||
published={pv.person.published}
|
||||
showAgo
|
||||
ignoreUpdated
|
||||
/>
|
||||
</div>
|
||||
<div className="d-flex align-items-center text-muted mb-2">
|
||||
<Icon icon="cake" />
|
||||
<span className="ms-2">
|
||||
{I18NextService.i18n.t("cake_day_title")}{" "}
|
||||
{format(parseISO(pv.person.published), "PPP")}
|
||||
</span>
|
||||
</div>
|
||||
{!UserService.Instance.myUserInfo && (
|
||||
<div className="alert alert-info" role="alert">
|
||||
{I18NextService.i18n.t("profile_not_logged_in_alert")}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -94,22 +94,20 @@ export class RegistrationApplications extends Component<
|
|||
case "success": {
|
||||
const apps = this.state.appsRes.data.registration_applications;
|
||||
return (
|
||||
<div className="row">
|
||||
<div className="col-12">
|
||||
<HtmlTags
|
||||
title={this.documentTitle}
|
||||
path={this.context.router.route.match.url}
|
||||
/>
|
||||
<h5 className="mb-2">
|
||||
{I18NextService.i18n.t("registration_applications")}
|
||||
</h5>
|
||||
{this.selects()}
|
||||
{this.applicationList(apps)}
|
||||
<Paginator
|
||||
page={this.state.page}
|
||||
onChange={this.handlePageChange}
|
||||
/>
|
||||
</div>
|
||||
<div className="col-12">
|
||||
<HtmlTags
|
||||
title={this.documentTitle}
|
||||
path={this.context.router.route.match.url}
|
||||
/>
|
||||
<h5 className="mb-2">
|
||||
{I18NextService.i18n.t("registration_applications")}
|
||||
</h5>
|
||||
{this.selects()}
|
||||
{this.applicationList(apps)}
|
||||
<Paginator
|
||||
page={this.state.page}
|
||||
onChange={this.handlePageChange}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -118,9 +116,9 @@ export class RegistrationApplications extends Component<
|
|||
|
||||
render() {
|
||||
return (
|
||||
<div className="registration-applications container-lg">
|
||||
<main className="registration-applications container-lg row mx-1 mx-md-auto">
|
||||
{this.renderApps()}
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -169,7 +167,7 @@ export class RegistrationApplications extends Component<
|
|||
|
||||
applicationList(apps: RegistrationApplicationView[]) {
|
||||
return (
|
||||
<div>
|
||||
<>
|
||||
{apps.map(ra => (
|
||||
<>
|
||||
<hr />
|
||||
|
|
@ -180,7 +178,7 @@ export class RegistrationApplications extends Component<
|
|||
/>
|
||||
</>
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -145,23 +145,18 @@ export class Reports extends Component<any, ReportsState> {
|
|||
|
||||
render() {
|
||||
return (
|
||||
<div className="person-reports container-lg">
|
||||
<div className="row">
|
||||
<div className="col-12">
|
||||
<HtmlTags
|
||||
title={this.documentTitle}
|
||||
path={this.context.router.route.match.url}
|
||||
/>
|
||||
<h5 className="mb-2">{I18NextService.i18n.t("reports")}</h5>
|
||||
{this.selects()}
|
||||
{this.section}
|
||||
<Paginator
|
||||
page={this.state.page}
|
||||
onChange={this.handlePageChange}
|
||||
/>
|
||||
</div>
|
||||
<main className="person-reports container-lg row mx-1 mx-md-auto">
|
||||
<div className="col-12">
|
||||
<HtmlTags
|
||||
title={this.documentTitle}
|
||||
path={this.context.router.route.match.url}
|
||||
/>
|
||||
<h5 className="mb-2">{I18NextService.i18n.t("reports")}</h5>
|
||||
{this.selects()}
|
||||
{this.section}
|
||||
<Paginator page={this.state.page} onChange={this.handlePageChange} />
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -385,14 +380,14 @@ export class Reports extends Component<any, ReportsState> {
|
|||
|
||||
all() {
|
||||
return (
|
||||
<div>
|
||||
<>
|
||||
{this.buildCombined.map(i => (
|
||||
<>
|
||||
<hr />
|
||||
{this.renderItemType(i)}
|
||||
</>
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -408,7 +403,7 @@ export class Reports extends Component<any, ReportsState> {
|
|||
case "success": {
|
||||
const reports = res.data.comment_reports;
|
||||
return (
|
||||
<div>
|
||||
<>
|
||||
{reports.map(cr => (
|
||||
<>
|
||||
<hr />
|
||||
|
|
@ -419,7 +414,7 @@ export class Reports extends Component<any, ReportsState> {
|
|||
/>
|
||||
</>
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
@ -437,7 +432,7 @@ export class Reports extends Component<any, ReportsState> {
|
|||
case "success": {
|
||||
const reports = res.data.post_reports;
|
||||
return (
|
||||
<div>
|
||||
<>
|
||||
{reports.map(pr => (
|
||||
<>
|
||||
<hr />
|
||||
|
|
@ -448,7 +443,7 @@ export class Reports extends Component<any, ReportsState> {
|
|||
/>
|
||||
</>
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
@ -466,7 +461,7 @@ export class Reports extends Component<any, ReportsState> {
|
|||
case "success": {
|
||||
const reports = res.data.private_message_reports;
|
||||
return (
|
||||
<div>
|
||||
<>
|
||||
{reports.map(pmr => (
|
||||
<>
|
||||
<hr />
|
||||
|
|
@ -477,7 +472,7 @@ export class Reports extends Component<any, ReportsState> {
|
|||
/>
|
||||
</>
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -238,7 +238,7 @@ export class Settings extends Component<any, SettingsState> {
|
|||
|
||||
render() {
|
||||
return (
|
||||
<div className="person-settings container-lg">
|
||||
<main className="person-settings container-lg mx-1 mx-md-auto">
|
||||
<HtmlTags
|
||||
title={this.documentTitle}
|
||||
path={this.context.router.route.match.url}
|
||||
|
|
@ -259,7 +259,7 @@ export class Settings extends Component<any, SettingsState> {
|
|||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -53,20 +53,18 @@ export class VerifyEmail extends Component<any, State> {
|
|||
|
||||
render() {
|
||||
return (
|
||||
<div className="verfy-email container-lg">
|
||||
<div className="verfy-email container-lg row mx-1 mx-md-4">
|
||||
<HtmlTags
|
||||
title={this.documentTitle}
|
||||
path={this.context.router.route.match.url}
|
||||
/>
|
||||
<div className="row">
|
||||
<div className="col-12 col-lg-6 offset-lg-3 mb-4">
|
||||
<h5>{I18NextService.i18n.t("verify_email")}</h5>
|
||||
{this.state.verifyRes.state == "loading" && (
|
||||
<h5>
|
||||
<Spinner large />
|
||||
</h5>
|
||||
)}
|
||||
</div>
|
||||
<div className="col-12 col-lg-6 offset-lg-3 mb-4">
|
||||
<h5>{I18NextService.i18n.t("verify_email")}</h5>
|
||||
{this.state.verifyRes.state === "loading" && (
|
||||
<h5>
|
||||
<Spinner large />
|
||||
</h5>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -155,7 +155,7 @@ export class CreatePost extends Component<
|
|||
| undefined;
|
||||
|
||||
return (
|
||||
<div className="create-post container-lg">
|
||||
<main className="create-post container-lg row mx-1 mx-md-auto">
|
||||
<HtmlTags
|
||||
title={this.documentTitle}
|
||||
path={this.context.router.route.match.url}
|
||||
|
|
@ -165,31 +165,26 @@ export class CreatePost extends Component<
|
|||
<Spinner large />
|
||||
</h5>
|
||||
) : (
|
||||
<div className="row">
|
||||
<div
|
||||
id="createPostForm"
|
||||
className="col-12 col-lg-6 offset-lg-3 mb-4"
|
||||
>
|
||||
<h1 className="h4">{I18NextService.i18n.t("create_post")}</h1>
|
||||
<PostForm
|
||||
onCreate={this.handlePostCreate}
|
||||
params={locationState}
|
||||
enableDownvotes={enableDownvotes(this.state.siteRes)}
|
||||
enableNsfw={enableNsfw(this.state.siteRes)}
|
||||
allLanguages={this.state.siteRes.all_languages}
|
||||
siteLanguages={this.state.siteRes.discussion_languages}
|
||||
selectedCommunityChoice={selectedCommunityChoice}
|
||||
onSelectCommunity={this.handleSelectedCommunityChange}
|
||||
initialCommunities={
|
||||
this.state.initialCommunitiesRes.state === "success"
|
||||
? this.state.initialCommunitiesRes.data.communities
|
||||
: []
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div id="createPostForm" className="col-12 col-lg-6 offset-lg-3 mb-4">
|
||||
<h1 className="h4">{I18NextService.i18n.t("create_post")}</h1>
|
||||
<PostForm
|
||||
onCreate={this.handlePostCreate}
|
||||
params={locationState}
|
||||
enableDownvotes={enableDownvotes(this.state.siteRes)}
|
||||
enableNsfw={enableNsfw(this.state.siteRes)}
|
||||
allLanguages={this.state.siteRes.all_languages}
|
||||
siteLanguages={this.state.siteRes.discussion_languages}
|
||||
selectedCommunityChoice={selectedCommunityChoice}
|
||||
onSelectCommunity={this.handleSelectedCommunityChange}
|
||||
initialCommunities={
|
||||
this.state.initialCommunitiesRes.state === "success"
|
||||
? this.state.initialCommunitiesRes.data.communities
|
||||
: []
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -531,7 +531,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
|
|||
checked={this.state.form.nsfw}
|
||||
onChange={linkEvent(this, handlePostNsfwChange)}
|
||||
/>
|
||||
<label className="form-check-label">
|
||||
<label className="form-check-label" htmlFor="post-nsfw">
|
||||
{I18NextService.i18n.t("nsfw")}
|
||||
</label>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -97,6 +97,9 @@ interface PostListingState {
|
|||
transferLoading: boolean;
|
||||
}
|
||||
|
||||
const thumbnailClasses =
|
||||
"thumbnail rounded bg-light d-block text-body d-flex align-items-center justify-content-center";
|
||||
|
||||
interface PostListingProps {
|
||||
post_view: PostView;
|
||||
crossPosts?: PostView[];
|
||||
|
|
@ -196,7 +199,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
|
|||
const post = this.postView.post;
|
||||
|
||||
return (
|
||||
<div className="post-listing mt-2">
|
||||
<div className="post-listing mt-2 container-lg">
|
||||
{!this.state.showEdit ? (
|
||||
<>
|
||||
{this.listing()}
|
||||
|
|
@ -241,20 +244,19 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
|
|||
if (this.imageSrc) {
|
||||
return (
|
||||
<>
|
||||
<div className="offset-sm-3 my-2 d-none d-sm-block">
|
||||
<a href={this.imageSrc} className="d-inline-block">
|
||||
<PictrsImage src={this.imageSrc} />
|
||||
</a>
|
||||
</div>
|
||||
<div className="my-2 d-block d-sm-none">
|
||||
<button
|
||||
type="button"
|
||||
className="p-0 border-0 bg-transparent d-inline-block"
|
||||
onClick={linkEvent(this, this.handleImageExpandClick)}
|
||||
>
|
||||
<PictrsImage src={this.imageSrc} />
|
||||
</button>
|
||||
</div>
|
||||
<a
|
||||
href={this.imageSrc}
|
||||
className="my-2 d-none d-sm-block card p-4 col-12 col-xl-10 col-xxl-8"
|
||||
>
|
||||
<PictrsImage src={this.imageSrc} />
|
||||
</a>
|
||||
<button
|
||||
type="button"
|
||||
className="my-2 d-block d-sm-none"
|
||||
onClick={linkEvent(this, this.handleImageExpandClick)}
|
||||
>
|
||||
<PictrsImage src={this.imageSrc} />
|
||||
</button>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
@ -314,16 +316,19 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
|
|||
|
||||
if (!this.props.hideImage && url && isImage(url) && this.imageSrc) {
|
||||
return (
|
||||
<a
|
||||
href={this.imageSrc}
|
||||
className="text-body d-inline-block position-relative mb-2"
|
||||
<button
|
||||
type="button"
|
||||
className="text-body d-inline-block position-relative mb-2 border-0 bg-transparent text-white p-0"
|
||||
data-tippy-content={I18NextService.i18n.t("expand_here")}
|
||||
onClick={linkEvent(this, this.handleImageExpandClick)}
|
||||
aria-label={I18NextService.i18n.t("expand_here")}
|
||||
>
|
||||
{this.imgThumb(this.imageSrc)}
|
||||
<Icon icon="image" classes="mini-overlay" />
|
||||
</a>
|
||||
<Icon
|
||||
icon="image"
|
||||
classes="mini-overlay position-absolute top-0 right-0"
|
||||
/>
|
||||
</button>
|
||||
);
|
||||
} else if (!this.props.hideImage && url && thumbnail && this.imageSrc) {
|
||||
return (
|
||||
|
|
@ -334,14 +339,17 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
|
|||
title={url}
|
||||
>
|
||||
{this.imgThumb(this.imageSrc)}
|
||||
<Icon icon="external-link" classes="mini-overlay" />
|
||||
<Icon
|
||||
icon="external-link"
|
||||
classes="mini-overlay position-absolute top-0 right-0"
|
||||
/>
|
||||
</a>
|
||||
);
|
||||
} else if (url) {
|
||||
if (!this.props.hideImage && isVideo(url)) {
|
||||
return (
|
||||
<a
|
||||
className="text-body"
|
||||
className={thumbnailClasses}
|
||||
href={url}
|
||||
title={url}
|
||||
rel={relTags}
|
||||
|
|
@ -349,30 +357,24 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
|
|||
onClick={linkEvent(this, this.handleImageExpandClick)}
|
||||
aria-label={I18NextService.i18n.t("expand_here")}
|
||||
>
|
||||
<div className="thumbnail rounded bg-light d-flex justify-content-center">
|
||||
<Icon icon="play" classes="d-flex align-items-center" />
|
||||
</div>
|
||||
<Icon icon="play" />
|
||||
</a>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<a className="text-body" href={url} title={url} rel={relTags}>
|
||||
<div className="thumbnail rounded bg-light d-flex justify-content-center">
|
||||
<Icon icon="external-link" classes="d-flex align-items-center" />
|
||||
</div>
|
||||
<a className={thumbnailClasses} href={url} title={url} rel={relTags}>
|
||||
<Icon icon="external-link" />
|
||||
</a>
|
||||
);
|
||||
}
|
||||
} else {
|
||||
return (
|
||||
<Link
|
||||
className="text-body"
|
||||
className={thumbnailClasses}
|
||||
to={`/post/${post.id}`}
|
||||
title={I18NextService.i18n.t("comments")}
|
||||
>
|
||||
<div className="thumbnail rounded bg-light d-flex justify-content-center">
|
||||
<Icon icon="message-square" classes="d-flex align-items-center" />
|
||||
</div>
|
||||
<Icon icon="message-square" />
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
|
|
@ -1340,10 +1342,12 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
|
|||
<div className={`${this.state.imageExpanded ? "col-12" : "col-8"}`}>
|
||||
{this.postTitleLine()}
|
||||
</div>
|
||||
<div className="col-4">
|
||||
{/* Post thumbnail */}
|
||||
{!this.state.imageExpanded && this.thumbnail()}
|
||||
</div>
|
||||
{!this.state.imageExpanded && (
|
||||
<div className="col-4 ">
|
||||
{/* Post body prev or thumbnail */}
|
||||
{this.thumbnail()}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
this.postTitleLine()
|
||||
|
|
@ -1366,56 +1370,46 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
|
|||
return (
|
||||
<>
|
||||
{/* The mobile view*/}
|
||||
<div className="d-block d-sm-none">
|
||||
<article className="row post-container">
|
||||
<div className="col-12">
|
||||
{this.createdLine()}
|
||||
<article className="d-block d-sm-none post-container">
|
||||
{this.createdLine()}
|
||||
|
||||
{/* If it has a thumbnail, do a right aligned thumbnail */}
|
||||
{this.mobileThumbnail()}
|
||||
{/* If it has a thumbnail, do a right aligned thumbnail */}
|
||||
{this.mobileThumbnail()}
|
||||
|
||||
{/* Show a preview of the post body */}
|
||||
{this.showBodyPreview()}
|
||||
{/* Show a preview of the post body */}
|
||||
{this.showBodyPreview()}
|
||||
|
||||
{this.commentsLine(true)}
|
||||
{this.userActionsLine()}
|
||||
{this.duplicatesLine()}
|
||||
{this.removeAndBanDialogs()}
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
{this.commentsLine(true)}
|
||||
{this.userActionsLine()}
|
||||
{this.duplicatesLine()}
|
||||
{this.removeAndBanDialogs()}
|
||||
</article>
|
||||
|
||||
{/* The larger view*/}
|
||||
<div className="d-none d-sm-block">
|
||||
<article className="row post-container">
|
||||
{!this.props.viewOnly && (
|
||||
<VoteButtons
|
||||
voteContentType={VoteContentType.Post}
|
||||
id={this.postView.post.id}
|
||||
onVote={this.props.onPostVote}
|
||||
enableDownvotes={this.props.enableDownvotes}
|
||||
counts={this.postView.counts}
|
||||
my_vote={this.postView.my_vote}
|
||||
/>
|
||||
)}
|
||||
<div className="col-sm-2 pe-0 post-media">
|
||||
<div className="">{this.thumbnail()}</div>
|
||||
</div>
|
||||
<div className="col-12 col-sm-9">
|
||||
<div className="row">
|
||||
<div className="col-12">
|
||||
{this.postTitleLine()}
|
||||
{this.createdLine()}
|
||||
{this.showBodyPreview()}
|
||||
{this.commentsLine()}
|
||||
{this.duplicatesLine()}
|
||||
{this.userActionsLine()}
|
||||
{this.removeAndBanDialogs()}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
<article className="d-none d-sm-flex row post-container">
|
||||
{!this.props.viewOnly && (
|
||||
<VoteButtons
|
||||
voteContentType={VoteContentType.Post}
|
||||
id={this.postView.post.id}
|
||||
onVote={this.props.onPostVote}
|
||||
enableDownvotes={this.props.enableDownvotes}
|
||||
counts={this.postView.counts}
|
||||
my_vote={this.postView.my_vote}
|
||||
/>
|
||||
)}
|
||||
<div className="col-2 col-xl-1 pe-0 post-media d-flex align-items-center justify-content-center">
|
||||
{this.thumbnail()}
|
||||
</div>
|
||||
<div className="col-9 col-xl-10">
|
||||
{this.postTitleLine()}
|
||||
{this.createdLine()}
|
||||
{this.showBodyPreview()}
|
||||
{this.commentsLine()}
|
||||
{this.duplicatesLine()}
|
||||
{this.userActionsLine()}
|
||||
{this.removeAndBanDialogs()}
|
||||
</div>
|
||||
</article>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -347,8 +347,8 @@ export class Post extends Component<any, PostState> {
|
|||
case "success": {
|
||||
const res = this.state.postRes.data;
|
||||
return (
|
||||
<div className="row">
|
||||
<div className="col-12 col-md-8 mb-3">
|
||||
<>
|
||||
<main className="col-12 col-md-8 col-xl-10 mb-3">
|
||||
<HtmlTags
|
||||
title={this.documentTitle}
|
||||
path={this.context.router.route.match.url}
|
||||
|
|
@ -411,20 +411,26 @@ export class Post extends Component<any, PostState> {
|
|||
{this.state.showSidebarMobile && this.sidebar()}
|
||||
</div>
|
||||
{this.sortRadios()}
|
||||
{this.state.commentViewType == CommentViewType.Tree &&
|
||||
{this.state.commentViewType === CommentViewType.Tree &&
|
||||
this.commentsTree()}
|
||||
{this.state.commentViewType == CommentViewType.Flat &&
|
||||
{this.state.commentViewType === CommentViewType.Flat &&
|
||||
this.commentsFlat()}
|
||||
</main>
|
||||
<div className="d-none d-md-block col-md-4 col-xl-2">
|
||||
{this.sidebar()}
|
||||
</div>
|
||||
<div className="d-none d-md-block col-md-4">{this.sidebar()}</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
return <div className="post container-lg">{this.renderPostRes()}</div>;
|
||||
return (
|
||||
<div className="post container-lg row mx-1 mx-md-auto">
|
||||
{this.renderPostRes()}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
sortRadios() {
|
||||
|
|
@ -586,7 +592,7 @@ export class Post extends Component<any, PostState> {
|
|||
|
||||
return (
|
||||
res.state == "success" && (
|
||||
<div>
|
||||
<>
|
||||
{!!this.state.commentId && (
|
||||
<>
|
||||
<button
|
||||
|
|
@ -636,7 +642,7 @@ export class Post extends Component<any, PostState> {
|
|||
onCreateComment={this.handleCreateComment}
|
||||
onEditComment={this.handleEditComment}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -113,16 +113,14 @@ export class CreatePrivateMessage extends Component<
|
|||
case "success": {
|
||||
const res = this.state.recipientRes.data;
|
||||
return (
|
||||
<div className="row">
|
||||
<div className="col-12 col-lg-6 offset-lg-3 mb-4">
|
||||
<h1 className="h4">
|
||||
{I18NextService.i18n.t("create_private_message")}
|
||||
</h1>
|
||||
<PrivateMessageForm
|
||||
onCreate={this.handlePrivateMessageCreate}
|
||||
recipient={res.person_view.person}
|
||||
/>
|
||||
</div>
|
||||
<div className="col-12 col-lg-6 offset-lg-3 mb-4">
|
||||
<h1 className="h4">
|
||||
{I18NextService.i18n.t("create_private_message")}
|
||||
</h1>
|
||||
<PrivateMessageForm
|
||||
onCreate={this.handlePrivateMessageCreate}
|
||||
recipient={res.person_view.person}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -131,13 +129,13 @@ export class CreatePrivateMessage extends Component<
|
|||
|
||||
render() {
|
||||
return (
|
||||
<div className="create-private-message container-lg">
|
||||
<main className="create-private-message container-lg row mx-1 mx-md-auto">
|
||||
<HtmlTags
|
||||
title={this.documentTitle}
|
||||
path={this.context.router.route.match.url}
|
||||
/>
|
||||
{this.renderRecipientRes()}
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -181,7 +181,7 @@ const Filter = ({
|
|||
loading: boolean;
|
||||
}) => {
|
||||
return (
|
||||
<div className="mb-3 col-sm-6">
|
||||
<div className="mb-3 col-sm-6 col-xl-4 col-xxl-3">
|
||||
<label className="col-form-label me-2" htmlFor={`${filterType}-filter`}>
|
||||
{capitalizeFirstLetter(I18NextService.i18n.t(filterType))}
|
||||
</label>
|
||||
|
|
@ -454,7 +454,7 @@ export class Search extends Component<any, SearchState> {
|
|||
const { type, page } = getSearchQueryParams();
|
||||
|
||||
return (
|
||||
<div className="search container-lg">
|
||||
<main className="search container-lg mx-1 mx-md-auto">
|
||||
<HtmlTags
|
||||
title={this.documentTitle}
|
||||
path={this.context.router.route.match.url}
|
||||
|
|
@ -468,7 +468,7 @@ export class Search extends Component<any, SearchState> {
|
|||
<span>{I18NextService.i18n.t("no_results")}</span>
|
||||
)}
|
||||
<Paginator page={page} onChange={this.handlePageChange} />
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -656,7 +656,7 @@ export class Search extends Component<any, SearchState> {
|
|||
const combined = this.buildCombined();
|
||||
|
||||
return (
|
||||
<div>
|
||||
<>
|
||||
{combined.map(i => (
|
||||
<div key={i.published} className="row">
|
||||
<div className="col-12">
|
||||
|
|
@ -737,7 +737,7 @@ export class Search extends Component<any, SearchState> {
|
|||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue