From 16723546de81e29fa8a31acc4070df5acb182b24 Mon Sep 17 00:00:00 2001 From: Noah Loomans Date: Wed, 24 Jan 2018 16:08:49 +0100 Subject: Add basic styling to user page --- src/client/react/components/container/Search.js | 34 +++++++++++++------------ src/client/react/components/page/User.js | 8 ++++-- src/client/style/_component-search.scss | 11 ++++++-- src/client/style/_page-index.scss | 3 ++- src/client/style/_page-user.scss | 11 ++++++++ src/client/style/index.scss | 1 + 6 files changed, 47 insertions(+), 21 deletions(-) create mode 100644 src/client/style/_page-user.scss (limited to 'src') diff --git a/src/client/react/components/container/Search.js b/src/client/react/components/container/Search.js index 9a99833..8acbe99 100644 --- a/src/client/react/components/container/Search.js +++ b/src/client/react/components/container/Search.js @@ -89,25 +89,27 @@ class Search extends React.Component { } = this.state; return ( -
-
-
- } +
+
+
+
+ } + /> +
+ dispatch(inputChange(event.target.value))} + onKeyDown={this.onKeyDown} + value={searchText} + placeholder="Zoeken" + onFocus={this.onFocus} + onBlur={this.onBlur} />
- dispatch(inputChange(event.target.value))} - onKeyDown={this.onKeyDown} - value={searchText} - placeholder="Zoeken" - onFocus={this.onFocus} - onBlur={this.onBlur} - /> +
-
); } diff --git a/src/client/react/components/page/User.js b/src/client/react/components/page/User.js index ea8cd10..ff304c0 100644 --- a/src/client/react/components/page/User.js +++ b/src/client/react/components/page/User.js @@ -14,8 +14,12 @@ const App = ({ match }) => { } return ( -
- +
+
+
+ +
+
); diff --git a/src/client/style/_component-search.scss b/src/client/style/_component-search.scss index d819e6f..51d6b4a 100644 --- a/src/client/style/_component-search.scss +++ b/src/client/style/_component-search.scss @@ -1,6 +1,13 @@ .search { - border-radius: 2px; - background-color: white; + height: 54px; + position: relative; + + &-overflow { + border-radius: 2px; + background-color: white; + position: absolute; + width: 100%; + } &--has-focus { box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); diff --git a/src/client/style/_page-index.scss b/src/client/style/_page-index.scss index 6fe7739..c09f996 100644 --- a/src/client/style/_page-index.scss +++ b/src/client/style/_page-index.scss @@ -6,7 +6,7 @@ .container { max-width: 600px; margin: 0 auto; - padding: 20px; + padding: 8px; img { display: block; @@ -14,6 +14,7 @@ } .search { + z-index: 1; // Position search above help-box margin-top: 64px; } } diff --git a/src/client/style/_page-user.scss b/src/client/style/_page-user.scss new file mode 100644 index 0000000..395e492 --- /dev/null +++ b/src/client/style/_page-user.scss @@ -0,0 +1,11 @@ +.page-user { + .menu { + background-color: #F44336; + + &-container { + max-width: 600px; + margin: 0 auto; + padding: 8px; + } + } +} diff --git a/src/client/style/index.scss b/src/client/style/index.scss index d2ad825..763a329 100644 --- a/src/client/style/index.scss +++ b/src/client/style/index.scss @@ -8,6 +8,7 @@ body { } @import "page-index"; +@import "page-user"; @import "component-search"; @import "component-help-box"; -- cgit v1.1