Fix layout of Searchbar in IDEView
This commit is contained in:
parent
38f13c2047
commit
fc02f49d93
3 changed files with 21 additions and 8 deletions
|
@ -83,7 +83,12 @@ class DashboardView extends React.Component {
|
||||||
return <Link className="dashboard__action-button" to={`/${username}/collections/create`}>Create collection</Link>;
|
return <Link className="dashboard__action-button" to={`/${username}/collections/create`}>Create collection</Link>;
|
||||||
case TabKey.sketches:
|
case TabKey.sketches:
|
||||||
default:
|
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">
|
<section className="dashboard-header">
|
||||||
<div className="dashboard-header__header">
|
<div className="dashboard-header__header">
|
||||||
<h2 className="dashboard-header__header__title">{this.ownerName()}</h2>
|
<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} />
|
<DashboardTabSwitcher currentTab={currentTab} isOwner={isOwner} username={username} />
|
||||||
{currentTab === TabKey.sketches && <Searchbar />}
|
<div className="dashboard-header__actions">
|
||||||
{this.renderActionButton(currentTab, username)}
|
{this.renderActionButton(currentTab, username)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div className="dashboard-content">
|
<div className="dashboard-content">
|
||||||
{this.renderContent(currentTab, username)}
|
{this.renderContent(currentTab, username)}
|
||||||
|
|
|
@ -55,12 +55,21 @@
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dashboard-header__actions {
|
.dashboard-header__nav {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.dashboard-header__actions {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dashboard-header__actions > * {
|
||||||
|
margin-left: #{15 / $base-font-size}rem;
|
||||||
|
}
|
||||||
|
|
||||||
.dashboard__action-button {
|
.dashboard__action-button {
|
||||||
flex-grow: 0;
|
flex-grow: 0;
|
||||||
@extend %button;
|
@extend %button;
|
||||||
|
|
|
@ -1,9 +1,7 @@
|
||||||
.searchbar {
|
.searchbar {
|
||||||
position: absolute;
|
position: relative;
|
||||||
display: flex;
|
display: flex;
|
||||||
padding-left: #{17 / $base-font-size}rem;
|
padding-left: #{17 / $base-font-size}rem;
|
||||||
right: #{66 / $base-font-size}rem;
|
|
||||||
top: #{65 / $base-font-size}rem;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.searchbar__input {
|
.searchbar__input {
|
||||||
|
|
Loading…
Reference in a new issue