overlay_me 0.12.0

data/stylesheets/overlay_me.css.scss

@@ -0,0 +1,213 @@
+@import "compass/css3";
+
+$menu_width: 250px;
+$border: 1px solid rgba(white, 0.2);
+
+button {
+  font-size: 10px;
+  margin: 0 5px;
+  padding: 0px 5px;
+}
+
+#overlay_me_page_container {
+  position: relative;
+}
+
+#overlay_me_dev_tools_menu {
+  position: absolute;
+  z-index: 990; //to pass over Google Toolbar ;)
+
+  * {
+    line-height: 14px;
+  }
+
+  .drag-me {
+    line-height: 100%;
+    display: block;
+    color: black;
+    font-size: 0.7em;
+    text-align: center;
+    &:hover {
+      cursor: move;
+    }
+    @include background-image(linear-gradient(0deg, #999999, #DDD 30%,#DDD 70%,#999999 100.0%));
+    padding: 1px;
+  }
+
+  ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    font-size: 100%;
+    font: inherit;
+    vertical-align: baseline;
+  }
+}
+
+.menu-item {
+  text-align: left;
+  background-color: #CCC;
+  border: $border;
+  width: $menu_width;
+  a.collaps-button {
+    cursor: pointer;
+    position: absolute;
+    padding-top: 9px;
+    padding-left: 5px;
+    width: 13px;
+    height: 9px;
+    border: none;
+    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAAJCAYAAADpeqZqAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAIlJREFUeNpivHDhQujz589TmZiYvjMQAP/+/eOQkZGZyfD//38ZIL77nzhwG4ilQJpA2BiIPxHQ8BGIDUHqYZpAOIWApiSYWmRNIDfPxaYaKD4bWR2KJiDmA+KzaHrOQMVxagJhfSD+ALXhA5TPQEgTCCcD8V+gpmRs8rg0MQI1eANpJmzyAAEGAKD/bax/HrzbAAAAAElFTkSuQmCC) no-repeat center center;
+    span {
+      display: none;
+      color: yellow;
+      &:hover {
+        color: yellow;
+      }
+    }
+  }
+  label.title {
+    padding-left: 20px;
+    color: white;
+    cursor: pointer;
+    width: $menu_width - 13px;
+    line-height: 1.1em;
+    font-size: 14px;
+    background: none;
+  }
+  &.collapsed {
+    .item-content { display: none; }
+    a.collaps-button {
+      background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAANCAYAAAB7AEQGAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAKtJREFUeNpiuHz5ctD///+lgJgBF2Z68uRJOgMDw0EgNmTAAZiA4AeQVgHiA0CchFUREpsPiOcCjZ8NZWNVBAaMjIwpQGofEOvjVAQFxkATDwJxMkgNCy7HAk3kB1KzgApf4DIJBD4CcRpQ8TZcJp2D+vQiVjcBjZ8HpBxhCtAVfQbiVKDxIMd+QtbI8u/fP04gfQ+Iw4D4LDa7WSQlJUGBdxyIn+DyAUCAAQDxsEXD9kreLQAAAABJRU5ErkJggg==) no-repeat center center;
+    }
+  }
+}
+
+#overlay_panel {
+
+  .content-mgnt-block {
+    position: relative;
+    line-height: 10px;
+    .unicorns {
+      background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAPCAYAAAA71pVKAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAklJREFUeNqEks1u00AQx3d27V3HdezY+SBpkKBFoBZxQEKIOwfegBs3rtwoPABvw3sgceKAuFWtUBBSaT6ctvHXer2zOElTVaoKI/2lWWl/O//ZGZi8jgSPxFv3JX93+CJvfJ4/09++vzH6S/SVH59+IohH5JagxBilC4zNHHigSLvtTCPRnLYxtB4b29ojGglBc1PG1PAyLfUxzszIX7B86MwLP/iVkS566DWeEgo+gfrWdV1VJoZgpUdqon84p1a+wxI1CA+l3Z+yqu89N5a9v65EVgK8TOpgH/edZS6JAZ97/AkfKjF3pTpRkUrlfQFnoGlaHNc2F0sAzPIFWIl9WMEGTYUZJfyB12ED2l9UE6bkDAcoy+0QznXJ8nIEBosNuIb3xLoBNIlRhNlc7Ho9dDA6l1OC8gKGUGEnhAyBFmpSu8zqf9jAzqZ/RIUxFDR0G2LQ6ueIwUzGFIuE95livS4p2RaUVQYas/p+xQ4eiavPqO2nKPUcCrvlCR50uqlirXGeiUWeua4uva6vebNDwHIJErq2fW0Mdfcxpjqmqe37Nnd73US64Ummt8a5bCpZhh5UrZanfS9gBw/5tcorGSz1TJ/rCTljoomOGDTLsh+NUz8Ypdz/ndBwlpFeIdn7Hevm9miD9QNxdVGNSQzGSR3ao6Duekm23fqT3Al/Ju3waAEnr1xyayxnymhgNcU9Z7sx5LtWA+6bquxXaeLr5J+wMZebRQwDiwW2x0O7I1y7ZxOrS+X/4Y0DXJ0pANhgM4sKRv4KMACD6UDbVgTzkgAAAABJRU5ErkJggg==) no-repeat center center;
+      width: 15px;
+      height: 15px;
+      position: absolute;
+      right: 0;
+      top: 6px;
+    }
+  }
+
+
+  label {
+    margin: 0 5px 0 0;
+    font-size: 14px;
+  }
+
+  .content-mgnt-block, #images_mgnt {
+    text-align: left;
+    padding: 3px 4px;
+    margin: 2px;
+    border: 1px #777 solid;
+
+    @include border-radius(5px);
+    legend {
+      font-size: 10px;
+      padding: 0 3px;
+      margin-left: 10px;
+    }
+  }
+
+  .slider-block {
+    display: block;
+    label {
+      font-size: 70%;
+      vertical-align: top;
+    }
+    input[type=range] {
+      margin: 0;
+    }
+  }
+
+  #images_mgnt {
+    $image_mgnt_width: $menu_width - 14px;
+    width: $image_mgnt_width;
+
+    .controls {
+      padding-bottom: 5px;
+    }
+
+    .overlay-image-block {
+      text-align: left;
+      position: relative;
+      width: $image_mgnt_width;
+      border: $border;
+      border-right: none;
+      border-left: none;
+      &.hovered {
+        background-color: rgba(yellow, 0.5);
+      }
+      .del-button {
+        position: absolute;
+        right: 0;
+        top: 0;
+        margin: 3px 7px;
+        cursor: pointer;
+        border: 1px #AAA solid;
+        font-size: 80%;
+        background-color: #444;
+        color: white;
+        font-weight: bold;
+        padding: 0 4px 2px 4px;
+      }
+    }
+
+    .dynamic-adds {
+      label {
+        font-size: 75%;
+      }
+      input {
+        width: 105px;
+        font-size: 10px;
+      }
+    }
+  }
+
+  input[type=checkbox], label, #contentSlider, .zindex-switch {
+    display: inline;
+  }
+
+  input[type=checkbox] {
+    vertical-align: middle;
+    margin: -3px 5px 0 0;
+  }
+
+}
+
+#overlay_me_images_container {
+  position: absolute;
+  z-index: 4; // same than the caroussel images
+  top: 0;
+  left: 0;
+  div {
+    position: absolute;
+    visibility: hidden;
+    &.highlight {
+      background: rgba(255, 255, 0, 0.5);
+      opacity: 1;
+      img {
+        opacity: .7;
+      }
+    }
+    &:hover {
+      cursor: move;
+    }
+  }
+  img {
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+}
+

