fix: redesign tabs slightly (#1178)

This commit is contained in:
Nolan Lawson 2019-05-05 12:30:08 -07:00 committed by GitHub
parent 23bdc6c87e
commit de9faf4678
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 20 additions and 13 deletions

View file

@ -26,7 +26,7 @@
ul { ul {
list-style: none; list-style: none;
display: flex; display: flex;
margin: 5px 0; margin: 0;
box-sizing: border-box; box-sizing: border-box;
} }
@ -36,13 +36,14 @@
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
border-top-left-radius: 10px; border-top-left-radius: 7px;
border-top-right-radius: 10px; border-top-right-radius: 7px;
background: var(--tab-bg); background: var(--tab-bg);
border-left: none;
} }
li:not(:first-child) { li:last-child {
border-left: none; border-right: none;
} }
li:hover { li:hover {
@ -70,7 +71,7 @@
} }
a { a {
padding: 10px; padding: 7px 10px;
color: var(--body-text-color); color: var(--body-text-color);
font-size: 1.1em; font-size: 1.1em;
flex: 1; flex: 1;

View file

@ -13,6 +13,7 @@
<AccountProfileDetails {account} {relationship} {verifyCredentials} /> <AccountProfileDetails {account} {relationship} {verifyCredentials} />
</div> </div>
</div> </div>
<AccountProfileFilters account={$currentAccountProfile} {filter} />
</div> </div>
<style> <style>
.account-profile { .account-profile {
@ -82,6 +83,7 @@
import AccountProfileMeta from './AccountProfileMeta.html' import AccountProfileMeta from './AccountProfileMeta.html'
import AccountProfileDetails from './AccountProfileDetails.html' import AccountProfileDetails from './AccountProfileDetails.html'
import AccountProfileMovedBanner from './AccountProfileMovedBanner.html' import AccountProfileMovedBanner from './AccountProfileMovedBanner.html'
import AccountProfileFilters from './AccountProfileFilters.html'
import { store } from '../../_store/store' import { store } from '../../_store/store'
import { classname } from '../../_utils/classname' import { classname } from '../../_utils/classname'
@ -105,7 +107,8 @@
AccountProfileNote, AccountProfileNote,
AccountProfileMeta, AccountProfileMeta,
AccountProfileDetails, AccountProfileDetails,
AccountProfileMovedBanner AccountProfileMovedBanner,
AccountProfileFilters
} }
} }
</script> </script>

View file

@ -4,6 +4,11 @@
{tabs} {tabs}
className="account-profile-filters" className="account-profile-filters"
/> />
<style>
:global(.account-profile-filters) {
background: var(--account-profile-bg);
}
</style>
<script> <script>
import TabSet from '../TabSet.html' import TabSet from '../TabSet.html'

View file

@ -5,8 +5,8 @@
<AccountProfile account={$currentAccountProfile} <AccountProfile account={$currentAccountProfile}
relationship={$currentAccountRelationship} relationship={$currentAccountRelationship}
verifyCredentials={$currentVerifyCredentials} verifyCredentials={$currentVerifyCredentials}
{filter}
/> />
<AccountProfileFilters account={$currentAccountProfile} {filter} />
{/if} {/if}
{#if !filter} {#if !filter}
<PinnedStatuses {accountId} /> <PinnedStatuses {accountId} />
@ -30,7 +30,6 @@
import { updateProfileAndRelationship, clearProfileAndRelationship } from '../../_actions/accounts' import { updateProfileAndRelationship, clearProfileAndRelationship } from '../../_actions/accounts'
import AccountProfile from './AccountProfile.html' import AccountProfile from './AccountProfile.html'
import PinnedStatuses from '../timeline/PinnedStatuses.html' import PinnedStatuses from '../timeline/PinnedStatuses.html'
import AccountProfileFilters from './AccountProfileFilters.html'
export default { export default {
oncreate () { oncreate () {
@ -59,8 +58,7 @@
HiddenFromSSR, HiddenFromSSR,
DynamicPageBanner, DynamicPageBanner,
AccountProfile, AccountProfile,
PinnedStatuses, PinnedStatuses
AccountProfileFilters
} }
} }
</script> </script>

View file

@ -104,8 +104,8 @@
--tab-bg: #{$main-bg-color}; --tab-bg: #{$main-bg-color};
--tab-bg-non-selected: #{darken($main-bg-color, 3%)}; --tab-bg-non-selected: #{darken($main-bg-color, 3%)};
--tab-bg-active: #{darken($main-bg-color, 25%)}; --tab-bg-active: #{darken($main-bg-color, 25%)};
--tab-bg-hover: #{darken($main-bg-color, 4%)}; --tab-bg-hover: #{darken($main-bg-color, 2%)};
--tab-bg-hover-non-selected: #{darken($main-bg-color, 7%)}; --tab-bg-hover-non-selected: #{darken($main-bg-color, 5%)};
--tooltip-bg: rgba(30, 30, 30, 0.9); --tooltip-bg: rgba(30, 30, 30, 0.9);
--tooltip-color: white; --tooltip-color: white;