dante-editor 0.0.3 → 0.0.4

data/app/assets/stylesheets/temp/review.scss

@@ -0,0 +1,21 @@
+.pen-input{position:absolute;
+  width:100%;left:0;
+  top:0;height:36px;
+  line-height:20px;
+  background:#333;
+  color:#fff;
+  border:none;
+  text-align:center;
+  display:none;
+  font-family:arial, sans-serif;
+}
+.pen-input:focus{
+  outline:none;
+}
+
+html = "<input class='dante-menu-input' placeholder='http://'>"
+  html += "<ul class='dante-menu-buttons'>"
+  _.each @config.buttons, (item)->
+    html += "<li class='dante-menu-button'><i class=\"dante-icon icon-#{item}\" data-action=\"#{item}\"></i></li>"
+  html += "</ul>"
+  html

data/app/assets/stylesheets/temp/structure.haml

@@ -0,0 +1,22 @@
+%article.postArticle
+
+  .notesPositionContainer
+
+  %section.postWrapper
+    .postWrapper-inner
+
+      .postContent
+        .postContent-inner
+
+          .notesSource
+            .postField
+
+              %section
+                .section-divider
+                .section-content
+
+            .inlineTooltip2
+
+  %footer
+
+.highlightMenu

data/lib/dante-editor/version.rb

@@ -1,5 +1,5 @@
 require "dante-editor/version"
 
 module DanteEditor
-  VERSION = "0.0.3"
+  VERSION = "0.0.4"
 end

data/source/assets/stylesheets/_scaffold.scss

@@ -0,0 +1,12 @@
+// Set box-sizing globally to handle padding and border widths
+*,
+*:before,
+*:after {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  font-size: 100%;
+  height: 100%; // Must be 100% for off canvas to work
+}

data/source/assets/stylesheets/_tooltips.scss

