r/p5.js-web-editor
1
0
Fork 0
Code Issues 1 Pull requests Releases 1 Wiki Activity

Fix layout of Searchbar in IDEView

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

14
client/modules/User/pages/DashboardView.jsx
View file

@ -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,10 +116,11 @@ 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>

11
client/styles/components/_dashboard-header.scss
View file

@ -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;

4
client/styles/components/_searchbar.scss
View file

@ -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 {