tarrien/Mastodon
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Port search popout changes from upstream (#2333)

Browse Source 
* [Glitch] Change search pop-out in web UI

Port 2b11376411 to glitch-soc

Signed-off-by: Plastikmensch <plastikmensch@users.noreply.github.com>

* [Glitch] Change logo version in header based on screen size in web UI

Port remaining change from 6028d047b9 to glitch-soc

Signed-off-by: Plastikmensch <plastikmensch@users.noreply.github.com>

* Rename `hashtags.js` to `hashtags.ts` and apply code style changes

Apply changes from e38b391940 (rename to ts), 51b83ed195 (code style change), 73b64b8917 (additional code style change)

Signed-off-by: Plastikmensch <plastikmensch@users.noreply.github.com>

* Remove strings for old search

Signed-off-by: Plastikmensch <plastikmensch@users.noreply.github.com>

---------

Signed-off-by: Plastikmensch <plastikmensch@users.noreply.github.com>
This commit is contained in:
Plastikmensch
2023-07-30 18:42:35 +02:00
committed by GitHub
parent 3a14104411
commit ebfa184e74
12 changed files with 422 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
app/javascript/flavours/glitch/styles/components/drawer.scss
View File

@ -99,10 +99,6 @@
}
}
.search-popout {
@include search-popout;
}
.navigation-bar {
padding: 10px;
color: $darker-text-color;

4
app/javascript/flavours/glitch/styles/components/explore.scss
View File

@ -18,6 +18,10 @@
padding: 10px;
}
.search__popout {
border: 1px solid lighten($ui-base-color, 8%);
}
.search .fa {
top: 10px;
inset-inline-end: 10px;

80
app/javascript/flavours/glitch/styles/components/search.scss
View File

@ -1,6 +1,86 @@
.search {
margin-bottom: 10px;
position: relative;
&__popout {
box-sizing: border-box;
display: none;
position: absolute;
inset-inline-start: 0;
margin-top: -2px;
width: 100%;
background: $ui-base-color;
border-radius: 0 0 4px 4px;
box-shadow: 4px 4px 6px rgba($base-shadow-color, 0.4);
z-index: 99;
font-size: 13px;
padding: 15px 5px;
h4 {
text-transform: uppercase;
color: $dark-text-color;
font-weight: 500;
padding: 0 10px;
margin-bottom: 10px;
}
&__menu {
&__message {
color: $dark-text-color;
padding: 0 10px;
}
&__item {
display: block;
box-sizing: border-box;
width: 100%;
border: 0;
font: inherit;
background: transparent;
color: $darker-text-color;
padding: 10px;
cursor: pointer;
border-radius: 4px;
text-align: start;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
&--flex {
display: flex;
justify-content: space-between;
}
.icon-button {
transition: none;
}
&:hover,
&:focus,
&:active,
&.selected {
background: $ui-highlight-color;
color: $primary-text-color;
.icon-button {
color: $primary-text-color;
}
}
mark {
background: transparent;
font-weight: 700;
color: $primary-text-color;
}
}
}
}
&.active {
.search__popout {
display: block;
}
}
}
.search__input {