Can't even remember :-(

.gitignore

@@ -2,6 +2,7 @@
 .bundle
 .sass-cache
 Gemfile.lock
+tmp
 test/dummy/log/*.log
 test/dummy/tmp/**/*
 test/dummy/db/*.sqlite3

app/assets/javascripts/contentr/application.js

@@ -16,12 +16,12 @@
     });
 
     // make paragraphs sortable
-    $('div.contentr.area.editable').sortable({ 
-      items: 'div.contentr.paragraph.editable',
-      handle: '.contentr.toolbar',
+    $('.contentr-area').sortable({ 
+      items: '.paragraph',
+      handle: '.toolbar .handle',
       update: function(event, ui) {
-        var ids = $('div.contentr.area.editable').sortable('serialize');
-        var current_page = $(this).closest('div.contentr.area').attr('data-contentr-page');
+        var ids = $('.contentr-area').sortable('serialize');
+        var current_page = $(this).closest('.contentr-area').attr('data-contentr-page');
         var area_name = 'body';
         $.ajax({
           type: "PUT",

app/assets/stylesheets/contentr.css.scss

@@ -0,0 +1,55 @@
+@import "compass/css3";
+
+@mixin contentr-button(
+  $text-color,
+  $start-color,
+  $end-color
+) {
+  // ---------------------------------------------------------------------------
+  // basics
+  // ---------------------------------------------------------------------------
+  @include nested-reset();
+  @include inline-block();
+  @include border-radius(4px);
+  @include single-transition(all, 0.1s, linear);
+  @include stylr-util-gradient-bar(
+    $text-color: $text-color,
+    $start-color: $start-color,
+    $end-color: $end-color
+  );
+  cursor: pointer;
+  vertical-align: baseline;
+  font-size: 11px;
+  line-height: normal; // we need to use padding alone, because FF limit line-height by default
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  padding: 5px 14px;
+  &::-moz-focus-inner { border: 0; padding: 0; } // Help Firefox not be a jerk about adding extra padding to buttons
+  margin: 0;
+  background-repeat: no-repeat;
+  text-decoration: none;
+  color: $text-color;
+
+  // ---------------------------------------------------------------------------
+  // states
+  // ---------------------------------------------------------------------------
+  &:focus {
+    outline: 1px dotted #666;
+  }
+
+  &:hover {
+    text-decoration: none;
+    background-position: 0 -15px;
+  };
+
+  &:active {
+    @include box-shadow(
+      rgba(#000, .25) 0 2px 4px inset,
+      rgba(#000, .05) 0 1px 2px
+    );
+  }
+}
+
+@import 'contentr/frontend-editing';
+@import 'contentr/overlay';
+
+

app/assets/stylesheets/contentr/frontend-editing.css.scss

@@ -0,0 +1,74 @@
+$contentr-toolbar-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !default;
+$contentr-toolbar-font-size: 11px !default;
+$contentr-toolbar-line-height: 15px !default;
+$contentr-toolbar-background-color: #0065A0 !default;
+$contentr-toolbar-color: #fff !default;
+
+@mixin contentr-toolbar() {
+  @include clearfix();
+
+  font-family: $contentr-toolbar-font-family;
+  font-size: $contentr-toolbar-font-size;
+  line-height: $contentr-toolbar-line-height;
+  background-color: $contentr-toolbar-background-color;
+  padding: 8px;
+  color: $contentr-toolbar-color;
+  border: 1px solid lighten($contentr-toolbar-background-color, 10%);
+  border-bottom-color: darken($contentr-toolbar-background-color, 10%);
+  border-right-color: darken($contentr-toolbar-background-color, 10%);
+
+  .area-name {
+    @include float-left();
+    font-weight: bold;
+    font-size: 110%;
+    line-height: $contentr-toolbar-line-height + 3px;
+    color: darken($contentr-toolbar-background-color, 15%);
+    @include text-shadow(lighten($contentr-toolbar-background-color, 12%) 0 1px 1px);
+  }
+
+  .handle {
+    @include float-left();
+    font-weight: bold;
+    font-size: 140%;
+    color: darken($contentr-toolbar-background-color, 15%);
+    @include text-shadow(lighten($contentr-toolbar-background-color, 12%) 0 1px 1px);
+    cursor: move;
+  }
+
+  .controls {
+    @include float-right();
+    a {
+      @include contentr-button(
+        $text-color: $contentr-toolbar-color,
+        $start-color: lighten($contentr-toolbar-background-color, 5%),
+        $end-color: darken($contentr-toolbar-background-color, 5%)
+      );
+      @include border-radius(2px);
+      font-family: $contentr-toolbar-font-family;
+      font-size: $contentr-toolbar-font-size;
+      padding: 2px 4px;
+      margin-right: 4px;
+
+      &:last-child {
+        margin-right: 0;
+      }
+    }
+  }
+}
+
+.contentr-toolbar {
+  @include contentr-toolbar();
+}
+
+.contentr-area {
+  .toolbar {
+    @include contentr-toolbar();
+    padding: 2px 8px;
+  }
+
+  .paragraph {
+    .toolbar {
+      background-color: lighten($contentr-toolbar-background-color, 5%);;
+    }
+  }
+}

app/controllers/contentr/application_controller.rb

@@ -5,8 +5,8 @@ class Contentr::ApplicationController < ApplicationController
   # does not work right in dev mode.
   Contentr::ContentPage
   Contentr::LinkedPage
-  Contentr::Site
   Contentr::Page
+  Contentr::Site
   Contentr::Node
   # end hack
 end

app/helpers/contentr/application_helper.rb

@@ -6,121 +6,62 @@ module ApplicationHelper
     # @param [String] The name of the area that should be rendered.
     #
     def contentr_area(area_name)
-      contentr_paragraphs(area_name, @contentr_page, nil)
+      if area_name.present? and @contentr_page.present?
+        contentr_render_area(area_name, @contentr_page, nil)
+      end
     end
 
     # Renders an area of paragraphs for site paragraphs
     #
     # @param [String] The name of the area that should be rendered.
     #
     def contentr_site_area(area_name)
-      contentr_paragraphs(area_name, @contentr_page, Contentr::Site.default)
+      if area_name.present? and @contentr_page.present?
+        contentr_render_area(area_name, @contentr_page, Contentr::Site.default)
+      end
     end
 
     # Renders the contentr toolbar in the page
     def contentr_toolbar(options = {})
-      if controller.contentr_authorized?
-        content_tag(:div, :class => 'contentr toolbar') do
-          s = ''.html_safe
-          s << 'NOT PUBLISHED ' if @contentr_page and not @contentr_page.published
-          s << 'HIDDEN ' if @contentr_page and @contentr_page.hidden
-          s << link_to('Pages', contentr_admin_pages_url, :rel => 'contentr-overlay')
-        end
+      if @contentr_page.present? and controller.contentr_authorized?
+        return render(
+          partial: 'contentr/toolbar',
+          locals: {
+            page: @contentr_page
+          }
+        )
       end
     end
 
     # Inserts Google Anylytics into the page
     def contentr_google_analytics
       if Contentr.google_analytics_account.present?
-        s = <<-HTML
-          <script type="text/javascript">
-
-           var _gaq = _gaq || [];
-           _gaq.push(['_setAccount', '##ID##']);
-           _gaq.push(['_trackPageview']);
-
-           (function() {
-             var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-             ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-             var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-           })();
-
-          </script>
-        HTML
-        s.gsub!('##ID##', Contentr.google_analytics_account)
-        s.html_safe
+        render(
+          partial: 'contentr/google_analytics',
+          locals: {
+            account_id: Contentr.google_analytics_account
+          }
+        )
       end
     end
 
     private
 
-    def contentr_paragraphs(area_name, current_page, site)
-      if current_page.present? and area_name.present?
-        area_name  = area_name.to_s
-        if site.present?
-          paragraphs = site.paragraphs_for_area(area_name)
-        else
-          paragraphs = current_page.paragraphs_for_area(area_name)
-        end
-        authorized = controller.contentr_authorized?
-
-        area_options = {}
-        area_classes = []
-        area_classes << 'contentr'
-        area_classes << 'area'
-        area_classes << 'editable' if authorized
-        area_options[:class] = area_classes.join(' ')
-        area_options['data-contentr-area'] = area_name
-        area_options['data-contentr-page'] = current_page.id
-
-        content_tag(:div, area_options) do
-          s = ''.html_safe
-
-          if authorized
-            s << content_tag(:div, :class => 'contentr toolbar') do
-              t = ''.html_safe
-              t << area_name
-              t << ' | '
-              t << link_to('new', contentr_admin_new_paragraph_path(:page_id => current_page, :area_name => area_name, :site => site.present?), :rel => 'contentr-overlay')
-              t
-            end
-          end
-
-          # Render paragraphs
-          s << paragraphs.collect do |p|
-            template_name = p.class.to_s.tableize.singularize
-
-            paragraph_options = {}
-            paragraph_classes = []
-            paragraph_classes << 'contentr'
-            paragraph_classes << 'paragraph'
-            paragraph_classes << 'editable' if authorized
-            paragraph_options[:class] = paragraph_classes.join(' ')
-            paragraph_options[:id] = "paragraph_#{p.id}"
-
-            content_tag(:div, paragraph_options) do
-              s = ''.html_safe
-
-              if authorized
-                s << content_tag(:div, :class => 'contentr toolbar') do
-                  t = ''.html_safe
-                  t << link_to(contentr_admin_edit_paragraph_path(:page_id => current_page, :id => p, :site => site.present?), :rel => 'contentr-overlay') do
-                    "edit"
-                  end
-                  t << ' | '
-                  t << link_to(contentr_admin_paragraph_path(:page_id => current_page, :id => p, :site => site.present?), :method => :delete, :confirm => 'Really delete?') do
-                    "delete"
-                  end
-                  t
-                end
-              end
-
-              s << render(:partial => "contentr/paragraphs/#{template_name}", :locals => {:paragraph => p})
-            end
-          end.join('').html_safe
-        end
-      end
+    def contentr_render_area(area_name, current_page, site)
+      area_name  = area_name.to_s
+      authorized = controller.contentr_authorized?
+      paragraphs = site.present? ? site.paragraphs_for_area(area_name) : current_page.paragraphs_for_area(area_name)
+
+      render(
+        partial: 'contentr/area',
+        locals: {
+          page: current_page,
+          site: site,
+          area_name: area_name,
+          authorized: authorized,
+          paragraphs: paragraphs
+        }
+      )
     end
-
   end
 end