harry
/
space
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

space module update

This commit is contained in:
IT 2015-11-24 13:51:47 +08:00
parent 70589b9d51
commit ff9f15535c
25 changed files with 1646 additions and 272 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
app/assets/javascripts/space/space.js Normal file
View File

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

788
app/assets/stylesheets/_grid.scss Normal file
View File

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

3
app/assets/stylesheets/_helpers.scss Normal file
View File

@ -0,0 +1,3 @@
@charset "utf-8";
@import "variables";

25
app/assets/stylesheets/_variables.scss
View File

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

59
app/assets/stylesheets/space-admin.scss Normal file
View File

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

22
app/assets/stylesheets/space-frontend.scss Normal file
View File

@ -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%);
}
}

166
app/assets/stylesheets/space.scss
View File

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

464
app/assets/stylesheets/spaces.scss Normal file
View File

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

12
app/controllers/admin/spaces_controller.rb
View File

@ -52,7 +52,10 @@ class Admin::SpacesController < OrbitAdminController
def update_floor def update_floor
floor = Floor.find(params[:floor_id]) rescue nil floor = Floor.find(params[:floor_id]) rescue nil
old_img = floor.layout_image.url
floor.update_attributes(floor_params) floor.update_attributes(floor_params)
img = floor.layout_image.url
floor.layout = floor.layout.sub(old_img ,img) if !floor.layout.nil?
floor.save floor.save
redirect_to "/admin/spaces/#{floor.building.to_param}/floors" redirect_to "/admin/spaces/#{floor.building.to_param}/floors"
@ -90,7 +93,10 @@ class Admin::SpacesController < OrbitAdminController
def update_floor_unit def update_floor_unit
floor_unit = FloorUnit.find(params[:unit_id]) rescue nil floor_unit = FloorUnit.find(params[:unit_id]) rescue nil
if !floor_unit.nil? if !floor_unit.nil?
old_img = floor_unit.layout_image.url
floor_unit.update_attributes(floor_unit_params) 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 floor_unit.save
end end
redirect_to "/admin/spaces/#{floor_unit.floor.building.to_param}/#{floor_unit.floor.to_param}/units" 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 @sub_unit = FloorSubUnit.find_by(:uid => params[:sub_unit_id].split("-").last) rescue nil
end 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 def update_sub_unit
sub_unit = FloorSubUnit.find(params[:floor_sub_unit_id]) rescue nil sub_unit = FloorSubUnit.find(params[:floor_sub_unit_id]) rescue nil
if !sub_unit.nil? if !sub_unit.nil?

16
app/controllers/spaces_controller.rb
View File

@ -1,6 +1,7 @@
class SpacesController < ApplicationController class SpacesController < ApplicationController
def index 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| buildings = Building.filter_by_categories.collect do |building|
floors = building.floors.desc(:title).collect do |floor| floors = building.floors.desc(:title).collect do |floor|
image = (!floor.frontend_image.thumb.url.nil? ? floor.frontend_image.thumb.url : "/assets/default-floor.jpg") 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 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") 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 : "#") 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, "floor-title" => floor.title,
@ -70,7 +71,7 @@ class SpacesController < ApplicationController
units = [] units = []
if !unit.nil? if !unit.nil?
unit.floor_sub_units.each do |subunit| 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 << { units << {
"id" => subunit.id.to_s, "id" => subunit.id.to_s,
"url" => url "url" => url
@ -84,12 +85,13 @@ class SpacesController < ApplicationController
def unit def unit
params = OrbitHelper.params params = OrbitHelper.params
unit = FloorUnit.where(:uid => params[:uid]).first rescue nil 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? ? "<div id='full-layout-canvas'><img href='<%= unit.layout_image.url %>' id='layout-image'></div>" : 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, "unit-title" => unit.title,
"floor-back-link" => "/" + I18n.locale.to_s + page.url + "/#{unit.floor.to_param}", "floor-back-link" => backlink,
"unit-layout" => unit.layout, "unit-layout" => layout,
"unit-id" => unit.id.to_s, "unit-id" => unit.id.to_s,
"page-id" => page.page_id "page-id" => page.page_id
} }

16
app/views/admin/spaces/_building.html.erb
View File

@ -1,10 +1,12 @@
<li class="building"> <li class="building card col-xs-6 col-sm-4 col-md-3 col-lg-2 animated bounceInDown">
<a href="/admin/spaces/<%= building.to_param %>/floors"> <div class="card-inner">
<img src="<%= building.image.thumb.url %>" /> <a class="building-link card-link" href="/admin/spaces/<%= building.to_param %>/floors" style="background-image: url(<%= building.image.thumb.url %>)">
<div class="shade"></div> <!-- <img class="building-img card-img" src="<%= building.image.thumb.url %>" /> -->
<p><%= building.title %></p> <p class="building-name card-name"><%= building.title %></i></p>
</a> </a>
<div class="actions"> <div class="building-actions card-actions">
<a href="<%= edit_admin_space_path(building) %>">Edit</a> | <a href="<%= admin_space_path(building) %>" data-method="delete" data-confirm="Are you sure?">Delete</a> <a class="btn-flat btn-flat-primary btn-flat-has-icon" href="<%= edit_admin_space_path(building) %>"><i class="fa fa-pencil"></i>Edit</a>
<a class="btn-flat btn-flat-danger btn-flat-has-icon" href="<%= admin_space_path(building) %>" data-method="delete" data-confirm="Are you sure?"><i class="fa fa-trash-o"></i>Delete</a>
</div>
</div> </div>
</li> </li>

