treehouse
/
mastodon
22
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'; import { Link } from 'react-router-dom';
// Components. // Components.
import Icon from 'flavours/glitch/components/icon';
import AccountContainer from 'flavours/glitch/containers/account_container'; import AccountContainer from 'flavours/glitch/containers/account_container';
import StatusContainer from 'flavours/glitch/containers/status_container'; import StatusContainer from 'flavours/glitch/containers/status_container';
import Hashtag from 'flavours/glitch/components/hashtag'; import Hashtag from 'flavours/glitch/components/hashtag';
@ -62,6 +63,7 @@ export default function DrawerResults ({
}} }}
> >
<header> <header>
<Icon icon='search' fixedWidth />
<FormattedMessage <FormattedMessage
{...messages.total} {...messages.total}
values={{ count }} values={{ count }}
@ -69,7 +71,7 @@ export default function DrawerResults ({
</header> </header>
{accounts && accounts.size ? ( {accounts && accounts.size ? (
<section> <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( {accounts.map(
accountId => ( accountId => (
@ -83,7 +85,7 @@ export default function DrawerResults ({
) : null} ) : null}
{statuses && statuses.size ? ( {statuses && statuses.size ? (
<section> <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( {statuses.map(
statusId => ( statusId => (
@ -97,7 +99,7 @@ export default function DrawerResults ({
) : null} ) : null}
{hashtags && hashtags.size ? ( {hashtags && hashtags.size ? (
<section> <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} />)} {hashtags.map(hashtag => <Hashtag key={hashtag.get('name')} hashtag={hashtag} />)}
</section> </section>

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

@ -196,43 +196,35 @@
overflow-y: auto; overflow-y: auto;
& > header { & > header {
border-bottom: 1px solid darken($ui-base-color, 4%);
padding: 15px 10px;
color: $dark-text-color; color: $dark-text-color;
background: lighten($ui-base-color, 2%); background: lighten($ui-base-color, 2%);
font-size: 14px; padding: 15px;
font-weight: 500; font-weight: 500;
font-size: 16px;
cursor: default;
.fa {
display: inline-block;
margin-right: 5px;
}
} }
& > section { & > section {
background: $ui-base-color; margin-bottom: 5px;
margin-bottom: 20px;
h5 { h5 {
position: relative; 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;
&::before { .fa {
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; display: inline-block;
background: $ui-base-color; margin-right: 5px;
color: $darker-text-color;
font-size: 14px;
font-weight: 500;
padding: 10px;
position: relative;
z-index: 1;
cursor: default;
} }
} }