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

View file

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

View file

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

View file

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

View file

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