From ff9f15535cb33209dfcafba61f240941c73386a8 Mon Sep 17 00:00:00 2001 From: Rulingcom Date: Tue, 24 Nov 2015 13:51:47 +0800 Subject: [PATCH] space module update --- app/assets/javascripts/space/space.js | 36 + app/assets/stylesheets/_grid.scss | 788 ++++++++++++++++++ app/assets/stylesheets/_helpers.scss | 3 + app/assets/stylesheets/_variables.scss | 25 + app/assets/stylesheets/space-admin.scss | 59 ++ app/assets/stylesheets/space-frontend.scss | 22 + app/assets/stylesheets/space.scss | 166 ---- app/assets/stylesheets/spaces.scss | 464 +++++++++++ app/controllers/admin/spaces_controller.rb | 12 + app/controllers/spaces_controller.rb | 16 +- app/views/admin/spaces/_building.html.erb | 20 +- app/views/admin/spaces/_floor.html.erb | 6 +- app/views/admin/spaces/_floor_unit.html.erb | 27 +- app/views/admin/spaces/_sub_unit.html.erb | 18 +- .../admin/spaces/_sub_unit_form.html.erb | 53 +- app/views/admin/spaces/edit_sub_unit.html.erb | 2 +- app/views/admin/spaces/floor_layout.html.erb | 59 +- app/views/admin/spaces/floors.html.erb | 7 +- app/views/admin/spaces/index.html.erb | 12 +- app/views/admin/spaces/sub_units.html.erb | 7 +- app/views/admin/spaces/unit_layout.html.erb | 102 ++- app/views/admin/spaces/units.html.erb | 9 +- app/views/spaces/show.html.erb | 2 +- app/views/spaces/unit.html.erb | 2 +- config/routes.rb | 1 + 25 files changed, 1646 insertions(+), 272 deletions(-) create mode 100644 app/assets/javascripts/space/space.js create mode 100644 app/assets/stylesheets/_grid.scss create mode 100644 app/assets/stylesheets/_helpers.scss create mode 100644 app/assets/stylesheets/space-admin.scss create mode 100644 app/assets/stylesheets/space-frontend.scss delete mode 100644 app/assets/stylesheets/space.scss create mode 100644 app/assets/stylesheets/spaces.scss diff --git a/app/assets/javascripts/space/space.js b/app/assets/javascripts/space/space.js new file mode 100644 index 0000000..3c757f7 --- /dev/null +++ b/app/assets/javascripts/space/space.js @@ -0,0 +1,36 @@ +;(function($) { + + var doc = document; + var html = document.documentElement; + var body = doc.body; + + var space = { + setDataAttr: function() { + var cardName = doc.querySelectorAll('.card-name'); + var i = -1; + var len = -1; + + if (cardName) { + for (i = 0; i < cardName.length; i++) { + if (cardName[i].textContent.trim() !== '') { + cardName[i].className += ' has-data-text'; + cardName[i].setAttribute('data-text', cardName[i].textContent); + } + } + } + }, + + init: function() { + var container = doc.querySelector('.card-container'); + + if (container) { + this.setDataAttr(); + } + } + }; + + $(document).ready(function() { + space.init(); + }); + +}(jQuery)); \ No newline at end of file diff --git a/app/assets/stylesheets/_grid.scss b/app/assets/stylesheets/_grid.scss new file mode 100644 index 0000000..eb26f74 --- /dev/null +++ b/app/assets/stylesheets/_grid.scss @@ -0,0 +1,788 @@ +// Bootstrap grid +.row { + margin-right: -15px; + margin-left: -15px; +} + +.col-xs-1, +.col-sm-1, +.col-md-1, +.col-lg-1, +.col-xs-2, +.col-sm-2, +.col-md-2, +.col-lg-2, +.col-xs-3, +.col-sm-3, +.col-md-3, +.col-lg-3, +.col-xs-4, +.col-sm-4, +.col-md-4, +.col-lg-4, +.col-xs-5, +.col-sm-5, +.col-md-5, +.col-lg-5, +.col-xs-6, +.col-sm-6, +.col-md-6, +.col-lg-6, +.col-xs-7, +.col-sm-7, +.col-md-7, +.col-lg-7, +.col-xs-8, +.col-sm-8, +.col-md-8, +.col-lg-8, +.col-xs-9, +.col-sm-9, +.col-md-9, +.col-lg-9, +.col-xs-10, +.col-sm-10, +.col-md-10, +.col-lg-10, +.col-xs-11, +.col-sm-11, +.col-md-11, +.col-lg-11, +.col-xs-12, +.col-sm-12, +.col-md-12, +.col-lg-12 { + position: relative; + min-height: 1px; + padding-right: 15px; + padding-left: 15px; +} + +.col-xs-1, +.col-xs-2, +.col-xs-3, +.col-xs-4, +.col-xs-5, +.col-xs-6, +.col-xs-7, +.col-xs-8, +.col-xs-9, +.col-xs-10, +.col-xs-11, +.col-xs-12 { + float: left; +} + +.col-xs-12 { + width: 100%; +} + +.col-xs-11 { + width: 91.66666667%; +} + +.col-xs-10 { + width: 83.33333333%; +} + +.col-xs-9 { + width: 75%; +} + +.col-xs-8 { + width: 66.66666667%; +} + +.col-xs-7 { + width: 58.33333333%; +} + +.col-xs-6 { + width: 50%; +} + +.col-xs-5 { + width: 41.66666667%; +} + +.col-xs-4 { + width: 33.33333333%; +} + +.col-xs-3 { + width: 25%; +} + +.col-xs-2 { + width: 16.66666667%; +} + +.col-xs-1 { + width: 8.33333333%; +} + +.col-xs-pull-12 { + right: 100%; +} + +.col-xs-pull-11 { + right: 91.66666667%; +} + +.col-xs-pull-10 { + right: 83.33333333%; +} + +.col-xs-pull-9 { + right: 75%; +} + +.col-xs-pull-8 { + right: 66.66666667%; +} + +.col-xs-pull-7 { + right: 58.33333333%; +} + +.col-xs-pull-6 { + right: 50%; +} + +.col-xs-pull-5 { + right: 41.66666667%; +} + +.col-xs-pull-4 { + right: 33.33333333%; +} + +.col-xs-pull-3 { + right: 25%; +} + +.col-xs-pull-2 { + right: 16.66666667%; +} + +.col-xs-pull-1 { + right: 8.33333333%; +} + +.col-xs-pull-0 { + right: auto; +} + +.col-xs-push-12 { + left: 100%; +} + +.col-xs-push-11 { + left: 91.66666667%; +} + +.col-xs-push-10 { + left: 83.33333333%; +} + +.col-xs-push-9 { + left: 75%; +} + +.col-xs-push-8 { + left: 66.66666667%; +} + +.col-xs-push-7 { + left: 58.33333333%; +} + +.col-xs-push-6 { + left: 50%; +} + +.col-xs-push-5 { + left: 41.66666667%; +} + +.col-xs-push-4 { + left: 33.33333333%; +} + +.col-xs-push-3 { + left: 25%; +} + +.col-xs-push-2 { + left: 16.66666667%; +} + +.col-xs-push-1 { + left: 8.33333333%; +} + +.col-xs-push-0 { + left: auto; +} + +.col-xs-offset-12 { + margin-left: 100%; +} + +.col-xs-offset-11 { + margin-left: 91.66666667%; +} + +.col-xs-offset-10 { + margin-left: 83.33333333%; +} + +.col-xs-offset-9 { + margin-left: 75%; +} + +.col-xs-offset-8 { + margin-left: 66.66666667%; +} + +.col-xs-offset-7 { + margin-left: 58.33333333%; +} + +.col-xs-offset-6 { + margin-left: 50%; +} + +.col-xs-offset-5 { + margin-left: 41.66666667%; +} + +.col-xs-offset-4 { + margin-left: 33.33333333%; +} + +.col-xs-offset-3 { + margin-left: 25%; +} + +.col-xs-offset-2 { + margin-left: 16.66666667%; +} + +.col-xs-offset-1 { + margin-left: 8.33333333%; +} + +.col-xs-offset-0 { + margin-left: 0; +} + +@media (min-width: 768px) { + .col-sm-1, + .col-sm-2, + .col-sm-3, + .col-sm-4, + .col-sm-5, + .col-sm-6, + .col-sm-7, + .col-sm-8, + .col-sm-9, + .col-sm-10, + .col-sm-11, + .col-sm-12 { + float: left; + } + .col-sm-12 { + width: 100%; + } + .col-sm-11 { + width: 91.66666667%; + } + .col-sm-10 { + width: 83.33333333%; + } + .col-sm-9 { + width: 75%; + } + .col-sm-8 { + width: 66.66666667%; + } + .col-sm-7 { + width: 58.33333333%; + } + .col-sm-6 { + width: 50%; + } + .col-sm-5 { + width: 41.66666667%; + } + .col-sm-4 { + width: 33.33333333%; + } + .col-sm-3 { + width: 25%; + } + .col-sm-2 { + width: 16.66666667%; + } + .col-sm-1 { + width: 8.33333333%; + } + .col-sm-pull-12 { + right: 100%; + } + .col-sm-pull-11 { + right: 91.66666667%; + } + .col-sm-pull-10 { + right: 83.33333333%; + } + .col-sm-pull-9 { + right: 75%; + } + .col-sm-pull-8 { + right: 66.66666667%; + } + .col-sm-pull-7 { + right: 58.33333333%; + } + .col-sm-pull-6 { + right: 50%; + } + .col-sm-pull-5 { + right: 41.66666667%; + } + .col-sm-pull-4 { + right: 33.33333333%; + } + .col-sm-pull-3 { + right: 25%; + } + .col-sm-pull-2 { + right: 16.66666667%; + } + .col-sm-pull-1 { + right: 8.33333333%; + } + .col-sm-pull-0 { + right: auto; + } + .col-sm-push-12 { + left: 100%; + } + .col-sm-push-11 { + left: 91.66666667%; + } + .col-sm-push-10 { + left: 83.33333333%; + } + .col-sm-push-9 { + left: 75%; + } + .col-sm-push-8 { + left: 66.66666667%; + } + .col-sm-push-7 { + left: 58.33333333%; + } + .col-sm-push-6 { + left: 50%; + } + .col-sm-push-5 { + left: 41.66666667%; + } + .col-sm-push-4 { + left: 33.33333333%; + } + .col-sm-push-3 { + left: 25%; + } + .col-sm-push-2 { + left: 16.66666667%; + } + .col-sm-push-1 { + left: 8.33333333%; + } + .col-sm-push-0 { + left: auto; + } + .col-sm-offset-12 { + margin-left: 100%; + } + .col-sm-offset-11 { + margin-left: 91.66666667%; + } + .col-sm-offset-10 { + margin-left: 83.33333333%; + } + .col-sm-offset-9 { + margin-left: 75%; + } + .col-sm-offset-8 { + margin-left: 66.66666667%; + } + .col-sm-offset-7 { + margin-left: 58.33333333%; + } + .col-sm-offset-6 { + margin-left: 50%; + } + .col-sm-offset-5 { + margin-left: 41.66666667%; + } + .col-sm-offset-4 { + margin-left: 33.33333333%; + } + .col-sm-offset-3 { + margin-left: 25%; + } + .col-sm-offset-2 { + margin-left: 16.66666667%; + } + .col-sm-offset-1 { + margin-left: 8.33333333%; + } + .col-sm-offset-0 { + margin-left: 0; + } +} + +@media (min-width: 992px) { + .col-md-1, + .col-md-2, + .col-md-3, + .col-md-4, + .col-md-5, + .col-md-6, + .col-md-7, + .col-md-8, + .col-md-9, + .col-md-10, + .col-md-11, + .col-md-12 { + float: left; + } + .col-md-12 { + width: 100%; + } + .col-md-11 { + width: 91.66666667%; + } + .col-md-10 { + width: 83.33333333%; + } + .col-md-9 { + width: 75%; + } + .col-md-8 { + width: 66.66666667%; + } + .col-md-7 { + width: 58.33333333%; + } + .col-md-6 { + width: 50%; + } + .col-md-5 { + width: 41.66666667%; + } + .col-md-4 { + width: 33.33333333%; + } + .col-md-3 { + width: 25%; + } + .col-md-2 { + width: 16.66666667%; + } + .col-md-1 { + width: 8.33333333%; + } + .col-md-pull-12 { + right: 100%; + } + .col-md-pull-11 { + right: 91.66666667%; + } + .col-md-pull-10 { + right: 83.33333333%; + } + .col-md-pull-9 { + right: 75%; + } + .col-md-pull-8 { + right: 66.66666667%; + } + .col-md-pull-7 { + right: 58.33333333%; + } + .col-md-pull-6 { + right: 50%; + } + .col-md-pull-5 { + right: 41.66666667%; + } + .col-md-pull-4 { + right: 33.33333333%; + } + .col-md-pull-3 { + right: 25%; + } + .col-md-pull-2 { + right: 16.66666667%; + } + .col-md-pull-1 { + right: 8.33333333%; + } + .col-md-pull-0 { + right: auto; + } + .col-md-push-12 { + left: 100%; + } + .col-md-push-11 { + left: 91.66666667%; + } + .col-md-push-10 { + left: 83.33333333%; + } + .col-md-push-9 { + left: 75%; + } + .col-md-push-8 { + left: 66.66666667%; + } + .col-md-push-7 { + left: 58.33333333%; + } + .col-md-push-6 { + left: 50%; + } + .col-md-push-5 { + left: 41.66666667%; + } + .col-md-push-4 { + left: 33.33333333%; + } + .col-md-push-3 { + left: 25%; + } + .col-md-push-2 { + left: 16.66666667%; + } + .col-md-push-1 { + left: 8.33333333%; + } + .col-md-push-0 { + left: auto; + } + .col-md-offset-12 { + margin-left: 100%; + } + .col-md-offset-11 { + margin-left: 91.66666667%; + } + .col-md-offset-10 { + margin-left: 83.33333333%; + } + .col-md-offset-9 { + margin-left: 75%; + } + .col-md-offset-8 { + margin-left: 66.66666667%; + } + .col-md-offset-7 { + margin-left: 58.33333333%; + } + .col-md-offset-6 { + margin-left: 50%; + } + .col-md-offset-5 { + margin-left: 41.66666667%; + } + .col-md-offset-4 { + margin-left: 33.33333333%; + } + .col-md-offset-3 { + margin-left: 25%; + } + .col-md-offset-2 { + margin-left: 16.66666667%; + } + .col-md-offset-1 { + margin-left: 8.33333333%; + } + .col-md-offset-0 { + margin-left: 0; + } +} + +@media (min-width: 1200px) { + .col-lg-1, + .col-lg-2, + .col-lg-3, + .col-lg-4, + .col-lg-5, + .col-lg-6, + .col-lg-7, + .col-lg-8, + .col-lg-9, + .col-lg-10, + .col-lg-11, + .col-lg-12 { + float: left; + } + .col-lg-12 { + width: 100%; + } + .col-lg-11 { + width: 91.66666667%; + } + .col-lg-10 { + width: 83.33333333%; + } + .col-lg-9 { + width: 75%; + } + .col-lg-8 { + width: 66.66666667%; + } + .col-lg-7 { + width: 58.33333333%; + } + .col-lg-6 { + width: 50%; + } + .col-lg-5 { + width: 41.66666667%; + } + .col-lg-4 { + width: 33.33333333%; + } + .col-lg-3 { + width: 25%; + } + .col-lg-2 { + width: 16.66666667%; + } + .col-lg-1 { + width: 8.33333333%; + } + .col-lg-pull-12 { + right: 100%; + } + .col-lg-pull-11 { + right: 91.66666667%; + } + .col-lg-pull-10 { + right: 83.33333333%; + } + .col-lg-pull-9 { + right: 75%; + } + .col-lg-pull-8 { + right: 66.66666667%; + } + .col-lg-pull-7 { + right: 58.33333333%; + } + .col-lg-pull-6 { + right: 50%; + } + .col-lg-pull-5 { + right: 41.66666667%; + } + .col-lg-pull-4 { + right: 33.33333333%; + } + .col-lg-pull-3 { + right: 25%; + } + .col-lg-pull-2 { + right: 16.66666667%; + } + .col-lg-pull-1 { + right: 8.33333333%; + } + .col-lg-pull-0 { + right: auto; + } + .col-lg-push-12 { + left: 100%; + } + .col-lg-push-11 { + left: 91.66666667%; + } + .col-lg-push-10 { + left: 83.33333333%; + } + .col-lg-push-9 { + left: 75%; + } + .col-lg-push-8 { + left: 66.66666667%; + } + .col-lg-push-7 { + left: 58.33333333%; + } + .col-lg-push-6 { + left: 50%; + } + .col-lg-push-5 { + left: 41.66666667%; + } + .col-lg-push-4 { + left: 33.33333333%; + } + .col-lg-push-3 { + left: 25%; + } + .col-lg-push-2 { + left: 16.66666667%; + } + .col-lg-push-1 { + left: 8.33333333%; + } + .col-lg-push-0 { + left: auto; + } + .col-lg-offset-12 { + margin-left: 100%; + } + .col-lg-offset-11 { + margin-left: 91.66666667%; + } + .col-lg-offset-10 { + margin-left: 83.33333333%; + } + .col-lg-offset-9 { + margin-left: 75%; + } + .col-lg-offset-8 { + margin-left: 66.66666667%; + } + .col-lg-offset-7 { + margin-left: 58.33333333%; + } + .col-lg-offset-6 { + margin-left: 50%; + } + .col-lg-offset-5 { + margin-left: 41.66666667%; + } + .col-lg-offset-4 { + margin-left: 33.33333333%; + } + .col-lg-offset-3 { + margin-left: 25%; + } + .col-lg-offset-2 { + margin-left: 16.66666667%; + } + .col-lg-offset-1 { + margin-left: 8.33333333%; + } + .col-lg-offset-0 { + margin-left: 0; + } +} \ No newline at end of file diff --git a/app/assets/stylesheets/_helpers.scss b/app/assets/stylesheets/_helpers.scss new file mode 100644 index 0000000..b3a91e7 --- /dev/null +++ b/app/assets/stylesheets/_helpers.scss @@ -0,0 +1,3 @@ +@charset "utf-8"; +@import "variables"; + diff --git a/app/assets/stylesheets/_variables.scss b/app/assets/stylesheets/_variables.scss index e69de29..4e2c8b3 100644 --- a/app/assets/stylesheets/_variables.scss +++ b/app/assets/stylesheets/_variables.scss @@ -0,0 +1,25 @@ +@charset "utf-8"; +@import url(https://fonts.googleapis.com/css?family=Roboto); + +// Base Color +$white: #fff; +$black: #000; +$red: #ef6741; +$purple: #3d416e; +$gray: #828282; + +$main-color: #0c96a1; + +// Font stacks +$main-font: 'Roboto', "微軟正黑體", "Helvetica Neue", Helvetica, sans-serif; +$sub-font: 'Roboto', "新細明體", "Helvetica Neue", Helvetica, sans-serif; + +// Units +$border-radius-narrow: 2px; +$border-radius-normal: 4px; + +// Screen breakpoints +$screen-xs: 480px; +$screen-sm: 768px; +$screen-md: 992px; +$screen-lg: 1200px; diff --git a/app/assets/stylesheets/space-admin.scss b/app/assets/stylesheets/space-admin.scss new file mode 100644 index 0000000..cb1a344 --- /dev/null +++ b/app/assets/stylesheets/space-admin.scss @@ -0,0 +1,59 @@ +@charset "utf-8"; +@import "variables"; +@import "grid"; + +.message { + position: fixed; + right: 1rem; + top: 4rem; + color: $white; + padding: 16px 1.375rem; + background-color: $main-color; + border-radius: $border-radius-narrow; + font-size: 13px; + box-shadow: 0px 0px 16px 3px rgba(0, 0, 0, 0.2); + -webkit-animation-duration: .3s; + animation-duration: .3s; + z-index: 1000; +} + +.group { + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + overflow: hidden; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; +} +.group-item { + padding: 0; + margin-bottom: 10px; + margin: 8px; + padding: 15px 20px; + border: 2px solid lighten($gray, 30%); + border-radius: $border-radius-narrow; +} + +.group-actions { + padding: 8px; + background-color: lighten($gray, 45%); +} + +.group-img { + margin-bottom: 8px +} + +.group-label { + font-family: $main-font; + font-size: 12px; + display: inline; + vertical-align: middle; + color: lighten($black, 50%); +} + +.group-clear-4 { + > .group-item:nth-child(4n+1) { + clear: both; + } +} \ No newline at end of file diff --git a/app/assets/stylesheets/space-frontend.scss b/app/assets/stylesheets/space-frontend.scss new file mode 100644 index 0000000..537dee1 --- /dev/null +++ b/app/assets/stylesheets/space-frontend.scss @@ -0,0 +1,22 @@ +@charset "utf-8"; + +// space-box +.overlay { + position: absolute; +} + +#full-layout-canvas { + text-align: center; + position: relative; + + .image-cover { + position: absolute; + left: 50%; + top: 50%; + height: 100%; + margin: auto; + + // overflow: hidden; + transform: translate(-50%, -50%); + } +} \ No newline at end of file diff --git a/app/assets/stylesheets/space.scss b/app/assets/stylesheets/space.scss deleted file mode 100644 index 76ba990..0000000 --- a/app/assets/stylesheets/space.scss +++ /dev/null @@ -1,166 +0,0 @@ -ul.building-showcase{ - list-style: outside none none; - margin: 0; - padding: 0 0 10px; - - .building{ - background: #ffffff none repeat scroll 0 0; - box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); - float: left; - margin: 5px; - overflow: hidden; - padding: 5px; - position: relative; - transition-property: left, right, top; - width: 200px; - height: 275px; - - .actions { - text-align: center; - margin-top: 5px; - } - - .shade { - background-color: #000000; - bottom: 0; - content: ""; - display: block; - left: 0; - margin: 5px; - opacity: 0.4; - position: absolute; - right: 0; - top: 0; - width: 200px; - height: 250px; - } - - p { - bottom: 30px; - color: #f2f2f2; - font-family: "Playfair Display SC",sans-serif; - font-size: 30px; - letter-spacing: -0.5px; - line-height: 28px; - margin: 0; - opacity: 1; - padding: 10px; - position: absolute; - text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4); - z-index: 1; - } - - img { - height: 250px; - width: 100%; - } - } - -} - -ul.apartments-area { - list-style: outside none none; - margin: 0; - padding: 0 0 10px; - - .apartment { - background: #ffffff none repeat scroll 0 0; - box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); - float: left; - margin: 10px; - overflow: hidden; - padding: 5px; - position: relative; - margin-bottom: 3px; - padding-bottom: 0; - transition-property: left, right, top; - width: 150px; - height: 170px; - text-align: center; - - .apartment-img { - background-color: #F1F1F1; - width: 100%; - height: 125px; - overflow: hidden; - - } - - a{ - text-decoration: none; - } - - p{ - font-size: 18px; - font-family: "Playfair Display SC",sans-serif; - color : #000; - margin-bottom: 0; - } - } -} - -ul#layout-canvas { - background-color: #fff; - border: 2px solid #eee; - list-style: outside none none; - li.apartment-draggable { - max-width: 200px; - position: relative; - float: left; - cursor: move; - } -} - -#full-layout-canvas { - background-color: #fff; - border: 2px solid #eee; - text-align: center; - position: relative; - - .image-cover { - position: absolute; - left: 50%; - top: 50%; - height: 100%; - margin: auto; - overflow: hidden; - transform: translate(-50%, -50%); - } -} - -.selection-box{ - position: absolute; - width: 2px; - height: 2px; - background-color: rgba(0, 0, 0, .4); - - .selection-box-label{ - color: #fff; - } -} - -.make-box-permanent{ - position: absolute; -} - -.selection-box-form { - color: #fff; - - .form-unit-title{ - margin: 5px; - input { - width : 90%; - } - select { - width: 90%; - } - } -} - -.floor-unit-title{ - text-align: center; -} - - - - diff --git a/app/assets/stylesheets/spaces.scss b/app/assets/stylesheets/spaces.scss new file mode 100644 index 0000000..2012eb6 --- /dev/null +++ b/app/assets/stylesheets/spaces.scss @@ -0,0 +1,464 @@ +@charset "utf-8"; + +@import "variables"; +@import "grid"; + +// Since the backend system is using Bootstrap 2 heavily and it's not supporting RWD +// And if I import Bootstrap 3 directly into pages, it could cause CSS conflicts... +// that's why I only imported Bootstrap grid system and added flat style into this module +// ------ helpers +// classes +.list-unstyled { + list-style: none; + margin: 0; + padding: 0; +} + +.no-wrap { + white-space: nowrap; +} + +.absolute-center { + position: absolute; + left: 50%; + top: 50%; + -webkit-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); +} + +.absolute-bottom { + position: absolute; + left: 50%; + top: 100%; + -webkit-transform: translate(-50%, 0); + transform: translate(-50%, 0); +} + +// button, add -flat to extend the styling from Bootstrap +.btn-flat { + color: $white; + background: $gray; + border-radius: $border-radius-narrow; + padding: 4px 14px; + font-size: 13px; + border: none; + display: inline-block; + white-space: nowrap; + font-family: $main-font; + + &:hover { + color: $white; + text-decoration: none; + background-color: lighten($gray, 4%); + } +} + +.btn-flat-primary { + color: $white; + background-color: $main-color; + + &:hover { + background-color: lighten($main-color, 4%); + } +} + +.btn-flat-info { + background-color: $purple; + + &:hover { + background-color: lighten($purple, 8%); + } +} + +.btn-flat-warning { + background-color: #f5a742; + + &:hover { + background-color: lighten(#f5a742, 8%); + } +} + +.btn-flat-danger { + background-color: $red; + + &:hover { + background-color: lighten($red, 4%); + } +} + +.btn-flat-small { + padding: 2px 8px; +} + +.btn-flat-has-icon { + i { + margin-right: 5px; + } +} + +.btn-flat-has-margin { + margin-right: 4px; +} + +.btn-flat-block { + display: block; + width: 100%; + margin-bottom: 8px; + + &:last-child { + margin-bottom: 0; + } +} + +// ------ module +// card +.card-container { + margin: 0 20px; + + @media (min-width: $screen-sm) { + margin: 0; + } + + * { + box-sizing: border-box; + } + + p { + margin-top: 0; + margin-bottom: 0; + } +} + +.card { + position: relative; + padding: 0; +} + +.card-inner { + font-family: $main-font; + margin: 5px; + background-color: $white; + box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); + border-radius: $border-radius-normal; + overflow: hidden; +} + +.card-actions { + padding: 15px; + text-align: center; +} + +.card-link { + display: inline-block; + width: 100%; + position: relative; + color: $white; + overflow: hidden; + height: 275px; + background-size: cover; + background-position: top center; + + &:hover { + text-decoration: none; + } +} + +.card-name { + padding: 8px; + margin-left: -8px; + color: lighten($black, 20%); + width: 108%; + text-align: center; + border-bottom: 1px solid lighten($black, 95%); + position: absolute; + bottom: 0; + background-color: $white; + text-transform: capitalize; + + i { + margin-right: 8px; + } + + &.has-data-text:after { + position: absolute; + top: calc(100% + 1px); + bottom: calc(-100% - 1px); + left: 0; + right: 0; + content: attr(data-text); + transition: .2s all ease; + background-color: $main-color; + padding: 8px 0; + } + + &:hover { + color: #fff; + } + + &:hover:after { + top: 0; + bottom: 0; + left: 0; + right: 0; + } +} + +.card-name-not-link { + &:hover { + color: lighten($black, 20%); + background-color: $white; + } + + &:after { + display: none; + } +} + +// float box +.float-box { + position: absolute; + padding: 15px 20px; + border: 1px solid lighten($gray, 30%); + background-color: $white; + border-radius: $border-radius-narrow; + -webkit-box-shadow: 0 2px 10px 2px rgba(0, 0, 0, 0.2); + box-shadow: 0 2px 10px 2px rgba(0, 0, 0, 0.2); + z-index: 100; + white-space: nowrap; + min-width: 120px; + + // right arrow + &:before { + border: 10px solid transparent; + border-left-color: $white; + content: ''; + position: absolute; + left: calc(100% - 1px); + top: 0; + } + + // add more space for mouse hover + &:after { + content: ""; + position: absolute; + top: 0; + right: -20px; + height: 100%; + width: 20px; + background-color: transparent; + } +} + +.float-box-right { + left: calc(100% + 5px); + + // left arrow + &:before { + right: calc(100% - 1px); + border-left-color: transparent; + border-right-color: $white; + left: auto; + top: 0; + } + + // add more space for mouse hover, change direction + &:after { + left: -20px; + } +} + +.float-box-left { + right: calc(100% + 5px); +} + +.float-box-top { + top: -2px; +} + +.float-box-bottom { + bottom: 0; +} + +// table, extend with -flat class +.table-flat { + .btn-flat { + margin: 4px 0; + } +} + +// form elements, extend with -flat class +.form-horizontal-flat { + margin-bottom: 8px; + + .control-label-flat { + color: lighten($black, 60%); + background-color: transparent; + font-family: $main-font; + float: none; + text-align: left; + width: auto; + display: inline-block; + font-size: 13px; + + i { + margin-right: 5px; + } + } + + .control-group-flat { + margin-bottom: 8px; + text-align: left; + } + + .control-group-flat-last { + margin-bottom: 0; + } + + .toggle-select-wrap { + font-family: $main-font; + color: lighten($black, 60%); + } +} + +.input-flat[type="text"] { + height: 30px; + padding: 0 5px; + border-radius: $border-radius-narrow; + color: lighten($black, 60%); + box-shadow: none; + border: 1px solid lighten($gray, 30%); + font-size: 12px; + width: 150px; + + &:focus { + border: 1px solid lighten($gray, 30%); + box-shadow: none; + } +} + +.select-flat { + height: 30px; + padding: 0 5px; + color: lighten($black, 60%); + width: 150px; + font-size: 12px; + border: 1px solid lighten($gray, 30%); + border-radius: $border-radius-narrow; +} + +.checkbox-flat[type="checkbox"] { + margin-top: 0; + margin-right: 5px; + font-size: 13px; +} + +// space-box +.overlay { + background-color: rgba($main-color, 0.3); + border: 2px solid $main-color; + position: absolute; + width: 2px; + height: 2px; + cursor: pointer; + + .selection-box-label { + box-sizing: border-box; + font-family: $main-font; + min-width: calc(100% + 4px); + color: $white; + background-color: rgba($main-color, 0.9); + padding: 5px 8px; + white-space: nowrap; + } +} + +// Page specific styles +.building-showcase { + img { + width: 100%; + max-width: 100%; + height: auto; + height: 250px; + } +} + +.selection-box { + &:hover { + .selection-box-btn-holder { + display: block; + } + } +} + +.selection-box-btn-holder { + display: none; + + // &:before { + // position: absolute; + // left: -20px; + // top: 0; + // content: ""; + // width: 20px; + // height: 100px; + // background-color: transparent; + // } +} + +.floor-unit-title { + font-size: 14px; + + h3 { + margin: 0; + } +} + +#layout-image { + margin-top: 25px; +} + +.space-canvas { + * { + box-sizing: border-box; + } +} + +// styles from Harry +ul#layout-canvas { + background-color: #fff; + border: 2px solid #eee; + list-style: outside none none; + + li.apartment-draggable { + max-width: 200px; + position: relative; + float: left; + cursor: move; + } +} + +#full-layout-canvas { + background-color: #fff; + border: 2px solid #eee; + text-align: center; + position: relative; + padding: 0 0 20px 0; + overflow: hidden; + + .image-cover { + position: absolute; + left: 50%; + top: 0; + height: 100%; + margin: auto; + transform: translate(-50%, 0); + margin-bottom: 35px; + } +} + +.make-box-permanent { + position: absolute; +} + +.floor-unit-title { + text-align: center; +} \ No newline at end of file diff --git a/app/controllers/admin/spaces_controller.rb b/app/controllers/admin/spaces_controller.rb index 791a7c7..17e13c5 100644 --- a/app/controllers/admin/spaces_controller.rb +++ b/app/controllers/admin/spaces_controller.rb @@ -52,7 +52,10 @@ class Admin::SpacesController < OrbitAdminController def update_floor floor = Floor.find(params[:floor_id]) rescue nil + old_img = floor.layout_image.url floor.update_attributes(floor_params) + img = floor.layout_image.url + floor.layout = floor.layout.sub(old_img ,img) if !floor.layout.nil? floor.save redirect_to "/admin/spaces/#{floor.building.to_param}/floors" @@ -90,7 +93,10 @@ class Admin::SpacesController < OrbitAdminController def update_floor_unit floor_unit = FloorUnit.find(params[:unit_id]) rescue nil if !floor_unit.nil? + old_img = floor_unit.layout_image.url floor_unit.update_attributes(floor_unit_params) + img = floor_unit.layout_image.url + floor_unit.layout = floor_unit.layout.sub(old_img ,img) if !floor_unit.layout.nil? floor_unit.save end redirect_to "/admin/spaces/#{floor_unit.floor.building.to_param}/#{floor_unit.floor.to_param}/units" @@ -132,6 +138,12 @@ class Admin::SpacesController < OrbitAdminController @sub_unit = FloorSubUnit.find_by(:uid => params[:sub_unit_id].split("-").last) rescue nil end + def destroy_sub_unit + sub_unit = FloorSubUnit.find_by(:uid => params[:sub_unit_id].split("-").last) rescue nil + sub_unit.destroy if !sub_unit.nil? + redirect_to "/admin/spaces/#{sub_unit.floor_unit.floor.to_param}/#{sub_unit.floor_unit.to_param}/sub_units" + end + def update_sub_unit sub_unit = FloorSubUnit.find(params[:floor_sub_unit_id]) rescue nil if !sub_unit.nil? diff --git a/app/controllers/spaces_controller.rb b/app/controllers/spaces_controller.rb index 3c7fc8f..073fd72 100644 --- a/app/controllers/spaces_controller.rb +++ b/app/controllers/spaces_controller.rb @@ -1,6 +1,7 @@ class SpacesController < ApplicationController def index - page = Page.where(:module => OrbitHelper.this_module_app.key).first + params = OrbitHelper.params + page = Page.where(:page_id => params[:page_id]).first buildings = Building.filter_by_categories.collect do |building| floors = building.floors.desc(:title).collect do |floor| image = (!floor.frontend_image.thumb.url.nil? ? floor.frontend_image.thumb.url : "/assets/default-floor.jpg") @@ -33,7 +34,7 @@ class SpacesController < ApplicationController floor = Floor.where(:uid => params[:uid]).first rescue nil thumb_image = (!floor.frontend_image.thumb.url.nil? ? floor.frontend_image.thumb.url : "/assets/default-floor.jpg") image = (!floor.frontend_image.mobile.url.nil? ? floor.frontend_image.mobile.url : "#") - page = Page.where(:module => OrbitHelper.this_module_app.key).first + page = Page.where(:page_id => params[:page_id]).first { "floor-title" => floor.title, @@ -70,7 +71,7 @@ class SpacesController < ApplicationController units = [] if !unit.nil? unit.floor_sub_units.each do |subunit| - url = "/#{I18n.locale.to_s}#{page.url}/#{subunit.to_param}?method=showcase&layout=false" rescue "#" + url = subunit.floor_sub_unit_images.empty? ? "#" : "/#{I18n.locale.to_s}#{page.url}/#{subunit.to_param}?method=showcase&layout=false" rescue "#" units << { "id" => subunit.id.to_s, "url" => url @@ -84,12 +85,13 @@ class SpacesController < ApplicationController def unit params = OrbitHelper.params unit = FloorUnit.where(:uid => params[:uid]).first rescue nil - page = Page.where(:module => OrbitHelper.this_module_app.key).first - + page = Page.where(:page_id => params[:page_id]).first + layout = unit.layout.nil? ? "
" : unit.layout + backlink = unit.floor.layout.nil? ? "/" + I18n.locale.to_s + page.url : "/" + I18n.locale.to_s + page.url + "/#{unit.floor.to_param}" { "unit-title" => unit.title, - "floor-back-link" => "/" + I18n.locale.to_s + page.url + "/#{unit.floor.to_param}", - "unit-layout" => unit.layout, + "floor-back-link" => backlink, + "unit-layout" => layout, "unit-id" => unit.id.to_s, "page-id" => page.page_id } diff --git a/app/views/admin/spaces/_building.html.erb b/app/views/admin/spaces/_building.html.erb index 3cc3915..c6ee562 100644 --- a/app/views/admin/spaces/_building.html.erb +++ b/app/views/admin/spaces/_building.html.erb @@ -1,10 +1,12 @@ -
  • - - -
    -

    <%= building.title %>

    -     -
    - Edit | Delete -
    +
  • +
    + + +

    <%= building.title %>

    +     +
    + Edit + Delete +
    +
    • \ No newline at end of file diff --git a/app/views/admin/spaces/_floor.html.erb b/app/views/admin/spaces/_floor.html.erb index 98b62e9..03605ee 100644 --- a/app/views/admin/spaces/_floor.html.erb +++ b/app/views/admin/spaces/_floor.html.erb @@ -2,9 +2,9 @@ <%= floor.title %> <% if !floor.layout_image.url.nil? %> - Floor Layout + Floor Layout <% end %> - Edit Floor - + Edit Floor + Delete \ No newline at end of file diff --git a/app/views/admin/spaces/_floor_unit.html.erb b/app/views/admin/spaces/_floor_unit.html.erb index 8ad35d2..6ff9e8b 100644 --- a/app/views/admin/spaces/_floor_unit.html.erb +++ b/app/views/admin/spaces/_floor_unit.html.erb @@ -1,12 +1,19 @@ -
  • - -
    - " > +
  • +
    + )"> + +

    <%= floor_unit.title %>

    +     +
    + + Edit + + + Delete + + <% if !floor_unit.layout_image.thumb.url.nil? %> + Layout + <% end %>
    -

    <%= floor_unit.title %>

    - - Edit | Delete - <% if !floor_unit.layout_image.thumb.url.nil? %> - | Layout - <% end %> +
    • \ No newline at end of file diff --git a/app/views/admin/spaces/_sub_unit.html.erb b/app/views/admin/spaces/_sub_unit.html.erb index 40838fd..535716a 100644 --- a/app/views/admin/spaces/_sub_unit.html.erb +++ b/app/views/admin/spaces/_sub_unit.html.erb @@ -1,7 +1,13 @@ -
  • -
    - " > -
    -

    <%= sub_unit.title %>

    - Edit | Delete +
  • +
    +
    )"> +

    <%= sub_unit.title %>

    +
    +
    + Edit + Delete +
    + +
    +
    • \ No newline at end of file diff --git a/app/views/admin/spaces/_sub_unit_form.html.erb b/app/views/admin/spaces/_sub_unit_form.html.erb index cba9d77..0f65b44 100644 --- a/app/views/admin/spaces/_sub_unit_form.html.erb +++ b/app/views/admin/spaces/_sub_unit_form.html.erb @@ -2,15 +2,17 @@ <%= stylesheet_link_tag "lib/main-forms" %> <%= stylesheet_link_tag "lib/main-list" %> <%= stylesheet_link_tag "lib/dropzone" %> - <%= stylesheet_link_tag "//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" %> + <%= stylesheet_link_tag "//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" %> <%= stylesheet_link_tag "//cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.6/animate.min.css" %> + <%= stylesheet_link_tag "space-admin" %> <% end %> <% content_for :page_specific_javascript do %> <%= javascript_include_tag "lib/dropzone" %> <%= javascript_include_tag "validator" %> + <%= javascript_include_tag "space/space" %> <% end %> -
    +
    Uploading...
    @@ -38,20 +40,20 @@
    <% if params[:action] == "edit_sub_unit" %> -
    +
    <% @sub_unit.floor_sub_unit_images.each do |image| %> -
    -
    -
    - -
    -
    - - +
    +
    + +
    + + +
    +
    -
    <% end %> +
    <% end %>
    @@ -80,4 +82,29 @@ <%= hidden_field_tag :floor_sub_unit_id, @sub_unit.id.to_s %> <% end %> <%= f.submit t('submit'), class: 'btn btn-primary', :id => "floor-sub-unit-form-btn" %> -
    \ No newline at end of file +
    + + \ No newline at end of file diff --git a/app/views/admin/spaces/edit_sub_unit.html.erb b/app/views/admin/spaces/edit_sub_unit.html.erb index 1bf74cd..e706529 100644 --- a/app/views/admin/spaces/edit_sub_unit.html.erb +++ b/app/views/admin/spaces/edit_sub_unit.html.erb @@ -66,7 +66,7 @@ return false; } // uploading all the files - $(".upload-status-notice") + $(".message") .removeClass("hide") .addClass("animated slideInRight"); return false; diff --git a/app/views/admin/spaces/floor_layout.html.erb b/app/views/admin/spaces/floor_layout.html.erb index f52d54b..b4076f6 100644 --- a/app/views/admin/spaces/floor_layout.html.erb +++ b/app/views/admin/spaces/floor_layout.html.erb @@ -1,6 +1,7 @@ <% content_for :page_specific_css do %> <%= stylesheet_link_tag "https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" %> - <%= stylesheet_link_tag "space" %> + <%= stylesheet_link_tag "//cdnjs.cloudflare.com/ajax/libs/animate.css/3.4.0/animate.min.css" %> + <%= stylesheet_link_tag "spaces" %> <% end %> <% content_for :page_specific_javascript do %> <%= javascript_include_tag "attrchange" %> @@ -9,7 +10,7 @@

    <%= @floor.title %>

    <% if @floor.layout == nil %> -
    +
    @@ -25,8 +26,10 @@ var canvas = $("#full-layout-canvas"), layoutImage = $("#layout-image"), cover = canvas.find(".image-cover"), + positionClass = "float-box-left", dragAreaCount = 0, - windowHeight = ($(window).height() - (36 + 46 + 75 + 60)) + "px", + windowHeight = ($(window).height() - (36 + 46 + 75 + 60)), + coverImageHeight = (parseInt(windowHeight)), floorUnits = <%= @floor.floor_units.asc(:title).collect{|unit| {"id" => unit.id.to_s, "title" => unit.title}}.to_json.html_safe %>, formDisplay = false, changesMade = 0, @@ -34,11 +37,13 @@ tmpImg = new Image(); canvas.height(windowHeight); - layoutImage.height(windowHeight); + cover.height(coverImageHeight); + layoutImage.height(coverImageHeight - 40); + canvas.css('box-sizing', 'border-box'); tmpImg.src = layoutImage.attr('src') ; tmpImg.onload = function() { - cover.width(layoutImage.width()); + cover.width(layoutImage.width() + 40); // cover.css("left",((layoutImage.position().left * 100) / canvas.width()) + "%"); } @@ -50,13 +55,14 @@ currentDragBox = null, isDragging = false; cover.on("mousedown",function(e){ + // e.preventDefault(); if($(".selection-box.hover").length == 0 && !formDisplay){ if(currentDragBox != null){ currentDragBox.remove(); currentDragBox = null; $(".make-box-permanent").remove(); } - var dragBox = $("
    "), + var dragBox = $("
    "), xpercent = ((e.offsetX * 100) / cover.width()) + "%", ypercent = ((e.offsetY * 100) / cover.height()) + "%"; dragBox.css({ @@ -72,6 +78,7 @@ }) cover.on("mousemove",function(e){ + e.preventDefault(); if(isDragging){ diffX = e.offsetX - offsetX; diffY = e.offsetY - offsetY; @@ -87,7 +94,7 @@ isDragging = false; if(currentDragBox.width() > 20 && currentDragBox.height() > 20){ var offset = currentDragBox.offset(), - btn = $(""); + btn = $(""); btn.on("click",selectAreaOkBtnHandler); currentDragBox.append(btn); currentDragBox.hover(function(){ @@ -103,8 +110,11 @@ var selectAreaOkBtnHandler = function(event){ $(this).remove(); - var deleteBtn = $(""), - btnHolder = $("
    "); + if(parseInt(currentDragBox.css("left")) < 195){ + positionClass = "float-box-right"; + } + var deleteBtn = $(""), + btnHolder = $("
    "); btnHolder.append(deleteBtn); currentDragBox.append(btnHolder); currentDragBox.css({ @@ -122,9 +132,9 @@ var makeNewForm = function(box,edit){ formDisplay = true; - var formWrapper = $("
    "), - form = $("
    "), - field = "
    "; - var checkbox = $("
    Select existing units
    "), + var checkbox = $("
    "), type = (edit ? "existing" : "new"); checkbox.find("input[type=checkbox]").on("click",function(){ if($(this).is(":checked")){ @@ -146,7 +156,17 @@ } }) - var submitBtn = $("
    "); + var submitBtn = $("
    "); + if(type == "new"){ + var deleteBtn = $(""); + deleteBtn.one("click",function(){ + formDisplay = false; + changesMade--; + box.remove(); + return false; + }) + submitBtn.find(".form-action-btn-holder").append(deleteBtn); + } submitBtn.find("button").on("click",function(){ if(type == "existing"){ var id = form.find("select").val(), @@ -154,12 +174,12 @@ box.attr("data-unit-id",id); box.find(".selection-box-delete-btn").attr("for",id); if(box.find(".selection-box-label").length == 0){ - box.append("
    " + unit[0].title + "
    "); + box.append("
    " + unit[0].title + "
    "); }else{ box.find(".selection-box-label").text(unit[0].title); } if(box.find(".selection-box-btn-holder button.selection-box-edit-btn").length == 0){ - box.find(".selection-box-btn-holder").append("") + box.find(".selection-box-btn-holder").prepend(""); }else{ box.find(".selection-box-btn-holder button.selection-box-edit-btn").prop("disabled",false).attr("for",id); box.find(".selection-box-btn-holder button.selection-box-delete-btn").attr("for",id); @@ -184,12 +204,12 @@ formDisplay = false; formWrapper.remove(); if(box.find(".selection-box-label").length == 0){ - box.append("
    " + data.unit.title + "
    "); + box.append("
    " + data.unit.title + "
    "); }else{ box.find(".selection-box-label").text(data.unit.title); } if(box.find(".selection-box-btn-holder button.selection-box-edit-btn").length == 0){ - box.find(".selection-box-btn-holder").append("") + box.find(".selection-box-btn-holder").prepend("") }else{ box.find(".selection-box-btn-holder button.selection-box-edit-btn").prop("disabled",false).attr("for",data.unit.id); box.find(".selection-box-btn-holder button.selection-box-delete-btn").attr("for",data.unit.id); @@ -221,13 +241,14 @@ id = el.attr("for"), box = el.parents(".selection-box[data-unit-id=" + id + "]"), form = makeNewForm(box,true), - cancelBtn = $(""); + cancelBtn = $(""); cancelBtn.one("click",function(){ el.prop("disabled",false); box.find(".selection-form-wrapper").remove(); formDisplay = false; changesMade--; + return false; }) el.prop("disabled",true); diff --git a/app/views/admin/spaces/floors.html.erb b/app/views/admin/spaces/floors.html.erb index df64cc9..07efcf6 100644 --- a/app/views/admin/spaces/floors.html.erb +++ b/app/views/admin/spaces/floors.html.erb @@ -1,8 +1,13 @@ +<% content_for :page_specific_css do %> + <%= stylesheet_link_tag "//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" %> + <%= stylesheet_link_tag "//cdnjs.cloudflare.com/ajax/libs/animate.css/3.4.0/animate.min.css" %> + <%= stylesheet_link_tag "spaces" %> +<% end %> <% content_for :page_specific_javascript do %> <%= javascript_include_tag "lib/jquery.form" %> <%= javascript_include_tag "validator" %> <% end %> - +
    <% @table_fields.each do |f| %> diff --git a/app/views/admin/spaces/index.html.erb b/app/views/admin/spaces/index.html.erb index 6628e6d..d1b892c 100644 --- a/app/views/admin/spaces/index.html.erb +++ b/app/views/admin/spaces/index.html.erb @@ -1,7 +1,13 @@ <% content_for :page_specific_css do %> - <%= stylesheet_link_tag "space" %> + <%= stylesheet_link_tag "//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" %> + <%= stylesheet_link_tag "//cdnjs.cloudflare.com/ajax/libs/animate.css/3.4.0/animate.min.css" %> + <%= stylesheet_link_tag "spaces" %> <% end %> -
      +<% content_for :page_specific_javascript do %> + <%= javascript_include_tag "space/space" %> +<% end %> + +
        <%= render :partial => "building", :collection => @buildings %>
      @@ -9,4 +15,4 @@
      <%= link_to t("space.add_building"), new_admin_space_path, :class => "btn btn-primary" %>
      - \ No newline at end of file + diff --git a/app/views/admin/spaces/sub_units.html.erb b/app/views/admin/spaces/sub_units.html.erb index 3c196e0..470002b 100644 --- a/app/views/admin/spaces/sub_units.html.erb +++ b/app/views/admin/spaces/sub_units.html.erb @@ -1,10 +1,11 @@ <% content_for :page_specific_css do %> - <%= stylesheet_link_tag "space" %> + <%= stylesheet_link_tag "//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" %> + <%= stylesheet_link_tag "//cdnjs.cloudflare.com/ajax/libs/animate.css/3.4.0/animate.min.css" %> + <%= stylesheet_link_tag "spaces" %> <% end %> -
        +
          <%= render :partial => "sub_unit", :collection => @floor_unit.floor_sub_units %>
        -
        <%= t("space.add_sub_units") %> diff --git a/app/views/admin/spaces/unit_layout.html.erb b/app/views/admin/spaces/unit_layout.html.erb index b630b93..8652079 100644 --- a/app/views/admin/spaces/unit_layout.html.erb +++ b/app/views/admin/spaces/unit_layout.html.erb @@ -1,6 +1,7 @@ <% content_for :page_specific_css do %> <%= stylesheet_link_tag "https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" %> - <%= stylesheet_link_tag "space" %> + <%= stylesheet_link_tag "//cdnjs.cloudflare.com/ajax/libs/animate.css/3.4.0/animate.min.css" %> + <%= stylesheet_link_tag "spaces" %> <% end %> <% content_for :page_specific_javascript do %> <%= javascript_include_tag "attrchange" %> @@ -25,8 +26,10 @@ var canvas = $("#full-layout-canvas"), layoutImage = $("#layout-image"), cover = canvas.find(".image-cover"), + positionClass = "float-box-left", dragAreaCount = 0, - windowHeight = ($(window).height() - (36 + 46 + 75 + 60)) + "px", + windowHeight = ($(window).height() - (36 + 46 + 75 + 60)), + coverImageHeight = (parseInt(windowHeight)), subUnits = <%= @floor_unit.floor_sub_units.asc(:title).collect{|unit| {"id" => unit.id.to_s, "title" => unit.title}}.to_json.html_safe %>, formDisplay = false, changesMade = 0, @@ -34,11 +37,13 @@ tmpImg = new Image(); canvas.height(windowHeight); - layoutImage.height(windowHeight); + cover.height(coverImageHeight); + layoutImage.height(coverImageHeight - 40); + canvas.css('box-sizing', 'border-box'); tmpImg.src = layoutImage.attr('src') ; tmpImg.onload = function() { - cover.width(layoutImage.width()); + cover.width(layoutImage.width() + 40); // cover.css("left",((layoutImage.position().left * 100) / canvas.width()) + "%"); } @@ -49,14 +54,27 @@ diffY = 0, currentDragBox = null, isDragging = false; + + // cover.hover(function(){ + // cover.addClass("hover"); + // },function(){ + // cover.removeClass("hover"); + // if(currentDragBox != null){ + // isDragging = false; + // makeBoxPermanent(); + // } + // }) + cover.on("mousedown",function(e){ + // e.preventDefault(); if($(".selection-box.hover").length == 0 && !formDisplay){ + if(currentDragBox != null){ currentDragBox.remove(); currentDragBox = null; $(".make-box-permanent").remove(); } - var dragBox = $("
        "), + var dragBox = $("
        "), xpercent = ((e.offsetX * 100) / cover.width()) + "%", ypercent = ((e.offsetY * 100) / cover.height()) + "%"; dragBox.css({ @@ -70,24 +88,39 @@ cover.append(dragBox); } }) - + var tempX = 0, + tempY = 0; cover.on("mousemove",function(e){ + e.preventDefault(); if(isDragging){ diffX = e.offsetX - offsetX; diffY = e.offsetY - offsetY; - currentDragBox.css({ - width : diffX + "px", - height : diffY + "px" - }) + if(diffX > 0 && diffY > 0){ + console.log("Difference :", diffX, diffY); + console.log("Old :", tempX, tempY); + tempX = diffX; + tempY = diffY; + if(diffX >= tempX && diffY >= tempY){ + currentDragBox.css({ + width : diffX + "px", + height : diffY + "px" + }) + } + } } }) cover.on("mouseup",function(){ if(isDragging){ isDragging = false; - if(currentDragBox.width() > 20 && currentDragBox.height() > 20){ - var offset = currentDragBox.offset(), - btn = $(""); + makeBoxPermanent(); + } + }) + + var makeBoxPermanent = function(){ + if(currentDragBox.width() > 20 && currentDragBox.height() > 20){ + var offset = currentDragBox.offset(), + btn = $(""); btn.on("click",selectAreaOkBtnHandler); currentDragBox.append(btn); currentDragBox.hover(function(){ @@ -98,13 +131,15 @@ }else{ currentDragBox.remove(); } - } - }) + } var selectAreaOkBtnHandler = function(event){ $(this).remove(); - var deleteBtn = $(""), - btnHolder = $("
        "); + if(parseInt(currentDragBox.css("left")) < 195){ + positionClass = "float-box-right"; + } + var deleteBtn = $(""), + btnHolder = $("
        "); btnHolder.append(deleteBtn); currentDragBox.append(btnHolder); currentDragBox.css({ @@ -122,9 +157,9 @@ var makeNewForm = function(box,edit){ formDisplay = true; - var formWrapper = $("
        "), - form = $(""), - field = "
        "; - var checkbox = $("
        Select existing units
        "), + var checkbox = $("
        "), type = (edit ? "existing" : "new"); checkbox.find("input[type=checkbox]").on("click",function(){ if($(this).is(":checked")){ @@ -146,7 +181,19 @@ } }) - var submitBtn = $("
        "); + var submitBtn = $("
        "); + + if(type == "new"){ + var deleteBtn = $(""); + deleteBtn.one("click",function(){ + formDisplay = false; + changesMade--; + box.remove(); + return false; + }) + submitBtn.find(".form-action-btn-holder").append(deleteBtn); + } + submitBtn.find("button").on("click",function(){ if(type == "existing"){ var id = form.find("select").val(), @@ -154,12 +201,12 @@ box.attr("data-unit-id",id); box.find(".selection-box-delete-btn").attr("for",id); if(box.find(".selection-box-label").length == 0){ - box.append("
        " + unit[0].title + "
        "); + box.append("
        " + unit[0].title + "
        "); }else{ box.find(".selection-box-label").text(unit[0].title); } if(box.find(".selection-box-btn-holder button.selection-box-edit-btn").length == 0){ - box.find(".selection-box-btn-holder").append("") + box.find(".selection-box-btn-holder").prepend(""); }else{ box.find(".selection-box-btn-holder button.selection-box-edit-btn").prop("disabled",false).attr("for",id); box.find(".selection-box-btn-holder button.selection-box-delete-btn").attr("for",id); @@ -184,12 +231,12 @@ formDisplay = false; formWrapper.remove(); if(box.find(".selection-box-label").length == 0){ - box.append("
        " + data.unit.title + "
        "); + box.append("
        " + data.unit.title + "
        "); }else{ box.find(".selection-box-label").text(data.unit.title); } if(box.find(".selection-box-btn-holder button.selection-box-edit-btn").length == 0){ - box.find(".selection-box-btn-holder").append("") + box.find(".selection-box-btn-holder").prepend("") }else{ box.find(".selection-box-btn-holder button.selection-box-edit-btn").prop("disabled",false).attr("for",data.unit.id); box.find(".selection-box-btn-holder button.selection-box-delete-btn").attr("for",data.unit.id); @@ -223,13 +270,14 @@ id = el.attr("for"), box = el.parents(".selection-box[data-unit-id=" + id + "]"), form = makeNewForm(box,true), - cancelBtn = $(""); + cancelBtn = $(""); cancelBtn.one("click",function(){ el.prop("disabled",false); box.find(".selection-form-wrapper").remove(); formDisplay = false; changesMade--; + return false; }) el.prop("disabled",true); diff --git a/app/views/admin/spaces/units.html.erb b/app/views/admin/spaces/units.html.erb index a52b029..9252bfa 100644 --- a/app/views/admin/spaces/units.html.erb +++ b/app/views/admin/spaces/units.html.erb @@ -1,7 +1,12 @@ <% content_for :page_specific_css do %> - <%= stylesheet_link_tag "space" %> + <%= stylesheet_link_tag "https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" %> + <%= stylesheet_link_tag "//cdnjs.cloudflare.com/ajax/libs/animate.css/3.4.0/animate.min.css" %> + <%= stylesheet_link_tag "spaces" %> <% end %> -
          +<% content_for :page_specific_javascript do %> + <%= javascript_include_tag "space/space" %> +<% end %> +
            <%= render :partial => "floor_unit", :collection => @floor.floor_units.asc(:title) %>
          diff --git a/app/views/spaces/show.html.erb b/app/views/spaces/show.html.erb index d6abf63..a7a3cb7 100644 --- a/app/views/spaces/show.html.erb +++ b/app/views/spaces/show.html.erb @@ -1,2 +1,2 @@ -<% OrbitHelper.render_css_in_head(["space.scss"]) %> +<% OrbitHelper.render_css_in_head(["space-frontend.scss"]) %> <%= render_view %> \ No newline at end of file diff --git a/app/views/spaces/unit.html.erb b/app/views/spaces/unit.html.erb index d6abf63..a7a3cb7 100644 --- a/app/views/spaces/unit.html.erb +++ b/app/views/spaces/unit.html.erb @@ -1,2 +1,2 @@ -<% OrbitHelper.render_css_in_head(["space.scss"]) %> +<% OrbitHelper.render_css_in_head(["space-frontend.scss"]) %> <%= render_view %> \ No newline at end of file diff --git a/config/routes.rb b/config/routes.rb index 2085741..59a1999 100644 --- a/config/routes.rb +++ b/config/routes.rb @@ -28,6 +28,7 @@ Rails.application.routes.draw do get "spaces/unit/:unit_id/add_sub_unit", to: 'spaces#add_sub_unit' get "spaces/sub_unit/:sub_unit_id/edit", to: 'spaces#edit_sub_unit' + delete "spaces/sub_unit/:sub_unit_id/delete", to: 'spaces#destroy_sub_unit' delete "spaces/unit/:unit_id/delete", to: 'spaces#delete_floor_unit' delete "spaces/floor/:floor_id/delete", to: 'spaces#delete_floor'