6
app/views/admin/spaces/_floor.html.erb
View File

@ -2,9 +2,9 @@
<td><a href="/admin/spaces/<%= floor.building.to_param %>/<%= floor.to_param %>/units"><%= floor.title %></a></td> <td><a href="/admin/spaces/<%= floor.building.to_param %>/<%= floor.to_param %>/units"><%= floor.title %></a></td>
<td> <td>
<% if !floor.layout_image.url.nil? %> <% if !floor.layout_image.url.nil? %>
<a href="/admin/spaces/floor/<%= floor.to_param %>/layout" class="btn btn-info">Floor Layout</a> <a class="btn-flat btn-flat-info btn-flat-has-icon" href="/admin/spaces/floor/<%= floor.to_param %>/layout"><i class="fa fa-object-group"></i>Floor Layout</a>
<% end %> <% end %>
<a href="#" data-values='{"id" : "<%= floor.id.to_s %>", "title" : "<%= floor.title %>", "layout" : "<%= floor.layout_image.url == "" ? "" : floor.layout_image.url %>"}' class="btn btn-warning edit-floor-btns">Edit Floor</a> <a class="btn-flat btn-flat-primary btn-flat-has-icon edit-floor-btns" href="#" data-values='{"id" : "<%= floor.id.to_s %>", "title" : "<%= floor.title %>", "layout" : "<%= floor.layout_image.url == "" ? "" : floor.layout_image.url %>"}'><i class="fa fa-pencil"></i>Edit Floor</a>
<a href="/admin/spaces/floor/<%= floor.to_param %>/delete" class="btn btn-danger floor-delete-btns"><i class="icons-trash"></i></a> <a class="btn-flat btn-flat-danger btn-flat-has-icon floor-delete-btns" href="/admin/spaces/floor/<%= floor.to_param %>/delete"><i class="fa fa-trash-o"></i>Delete</a>
</td> </td>
</tr> </tr>

23
app/views/admin/spaces/_floor_unit.html.erb
View File

@ -1,12 +1,19 @@
<li class="apartment"> <li class="apartment card col-sm-6 col-md-4 animated bounceInDown">
<a href="/admin/spaces/<%= floor_unit.floor.to_param %>/<%= floor_unit.to_param %>/sub_units"> <div class="card-inner">
<div class="apartment-img"> <a class="apartment-link card-link" href="/admin/spaces/<%= floor_unit.floor.to_param %>/<%= floor_unit.to_param %>/sub_units" style="background-image: url(<%= floor_unit.layout_image.thumb.url.nil? ? "/assets/no-layout.jpg" : floor_unit.layout_image.thumb.url %>)">
<img src="<%= floor_unit.layout_image.thumb.url.nil? ? "/assets/no-layout.jpg" : floor_unit.layout_image.thumb.url %>" > <!-- <img src="<%= floor_unit.layout_image.thumb.url.nil? ? "/assets/no-layout.jpg" : floor_unit.layout_image.thumb.url %>" > -->
</div> <p class="apartment-name card-name"><%= floor_unit.title %></p>
<p><%= floor_unit.title %></p> </a>
<div class="apartment-actions card-actions">
<a class="btn-flat btn-flat-primary btn-flat-has-icon" href="/admin/spaces/unit/<%= floor_unit.to_param %>/edit">
<i class="fa fa-pencil"></i>Edit
</a>
<a class="btn-flat btn-flat-danger btn-flat-has-icon" href="/admin/spaces/unit/<%= floor_unit.to_param %>/delete" data-method="delete" data-confirm="Are you sure?">
<i class="fa fa-trash-o"></i>Delete
</a> </a>
<a href="/admin/spaces/unit/<%= floor_unit.to_param %>/edit">Edit</a> | <a href="/admin/spaces/unit/<%= floor_unit.to_param %>/delete" data-method="delete" data-confirm="Are you sure?">Delete</a>
<% if !floor_unit.layout_image.thumb.url.nil? %> <% if !floor_unit.layout_image.thumb.url.nil? %>
| <a href="/admin/spaces/unit/<%= floor_unit.to_param %>/layout">Layout</a> <a class="btn-flat btn-flat-info btn-flat-has-icon" href="/admin/spaces/unit/<%= floor_unit.to_param %>/layout"><i class="fa fa-object-group"></i>Layout</a>
<% end %> <% end %>
</div>
</div>
</li> </li>

16
app/views/admin/spaces/_sub_unit.html.erb
View File

@ -1,7 +1,13 @@
<li class="apartment"> <li class="apartment card col-xs-6 col-md-3 col-lg-2 animated bounceInDown">
<div class="apartment-img"> <div class="card-inner">
<img src="<%= sub_unit.floor_sub_unit_images.blank? ? "/assets/no-layout.jpg" : sub_unit.floor_sub_unit_images.first.image.thumb.url %>" > <div class="apartment-img card-link" style="background-image: url(<%= sub_unit.floor_sub_unit_images.blank? ? "/assets/no-layout.jpg" : sub_unit.floor_sub_unit_images.first.image.thumb.url %>)">
<p class="card-name card-name-not-link"><%= sub_unit.title %></p>
</div> </div>
<p><%= sub_unit.title %></p> <div class="card-actions">
<a href="/admin/spaces/sub_unit/<%= sub_unit.to_param %>/edit">Edit</a> | <a href="/admin/spaces/sub_unit/<%= sub_unit.to_param %>/delete" data-method="delete" data-confirm="Are you sure?">Delete</a> <a class="btn-flat btn-flat-primary btn-flat-has-icon" href="/admin/spaces/sub_unit/<%= sub_unit.to_param %>/edit"><i class="fa fa-pencil"></i>Edit</a>
<a class="btn-flat btn-flat-danger btn-flat-has-icon" href="/admin/spaces/sub_unit/<%= sub_unit.to_param %>/delete" data-method="delete" data-confirm="Are you sure?"><i class="fa fa-times"></i>Delete</a>
</div>
</div>
</li> </li>

