Port search results styling to glitch-soc
This commit is contained in:
parent
fad29fd230
commit
58da5e93c0
|
@ -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>
|
||||
|
|
|
@ -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;
|
||||
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 {
|
||||
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 {
|
||||
.fa {
|
||||
display: inline-block;
|
||||
background: $ui-base-color;
|
||||
color: $darker-text-color;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
padding: 10px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
cursor: default;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
Reference in New Issue