data/vendor/assets/javascripts/overlay_me/addons/layout_resizer.js

@@ -0,0 +1,51 @@
+(function() {
+  var layout_menu, layouts;
+
+  layouts = {
+    smartphone_portrait: 310,
+    smartphone_landscape: 470,
+    tablet_port: 758,
+    tablet_land: 1014,
+    none: null
+  };
+
+  window.resize_page = function(width) {
+    if (width === null || isNaN(width)) {
+      $('#content').css({
+        width: 'auto'
+      });
+    } else {
+      $('#content').css({
+        width: "" + width + "px"
+      });
+    }
+    _.each(layouts, function(_width, name) {
+      if (width === _width) {
+        return $('body').addClass(name);
+      } else {
+        return $('body').removeClass(name);
+      }
+    });
+    return localStorage.setItem("layout-width", width);
+  };
+
+  window.resize_page(parseInt(localStorage.getItem("layout-width")));
+
+  layout_menu = new OverlayMe.MenuItem({
+    id: "layout-buttons",
+    title: "Layout Resizing"
+  });
+
+  _.each(layouts, function(width, name) {
+    var button;
+    button = (new Backbone.View).make('button', {}, name);
+    $(button).addClass(name);
+    $(button).bind('click', function(e) {
+      return window.resize_page("" + width);
+    });
+    return layout_menu.append(button);
+  });
+
+  $(OverlayMe.Menu).append(layout_menu.render());
+
+}).call(this);