49
app/views/admin/spaces/_sub_unit_form.html.erb
View File

@ -2,15 +2,17 @@
<%= stylesheet_link_tag "lib/main-forms" %> <%= stylesheet_link_tag "lib/main-forms" %>
<%= stylesheet_link_tag "lib/main-list" %> <%= stylesheet_link_tag "lib/main-list" %>
<%= stylesheet_link_tag "lib/dropzone" %> <%= 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 "//cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.6/animate.min.css" %>
<%= stylesheet_link_tag "space-admin" %>
<% end %> <% end %>
<% content_for :page_specific_javascript do %> <% content_for :page_specific_javascript do %>
<%= javascript_include_tag "lib/dropzone" %> <%= javascript_include_tag "lib/dropzone" %>
<%= javascript_include_tag "validator" %> <%= javascript_include_tag "validator" %>
<%= javascript_include_tag "space/space" %>
<% end %> <% end %>
<div class="upload-status-notice hide"> <div class="message hide">
<i class="fa fa-refresh fa-spin"></i> <i class="fa fa-refresh fa-spin"></i>
<span class="upload-text">Uploading...</span> <span class="upload-text">Uploading...</span>
</div> </div>
@ -38,20 +40,20 @@
<label class="control-label muted"><%= t(:images) %></label> <label class="control-label muted"><%= t(:images) %></label>
<div class="controls"> <div class="controls">
<% if params[:action] == "edit_sub_unit" %> <% if params[:action] == "edit_sub_unit" %>
<div class="group-admin-edit-image-wrap clearfix"> <div class="group group-clear-4 clearfix">
<% @sub_unit.floor_sub_unit_images.each do |image| %> <% @sub_unit.floor_sub_unit_images.each do |image| %>
<div class="group-admin-edit-image-item card clearfix"> <div class="group-item col-md-3">
<div class="group-admin-edit-image-item-inner"> <div class="group-item-inner">
<div class="group-admin-edit-image-container"> <img class="group-img" src="<%= image.image.thumb.url %>">
<img src="<%= image.image.thumb.url %>"> <div class="group-actions">
</div> <input class="group-checkbox" type="checkbox" name="images_to_destroy[]" value="<%= image.id.to_s %>" />
<div class="group-admin-edit-checkbox-wrap"> <label class="group-label">Delete Image</label>
<input class="group-admin-edit-image-checkbox" type="checkbox" name="images_to_destroy[]" value="<%= image.id.to_s %>" />
<label class="group-admin-edit-image-label">Delete Image</label>
</div> </div>
</div> </div>
</div> </div>
<% end %> <% end %>
</div> </div>
<% end %> <% end %>
<div class="dropzone dropzone-pool" id="sub-unit-images"> <div class="dropzone dropzone-pool" id="sub-unit-images">
@ -81,3 +83,28 @@
<% end %> <% end %>
<%= f.submit t('submit'), class: 'btn btn-primary', :id => "floor-sub-unit-form-btn" %> <%= f.submit t('submit'), class: 'btn btn-primary', :id => "floor-sub-unit-form-btn" %>
</div> </div>
<script>
function equalHeight(items) {
if (typeof items === 'string' && items.length > 0) {
var $items = $(items);
var $this = null;
var maxHeight = -1;
// when images are loaded
$items.find('img').load(function() {
console.log('g')
$.each($items, function(i, val) {
$this = $(this);
if ($this.outerHeight() > maxHeight) {
maxHeight = $this.outerHeight();
}
console.log($this)
}).css('min-height', maxHeight + 'px');
});
}
}
equalHeight('.group-item-inner');
</script>

2
app/views/admin/spaces/edit_sub_unit.html.erb
View File

@ -66,7 +66,7 @@
return false; return false;
} }
// uploading all the files // uploading all the files
$(".upload-status-notice") $(".message")
.removeClass("hide") .removeClass("hide")
.addClass("animated slideInRight"); .addClass("animated slideInRight");
return false; return false;

59
app/views/admin/spaces/floor_layout.html.erb
View File

