From 774e3d5fbb4aff1b99e6127d392d787d3a1deaf6 Mon Sep 17 00:00:00 2001 From: woJburgess Date: Thu, 9 Jul 2015 13:33:33 +0100 Subject: [PATCH 1/6] add a better search bar --- index.html | 5 +++++ scss/component/_forms.scss | 24 ++++++++++-------------- scss/main.scss | 7 ++++++- 3 files changed, 21 insertions(+), 15 deletions(-) diff --git a/index.html b/index.html index cd57625..37652c1 100644 --- a/index.html +++ b/index.html @@ -30,6 +30,11 @@
+ + diff --git a/scss/component/_forms.scss b/scss/component/_forms.scss index ccd0dae..f5163a7 100644 --- a/scss/component/_forms.scss +++ b/scss/component/_forms.scss @@ -1,16 +1,12 @@ -.form__input--search { - display: inline-block; - float: left; - width: 75%; +.form--fixed-right { + position: fixed; + right: 0; + margin: 20px 0; + background-color: $gray-lighter; + border: solid 1px $gray-light; + border-right: none; + padding: 10px; + padding-right: 30px; + border-radius: 5px 0 0 5px; } -.form__input--search-submit { - float: right; - display: inline-block; - width: 25%; -} - -.form-group--search { - margin: 0; - padding: 0; -} diff --git a/scss/main.scss b/scss/main.scss index 1b077f1..c57d7eb 100644 --- a/scss/main.scss +++ b/scss/main.scss @@ -6,7 +6,12 @@ body { background: $brand-color1; - padding-top: 70px; +} + +@media (max-width: $screen-sm) { + body { + padding-top: 70px; + } } pre.prettyprint { From 89554c8b00da28f513804286a0b406343d772ecc Mon Sep 17 00:00:00 2001 From: woJburgess Date: Thu, 9 Jul 2015 13:35:35 +0100 Subject: [PATCH 2/6] add a side menu --- index.html | 11 +++++++++-- scss/component/_side-menu.scss | 25 +++++++++++++++++++++++++ scss/main.scss | 1 + shared/directives/header-footer.js | 7 +++++++ shared/directives/header.html | 24 +++++++++++------------- shared/directives/side-menu.html | 11 +++++++++++ templates/home.html | 10 ++++------ 7 files changed, 68 insertions(+), 21 deletions(-) create mode 100644 scss/component/_side-menu.scss create mode 100644 shared/directives/side-menu.html diff --git a/index.html b/index.html index 37652c1..f53d481 100644 --- a/index.html +++ b/index.html @@ -26,15 +26,22 @@ - -
+
+ +
+
+ + + diff --git a/scss/component/_side-menu.scss b/scss/component/_side-menu.scss new file mode 100644 index 0000000..8c027ea --- /dev/null +++ b/scss/component/_side-menu.scss @@ -0,0 +1,25 @@ +.side-menu { + background-color: $navbar-default-bg; + height: 100vh; + position: fixed; + padding: 20px; + width: 200px; +} + +.side-menu__header { + margin: 0; + margin-bottom: 20px; +} + +.content { + margin-left: 210px; + margin-right: 30px; +} + +@media(max-width: $screen-xs) { + .content { + margin: 0 ($grid-gutter-width / 2); // stop content from sinking into the row + padding-left: 10px; + } +} + diff --git a/scss/main.scss b/scss/main.scss index c57d7eb..c27c630 100644 --- a/scss/main.scss +++ b/scss/main.scss @@ -3,6 +3,7 @@ @import "component/card"; @import "component/forms"; +@import "component/side-menu"; body { background: $brand-color1; diff --git a/shared/directives/header-footer.js b/shared/directives/header-footer.js index f0e68e9..bc9a4cb 100644 --- a/shared/directives/header-footer.js +++ b/shared/directives/header-footer.js @@ -4,4 +4,11 @@ angular.module('pattern-box') restrict: 'E', templateUrl: 'shared/directives/header.html' }; + }) + + .directive('sideMenu', function () { + return { + restrict: 'E', + templateUrl: 'shared/directives/side-menu.html' + }; }); diff --git a/shared/directives/header.html b/shared/directives/header.html index 6f0dfc8..d52f1e9 100644 --- a/shared/directives/header.html +++ b/shared/directives/header.html @@ -1,20 +1,18 @@ -