mirror of
https://github.com/discourse/discourse.git
synced 2026-08-11 02:59:07 +08:00
c84202174bFollowup 4c7a4f637f
Fixes the broken chat browse page on mobile, and moves
the filters to this page to use DFilterControls component.
Removed a lot of custom CSS and HTML.
Also added arguments to DFilterControls to:
* Hide the no results message
* Force the toggle filter button, even if there aren't
more than 1 dropdown filters, which can be useful on mobile
**Before**
<img width="1195" height="674" alt="image"
src="https://github.com/user-attachments/assets/417fad66-c045-43c7-b469-9f226678bdb2"
/>
<img width="383" height="675" alt="image"
src="https://github.com/user-attachments/assets/3d2d458b-b335-4702-88d7-733f9152940d"
/>
**After**
<img width="1208" height="589" alt="image"
src="https://github.com/user-attachments/assets/0353b6f5-c7af-4c67-82a8-87226dc9496a"
/>
<img width="424" height="707" alt="image"
src="https://github.com/user-attachments/assets/702c8b35-fc43-45b6-a8ca-2d0a8066458c"
/>
---------
Co-authored-by: chapoi <101828855+chapoi@users.noreply.github.com>
95 lines
1.6 KiB
SCSS
Vendored
95 lines
1.6 KiB
SCSS
Vendored
@use "lib/viewport";
|
|
|
|
.chat-browse-view {
|
|
position: relative;
|
|
box-sizing: border-box;
|
|
padding: 1rem 1rem env(safe-area-inset-bottom) 1rem;
|
|
|
|
&__header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
&__title {
|
|
box-sizing: border-box;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
&__content_wrapper {
|
|
box-sizing: border-box;
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
&__cards {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 1.25rem;
|
|
|
|
@include viewport.until(md) {
|
|
grid-template-columns: repeat(1, 1fr);
|
|
gap: 1rem;
|
|
}
|
|
}
|
|
|
|
&__actions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
|
|
.d-filter-controls {
|
|
margin-inline-start: auto;
|
|
}
|
|
|
|
.c-drawer-routes.--browse & {
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
|
|
.d-filter-controls {
|
|
margin-inline-start: 0;
|
|
}
|
|
}
|
|
|
|
@include viewport.until(md) {
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
|
|
.d-filter-controls {
|
|
margin-inline-start: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
&__filters {
|
|
display: flex;
|
|
align-items: center;
|
|
margin: 0;
|
|
|
|
&::before {
|
|
content: none; // there is a strange thing applied on nav-pills and this resets it
|
|
}
|
|
}
|
|
|
|
&__filter {
|
|
display: inline;
|
|
|
|
&:last-of-type {
|
|
margin-right: 0;
|
|
}
|
|
|
|
@include viewport.until(sm) {
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
&__filter-link,
|
|
&__filter-link:visited {
|
|
color: var(--primary);
|
|
font-size: var(--font-up-1);
|
|
padding: 0 0.25rem;
|
|
|
|
@include viewport.until(md) {
|
|
font-size: var(--font-up-1);
|
|
}
|
|
}
|
|
}
|