@ -1,6 +1,7 @@
<% content_for :page_specific_css do %> <% 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 "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 %> <% end %>
<% content_for :page_specific_javascript do %> <% content_for :page_specific_javascript do %>
<%= javascript_include_tag "attrchange" %> <%= javascript_include_tag "attrchange" %>
@ -9,7 +10,7 @@
<h3><%= @floor.title %></h3> <h3><%= @floor.title %></h3>
</div> </div>
<% if @floor.layout == nil %> <% if @floor.layout == nil %>
<div id="full-layout-canvas"> <div id="full-layout-canvas" class="space-canvas">
<img id="layout-image" src="<%= @floor.layout_image.url %>" /> <img id="layout-image" src="<%= @floor.layout_image.url %>" />
<div class="image-cover"></div> <div class="image-cover"></div>
</div> </div>
@ -25,8 +26,10 @@
var canvas = $("#full-layout-canvas"), var canvas = $("#full-layout-canvas"),
layoutImage = $("#layout-image"), layoutImage = $("#layout-image"),
cover = canvas.find(".image-cover"), cover = canvas.find(".image-cover"),
positionClass = "float-box-left",
dragAreaCount = 0, 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 %>, floorUnits = <%= @floor.floor_units.asc(:title).collect{|unit| {"id" => unit.id.to_s, "title" => unit.title}}.to_json.html_safe %>,
formDisplay = false, formDisplay = false,
changesMade = 0, changesMade = 0,
@ -34,11 +37,13 @@
tmpImg = new Image(); tmpImg = new Image();
canvas.height(windowHeight); 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.src = layoutImage.attr('src') ;
tmpImg.onload = function() { tmpImg.onload = function() {
cover.width(layoutImage.width()); cover.width(layoutImage.width() + 40);
// cover.css("left",((layoutImage.position().left * 100) / canvas.width()) + "%"); // cover.css("left",((layoutImage.position().left * 100) / canvas.width()) + "%");
} }
@ -50,13 +55,14 @@
currentDragBox = null, currentDragBox = null,
isDragging = false; isDragging = false;
cover.on("mousedown",function(e){ cover.on("mousedown",function(e){
// e.preventDefault();
if($(".selection-box.hover").length == 0 && !formDisplay){ if($(".selection-box.hover").length == 0 && !formDisplay){
if(currentDragBox != null){ if(currentDragBox != null){
currentDragBox.remove(); currentDragBox.remove();
currentDragBox = null; currentDragBox = null;
$(".make-box-permanent").remove(); $(".make-box-permanent").remove();
} }
var dragBox = $("<div class='selection-box'></div>"), var dragBox = $("<div class='selection-box overlay'></div>"),
xpercent = ((e.offsetX * 100) / cover.width()) + "%", xpercent = ((e.offsetX * 100) / cover.width()) + "%",
ypercent = ((e.offsetY * 100) / cover.height()) + "%"; ypercent = ((e.offsetY * 100) / cover.height()) + "%";
dragBox.css({ dragBox.css({
@ -72,6 +78,7 @@
}) })
cover.on("mousemove",function(e){ cover.on("mousemove",function(e){
e.preventDefault();
if(isDragging){ if(isDragging){
diffX = e.offsetX - offsetX; diffX = e.offsetX - offsetX;
diffY = e.offsetY - offsetY; diffY = e.offsetY - offsetY;
@ -87,7 +94,7 @@
isDragging = false; isDragging = false;
if(currentDragBox.width() > 20 && currentDragBox.height() > 20){ if(currentDragBox.width() > 20 && currentDragBox.height() > 20){
var offset = currentDragBox.offset(), var offset = currentDragBox.offset(),
btn = $("<button class='make-box-permanent btn btn-primary btn-small'><i class='fa fa-check'></i> Ok</button>"); btn = $("<button class='make-box-permanent btn-flat btn-flat-has-icon btn-flat-primary btn-flat-small absolute-center'><i class='fa fa-check'></i>OK</button>");
btn.on("click",selectAreaOkBtnHandler); btn.on("click",selectAreaOkBtnHandler);
currentDragBox.append(btn); currentDragBox.append(btn);
currentDragBox.hover(function(){ currentDragBox.hover(function(){
@ -103,8 +110,11 @@
var selectAreaOkBtnHandler = function(event){ var selectAreaOkBtnHandler = function(event){
$(this).remove(); $(this).remove();
var deleteBtn = $("<button class='btn btn-small btn-danger selection-box-delete-btn' for='temp_unit_id_" + dragAreaCount + "'><i class='fa fa-times'></i></button>"), if(parseInt(currentDragBox.css("left")) < 195){
btnHolder = $("<div class='selection-box-btn-holder'></div>"); positionClass = "float-box-right";
}
var deleteBtn = $("<button class='btn-flat btn-flat-small btn-flat-danger btn-flat-has-icon btn-flat-has-margin selection-box-delete-btn btn-flat-block' for='temp_unit_id_" + dragAreaCount + "'><i class='fa fa-trash-o'></i>Delete</button>"),
btnHolder = $("<div class='selection-box-btn-holder float-box " + positionClass + "'></div>");
btnHolder.append(deleteBtn); btnHolder.append(deleteBtn);
currentDragBox.append(btnHolder); currentDragBox.append(btnHolder);
currentDragBox.css({ currentDragBox.css({
@ -122,9 +132,9 @@
var makeNewForm = function(box,edit){ var makeNewForm = function(box,edit){
formDisplay = true; formDisplay = true;
var formWrapper = $("<div class='selection-form-wrapper' />"), var formWrapper = $("<div class='selection-form-wrapper float-box " + positionClass + "' />"),
form = $("<form class='selection-box-form form-horizontal' />"), form = $("<form class='selection-box-form form-horizontal form-horizontal-flat' />"),
field = "<div class='control-group'> <label calss='control-label muted' for='floor_unit_title'>Unit name : </label><img src='/assets/preloader.gif' style='width:50px; height:50px; display:none;' /><div class='form-unit-title'><input id='floor_unit_title' type='text' name='floor_unit[title]' placeholder='New unit title' /><select style='display:none;'>"; field = "<div class='control-group control-group-flat'> <label class='control-label muted control-label-flat floor-unit-title' for='floor_unit_title'><i class='fa fa-cube'></i>Unit name : </label><img src='/assets/preloader.gif' style='width:50px; height:50px; display:none;' /><div class='form-unit-title'><input class='input-flat' id='floor_unit_title' type='text' name='floor_unit[title]' placeholder='New unit title' /><select class='select-flat' style='display:none;'>";
for(index = 0; index < floorUnits.length; index++){ for(index = 0; index < floorUnits.length; index++){
var unit = floorUnits[index]; var unit = floorUnits[index];
@ -132,7 +142,7 @@
} }
field += "</select></div></div>"; field += "</select></div></div>";
var checkbox = $("<div class='control-group'><div><input type='checkbox' id='toggle-select-text' /> Select existing units</div></div>"), var checkbox = $("<div class='control-group control-group-flat'><div class='toggle-select-wrap'><input class='checkbox-flat' type='checkbox' id='toggle-select-text' /><label class='control-label-flat' for='toggle-select-text'>Select existing units</label></div></div>"),
type = (edit ? "existing" : "new"); type = (edit ? "existing" : "new");
checkbox.find("input[type=checkbox]").on("click",function(){ checkbox.find("input[type=checkbox]").on("click",function(){
if($(this).is(":checked")){ if($(this).is(":checked")){
@ -146,7 +156,17 @@
} }
}) })
var submitBtn = $("<div class='control-group'><div class='form-action-btn-holder'><button class='btn btn-small btn-primary'>Save</button></div>"); var submitBtn = $("<div class='control-group control-group-flat control-group-flat-last'><div class='form-action-btn-holder no-wrap'><button class='btn-flat btn-flat-small btn-flat-primary btn-flat-has-icon btn-flat-has-margin'><i class='fa fa-floppy-o'></i>Save</button></div>");
if(type == "new"){
var deleteBtn = $("<button class='btn-flat btn-flat-small btn-flat-danger btn-flat-has-icon btn-flat-has-margin' ><i class='fa fa-trash-o'></i>Delete</button>");
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(){ submitBtn.find("button").on("click",function(){
if(type == "existing"){ if(type == "existing"){
var id = form.find("select").val(), var id = form.find("select").val(),
@ -154,12 +174,12 @@
box.attr("data-unit-id",id); box.attr("data-unit-id",id);
box.find(".selection-box-delete-btn").attr("for",id); box.find(".selection-box-delete-btn").attr("for",id);
if(box.find(".selection-box-label").length == 0){ if(box.find(".selection-box-label").length == 0){
box.append("<div class='selection-box-label'>" + unit[0].title + "</div>"); box.append("<div class='selection-box-label absolute-bottom'>" + unit[0].title + "</div>");
}else{ }else{
box.find(".selection-box-label").text(unit[0].title); box.find(".selection-box-label").text(unit[0].title);
} }
if(box.find(".selection-box-btn-holder button.selection-box-edit-btn").length == 0){ if(box.find(".selection-box-btn-holder button.selection-box-edit-btn").length == 0){
box.find(".selection-box-btn-holder").append("<button class='selection-box-edit-btn btn btn-small' for='" + id + "'>E</button>") box.find(".selection-box-btn-holder").prepend("<button class='selection-box-edit-btn btn-flat btn-flat-primary btn-flat-has-icon btn-flat-small btn-flat-block' for='" + id + "'><i class='fa fa-pencil'></i>Edit</button>");
}else{ }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-edit-btn").prop("disabled",false).attr("for",id);
box.find(".selection-box-btn-holder button.selection-box-delete-btn").attr("for",id); box.find(".selection-box-btn-holder button.selection-box-delete-btn").attr("for",id);
@ -184,12 +204,12 @@
formDisplay = false; formDisplay = false;
formWrapper.remove(); formWrapper.remove();
if(box.find(".selection-box-label").length == 0){ if(box.find(".selection-box-label").length == 0){
box.append("<div class='selection-box-label'>" + data.unit.title + "</div>"); box.append("<div class='selection-box-label absolute-center'>" + data.unit.title + "</div>");
}else{ }else{
box.find(".selection-box-label").text(data.unit.title); box.find(".selection-box-label").text(data.unit.title);
} }
if(box.find(".selection-box-btn-holder button.selection-box-edit-btn").length == 0){ if(box.find(".selection-box-btn-holder button.selection-box-edit-btn").length == 0){
box.find(".selection-box-btn-holder").append("<button class='selection-box-edit-btn btn btn-small' for='" + data.unit.id + "'>E</button>") box.find(".selection-box-btn-holder").prepend("<button class='selection-box-edit-btn btn-flat btn-flat-primary btn-flat-has-icon btn-flat-small btn-flat-block' for='" + data.unit.id + "'><i class='fa fa-pencil'></i>Edit</button>")
}else{ }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-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); box.find(".selection-box-btn-holder button.selection-box-delete-btn").attr("for",data.unit.id);
@ -221,13 +241,14 @@
id = el.attr("for"), id = el.attr("for"),
box = el.parents(".selection-box[data-unit-id=" + id + "]"), box = el.parents(".selection-box[data-unit-id=" + id + "]"),
form = makeNewForm(box,true), form = makeNewForm(box,true),
cancelBtn = $("<button class='cancel-button btn btn-small'>Cancel</button>"); cancelBtn = $("<button class='cancel-button btn-flat btn-flat-warning btn-flat-has-icon btn-flat-small'><i class='fa fa-times'></i>Cancel</button>");
cancelBtn.one("click",function(){ cancelBtn.one("click",function(){
el.prop("disabled",false); el.prop("disabled",false);
box.find(".selection-form-wrapper").remove(); box.find(".selection-form-wrapper").remove();
formDisplay = false; formDisplay = false;
changesMade--; changesMade--;
return false;
}) })
el.prop("disabled",true); el.prop("disabled",true);

7
app/views/admin/spaces/floors.html.erb
View File

@ -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 %> <% content_for :page_specific_javascript do %>
<%= javascript_include_tag "lib/jquery.form" %> <%= javascript_include_tag "lib/jquery.form" %>
<%= javascript_include_tag "validator" %> <%= javascript_include_tag "validator" %>
<% end %> <% end %>
<table class="table main-list"> <table class="table main-list table-flat">
<thead> <thead>
<tr class="sort-header"> <tr class="sort-header">
<% @table_fields.each do |f| %> <% @table_fields.each do |f| %>

10
app/views/admin/spaces/index.html.erb
View File

@ -1,7 +1,13 @@
<% content_for :page_specific_css do %> <% 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 %> <% end %>
<ul class="building-showcase clearfix"> <% content_for :page_specific_javascript do %>
<%= javascript_include_tag "space/space" %>
<% end %>
<ul class="building-showcase card-container list-unstyled clearfix row">
<%= render :partial => "building", :collection => @buildings %> <%= render :partial => "building", :collection => @buildings %>
</ul> </ul>

7
app/views/admin/spaces/sub_units.html.erb
View File

@ -1,10 +1,11 @@
<% content_for :page_specific_css do %> <% 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 %> <% end %>
<ul class="apartments-area"> <ul class="rooms card-container list-unstyled clearfix row">
<%= render :partial => "sub_unit", :collection => @floor_unit.floor_sub_units %> <%= render :partial => "sub_unit", :collection => @floor_unit.floor_sub_units %>
</ul> </ul>
<div class="bottomnav clearfix"> <div class="bottomnav clearfix">
<div class="action pull-right"> <div class="action pull-right">
<a href="/admin/spaces/unit/<%= @floor_unit.to_param %>/add_sub_unit" class="btn btn-primary"><%= t("space.add_sub_units") %></a> <a href="/admin/spaces/unit/<%= @floor_unit.to_param %>/add_sub_unit" class="btn btn-primary"><%= t("space.add_sub_units") %></a>

88
app/views/admin/spaces/unit_layout.html.erb
View File

@ -1,6 +1,7 @@
<% content_for :page_specific_css do %> <% 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 "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 %> <% end %>
<% content_for :page_specific_javascript do %> <% content_for :page_specific_javascript do %>
<%= javascript_include_tag "attrchange" %> <%= javascript_include_tag "attrchange" %>
@ -25,8 +26,10 @@
var canvas = $("#full-layout-canvas"), var canvas = $("#full-layout-canvas"),
layoutImage = $("#layout-image"), layoutImage = $("#layout-image"),
cover = canvas.find(".image-cover"), cover = canvas.find(".image-cover"),
positionClass = "float-box-left",
dragAreaCount = 0, 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 %>, subUnits = <%= @floor_unit.floor_sub_units.asc(:title).collect{|unit| {"id" => unit.id.to_s, "title" => unit.title}}.to_json.html_safe %>,
formDisplay = false, formDisplay = false,
changesMade = 0, changesMade = 0,
@ -34,11 +37,13 @@
tmpImg = new Image(); tmpImg = new Image();
canvas.height(windowHeight); 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.src = layoutImage.attr('src') ;
tmpImg.onload = function() { tmpImg.onload = function() {
cover.width(layoutImage.width()); cover.width(layoutImage.width() + 40);
// cover.css("left",((layoutImage.position().left * 100) / canvas.width()) + "%"); // cover.css("left",((layoutImage.position().left * 100) / canvas.width()) + "%");
} }
@ -49,14 +54,27 @@
diffY = 0, diffY = 0,
currentDragBox = null, currentDragBox = null,
isDragging = false; isDragging = false;
// cover.hover(function(){
// cover.addClass("hover");
// },function(){
// cover.removeClass("hover");
// if(currentDragBox != null){
// isDragging = false;
// makeBoxPermanent();
// }
// })
cover.on("mousedown",function(e){ cover.on("mousedown",function(e){
// e.preventDefault();
if($(".selection-box.hover").length == 0 && !formDisplay){ if($(".selection-box.hover").length == 0 && !formDisplay){
if(currentDragBox != null){ if(currentDragBox != null){
currentDragBox.remove(); currentDragBox.remove();
currentDragBox = null; currentDragBox = null;
$(".make-box-permanent").remove(); $(".make-box-permanent").remove();
} }
var dragBox = $("<div class='selection-box'></div>"), var dragBox = $("<div class='selection-box overlay'></div>"),
xpercent = ((e.offsetX * 100) / cover.width()) + "%", xpercent = ((e.offsetX * 100) / cover.width()) + "%",
ypercent = ((e.offsetY * 100) / cover.height()) + "%"; ypercent = ((e.offsetY * 100) / cover.height()) + "%";
dragBox.css({ dragBox.css({
@ -70,24 +88,39 @@
cover.append(dragBox); cover.append(dragBox);
} }
}) })
var tempX = 0,
tempY = 0;
cover.on("mousemove",function(e){ cover.on("mousemove",function(e){
e.preventDefault();
if(isDragging){ if(isDragging){
diffX = e.offsetX - offsetX; diffX = e.offsetX - offsetX;
diffY = e.offsetY - offsetY; diffY = e.offsetY - offsetY;
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({ currentDragBox.css({
width : diffX + "px", width : diffX + "px",
height : diffY + "px" height : diffY + "px"
}) })
} }
}
}
}) })
cover.on("mouseup",function(){ cover.on("mouseup",function(){
if(isDragging){ if(isDragging){
isDragging = false; isDragging = false;
makeBoxPermanent();
}
})
var makeBoxPermanent = function(){
if(currentDragBox.width() > 20 && currentDragBox.height() > 20){ if(currentDragBox.width() > 20 && currentDragBox.height() > 20){
var offset = currentDragBox.offset(), var offset = currentDragBox.offset(),
btn = $("<button class='make-box-permanent btn btn-primary btn-small'><i class='fa fa-check'></i> Ok</button>"); btn = $("<button class='make-box-permanent btn-flat btn-flat-has-icon btn-flat-primary btn-flat-small absolute-center'><i class='fa fa-check'></i>OK</button>");
btn.on("click",selectAreaOkBtnHandler); btn.on("click",selectAreaOkBtnHandler);
currentDragBox.append(btn); currentDragBox.append(btn);
currentDragBox.hover(function(){ currentDragBox.hover(function(){
@ -99,12 +132,14 @@
currentDragBox.remove(); currentDragBox.remove();
} }
} }
})
var selectAreaOkBtnHandler = function(event){ var selectAreaOkBtnHandler = function(event){
$(this).remove(); $(this).remove();
var deleteBtn = $("<button class='btn btn-small btn-danger selection-box-delete-btn' for='temp_unit_id_" + dragAreaCount + "'><i class='fa fa-times'></i></button>"), if(parseInt(currentDragBox.css("left")) < 195){
btnHolder = $("<div class='selection-box-btn-holder'></div>"); positionClass = "float-box-right";
}
var deleteBtn = $("<button class='btn-flat btn-flat-small btn-flat-danger btn-flat-has-icon btn-flat-has-margin selection-box-delete-btn btn-flat-block' for='temp_unit_id_" + dragAreaCount + "'><i class='fa fa-trash-o'></i>Delete</button>"),
btnHolder = $("<div class='selection-box-btn-holder float-box " + positionClass + "'></div>");
btnHolder.append(deleteBtn); btnHolder.append(deleteBtn);
currentDragBox.append(btnHolder); currentDragBox.append(btnHolder);
currentDragBox.css({ currentDragBox.css({
@ -122,9 +157,9 @@
var makeNewForm = function(box,edit){ var makeNewForm = function(box,edit){
formDisplay = true; formDisplay = true;
var formWrapper = $("<div class='selection-form-wrapper' />"), var formWrapper = $("<div class='selection-form-wrapper float-box " + positionClass + "' />"),
form = $("<form class='selection-box-form form-horizontal' />"), form = $("<form class='selection-box-form form-horizontal form-horizontal-flat' />"),
field = "<div class='control-group'> <label calss='control-label muted' for='floor_unit_title'>Unit name : </label><img src='/assets/preloader.gif' style='width:50px; height:50px; display:none;' /><div class='form-unit-title'><input id='floor_unit_title' type='text' name='floor_unit[title]' placeholder='New unit title' /><select style='display:none;'>"; field = "<div class='control-group control-group-flat'> <label class='control-label muted control-label-flat floor-unit-title' for='floor_unit_title'><i class='fa fa-cube'></i>Unit name : </label><img src='/assets/preloader.gif' style='width:50px; height:50px; display:none;' /><div class='form-unit-title'><input class='input-flat' id='floor_unit_title' type='text' name='floor_unit[title]' placeholder='New unit title' /><select class='select-flat' style='display:none;'>";
for(index = 0; index < subUnits.length; index++){ for(index = 0; index < subUnits.length; index++){
var unit = subUnits[index]; var unit = subUnits[index];
@ -132,7 +167,7 @@
} }
field += "</select></div></div>"; field += "</select></div></div>";
var checkbox = $("<div class='control-group'><div><input type='checkbox' id='toggle-select-text' /> Select existing units</div></div>"), var checkbox = $("<div class='control-group control-group-flat'><div class='toggle-select-wrap'><input class='checkbox-flat' type='checkbox' id='toggle-select-text' /><label class='control-label-flat' for='toggle-select-text'>Select existing units</label></div></div>"),
type = (edit ? "existing" : "new"); type = (edit ? "existing" : "new");
checkbox.find("input[type=checkbox]").on("click",function(){ checkbox.find("input[type=checkbox]").on("click",function(){
if($(this).is(":checked")){ if($(this).is(":checked")){
@ -146,7 +181,19 @@
} }
}) })
var submitBtn = $("<div class='control-group'><div class='form-action-btn-holder'><button class='btn btn-small btn-primary'>Save</button></div>"); var submitBtn = $("<div class='control-group control-group-flat control-group-flat-last'><div class='form-action-btn-holder no-wrap'><button class='btn-flat btn-flat-small btn-flat-primary btn-flat-has-icon btn-flat-has-margin'><i class='fa fa-floppy-o'></i>Save</button></div>");
if(type == "new"){
var deleteBtn = $("<button class='btn-flat btn-flat-small btn-flat-danger btn-flat-has-icon btn-flat-has-margin' ><i class='fa fa-trash-o'></i>Delete</button>");
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(){ submitBtn.find("button").on("click",function(){
if(type == "existing"){ if(type == "existing"){
var id = form.find("select").val(), var id = form.find("select").val(),
@ -154,12 +201,12 @@
box.attr("data-unit-id",id); box.attr("data-unit-id",id);
box.find(".selection-box-delete-btn").attr("for",id); box.find(".selection-box-delete-btn").attr("for",id);
if(box.find(".selection-box-label").length == 0){ if(box.find(".selection-box-label").length == 0){
box.append("<div class='selection-box-label'>" + unit[0].title + "</div>"); box.append("<div class='selection-box-label absolute-bottom'>" + unit[0].title + "</div>");
}else{ }else{
box.find(".selection-box-label").text(unit[0].title); box.find(".selection-box-label").text(unit[0].title);
} }
if(box.find(".selection-box-btn-holder button.selection-box-edit-btn").length == 0){ if(box.find(".selection-box-btn-holder button.selection-box-edit-btn").length == 0){
box.find(".selection-box-btn-holder").append("<button class='selection-box-edit-btn btn btn-small' for='" + id + "'>E</button>") box.find(".selection-box-btn-holder").prepend("<button class='selection-box-edit-btn btn-flat btn-flat-primary btn-flat-has-icon btn-flat-small btn-flat-block' for='" + id + "'><i class='fa fa-pencil'></i>Edit</button>");
}else{ }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-edit-btn").prop("disabled",false).attr("for",id);
box.find(".selection-box-btn-holder button.selection-box-delete-btn").attr("for",id); box.find(".selection-box-btn-holder button.selection-box-delete-btn").attr("for",id);
@ -184,12 +231,12 @@
formDisplay = false; formDisplay = false;
formWrapper.remove(); formWrapper.remove();
if(box.find(".selection-box-label").length == 0){ if(box.find(".selection-box-label").length == 0){
box.append("<div class='selection-box-label'>" + data.unit.title + "</div>"); box.append("<div class='selection-box-label absolute-center'>" + data.unit.title + "</div>");
}else{ }else{
box.find(".selection-box-label").text(data.unit.title); box.find(".selection-box-label").text(data.unit.title);
} }
if(box.find(".selection-box-btn-holder button.selection-box-edit-btn").length == 0){ if(box.find(".selection-box-btn-holder button.selection-box-edit-btn").length == 0){
box.find(".selection-box-btn-holder").append("<button class='selection-box-edit-btn btn btn-small' for='" + data.unit.id + "'>E</button>") box.find(".selection-box-btn-holder").prepend("<button class='selection-box-edit-btn btn-flat btn-flat-primary btn-flat-has-icon btn-flat-small btn-flat-block' for='" + data.unit.id + "'><i class='fa fa-pencil'></i>Edit</button>")
}else{ }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-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); box.find(".selection-box-btn-holder button.selection-box-delete-btn").attr("for",data.unit.id);
@ -223,13 +270,14 @@
id = el.attr("for"), id = el.attr("for"),
box = el.parents(".selection-box[data-unit-id=" + id + "]"), box = el.parents(".selection-box[data-unit-id=" + id + "]"),
form = makeNewForm(box,true), form = makeNewForm(box,true),
cancelBtn = $("<button class='cancel-button btn btn-small'>Cancel</button>"); cancelBtn = $("<button class='cancel-button btn-flat btn-flat-warning btn-flat-has-icon btn-flat-small'><i class='fa fa-times'></i>Cancel</button>");
cancelBtn.one("click",function(){ cancelBtn.one("click",function(){
el.prop("disabled",false); el.prop("disabled",false);
box.find(".selection-form-wrapper").remove(); box.find(".selection-form-wrapper").remove();
formDisplay = false; formDisplay = false;
changesMade--; changesMade--;
return false;
}) })
el.prop("disabled",true); el.prop("disabled",true);

9
app/views/admin/spaces/units.html.erb
View File

@ -1,7 +1,12 @@
<% content_for :page_specific_css do %> <% 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 %> <% end %>
<ul class="apartments-area"> <% content_for :page_specific_javascript do %>
<%= javascript_include_tag "space/space" %>
<% end %>
<ul class="apartments-area card-container list-unstyled clearfix row">
<%= render :partial => "floor_unit", :collection => @floor.floor_units.asc(:title) %> <%= render :partial => "floor_unit", :collection => @floor.floor_units.asc(:title) %>
</ul> </ul>
<div class="bottomnav clearfix"> <div class="bottomnav clearfix">

2
app/views/spaces/show.html.erb
View File

@ -1,2 +1,2 @@
<% OrbitHelper.render_css_in_head(["space.scss"]) %> <% OrbitHelper.render_css_in_head(["space-frontend.scss"]) %>
<%= render_view %> <%= render_view %>

2
app/views/spaces/unit.html.erb
View File

@ -1,2 +1,2 @@
<% OrbitHelper.render_css_in_head(["space.scss"]) %> <% OrbitHelper.render_css_in_head(["space-frontend.scss"]) %>
<%= render_view %> <%= render_view %>

1
config/routes.rb
View File

@ -28,6 +28,7 @@ Rails.application.routes.draw do
get "spaces/unit/:unit_id/add_sub_unit", to: 'spaces#add_sub_unit' 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' 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/unit/:unit_id/delete", to: 'spaces#delete_floor_unit'
delete "spaces/floor/:floor_id/delete", to: 'spaces#delete_floor' delete "spaces/floor/:floor_id/delete", to: 'spaces#delete_floor'