diff --git a/client/modules/IDE/components/Searchbar.jsx b/client/modules/IDE/components/Searchbar.jsx
index f3047b91..4f5f350e 100644
--- a/client/modules/IDE/components/Searchbar.jsx
+++ b/client/modules/IDE/components/Searchbar.jsx
@@ -58,7 +58,7 @@ class Searchbar extends React.Component {
className="searchbar__input"
type="text"
value={searchValue}
- placeholder="Search files..."
+ placeholder="Search sketches..."
onChange={this.handleSearchChange}
onKeyUp={this.handleSearchEnter}
/>
diff --git a/client/modules/User/pages/DashboardView.jsx b/client/modules/User/pages/DashboardView.jsx
index af93db70..d6c02bfd 100644
--- a/client/modules/User/pages/DashboardView.jsx
+++ b/client/modules/User/pages/DashboardView.jsx
@@ -9,6 +9,7 @@ import Nav from '../../../components/Nav';
import AssetList from '../../IDE/components/AssetList';
import SketchList from '../../IDE/components/SketchList';
+import Searchbar from '../../IDE/components/Searchbar';
import DashboardTabSwitcher, { TabKey } from '../components/DashboardTabSwitcher';
@@ -75,6 +76,7 @@ class DashboardView extends React.Component {
{this.ownerName()}
+ { currentTab === TabKey.sketches && }
diff --git a/client/styles/components/_asset-list.scss b/client/styles/components/_asset-list.scss
index 5bf835b0..1df44f20 100644
--- a/client/styles/components/_asset-list.scss
+++ b/client/styles/components/_asset-list.scss
@@ -7,7 +7,7 @@
.asset-table {
width: 100%;
- padding: #{10 / $base-font-size}rem 0;
+ padding-bottom: #{10 / $base-font-size}rem;
max-height: 100%;
border-spacing: 0;
& .asset-list__delete-column {
@@ -22,8 +22,15 @@
}
& th {
+ padding-top: #{10 / $base-font-size}rem;
+ padding-bottom: #{15 / $base-font-size}rem;
height: #{32 / $base-font-size}rem;
font-weight: normal;
+ position: sticky;
+ top: #{15 / $base-font-size}rem;
+ @include themify() {
+ background-color: getThemifyVariable('background-color');
+ }
}
}
@@ -57,4 +64,9 @@
.asset-table__total {
padding: 0 #{20 / $base-font-size}rem;
+ position: sticky;
+ top: 0;
+ @include themify() {
+ background-color: getThemifyVariable('background-color');
+ }
}
diff --git a/client/styles/components/_dashboard-header.scss b/client/styles/components/_dashboard-header.scss
index 6737e672..126f88a9 100644
--- a/client/styles/components/_dashboard-header.scss
+++ b/client/styles/components/_dashboard-header.scss
@@ -1,5 +1,10 @@
.dashboard-header {
padding: #{24 / $base-font-size}rem #{66 / $base-font-size}rem;
+ position: relative;
+ flex: 1;
+ overflow: hidden;
+ display: flex;
+ flex-direction:column;
}
.dashboard-header__tabs {
diff --git a/client/styles/components/_searchbar.scss b/client/styles/components/_searchbar.scss
index 47a5fc84..07e8585b 100644
--- a/client/styles/components/_searchbar.scss
+++ b/client/styles/components/_searchbar.scss
@@ -2,8 +2,8 @@
position: absolute;
display: flex;
padding-left: #{17 / $base-font-size}rem;
- right: #{50 / $base-font-size}rem;
- top: #{14 / $base-font-size}rem;
+ right: #{66 / $base-font-size}rem;
+ top: #{65 / $base-font-size}rem;
}
.searchbar__input {
@@ -18,15 +18,26 @@
}
}
-.searchbar__button {
+button[type="submit"].searchbar__button {
+ background-color: unset;
width: #{31 / $base-font-size}rem;
height: #{36 / $base-font-size}rem;
position: absolute;
padding: 0;
+ border: 0;
border-right: solid 1px;
@include themify() {
border-right-color: getThemifyVariable('input-border-color');
}
+ &:enabled:hover {
+ background-color: unset;
+ @include themify() {
+ border-right-color: getThemifyVariable('input-border-color');
+ }
+ & g {
+ fill: unset;
+ }
+ }
}
.searchbar__icon {
diff --git a/client/styles/components/_sketch-list.scss b/client/styles/components/_sketch-list.scss
index 730581cf..05e2bd4f 100644
--- a/client/styles/components/_sketch-list.scss
+++ b/client/styles/components/_sketch-list.scss
@@ -17,6 +17,11 @@
.sketches-table thead th {
height: #{32 / $base-font-size}rem;
+ position: sticky;
+ top: 0;
+ @include themify() {
+ background-color: getThemifyVariable('background-color');
+ }
}
.sketch-list__sort-button {
diff --git a/client/styles/layout/_dashboard.scss b/client/styles/layout/_dashboard.scss
index f928ffd3..74a94d23 100644
--- a/client/styles/layout/_dashboard.scss
+++ b/client/styles/layout/_dashboard.scss
@@ -6,4 +6,12 @@
color: getThemifyVariable('primary-text-color');
background-color: getThemifyVariable('background-color');
}
+ height: 100%;
+}
+
+.dashboard-content {
+ display: flex;
+ flex-direction: column;
+ flex: 1;
+ overflow: hidden;
}