@@ -0,0 +1,216 @@
+/**
+ * Tooltips!
+ */
+
+$tooltip-arrow-size: 6px;
+$tooltip-arrow-height: $tooltip-arrow-size * 2;
+
+/* Base styles for the element that has a tooltip */
+[data-tooltip],
+.tooltip {
+  position: relative;
+  cursor: pointer;
+}
+
+/* Base styles for the entire tooltip */
+[data-tooltip]:before,
+[data-tooltip]:after,
+.tooltip:before,
+.tooltip:after {
+  position: absolute;
+  visibility: hidden;
+  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
+  opacity: 0;
+  -webkit-transition:
+    opacity 0.2s ease-in-out,
+    visibility 0.2s ease-in-out,
+    -webkit-transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
+  -moz-transition:
+    opacity 0.2s ease-in-out,
+    visibility 0.2s ease-in-out,
+    -moz-transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
+  transition:
+    opacity 0.2s ease-in-out,
+    visibility 0.2s ease-in-out,
+    transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
+  -webkit-transform: translate3d(0, 0, 0);
+  -moz-transform:    translate3d(0, 0, 0);
+  transform:         translate3d(0, 0, 0);
+  pointer-events: none;
+}
+
+/* Show the entire tooltip on hover and focus */
+[data-tooltip]:hover:before,
+[data-tooltip]:hover:after,
+[data-tooltip]:focus:before,
+[data-tooltip]:focus:after,
+.tooltip:hover:before,
+.tooltip:hover:after,
+.tooltip:focus:before,
+.tooltip:focus:after {
+  visibility: visible;
+  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
+  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
+  opacity: 1;
+}
+
+/* Base styles for the tooltip's directional arrow */
+.tooltip:before,
+[data-tooltip]:before {
+  z-index: 1001;
+  border: $tooltip-arrow-size solid transparent;
+  background: transparent;
+  content: "";
+}
+
+/* Base styles for the tooltip's content area */
+.tooltip:after,
+[data-tooltip]:after {
+  white-space: nowrap;
+  z-index: 1000;
+  padding: 8px;
+  background-color: #000;
+  background-color: hsla(0, 0%, 20%, 0.9);
+  color: #fff;
+  content: attr(data-tooltip);
+  font-size: 14px;
+  line-height: 1.2;
+  border-radius: 3px;
+}
+
+/* Directions */
+
+/* Top (default) */
+[data-tooltip]:before,
+[data-tooltip]:after,
+.tooltip:before,
+.tooltip:after,
+.tooltip-top:before,
+.tooltip-top:after {
+  bottom: 100%;
+  left: 50%;
+}
+
+[data-tooltip]:before,
+.tooltip:before,
+.tooltip-top:before {
+  margin-left: -$tooltip-arrow-size;
+  margin-bottom: -$tooltip-arrow-height;
+  border-top-color: #000;
+  border-top-color: hsla(0, 0%, 20%, 0.9);
+}
+
+/* Horizontally align top/bottom tooltips */
+[data-tooltip]:after,
+.tooltip:after,
+.tooltip-top:after {
+  margin-left: -80px;
+}
+
+[data-tooltip]:hover:before,
+[data-tooltip]:hover:after,
+[data-tooltip]:focus:before,
+[data-tooltip]:focus:after,
+.tooltip:hover:before,
+.tooltip:hover:after,
+.tooltip:focus:before,
+.tooltip:focus:after,
+.tooltip-top:hover:before,
+.tooltip-top:hover:after,
+.tooltip-top:focus:before,
+.tooltip-top:focus:after {
+  -webkit-transform: translateY(-$tooltip-arrow-height);
+  -moz-transform:    translateY(-$tooltip-arrow-height);
+  transform:         translateY(-$tooltip-arrow-height);
+}
+
+/* Left */
+.tooltip-left:before,
+.tooltip-left:after {
+  right: 100%;
+  bottom: 50%;
+  left: auto;
+}
+
+.tooltip-left:before {
+  margin-left: 0;
+  margin-right: -$tooltip-arrow-height;
+  margin-bottom: 0;
+  border-top-color: transparent;
+  border-left-color: #000;
+  border-left-color: hsla(0, 0%, 20%, 0.9);
+}
+
+.tooltip-left:hover:before,
+.tooltip-left:hover:after,
+.tooltip-left:focus:before,
+.tooltip-left:focus:after {
+  -webkit-transform: translateX(-$tooltip-arrow-height);
+  -moz-transform:    translateX(-$tooltip-arrow-height);
+  transform:         translateX(-$tooltip-arrow-height);
+}
+
+/* Bottom */
+.tooltip-bottom:before,
+.tooltip-bottom:after {
+  top: 100%;
+  bottom: auto;
+  left: 50%;
+}
+
+.tooltip-bottom:before {
+  margin-top: -12px;
+  margin-bottom: 0;
+  border-top-color: transparent;
+  border-bottom-color: #000;
+  border-bottom-color: hsla(0, 0%, 20%, 0.9);
+}
+
+.tooltip-bottom:hover:before,
+.tooltip-bottom:hover:after,
+.tooltip-bottom:focus:before,
+.tooltip-bottom:focus:after {
+  -webkit-transform: translateY($tooltip-arrow-height);
+  -moz-transform:    translateY($tooltip-arrow-height);
+  transform:         translateY($tooltip-arrow-height);
+}
+
+/* Right */
+.tooltip-right:before,
+.tooltip-right:after {
+  bottom: 50%;
+  left: 100%;
+}
+
+.tooltip-right:before {
+  margin-bottom: 0;
+  margin-left: -$tooltip-arrow-height;
+  border-top-color: transparent;
+  border-right-color: #000;
+  border-right-color: hsla(0, 0%, 20%, 0.9);
+}
+
+.tooltip-right:hover:before,
+.tooltip-right:hover:after,
+.tooltip-right:focus:before,
+.tooltip-right:focus:after {
+  -webkit-transform: translateX($tooltip-arrow-height);
+  -moz-transform:    translateX($tooltip-arrow-height);
+  transform:         translateX($tooltip-arrow-height);
+}
+
+/* Move directional arrows down a bit for left/right tooltips */
+.tooltip-left:before,
+.tooltip-right:before {
+  top: 50%;
+  margin-top: -$tooltip-arrow-size;
+  bottom: auto;
+}
+
+/* Vertically center tooltip content for left/right tooltips */
+.tooltip-left:after,
+.tooltip-right:after {
+  margin-left: 0;
+  margin-bottom: -16px;
+}

