UX: Fix tab groups editing layout issues on mobile (#14329)
This commit is contained in:
parent
6a7ea66670
commit
19b14d6ec2
app/assets
javascripts/discourse/app/templates/components
stylesheets
|
@ -42,7 +42,7 @@
|
|||
</section>
|
||||
|
||||
<section class="group-visibility">
|
||||
<div>
|
||||
<div class="group-visibility-option">
|
||||
{{radio-button
|
||||
class="tag-permissions-choice"
|
||||
name="tag-permissions-choice"
|
||||
|
@ -55,7 +55,7 @@
|
|||
{{i18n "tagging.groups.everyone_can_use"}}
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
<div class="group-visibility-option">
|
||||
{{radio-button
|
||||
class="tag-permissions-choice"
|
||||
name="tag-permissions-choice"
|
||||
|
@ -80,7 +80,7 @@
|
|||
}}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="group-visibility-option">
|
||||
{{radio-button
|
||||
class="tag-permissions-choice"
|
||||
name="tag-permissions-choice"
|
||||
|
|
|
@ -269,3 +269,8 @@ table.group-category-permissions {
|
|||
.group-manage-email-additional-settings-wrapper {
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
.groups-form .control-group.buttons {
|
||||
margin-bottom: 0px;
|
||||
padding: 1em 0;
|
||||
}
|
||||
|
|
|
@ -215,7 +215,7 @@ header .discourse-tag {
|
|||
grid-template-columns: 1fr 5fr;
|
||||
grid-template-rows: auto auto;
|
||||
grid-template-areas: "header header" "sidebar content" "fullwidth fullwidth";
|
||||
padding-bottom: 3em;
|
||||
padding-bottom: 5em;
|
||||
|
||||
> h2 {
|
||||
grid-area: header;
|
||||
|
@ -236,6 +236,7 @@ header .discourse-tag {
|
|||
.tag-groups-sidebar + .tag-group-content {
|
||||
grid-area: content;
|
||||
}
|
||||
|
||||
.tag-group-content {
|
||||
grid-area: fullwidth;
|
||||
|
||||
|
@ -255,14 +256,32 @@ header .discourse-tag {
|
|||
margin-right: 5px;
|
||||
&.radio {
|
||||
padding-left: 0px;
|
||||
margin-right: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.group-visibility-option {
|
||||
grid-gap: 0.5rem;
|
||||
display: grid;
|
||||
grid-template-columns: 20px 1fr;
|
||||
grid-template-areas:
|
||||
"input label"
|
||||
"empty dropdown";
|
||||
input {
|
||||
grid-area: input;
|
||||
margin-top: 4px;
|
||||
}
|
||||
label {
|
||||
grid-area: label;
|
||||
}
|
||||
}
|
||||
.btn {
|
||||
margin-right: 10px;
|
||||
}
|
||||
.group-access-control {
|
||||
margin-left: 26px;
|
||||
margin-bottom: 1em;
|
||||
grid-area: dropdown;
|
||||
grid-row: 2;
|
||||
}
|
||||
input[type="radio"] ~ .group-access-control {
|
||||
display: none;
|
||||
|
@ -271,6 +290,21 @@ header .discourse-tag {
|
|||
display: block;
|
||||
}
|
||||
}
|
||||
@include breakpoint(tablet) {
|
||||
.select-kit.multi-select {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.tag-groups-sidebar {
|
||||
max-width: 90px;
|
||||
ul li a {
|
||||
word-break: break-word;
|
||||
max-width: 90px;
|
||||
font-size: var(--font-down-1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tag-group-controls {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
|
|
@ -1,5 +1,6 @@
|
|||
.group {
|
||||
margin: 0;
|
||||
padding-bottom: 3em;
|
||||
}
|
||||
|
||||
.group-name {
|
||||
|
|
Loading…
Reference in New Issue