Layout fe

app/assets/javascripts/application.js

@@ -6,6 +6,7 @@
 //= require bootstrap
 //= require custom
 //= require toastr
+//= require multislider
 
 /*global toastr*/
 toastr.options = {

app/assets/javascripts/custom.js

@@ -1,30 +1,28 @@
 $(document).ready(function() {
-  var $headline = $('.headline'),
-  $inner = $('.inner'),
-  $nav = $('nav'),
-  navHeight = 75;
-
-  $(window).scroll(function() {
-    var scrollTop = $(this).scrollTop(),
-    headlineHeight = $headline.outerHeight() - navHeight,
-    navOffset = $nav.offset().top;
-
-    $headline.css({
-      'opacity': (1 - scrollTop / headlineHeight)
-    });
+  $(".preview-signup").change(function() {
+    readURL(this, '#img-prev-signup');
+  });
 
-    $inner.children().css({
-      'transform': 'translateY('+ scrollTop * 0.4 +'px)'
-    });
-    if (navOffset > headlineHeight) {
-      $nav.addClass('scrolled');
-    } else {
-      $nav.removeClass('scrolled');
+  $('.carousel .item').each(function(){
+    var next = $(this).next();
+    if (!next.length) {
+      next = $(this).siblings(':first');
+    }
+    next.children(':first-child').clone().appendTo($(this));
+
+    for (var i=0;i<2;i++) {
+      next=next.next();
+      if (!next.length) {
+        next = $(this).siblings(':first');
+      }
+
+      next.children(':first-child').clone().appendTo($(this));
     }
   });
 
-  $(".preview-signup").change(function() {
-    readURL(this, '#img-prev-signup');
+  $('#exampleSlider').multislider({
+    interval: 5000,
+    slideAll: false
   });
 
   $(".preview-edit-profile").change(function() {
@@ -43,8 +41,7 @@ function readURL(f, previewId) {
   if (f.files && f.files[0]) {
     var reader = new FileReader();
     reader.onload = function (e) {
-      $(previewId)
-        .attr('src', e.target.result);
+      $(previewId).attr('src', e.target.result);
     };
     reader.readAsDataURL(f.files[0]);
   }

app/assets/javascripts/manager/custom.js

@@ -102,7 +102,68 @@ $(document).ready(function(){
   });
 
   $('[data-toggle="tooltip"]').tooltip();
+  $('.preview-image').on("change", previewImages);
+  $('#new_address_modal, #editModal').on('hidden.bs.modal', function(){
+    location.reload();
+  });
+
+  $('#new-areas').submit(function(){
+    $.ajax({
+      url: $(this).attr('action'),
+      type: $(this).attr('method'),
+      data: $(this).serialize(),
+      success: function(data) {
+        if(data.type == 'success') {
+          $('.name_area').val('');
+          toastr.success('', data.message);
+          $('.load-areas').load(location.href + ' .load-areas');
+        } else {
+          toastr.error('', data.message);
+        }
+      }
+    });
+    return false;
+  });
 
+  $('#new-address').submit(function(){
+    $.ajax({
+      url: $(this).attr('action'),
+      type: $(this).attr('method'),
+      data: $(this).serialize(),
+      success: function(data) {
+        if(data.type == 'success') {
+          $('.name_address').val('');
+          toastr.success('', data.message);
+          $('.load-address').load(location.href + ' .load-address');
+        } else {
+          toastr.error('', data.message);
+        }
+      }
+    });
+    return false;
+  });
+
+  $('#edit-address').submit(function(){
+    $.ajax({
+      url: $(this).attr('action'),
+      type: 'PATCH',
+      data: $(this).serialize(),
+      success: function(data) {
+        if(data.type == 'success') {
+          toastr.success('', data.message);
+          $('.load-address').load(location.href + ' .load-address');
+        } else {
+          toastr.error('', data.message);
+        }
+      }
+    });
+    return false;
+  });
+
+  $('.address-edit').click(function() {
+    $('.name_address').val($(this).data('address-name'))
+    $('#edit-address').attr('action', $(this).data('address-url'))
+  })
   $('.preview-image').on("change", previewImages);
 
   $(".select2").select2({

app/assets/stylesheets/application.css

@@ -1,5 +1,5 @@
 /*
- *= require custom
-.*= require toastr
- *= require_self
- */
+*= require custom
+*= require toastr
+*= require_self
+*/

app/assets/stylesheets/custom.scss

@@ -1,5 +1,17 @@
 @import 'bootstrap';
 
+html {
+  margin: 0;
+  height: 100%;
+  width: 100%;
+}
+
+body {
+  font-weight: 500;
+  font-size: 1rem;
+  color: #222;
+}
+
 /* ----------------------------
 header
 ---------------------------- */
@@ -13,10 +25,6 @@ body {
   font-size: 1rem;
 }
 
-header {
-  background: #111;
-}
-
 .headline {
   position: relative;
   height: 78px;
@@ -44,10 +52,9 @@ header {
 .custom-nav {
   position: fixed;
   width: 100%;
+  height: 78px;
   z-index: 10;
-  &.scrolled {
-    background: rgba(#111, 0.9);
-  }
+  background-color: #333;
   ul {
     float: right;
     list-style: none;
@@ -373,12 +380,12 @@ $offWhite: #e9eaea;
 }
 
 @media (min-width: 1200px){
-  .container {
+  .container #custom {
     padding: 0 2.8rem;
   }
 }
 
-.container {
+.container #custom{
   margin: auto;
   padding: 0 1.25rem;
 }
@@ -639,3 +646,179 @@ h1, h2, h3, h4, h5, h6 {
 .preview-edit-profile {
   padding: 3px;
 }
+
+#exampleSlider {
+  position: relative;
+}
+@media (max-width: 767px) {
+  #exampleSlider {
+    border-color: transparent;
+  }
+}
+#exampleSlider .MS-content {
+  overflow: hidden;
+  white-space: nowrap;
+}
+@media (max-width: 767px) {
+  #exampleSlider .MS-content {
+    margin: 0;
+  }
+}
+#exampleSlider .MS-content .item {
+  display: inline-block;
+  height: 100%;
+  overflow: hidden;
+  position: relative;
+  vertical-align: top;
+  border-right: none;
+  width: 20%;
+}
+@media (max-width: 1200px) {
+  #exampleSlider .MS-content .item {
+    width: 25%;
+  }
+}
+@media (max-width: 992px) {
+  #exampleSlider .MS-content .item {
+    width: 33.3333%;
+  }
+}
+@media (max-width: 767px) {
+  #exampleSlider .MS-content .item {
+    width: 50%;
+  }
+}
+#exampleSlider .MS-content .item p {
+  font-size: 30px;
+  text-align: center;
+  line-height: 1;
+  vertical-align: middle;
+  margin: 0;
+  padding: 10px 0;
+}
+#exampleSlider .MS-controls button {
+  position: absolute;
+  border: none;
+  background: transparent;
+  font-size: 30px;
+  outline: 0;
+  top: 35px;
+}
+@media (max-width: 767px) {
+  #exampleSlider .MS-controls button {
+    display: none;
+  }
+}
+#exampleSlider .MS-controls button:hover {
+  cursor: pointer;
+}
+#exampleSlider .MS-controls .MS-left {
+  left: 10px;
+}
+@media (max-width: 992px) {
+  #exampleSlider .MS-controls .MS-left {
+    left: -2px;
+  }
+}
+#exampleSlider .MS-controls .MS-right {
+  right: 10px;
+}
+@media (max-width: 992px) {
+  #exampleSlider .MS-controls .MS-right {
+    right: -2px;
+  }
+}
+
+.title-favorite-space {
+  margin-bottom: 18px!important;
+}
+
+.item p img {
+  width: 100%;
+  padding: 0 10px;
+}
+
+.title-content {
+  font-size: .75rem;
+  text-transform: uppercase;
+}
+
+.article_content {
+  padding: 0 8px;
+}
+
+#exampleSlider .MS-controls .MS-right {
+  top: 40%;
+}
+
+#exampleSlider .MS-controls .MS-left {
+  top: 40%;
+}
+
+.title-favorite {
+  margin: 0px;
+  padding-top: 20px;
+}
+
+.icon-favorite {
+  display: inline;
+  width: 32px;
+  height: 32px;
+}
+
+.card {
+  background: none;
+}
+
+.text-title {
+  display: inline;
+  padding: 0 15px;
+}
+
+.small {
+  font-size: 14px;
+}
+
+.extra-bold span {
+  font-size: 15px;
+}
+
+.address {
+  padding-top: 10px;
+}
+
+.tales {
+  width: 100%;
+}
+
+.carousel-showroomdetails {
+  height: 400px;
+}
+
+.img-room-detail {
+  width: 100%;
+  height: 583px;
+}
+
+.favorite-room {
+  width: 120%;
+}
+
+a.name-room {
+  text-decoration: none;
+  font-size: 20px;
+  color: #333;
+}
+
+a.name-room:hover {
+  color: red;
+  transition: all .5s;
+}
+
+.image-banner {
+  width: 100%;
+}
+
+.pagination {
+  padding: 10px 40%;
+}