data/source/assets/stylesheets/all.css.scss

@@ -1,34 +1,59 @@
 @charset "utf-8";
 
-header{
-  width: 100%;
-  border-top: 3px solid #1abf89;
-  margin-bottom: 40px;
+@import "scaffold";
+@import "tooltips";
 
-  img{
-    display: block;
-    float: left;
-    margin: -34px 7px 11px 25px;
-    position: absolute;
-    left: 0;
-    top: 28px;
-  }
-  h1 {
-    font-size: 30px;
-    font-style: normal;
-    font-weight: 300;
-    letter-spacing: -0.04em;
-    line-height: 1;
-    margin-bottom: 8px;
-    margin-right: 91px;
-    margin-top: 25px;
-    padding-top: 0;
-    text-align: right;
-  }
-}
+$color-brand: #1abf89;
+$gutter: 30px;
 
+body:after {
+  content: "";
+  position: fixed;
+  width: 100%;
+  height: 3px;
+  top: 0;
+  right: 0;
+  left: 0;
+  background-color: $color-brand;
+}
+article {
+  margin-top: 70px;
+  padding: $gutter;
+}
 #editor{
   margin: 0 auto;
   //width: 70%;
-  width: 700px;
+  max-width: 700px;
+}
+
+.logo {
+  display: block;
+  float: left;
+  margin: -34px 7px 11px 25px;
+  position: absolute;
+  left: 0;
+  top: 28px;
+}
+
+.top-left,
+.top-right {
+  position: fixed;
+  top: $gutter;
+}
+
+.top-left {
+  left: $gutter;
+}
+.top-right {
+  right: $gutter;
+}
+
+.github {
+  font-size: 40px;
+  color: $color-brand;
+  line-height: 0;
+  i {
+    position: relative;
+    top: -2px;
+  }
 }

data/source/embeds.html.erb

@@ -1,29 +1,27 @@
 ---
-title: Dante Editor example
+title: Dante Editor EMBEDS example
 ---
 
-<div class="welcome">
-  <header>
-    <img src="images/icon-logo.png" alt="dante logo" width="90" >
-    <h1 class="main-title">Dante Wysiwyg</h1>
-  </header>
+<article>
+  <div class="postContent">
+    <div class="notesSource">
 
+      <div id="editor" class="postField postField--body editable smart-media-plugin">
+        <%= partial "partials/content" %>
+        <%= partial "partials/example_1" %>
+        <%= partial "partials/example_2" %>
+      </div>
 
-  <div id="editor" class="postField postField--body editable smart-media-plugin">
-    <%= partial "partials/example_1" %>
-    <%= partial "partials/example_2" %>
+    </div>
   </div>
-
-</div>
-
+</article>
 
 <script type="text/javascript">
   editor = new Dante.Editor(
     {
       el: "#editor",
-      upload_url: "/images.json",
+      upload_url: "/uploads/new.json",
       debug: true
     }
-  );
-  editor.start()
+  ).start()
 </script>

data/source/index.html.erb

@@ -2,35 +2,18 @@
 title: Dante Editor example
 ---
 
-<div class="welcome">
-  <header>
-    <img src="assets/images/icon-logo.png" alt="dante logo" width="90" >
-    <h1 class="main-title">Dante Wysiwyg</h1>
-  </header>
-
-  <article>
-    <div class="postContent">
-      <div class="notesSource">
-
-        <div id="editor" class="postField postField--body editable smart-media-plugin">
-          <% partial "partials/content" %>
-          <% partial "partials/example_1" %>
-          <% partial "partials/example_2" %>
-        </div>
-
-      </div>
-    </div>
-  </article>
-
-</div>
 
+<article>
+  <div id="editor">
+    <%= partial "partials/readme" %>
+  </div>
+</article>
 
 <script type="text/javascript">
   editor = new Dante.Editor(
     {
       el: "#editor",
-      upload_url: "/uploads/new.json",
-      debug: true
+      upload_url: "/uploads/new.json"
     }
   ).start()
-</script>
+</script>