github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-06-08 09:34:41 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

UX: Welcome bannner and search tweaks for mobile (#32362)

Browse Source 
* Hides the welcome banner search in mobile, it's not necessary
  since there is the header search
* Fix an issue where the positioning of the search input for
  the header on mobile was affecting welcome banner search
* Make the welcome font a bit smaller and with less padding so
  it takes up less room on mobile

---------

Co-authored-by: Jordan Vidrine <jordan@jordanvidrine.com>
This commit is contained in:
Martin Brennan
2025-04-18 12:26:03 +10:00
committed by GitHub
parent ec1f43f9ca
commit 492256e91e
2 changed files with 29 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
app/assets/stylesheets/common/base/search-menu.scss
View File

@ -14,18 +14,8 @@
$search-pad-vertical: 0.25em; $search-pad-vertical: 0.25em;
$search-pad-horizontal: 0.5em; $search-pad-horizontal: 0.5em;
.search-menu, .search-menu.glimmer-search-menu {
.search-menu-container {
.menu-panel .panel-body-contents {
overflow-y: auto;
}
.search-input-wrapper { .search-input-wrapper {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.25rem;
@include breakpoint("mobile-extra-large") { @include breakpoint("mobile-extra-large") {
--search-input-wrapper-padding: 0.5rem; --search-input-wrapper-padding: 0.5rem;
position: fixed; position: fixed;
@ -38,6 +28,20 @@ $search-pad-horizontal: 0.5em;
z-index: z("base"); z-index: z("base");
} }
} }
}
.search-menu,
.search-menu-container {
.menu-panel .panel-body-contents {
overflow-y: auto;
}
.search-input-wrapper {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.25rem;
}
.search-input { .search-input {
position: relative; position: relative;

14
app/assets/stylesheets/common/components/welcome-banner.scss
View File

@ -35,6 +35,12 @@
margin-top: 0.5em; margin-top: 0.5em;
} }
@include breakpoint("mobile-extra-large") {
display: block;
padding: 0.5em;
margin-top: 0;
}
> div { > div {
margin: 0 auto; margin: 0 auto;
max-width: 600px; max-width: 600px;
@ -44,6 +50,10 @@
display: flex; display: flex;
position: relative; position: relative;
@include breakpoint("mobile-extra-large") {
display: none;
}
.search-menu-container { .search-menu-container {
width: 100%; width: 100%;
min-width: 0; min-width: 0;
@ -72,6 +82,10 @@
@include breakpoint(tablet) { @include breakpoint(tablet) {
font-size: var(--font-up-4); font-size: var(--font-up-4);
} }
@include breakpoint("mobile-extra-large") {
font-size: var(--font-up-2);
}
} }
h1, h1,