Fix layout of Searchbar in IDEView

This commit is contained in:
Andrew Nicolaou 2019-10-02 18:17:52 +03:00
parent 38f13c2047
commit fc02f49d93
3 changed files with 21 additions and 8 deletions

View file

@ -83,7 +83,12 @@ class DashboardView extends React.Component {
return <Link className="dashboard__action-button" to={`/${username}/collections/create`}>Create collection</Link>;
case TabKey.sketches:
default:
return <Link className="dashboard__action-button" to="/">New sketch</Link>;
return (
<React.Fragment>
<Searchbar />
<Link className="dashboard__action-button" to="/">New sketch</Link>
</React.Fragment>
);
}
}
@ -111,12 +116,13 @@ class DashboardView extends React.Component {
<section className="dashboard-header">
<div className="dashboard-header__header">
<h2 className="dashboard-header__header__title">{this.ownerName()}</h2>
<div className="dashboard-header__actions">
<div className="dashboard-header__nav">
<DashboardTabSwitcher currentTab={currentTab} isOwner={isOwner} username={username} />
{currentTab === TabKey.sketches && <Searchbar />}
<div className="dashboard-header__actions">
{this.renderActionButton(currentTab, username)}
</div>
</div>
</div>
<div className="dashboard-content">
{this.renderContent(currentTab, username)}

View file

@ -55,12 +55,21 @@
margin: 0;
}
.dashboard-header__actions {
.dashboard-header__nav {
display: flex;
justify-content: space-between;
align-items: center;
}
.dashboard-header__actions {
display: flex;
align-items: center;
}
.dashboard-header__actions > * {
margin-left: #{15 / $base-font-size}rem;
}
.dashboard__action-button {
flex-grow: 0;
@extend %button;

View file

@ -1,9 +1,7 @@
.searchbar {
position: absolute;
position: relative;
display: flex;
padding-left: #{17 / $base-font-size}rem;
right: #{66 / $base-font-size}rem;
top: #{65 / $base-font-size}rem;
}
.searchbar__input {