Port search results styling to glitch-soc
parent
fad29fd230
commit
58da5e93c0
|
@ -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>
|
||||||
|
|
|
@ -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%);
|
||||||
&::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;
|
|
||||||
cursor: default;
|
cursor: default;
|
||||||
|
display: flex;
|
||||||
|
padding: 15px;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 16px;
|
||||||
|
color: $dark-text-color;
|
||||||
|
|
||||||
|
.fa {
|
||||||
|
display: inline-block;
|
||||||
|
margin-right: 5px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue