treehouse
/
mastodon
21
8
Fork 5
Code Issues 32 Pull Requests Projects 1 Releases Wiki Activity

Port search results styling to glitch-soc

remotes/1727458204337373841/tmp_refs/heads/signup-info-prompt
Thibaut Girka 2019-03-28 14:24:04 +01:00 committed by ThibG
parent fad29fd230
commit 58da5e93c0
2 changed files with 24 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
app/javascript/flavours/glitch/features/drawer/results/index.js
View File

@ -10,6 +10,7 @@ import spring from 'react-motion/lib/spring';
import { Link } from 'react-router-dom';
// Components.
import Icon from 'flavours/glitch/components/icon';
import AccountContainer from 'flavours/glitch/containers/account_container';
import StatusContainer from 'flavours/glitch/containers/status_container';
import Hashtag from 'flavours/glitch/components/hashtag';
@ -62,6 +63,7 @@ export default function DrawerResults ({
}}
>
<header>
<Icon icon='search' fixedWidth />
<FormattedMessage
{...messages.total}
values={{ count }}
@ -69,7 +71,7 @@ export default function DrawerResults ({
</header>
{accounts && accounts.size ? (
<section>
<h5><FormattedMessage id='search_results.accounts' defaultMessage='People' /></h5>
<h5><Icon icon='users' fixedWidth /><FormattedMessage id='search_results.accounts' defaultMessage='People' /></h5>
{accounts.map(
accountId => (
@ -83,7 +85,7 @@ export default function DrawerResults ({
) : null}
{statuses && statuses.size ? (
<section>
<h5><FormattedMessage id='search_results.statuses' defaultMessage='Toots' /></h5>
<h5><Icon icon='quote-right' fixedWidth /><FormattedMessage id='search_results.statuses' defaultMessage='Toots' /></h5>
{statuses.map(
statusId => (
@ -97,7 +99,7 @@ export default function DrawerResults ({
) : null}
{hashtags && hashtags.size ? (
<section>
<h5><FormattedMessage id='search_results.hashtags' defaultMessage='Hashtags' /></h5>
<h5><Icon icon='hashtag' fixedWidth /><FormattedMessage id='search_results.hashtags' defaultMessage='Hashtags' /></h5>
{hashtags.map(hashtag => <Hashtag key={hashtag.get('name')} hashtag={hashtag} />)}
</section>

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

@ -196,43 +196,35 @@
overflow-y: auto;
& > header {
border-bottom: 1px solid darken($ui-base-color, 4%);
padding: 15px 10px;
color: $dark-text-color;
background: lighten($ui-base-color, 2%);
font-size: 14px;
padding: 15px;
font-weight: 500;
font-size: 16px;
cursor: default;
.fa {
display: inline-block;
margin-right: 5px;
}
}
& > section {
background: $ui-base-color;
margin-bottom: 20px;
margin-bottom: 5px;
h5 {
position: relative;
&::before {
content: "";
display: block;
position: absolute;
left: 0;
right: 0;
top: 50%;
width: 100%;
height: 0;
border-top: 1px solid lighten($ui-base-color, 8%);
}
span {
display: inline-block;
background: $ui-base-color;
color: $darker-text-color;
font-size: 14px;
font-weight: 500;
padding: 10px;
position: relative;
z-index: 1;
background: darken($ui-base-color, 4%);
border-bottom: 1px solid lighten($ui-base-color, 8%);
cursor: default;
display: flex;
padding: 15px;
font-weight: 500;
font-size: 16px;
color: $dark-text-color;
.fa {
display: inline-block;
margin-right: 5px;
}
}