Merge pull request #6055 from jhass/bootstrap3

Port to Bootstrap3 (rebased)

Changelog.md

@@ -22,6 +22,7 @@ Ruby 2.0 is no longer officially supported.
 ## Refactor
 * Improve bookmarklet [#5904](https://github.com/diaspora/diaspora/pull/5904)
 * Update listen configuration to listen on unix sockets by default [#5974](https://github.com/diaspora/diaspora/pull/5974)
+* Port to Bootstrap 3 [#6015](https://github.com/diaspora/diaspora/pull/6015)
 
 ## Bug fixes
 * Destroy Participation when removing interactions with a post [#5852](https://github.com/diaspora/diaspora/pull/5852)

Gemfile

@@ -53,7 +53,7 @@ gem "rack-cors", "0.4.0", require: "rack/cors"
 
 # CSS
 
-gem "bootstrap-sass", "2.3.2.2"
+gem "bootstrap-sass", "3.3.4.1"
 gem "compass-rails",  "2.0.4"
 gem "sass-rails",     "5.0.1"
 gem "autoprefixer-rails", "5.1.11"

Gemfile.lock

@@ -70,8 +70,9 @@ GEM
       jquery-rails
       railties
     bcrypt (3.1.10)
-    bootstrap-sass (2.3.2.2)
-      sass (~> 3.2)
+    bootstrap-sass (3.3.4.1)
+      autoprefixer-rails (>= 5.0.0.1)
+      sass (>= 3.2.19)
     builder (3.2.2)
     byebug (4.0.5)
       columnize (= 0.9.0)
@@ -629,7 +630,7 @@ GEM
     ruby-progressbar (1.7.5)
     rubyzip (1.1.7)
     safe_yaml (1.0.4)
-    sass (3.4.13)
+    sass (3.4.14)
     sass-rails (5.0.1)
       railties (>= 4.0.0, < 5.0)
       sass (~> 3.1)
@@ -735,7 +736,7 @@ DEPENDENCIES
   asset_sync (= 1.1.0)
   autoprefixer-rails (= 5.1.11)
   backbone-on-rails (= 1.1.2.1)
-  bootstrap-sass (= 2.3.2.2)
+  bootstrap-sass (= 3.3.4.1)
   capybara (= 2.4.4)
   carrierwave (= 0.10.0)
   compass-rails (= 2.0.4)

app/assets/javascripts/app/app.js

@@ -127,7 +127,7 @@ var app = {
     $("a.disabled").click(function(event) {
       event.preventDefault();
     });
-  },
+  }
 };
 
 $(function() {

app/assets/javascripts/app/helpers/handlebars-helpers.js

@@ -60,11 +60,8 @@ Handlebars.registerHelper('sharingMessage', function(person) {
 
 // allow hovercards for users that are not the current user.
 // returns the html class name used to trigger hovercards.
-Handlebars.registerHelper('hovercardable', function(person) {
-  if( app.currentUser.get('guid') !== person.guid ) {
-    return 'hovercardable';
-  }
-  return '';
+Handlebars.registerHelper("hovercardable", function(person) {
+  return app.currentUser.get("guid") === person.guid ? "" : "hovercardable";
 });
 
 Handlebars.registerHelper('personImage', function(person, size, imageClass) {
@@ -78,10 +75,11 @@ Handlebars.registerHelper('personImage', function(person, size, imageClass) {
   size = ( !_.isString(size) ) ? "small" : size;
   imageClass = ( !_.isString(imageClass) ) ? size : imageClass;
 
-  return _.template('<img src="<%= src %>" class="avatar <%= img_class %>" title="<%= title %>" alt="<%= title %>" />')({
-    'src': avatar[size],
-    'img_class': imageClass,
-    'title': _.escape(name)
+  return _.template("<img src=\"<%= src %>\" class=\"<%= imageClass %>\" " +
+      "title=\"<%= title %>\" alt=\"<%= title %>\" />")({
+    src: avatar[size],
+    imageClass: imageClass + " avatar img-responsive center-block",
+    title: _.escape(name)
   });
 });
 

app/assets/javascripts/app/helpers/modal_helper.js

@@ -0,0 +1,12 @@
+(function(){
+  app.helpers.showModal = function(id){
+    $(id).modal();
+    var modalBody = $(id).find(".modal-body");
+
+    var url = $(id).attr("href");
+
+    modalBody.load(url, function(){
+      $(id).find("#modalWaiter").remove();
+    });
+  };
+})();

app/assets/javascripts/app/pages/contacts.js

@@ -78,8 +78,8 @@ app.pages.Contacts = Backbone.View.extend({
   },
 
   setupAspectSorting: function() {
-    $("#aspect_nav .nav").sortable({
-      items: "li.aspect[data-aspect-id]",
+    $("#aspect_nav .list-group").sortable({
+      items: "a.aspect[data-aspect-id]",
       update: function() {
         $("#aspect_nav .ui-sortable").removeClass("synced");
         var data = JSON.stringify({ ordered_aspect_ids: $(this).sortable("toArray", { attribute: "data-aspect-id" }) });

app/assets/javascripts/app/router.js

@@ -48,11 +48,11 @@ app.Router = Backbone.Router.extend({
 
   contacts: function() {
     app.aspect = new app.models.Aspect(gon.preloads.aspect);
-    app.contacts = new app.collections.Contacts(app.parsePreload('contacts'));
+    app.contacts = new app.collections.Contacts(app.parsePreload("contacts"));
 
     var stream = new app.views.ContactStream({
       collection: app.contacts,
-      el: $('.stream.contacts #contact_stream'),
+      el: $(".stream.contacts #contact_stream"),
     });
 
     app.page = new app.pages.Contacts({stream: stream});
@@ -80,7 +80,7 @@ app.Router = Backbone.Router.extend({
     app.page.render();
 
     if( !$.contains(document, app.page.el) ) {
-      // view element isn't already attached to the DOM, insert it
+      // view element isn"t already attached to the DOM, insert it
       $("#container").empty().append(app.page.el);
     }
   },
@@ -96,7 +96,7 @@ app.Router = Backbone.Router.extend({
     var streamFacesView = new app.views.StreamFaces({collection : app.stream.items});
 
     $("#main_stream").html(app.page.render().el);
-    $('#selected_aspect_contacts .content').html(streamFacesView.render().el);
+    $("#selected_aspect_contacts .content").html(streamFacesView.render().el);
     this._hideInactiveStreamLists();
   },
 
@@ -104,7 +104,7 @@ app.Router = Backbone.Router.extend({
     this.renderPage(function() {
       return new app.pages.Profile({
         person_id: guid,
-        el: $('body > .container-fluid'),
+        el: $("body > #profile_container"),
         streamCollection: app.collections.Photos,
         streamView: app.views.Photos
       });
@@ -132,14 +132,14 @@ app.Router = Backbone.Router.extend({
   },
 
   aspects : function(){
-    app.aspects = new app.collections.Aspects(app.currentUser.get('aspects'));
+    app.aspects = new app.collections.Aspects(app.currentUser.get("aspects"));
     this.aspects_list =  new app.views.AspectsList({ collection: app.aspects });
     this.aspects_list.render();
     this.aspects_stream();
   },
 
   aspects_stream : function(){
-    var ids = app.aspects.selectedAspects('id');
+    var ids = app.aspects.selectedAspects("id");
     app.stream = new app.models.StreamAspects([], { aspects_ids: ids });
     app.stream.fetch();
 
@@ -150,7 +150,7 @@ app.Router = Backbone.Router.extend({
     var streamFacesView = new app.views.StreamFaces({collection : app.stream.items});
 
     $("#main_stream").html(app.page.render().el);
-    $('#selected_aspect_contacts .content').html(streamFacesView.render().el);
+    $("#selected_aspect_contacts .content").html(streamFacesView.render().el);
     this._hideInactiveStreamLists();
   },
 
@@ -165,13 +165,13 @@ app.Router = Backbone.Router.extend({
   bookmarklet: function() {
     var contents = (window.gon) ? gon.preloads.bookmarklet : {};
     app.bookmarklet = new app.views.Bookmarklet(
-      _.extend({}, {el: $('#bookmarklet')}, contents)
+      _.extend({}, {el: $("#bookmarklet")}, contents)
     ).render();
   },
 
   profile: function() {
     this.renderPage(function() { return new app.pages.Profile({
-      el: $('body > .container-fluid')
+      el: $("body > #profile_container")
     }); });
   }
 });

app/assets/javascripts/app/views/aspect_create_view.js

@@ -4,7 +4,7 @@ app.views.AspectCreate = app.views.Base.extend({
   templateName: "aspect_create_modal",
 
   events: {
-    "click .btn.creation": "createAspect"
+    "click .btn.btn-primary": "createAspect"
   },
 
   initialize: function(opts) {

app/assets/javascripts/app/views/aspect_membership_view.js

@@ -12,9 +12,10 @@
 app.views.AspectMembership = app.views.AspectsDropdown.extend({
 
   events: {
-    "click ul.aspect_membership.dropdown-menu > li.aspect_selector": "_clickHandler",
-    "keypress ul.aspect_membership.dropdown-menu > li.aspect_selector": "_clickHandler",
-    "click ul.aspect_membership.dropdown-menu > li.newItem": "showModal"
+    "click ul.aspect_membership.dropdown-menu > li.aspect_selector"
+        : "_clickHandler",
+    "keypress ul.aspect_membership.dropdown-menu > li.aspect_selector"
+        : "_clickHandler"
   },
 
   initialize: function() {
@@ -146,11 +147,7 @@ app.views.AspectMembership = app.views.AspectsDropdown.extend({
   // refresh the button text to reflect the current aspect selection status
   updateSummary: function(target) {
     this._toggleCheckbox(target);
-    this._updateButton('green');
-  },
-
-  showModal: function() {
-    this.$("#newAspectModal").modal("show");
+    this._updateButton("btn-success");
   }
 });
 // @license-end

app/assets/javascripts/app/views/aspects_dropdown_view.js

@@ -1,6 +1,6 @@
 // @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL-v3-or-Later
 
-/* 
+/*
  * Aspects view for the publishers aspect dropdown and the aspect membership dropdown.
  */
 app.views.AspectsDropdown = app.views.Base.extend({
@@ -31,7 +31,7 @@ app.views.AspectsDropdown = app.views.Base.extend({
     var button = this.$('.btn.dropdown-toggle'),
       selectedAspects = this.$(".dropdown-menu > li.selected").length,
       buttonText;
-    
+
     if (selectedAspects === 0) {
       button.removeClass(inAspectClass).addClass('btn-default');
       buttonText = Diaspora.I18n.t("aspect_dropdown.select_aspects");

app/assets/javascripts/app/views/bookmarklet_view.js

@@ -7,9 +7,9 @@ app.views.Bookmarklet = Backbone.View.extend({
     // init a standalone publisher
     app.publisher = new app.views.Publisher({standalone: true});
 
-    app.publisher.on('publisher:add', this._postSubmit, this);
-    app.publisher.on('publisher:sync', this._postSuccess, this);
-    app.publisher.on('publisher:error', this._postError, this);
+    app.publisher.on("publisher:add", this._postSubmit, this);
+    app.publisher.on("publisher:sync", this._postSuccess, this);
+    app.publisher.on("publisher:error", this._postError, this);
 
     this.param_contents = opts;
   },
@@ -35,18 +35,18 @@ app.views.Bookmarklet = Backbone.View.extend({
   },
 
   _postSubmit: function() {
-    this.$('h4').text(Diaspora.I18n.t('bookmarklet.post_submit'));
+    this.$("h4").text(Diaspora.I18n.t("bookmarklet.post_submit"));
   },
 
   _postSuccess: function() {
-    this.$('h4').text(Diaspora.I18n.t('bookmarklet.post_success'));
+    this.$("h4").text(Diaspora.I18n.t("bookmarklet.post_success"));
     app.publisher.close();
     this.$("#publisher").addClass("hidden");
     _.delay(window.close, 2000);
   },
 
   _postError: function() {
-    this.$('h4').text(Diaspora.I18n.t('bookmarklet.post_something'));
+    this.$("h4").text(Diaspora.I18n.t("bookmarklet.post_something"));
   }
 });
 // @license-end

app/assets/javascripts/app/views/location_view.js

@@ -10,18 +10,24 @@ app.views.Location = Backbone.View.extend({
   },
 
   render: function(){
-    $(this.el).append('<img alt="ajax-loader" src="'+ImagePaths.get('ajax-loader.gif')+'">');
+    $("<img/>", { alt: "ajax-loader", src:  ImagePaths.get("ajax-loader2.gif") }).appendTo(this.el);
   },
 
   getLocation: function(){
-    var element = this.el;
+    var element = this.el ;
 
     var locator = new OSM.Locator();
     locator.getAddress(function(address, latlng){
-      $(element).html('<input id="location_address" type="text" class="input-block-level" value="' + address + '"/>');
-      $('#location_coords').val(latlng.latitude + "," + latlng.longitude);
+      $(element).empty();
+      $("<input/>",
+        { id: "location_address",
+          value: address,
+          type: "text",
+          class: "input-block-level form-control"
+        }).appendTo($(element));
+
+      $("#location_coords").val(latlng.latitude + "," + latlng.longitude);
     });
-  },
+  }
 });
 // @license-end
-

app/assets/javascripts/app/views/notification_dropdown_view.js

@@ -86,7 +86,7 @@ app.views.NotificationDropdown = app.views.Base.extend({
   hideAjaxLoader: function(){
     var self = this;
     this.ajaxLoader.find('img').fadeTo(200, 0, function(){
-      self.ajaxLoader.hide(300, function(){
+      self.ajaxLoader.hide(200, function(){
         self.ajaxLoader.find('img').css('opacity', 1);
       });
     });

app/assets/javascripts/app/views/notifications_view.js

@@ -15,12 +15,12 @@ app.views.Notifications = Backbone.View.extend({
   toggleUnread: function(evt) {
     var note = $(evt.target).closest(".stream_element");
     var unread = note.hasClass("unread");
-
-    if (unread){ this.setRead(note.data("guid")); }
-    else { this.setUnread(note.data("guid")); }
+    var guid = note.data("guid");
+    if (unread){ this.setRead(guid); }
+    else { this.setUnread(guid); }
   },
 
-  getAllUnread: function(){ return $('.media.stream_element.unread'); },
+  getAllUnread: function(){ return $(".media.stream_element.unread"); },
 
   setRead: function(guid) { this.setUnreadStatus(guid, false); },
 
@@ -37,8 +37,9 @@ app.views.Notifications = Backbone.View.extend({
   },
 
   clickSuccess: function(data) {
-    var type = $('.stream_element[data-guid=' + data["guid"] + ']').data('type');
-    this.updateView(data["guid"], type, data["unread"]);
+    var guid = data.guid;
+    var type = $(".stream_element[data-guid=" + guid + "]").data("type");
+    this.updateView(guid, type, data.unread);
   },
 
   markAllRead: function(evt){
@@ -51,43 +52,43 @@ app.views.Notifications = Backbone.View.extend({
 
   updateView: function(guid, type, unread) {
     var change = unread ? 1 : -1,
-        all_notes = $('ul.nav > li:eq(0) .badge'),
-        type_notes = $('ul.nav > li[data-type=' + type + '] .badge'),
-        header_badge = $('#notification_badge .badge_count'),
-        note = $('.stream_element[data-guid=' + guid + ']'),
-        markAllReadLink = $('a#mark_all_read_link'),
-        translationKey = unread ? 'notifications.mark_read' : 'notifications.mark_unread';
+        allNotes = $(".list-group > a:eq(0) .badge"),
+        typeNotes = $(".list-group > a[data-type=" + type + "] .badge"),
+        headerBadge = $("#notification_badge .badge_count"),
+        note = $(".stream_element[data-guid=" + guid + "]"),
+        markAllReadLink = $("a#mark_all_read_link"),
+        translationKey = unread ? "notifications.mark_read" : "notifications.mark_unread";
 
     if(unread){ note.removeClass("read").addClass("unread"); }
     else { note.removeClass("unread").addClass("read"); }
 
     $(".unread-toggle .entypo", note)
-        .tooltip('destroy')
+        .tooltip("destroy")
         .removeAttr("data-original-title")
-        .attr('title',Diaspora.I18n.t(translationKey))
+        .attr("title",Diaspora.I18n.t(translationKey))
         .tooltip();
 
-    [all_notes, type_notes, header_badge].forEach(function(element){
+    [allNotes, typeNotes, headerBadge].forEach(function(element){
       element.text(function(i, text){
         return parseInt(text) + change });
     });
 
-    [all_notes, type_notes].forEach(function(badge) {
+    [allNotes, typeNotes].forEach(function(badge) {
       if(badge.text() > 0) {
-        badge.addClass('badge-important').removeClass('badge-default');
+        badge.removeClass("hidden");
       }
       else {
-        badge.removeClass('badge-important').addClass('badge-default');
+        badge.addClass("hidden");
       }
     });
 
-    if(header_badge.text() > 0){
-      header_badge.removeClass('hidden');
-      markAllReadLink.removeClass('disabled');
+    if(headerBadge.text() > 0){
+      headerBadge.removeClass("hidden");
+      markAllReadLink.removeClass("disabled");
     }
     else{
-      header_badge.addClass('hidden');
-      markAllReadLink.addClass('disabled');
+      headerBadge.addClass("hidden");
+      markAllReadLink.addClass("disabled");
     }
   }
 });

app/assets/javascripts/app/views/profile_header_view.js

@@ -3,6 +3,11 @@
 app.views.ProfileHeader = app.views.Base.extend({
   templateName: 'profile_header',
 
+  events: {
+    "click #mention_button": "showMentionModal",
+    "click #message_button": "showMessageModal"
+  },
+
   initialize: function(opts) {
     app.events.on('aspect:create', this.postRenderTemplate, this);
     this.photos = _.has(opts, 'photos') ? opts.photos : null;
@@ -40,6 +45,14 @@ app.views.ProfileHeader = app.views.Base.extend({
     return (this.contacts && this.contacts.count > 0);
   },
 
+  showMentionModal: function(){
+    app.helpers.showModal("#mentionModal");
+  },
+
+  showMessageModal: function(){
+    app.helpers.showModal("#conversationModal");
+  },
+
   postRenderTemplate: function() {
     var self = this;
     var dropdownEl = this.$('.aspect_membership_dropdown.placeholder');

app/assets/javascripts/app/views/publisher/getting_started_view.js

@@ -11,66 +11,66 @@
 app.views.PublisherGettingStarted = Backbone.View.extend({
 
   initialize: function(opts) {
-    this.el_first_msg = opts.el_first_msg;
-    this.el_visibility = opts.el_visibility;
-    this.el_stream = opts.el_stream;
+    this.firstMessage = opts.firstMessageEl;
+    this.visibility = opts.visibilityEl;
+    this.stream = opts.streamEl;
   },
 
   // initiate all the popover message boxes
   show: function() {
-    this._addPopover(this.el_first_msg, {
-      trigger: 'manual',
+    this._addPopover(this.firstMessage, {
+      trigger: "manual",
       offset: 30,
-      id: 'first_message_explain',
-      placement: 'right',
+      id: "first_message_explain",
+      placement: "right",
       html: true,
-      container: 'body'
+      container: "body"
     }, 600);
-    this._addPopover(this.el_visibility, {
-      trigger: 'manual',
+    this._addPopover(this.visibility, {
+      trigger: "manual",
       offset: 10,
-      id: 'message_visibility_explain',
-      placement: 'bottom',
+      id: "message_visibility_explain",
+      placement: "bottom",
       html: true,
-      container: 'body'
+      container: "body"
     }, 1000);
-    this._addPopover(this.el_stream, {
-      trigger: 'manual',
+    this._addPopover(this.stream, {
+      trigger: "manual",
       offset: -5,
-      id: 'stream_explain',
-      placement: 'left',
+      id: "stream_explain",
+      placement: "left",
       html: true,
-      container: 'body'
+      container: "body"
     }, 1400);
 
     // hide some popovers when a post is created
-    this.$('.button.creation').click(function() {
-      this.el_visibility.popover('hide');
-      this.el_first_msg.popover('hide');
+    this.$("#submit").click(function() {
+      this.visibility.popover("hide");
+      this.firstMessage.popover("hide");
     });
   },
 
   _addPopover: function(el, opts, timeout) {
     el.popover(opts);
     el.click(function() {
-      el.popover('hide');
+      el.popover("hide");
     });
 
     // show the popover after the given timeout
     setTimeout(function() {
-      el.popover('show');
+      el.popover("show");
 
       // disable 'getting started' when the last popover is closed
-      var popup = el.data('popover').$tip[0];
-      var close = $(popup).find('.close');
+      var popup = el.data("bs.popover").$tip[0];
+      var close = $(popup).find(".close");
 
       close.click(function() {
-        if( $('.popover').length === 1 ) {
-          $.get('/getting_started_completed', {success: function() {
+        if( $(".popover").length <= 1 ) {
+          $.get("/getting_started_completed", {success: function() {
             $("#welcome-to-diaspora, #welcome-to-diaspora~br").remove();
           }});
         }
-        el.popover('hide');
+        el.popover("hide");
         return false;
       });
     }, timeout);

app/assets/javascripts/app/views/publisher/uploader_view.js

@@ -6,7 +6,7 @@
 
 app.views.PublisherUploader = Backbone.View.extend({
 
-  allowedExtensions: ['jpg', 'jpeg', 'png', 'gif', 'tif', 'tiff'],
+  allowedExtensions: ["jpg", "jpeg", "png", "gif", "tif", "tiff"],
   sizeLimit: 4194304,  // bytes
 
   initialize: function(opts) {
@@ -18,14 +18,14 @@ app.views.PublisherUploader = Backbone.View.extend({
 
       //debug: true,
 
-      action: '/photos',
+      action: "/photos",
       params: { photo: { pending: true }},
       allowedExtensions: this.allowedExtensions,
       sizeLimit: this.sizeLimit,
       messages: {
-        typeError:  Diaspora.I18n.t('photo_uploader.invalid_ext'),
-        sizeError:  Diaspora.I18n.t('photo_uploader.size_error'),
-        emptyError: Diaspora.I18n.t('photo_uploader.empty')
+        typeError:  Diaspora.I18n.t("photo_uploader.invalid_ext"),
+        sizeError:  Diaspora.I18n.t("photo_uploader.size_error"),
+        emptyError: Diaspora.I18n.t("photo_uploader.empty")
       },
       onProgress: _.bind(this.progressHandler, this),
       onSubmit:   _.bind(this.submitHandler, this),
@@ -33,22 +33,22 @@ app.views.PublisherUploader = Backbone.View.extend({
 
     });
 
-    this.el_info = $('<div id="fileInfo" />');
-    this.publisher.el_wrapper.before(this.el_info);
+    this.info = $("<div id=\"fileInfo\" />");
+    this.publisher.wrapperEl.before(this.info);
 
-    this.publisher.el_photozone.on('click', '.x', _.bind(this._removePhoto, this));
+    this.publisher.photozoneEl.on("click", ".x", _.bind(this._removePhoto, this));
   },
 
   progressHandler: function(id, fileName, loaded, total) {
     var progress = Math.round(loaded / total * 100);
-    this.el_info.text(fileName + ' ' + progress + '%').fadeTo(200, 1);
-    this.publisher.el_photozone
-      .find('li.loading').first().find('.bar')
-      .width(progress + '%');
+    this.info.text(fileName + " " + progress + "%").fadeTo(200, 1);
+    this.publisher.photozoneEl
+      .find("li.loading").first().find(".bar")
+      .width(progress + "%");
   },
 
   submitHandler: function() {
-    this.$el.addClass('loading');
+    this.$el.addClass("loading");
     this._addPhotoPlaceholder();
   },
 
@@ -57,32 +57,32 @@ app.views.PublisherUploader = Backbone.View.extend({
     var publisher = this.publisher;
     publisher.setButtonsEnabled(false);
 
-    publisher.el_wrapper.addClass('with_attachments');
-    publisher.el_photozone.append(
-      '<li class="publisher_photo loading" style="position:relative;">' +
-      '  <div class="progress progress-striped active"><div class="bar"></div></div>' +
-      '  <img src="'+Handlebars.helpers.imageUrl('ajax-loader2.gif')+'" class="ajax-loader" alt="" />'+
-      '</li>'
+    publisher.wrapperEl.addClass("with_attachments");
+    publisher.photozoneEl.append(
+      "<li class=\"publisher_photo loading\" style=\"position:relative;\">" +
+      "  <div class=\"progress progress-striped active\"><div class=\"bar\"></div></div>" +
+      "  <img src=\"\"+Handlebars.helpers.imageUrl(\"ajax-loader2.gif\")+\"\" class=\"ajax-loader\" alt=\"\" />"+
+      "</li>"
     );
   },
 
   uploadCompleteHandler: function(_id, fileName, response) {
     if (response.success){
-      this.el_info.text(Diaspora.I18n.t('photo_uploader.completed', {file: fileName})).fadeTo(2000, 0);
+      this.info.text(Diaspora.I18n.t("photo_uploader.completed", {file: fileName})).fadeTo(2000, 0);
 
       var id  = response.data.photo.id,
           url = response.data.photo.unprocessed_image.url;
 
       this._addFinishedPhoto(id, url);
-      this.trigger('change');
+      this.trigger("change");
     } else {
       this._cancelPhotoUpload();
-      this.trigger('change');
-      this.el_info.text(Diaspora.I18n.t('photo_uploader.error', {file: fileName}));
-      this.publisher.el_wrapper.find('#photodropzone_container').first().after(
-        '<div id="upload_error">' + 
-        Diaspora.I18n.t('photo_uploader.error', {file: fileName}) + 
-        '</div>'
+      this.trigger("change");
+      this.info.text(Diaspora.I18n.t("photo_uploader.error", {file: fileName}));
+      this.publisher.wrapperEl.find("#photodropzone_container").first().after(
+        "<div id=\"upload_error\">" +
+        Diaspora.I18n.t("photo_uploader.error", {file: fileName}) +
+        "</div>"
       );
     }
   },
@@ -93,58 +93,58 @@ app.views.PublisherUploader = Backbone.View.extend({
     var publisher = this.publisher;
 
     // add form input element
-    publisher.$('.content_creation form').append(
-      '<input type="hidden", value="'+id+'" name="photos[]" />'
+    publisher.$(".content_creation form").append(
+      "<input type=\"hidden\", value=\""+id+"\" name=\"photos[]\" />"
     );
 
     // replace placeholder
-    var placeholder = publisher.el_photozone.find('li.loading').first();
+    var placeholder = publisher.photozoneEl.find("li.loading").first();
     placeholder
-      .removeClass('loading')
+      .removeClass("loading")
       .prepend(
-        '<div class="x"></div>'+
-        '<div class="circle"></div>'
+        "<div class=\"x\"></div>"+
+        "<div class=\"circle\"></div>"
        )
-      .find('img').attr({'src': url, 'data-id': id}).removeClass('ajax-loader');
+      .find("img").attr({"src": url, "data-id": id}).removeClass("ajax-loader");
     placeholder
-      .find('div.progress').remove();
+      .find("div.progress").remove();
 
     // no more placeholders? enable buttons
-    if( publisher.el_photozone.find('li.loading').length === 0 ) {
-      this.$el.removeClass('loading');
+    if( publisher.photozoneEl.find("li.loading").length === 0 ) {
+      this.$el.removeClass("loading");
       publisher.setButtonsEnabled(true);
     }
   },
 
   _cancelPhotoUpload: function() {
     var publisher = this.publisher;
-    var placeholder = publisher.el_photozone.find('li.loading').first();
+    var placeholder = publisher.photozoneEl.find("li.loading").first();
     placeholder
-      .removeClass('loading')
-      .find('img').remove();
+      .removeClass("loading")
+      .find("img").remove();
   },
 
   // remove an already uploaded photo
   _removePhoto: function(evt) {
     var self  = this;
-    var photo = $(evt.target).parents('.publisher_photo');
-    var img   = photo.find('img');
+    var photo = $(evt.target).parents(".publisher_photo");
+    var img   = photo.find("img");
 
-    photo.addClass('dim');
+    photo.addClass("dim");
     $.ajax({
-      url: '/photos/'+img.attr('data-id'),
-      dataType: 'json',
-      type: 'DELETE',
+      url: "/photos/"+img.attr("data-id"),
+      dataType: "json",
+      type: "DELETE",
       success: function() {
         $.when(photo.fadeOut(400)).then(function(){
           photo.remove();
 
-          if( self.publisher.$('.publisher_photo').length === 0 ) {
+          if( self.publisher.$(".publisher_photo").length === 0 ) {
             // no more photos left...
-            self.publisher.el_wrapper.removeClass('with_attachments');
+            self.publisher.wrapperEl.removeClass("with_attachments");
           }
 
-          self.trigger('change');
+          self.trigger("change");
         });
       }
     });

app/assets/javascripts/app/views/publisher_view.js

@@ -34,29 +34,29 @@ app.views.Publisher = Backbone.View.extend({
     this.disabled   = false;
 
     // init shortcut references to the various elements
-    this.el_input = this.$('#status_message_fake_text');
-    this.el_hiddenInput = this.$('#status_message_text');
-    this.el_wrapper = this.$('#publisher_textarea_wrapper');
-    this.el_submit = this.$('input[type=submit], button#submit');
-    this.el_preview = this.$('button.post_preview_button');
-    this.el_photozone = this.$('#photodropzone');
+    this.inputEl = this.$("#status_message_fake_text");
+    this.hiddenInputEl = this.$("#status_message_text");
+    this.wrapperEl = this.$("#publisher_textarea_wrapper");
+    this.submitEl = this.$("input[type=submit], button#submit");
+    this.previewEl = this.$("button.post_preview_button");
+    this.photozoneEl = this.$("#photodropzone");
 
     // init mentions plugin
-    Mentions.initialize(this.el_input);
+    Mentions.initialize(this.inputEl);
 
     // init autoresize plugin
-    this.el_input.autoResize({ 'extraSpace' : 10, 'maxHeight' : Infinity });
+    this.inputEl.autoResize({ "extraSpace" : 10, "maxHeight" : Infinity });
 
     // if there is data in the publisher we ask for a confirmation
     // before the user is able to leave the page
-    $(window).on('beforeunload', _.bind(this._beforeUnload, this));
+    $(window).on("beforeunload", _.bind(this._beforeUnload, this));
 
     // sync textarea content
-    if( this.el_hiddenInput.val() === "" ) {
-      this.el_hiddenInput.val( this.el_input.val() );
+    if( this.hiddenInputEl.val() === "" ) {
+      this.hiddenInputEl.val( this.inputEl.val() );
     }
-    if( this.el_input.val() === "" ) {
-      this.el_input.val( this.el_hiddenInput.val() );
+    if( this.inputEl.val() === "" ) {
+      this.inputEl.val( this.hiddenInputEl.val() );
     }
 
     // hide close and preview buttons and manage services link
@@ -64,37 +64,37 @@ app.views.Publisher = Backbone.View.extend({
     // (e.g. bookmarklet, mentions popup)
     if( this.standalone ) {
       this.$("#hide_publisher").hide();
-      this.el_preview.hide();
+      this.previewEl.hide();
       this.$(".question_mark").hide();
     }
 
     // this has to be here, otherwise for some reason the callback for the
     // textchange event won't be called in Backbone...
-    this.el_input.bind('textchange', $.noop);
+    this.inputEl.bind("textchange", $.noop);
 
     var _this = this;
-    $('body').on('click', function(event){
+    $("body").on("click", function(event){
       // if the click event is happened outside the publisher view, then try to close the box
-      if( _this.el && $(event.target).closest('#publisher').attr('id') !== _this.el.id){
+      if( _this.el && $(event.target).closest("#publisher").attr("id") !== _this.el.id){
           _this.tryClose();
         }
     });
 
     // close publisher on post
-    this.on('publisher:add', function() {
+    this.on("publisher:add", function() {
       this.close();
       this.showSpinner(true);
     });
 
     // open publisher on post error
-    this.on('publisher:error', function() {
+    this.on("publisher:error", function() {
       this.open();
       this.showSpinner(false);
     });
 
     // resetting the poll view
-    this.on('publisher:sync', function() {
-      this.view_poll_creator.render();
+    this.on("publisher:sync", function() {
+      this.viewPollCreator.render();
     });
 
     this.initSubviews();
@@ -103,56 +103,56 @@ app.views.Publisher = Backbone.View.extend({
   },
 
   initSubviews: function() {
-    var form = this.$('.content_creation form');
+    var form = this.$(".content_creation form");
 
     this.view_services = new app.views.PublisherServices({
-      el:    this.$('#publisher_service_icons'),
-      input: this.el_input,
+      el:    this.$("#publisher_service_icons"),
+      input: this.inputEl,
       form:  form
     });
 
-    this.view_aspect_selector = new app.views.PublisherAspectSelector({
-      el: this.$('.public_toggle .aspect_dropdown'),
+    this.viewAspectSelector = new app.views.PublisherAspectSelector({
+      el: this.$(".public_toggle .aspect_dropdown"),
       form: form
     });
 
-    this.view_getting_started = new app.views.PublisherGettingStarted({
-      el_first_msg:  this.el_input,
-      el_visibility: this.$('.public_toggle .aspect_dropdown > .dropdown-toggle'),
-      el_stream:     $('#gs-shim')
+    this.viewGettingStarted = new app.views.PublisherGettingStarted({
+      firstMessageEl:  this.inputEl,
+      visibilityEl: this.$(".public_toggle .aspect_dropdown > .dropdown-toggle"),
+      streamEl:     $("#gs-shim")
     });
 
-    this.view_uploader = new app.views.PublisherUploader({
-      el: this.$('#file-upload'),
+    this.viewUploader = new app.views.PublisherUploader({
+      el: this.$("#file-upload"),
       publisher: this
     });
-    this.view_uploader.on('change', this.checkSubmitAvailability, this);
+    this.viewUploader.on("change", this.checkSubmitAvailability, this);
 
-    this.view_poll_creator = new app.views.PublisherPollCreator({
-      el: this.$('#poll_creator_container')
+    this.viewPollCreator = new app.views.PublisherPollCreator({
+      el: this.$("#poll_creator_container")
     });
-    this.view_poll_creator.on('change', this.checkSubmitAvailability, this);
-    this.view_poll_creator.render();
+    this.viewPollCreator.on("change", this.checkSubmitAvailability, this);
+    this.viewPollCreator.render();
   },
 
   // set the selected aspects in the dropdown by their ids
   setSelectedAspects: function(ids) {
-    this.view_aspect_selector.updateAspectsSelector(ids);
+    this.viewAspectSelector.updateAspectsSelector(ids);
   },
 
   // inject content into the publisher textarea
   setText: function(txt) {
-    this.el_input.val(txt);
-    this.el_hiddenInput.val(txt);
+    this.inputEl.val(txt);
+    this.hiddenInputEl.val(txt);
     this.prefillText = txt;
 
-    this.el_input.trigger('input');
+    this.inputEl.trigger("input");
     this.handleTextchange();
   },
 
   // show the "getting started" popups around the publisher
   triggerGettingStarted: function() {
-    this.view_getting_started.show();
+    this.viewGettingStarted.show();
   },
 
   createStatusMessage : function(evt) {
@@ -164,7 +164,7 @@ app.views.Publisher = Backbone.View.extend({
     // Auto-adding a poll answer always leaves an empty box when the user starts
     // typing in the last box. We'll delete the last one to avoid submitting an
     // empty poll answer and failing validation.
-    this.view_poll_creator.removeLastAnswer();
+    this.viewPollCreator.removeLastAnswer();
 
     //add missing mentions at end of post:
     this.handleTextchange();
@@ -175,7 +175,9 @@ app.views.Publisher = Backbone.View.extend({
 
     // lulz this code should be killed.
     var statusMessage = new app.models.Post();
-    if( app.publisher ) app.publisher.trigger('publisher:add');
+    if( app.publisher ) {
+      app.publisher.trigger("publisher:add");
+    }
 
     statusMessage.save({
       "status_message" : {
@@ -192,9 +194,9 @@ app.views.Publisher = Backbone.View.extend({
       url : "/status_messages",
       success : function() {
         if( app.publisher ) {
-          app.publisher.$el.trigger('ajax:success');
-          app.publisher.trigger('publisher:sync');
-          self.view_poll_creator.trigger('publisher:sync');
+          app.publisher.$el.trigger("ajax:success");
+          app.publisher.trigger("publisher:sync");
+          self.viewPollCreator.trigger("publisher:sync");
         }
 
         if(app.stream && !self.standalone){
@@ -208,9 +210,11 @@ app.views.Publisher = Backbone.View.extend({
         if( self.standalone ) self.setEnabled(false);
       },
       error: function(model, resp) {
-        if( app.publisher ) app.publisher.trigger('publisher:error');
+        if( app.publisher ) {
+          app.publisher.trigger("publisher:error");
+        }
         self.setInputEnabled(true);
-        Diaspora.page.flashMessages.render({ 'success':false, 'notice':resp.responseText });
+        Diaspora.page.flashMessages.render({ "success":false, "notice":resp.responseText });
         self.setButtonsEnabled(true);
         self.setInputEnabled(true);
       }
@@ -219,9 +223,9 @@ app.views.Publisher = Backbone.View.extend({
 
   // creates the location
   showLocation: function(){
-    if($('#location').length === 0){
-      $('#location_container').append('<div id="location"></div>');
-      this.el_wrapper.addClass('with_location');
+    if($("#location").length === 0){
+      $("#location_container").append("<div id=\"location\"></div>");
+      this.wrapperEl.addClass("with_location");
       this.view_locator = new app.views.Location();
     }
   },
@@ -230,14 +234,14 @@ app.views.Publisher = Backbone.View.extend({
   destroyLocation: function(){
     if(this.view_locator){
       this.view_locator.remove();
-      this.el_wrapper.removeClass('with_location');
+      this.wrapperEl.removeClass("with_location");
       delete this.view_locator;
     }
   },
 
   togglePollCreator: function(){
-    this.view_poll_creator.$el.toggle();
-    this.el_input.focus();
+    this.viewPollCreator.$el.toggle();
+    this.inputEl.focus();
   },
 
   // avoid submitting form when pressing Enter key
@@ -255,8 +259,8 @@ app.views.Publisher = Backbone.View.extend({
     var serializedForm = $(evt.target).closest("form").serializeObject();
 
     var photos = [];
-    $('li.publisher_photo img').each(function(){
-      var file = $(this).attr('src').substring("/uploads/images/".length);
+    $("li.publisher_photo img").each(function(){
+      var file = $(this).attr("src").substring("/uploads/images/".length);
       photos.push(
         {
           "sizes":{
@@ -295,18 +299,20 @@ app.views.Publisher = Backbone.View.extend({
     var date = (new Date()).toISOString();
 
     var poll;
-    var poll_question = serializedForm["poll_question"];
-    var poll_answers_arry = _.flatten([serializedForm["poll_answers[]"]]);
-    var poll_answers = _.map(poll_answers_arry, function(answer){
-      if(answer) return { 'answer' : answer };
+    var pollQuestion = serializedForm.poll_question;
+    var pollAnswersArray = _.flatten([serializedForm["poll_answers[]"]]);
+    var pollAnswers = _.map(pollAnswersArray, function(answer){
+      if (answer) {
+        return { "answer" : answer };
+      }
     });
-    poll_answers = _.without(poll_answers, undefined);
+    pollAnswers = _.without(pollAnswers, undefined);
 
-    if(poll_question && poll_answers.length) {
+    if(pollQuestion && pollAnswers.length) {
       poll = {
-        'question': poll_question,
-        'poll_answers' : poll_answers,
-        'participation_count': '0'
+        "question": pollQuestion,
+        "poll_answers" : pollAnswers,
+        "participation_count": "0"
       };
     }
 
@@ -324,30 +330,30 @@ app.views.Publisher = Backbone.View.extend({
       "title" : serializedForm["status_message[text]"],
       "address" : $("#location_address").val(),
       "interactions" : {"likes":[],"reshares":[],"comments_count":0,"likes_count":0,"reshares_count":0},
-      'poll': poll,
+      "poll": poll
     };
     if(app.stream) {
       this.removePostPreview();
       app.stream.addNow(previewMessage);
       this.recentPreview=previewMessage;
-      this.modifyPostPreview($('.stream_element:first',$('.stream_container')));
+      this.modifyPostPreview($(".stream_element:first",$(".stream_container")));
     }
   },
 
   modifyPostPreview : function(post) {
-    post.addClass('post_preview');
-    $('.collapsible',post).removeClass('collapsed').addClass('opened');
-    $('a.delete.remove_post',post).hide();
-    $('a.like, a.focus_comment_textarea',post).removeAttr("href");
-    $('a.like',post).addClass("like_preview");
-    $('a.like',post).removeClass("like");
-    $('a.focus_comment_textarea',post).addClass("focus_comment_textarea_preview");
-    $('a.focus_comment_textarea',post).removeClass("focus_comment_textarea");
-    $('a',$('span.details.grey',post)).removeAttr("href");
+    post.addClass("post_preview");
+    $(".collapsible",post).removeClass("collapsed").addClass("opened");
+    $("a.delete.remove_post",post).hide();
+    $("a.like, a.focus_comment_textarea",post).removeAttr("href");
+    $("a.like",post).addClass("like_preview");
+    $("a.like",post).removeClass("like");
+    $("a.focus_comment_textarea",post).addClass("focus_comment_textarea_preview");
+    $("a.focus_comment_textarea",post).removeClass("focus_comment_textarea");
+    $("a",$("span.details.grey",post)).removeAttr("href");
   },
 
   removePostPreview : function() {
-    if(app.stream && this.recentPreview){
+    if(app.stream && this.recentPreview) {
         app.stream.items.remove(this.recentPreview);
         delete this.recentPreview;
     }
@@ -363,21 +369,21 @@ app.views.Publisher = Backbone.View.extend({
 
   clear : function() {
     // clear text(s)
-    this.el_input.val('');
-    this.el_hiddenInput.val('');
-    this.el_input.trigger('keyup')
-                 .trigger('keydown');
+    this.inputEl.val("");
+    this.hiddenInputEl.val("");
+    this.inputEl.trigger("keyup")
+                 .trigger("keydown");
 
     // remove mentions
-    this.el_input.mentionsInput('reset');
+    this.inputEl.mentionsInput("reset");
 
     // remove photos
-    this.el_photozone.find('li').remove();
+    this.photozoneEl.find("li").remove();
     this.$("input[name='photos[]']").remove();
-    this.el_wrapper.removeClass("with_attachments");
+    this.wrapperEl.removeClass("with_attachments");
 
     // empty upload-photo
-    this.$('#fileInfo').empty();
+    this.$("#fileInfo").empty();
 
     // close publishing area (CSS)
     this.close();
@@ -401,11 +407,11 @@ app.views.Publisher = Backbone.View.extend({
     this.destroyLocation();
 
     // clear poll form
-    this.view_poll_creator.clearInputs();
+    this.viewPollCreator.clearInputs();
 
     // force textchange plugin to update lastValue
-    this.el_input.data('lastValue', '');
-    this.el_hiddenInput.data('lastValue', '');
+    this.inputEl.data("lastValue", "");
+    this.hiddenInputEl.data("lastValue", "");
 
     return this;
   },
@@ -421,8 +427,8 @@ app.views.Publisher = Backbone.View.extend({
     if( this.disabled ) return;
 
     // visually 'open' the publisher
-    this.$el.removeClass('closed');
-    this.el_wrapper.addClass('active');
+    this.$el.removeClass("closed");
+    this.wrapperEl.addClass("active");
 
     // fetch contacts for mentioning
     Mentions.fetchContacts();
@@ -431,17 +437,19 @@ app.views.Publisher = Backbone.View.extend({
 
   close : function() {
     $(this.el).addClass("closed");
-    this.el_wrapper.removeClass("active");
-    this.el_input.css('height', '');
-    this.view_poll_creator.$el.hide();
+    this.wrapperEl.removeClass("active");
+    this.inputEl.css("height", "");
+    this.viewPollCreator.$el.hide();
     return this;
   },
 
   showSpinner: function(bool) {
-    if (bool)
-      this.$('#publisher_spinner').removeClass('hidden');
-    else
-      this.$('#publisher_spinner').addClass('hidden');
+    if (bool) {
+      this.$("#publisher_spinner").removeClass("hidden");
+    }
+    else {
+      this.$("#publisher_spinner").addClass("hidden");
+    }
   },
 
   checkSubmitAvailability: function() {
@@ -461,29 +469,29 @@ app.views.Publisher = Backbone.View.extend({
 
   setButtonsEnabled: function(bool) {
     if (bool) {
-      this.el_submit.removeProp('disabled');
-      this.el_preview.removeProp('disabled');
+      this.submitEl.removeProp("disabled");
+      this.previewEl.removeProp("disabled");
     } else {
-      this.el_submit.prop('disabled', true);
-      this.el_preview.prop('disabled', true);
+      this.submitEl.prop("disabled", true);
+      this.previewEl.prop("disabled", true);
     }
   },
 
   setInputEnabled: function(bool) {
     if (bool) {
-      this.el_input.removeProp('disabled');
-      this.el_hiddenInput.removeProp('disabled');
+      this.inputEl.removeProp("disabled");
+      this.hiddenInputEl.removeProp("disabled");
     } else {
-      this.el_input.prop('disabled', true);
-      this.el_hiddenInput.prop('disabled', true);
+      this.inputEl.prop("disabled", true);
+      this.hiddenInputEl.prop("disabled", true);
     }
   },
 
   // determine submit availability
   _submittable: function() {
-    var onlyWhitespaces = ($.trim(this.el_input.val()) === ''),
-        isPhotoAttached = (this.el_photozone.children().length > 0),
-        isValidPoll = this.view_poll_creator.validatePoll();
+    var onlyWhitespaces = ($.trim(this.inputEl.val()) === ""),
+        isPhotoAttached = (this.photozoneEl.children().length > 0),
+        isValidPoll = this.viewPollCreator.validatePoll();
 
     return (!onlyWhitespaces || isPhotoAttached) && isValidPoll && !this.disabled;
   },
@@ -492,13 +500,13 @@ app.views.Publisher = Backbone.View.extend({
     var self = this;
 
     this.checkSubmitAvailability();
-    this.el_input.mentionsInput("val", function(value){
-      self.el_hiddenInput.val(value);
+    this.inputEl.mentionsInput("val", function(value){
+      self.hiddenInputEl.val(value);
     });
   },
 
   _beforeUnload: function(e) {
-    if(this._submittable() && this.el_input.val() !== this.prefillText){
+    if(this._submittable() && this.inputEl.val() !== this.prefillText){
       var confirmationMessage = Diaspora.I18n.t("confirm_unload");
       (e || window.event).returnValue = confirmationMessage;       //Gecko + IE
       return confirmationMessage;                                  //Webkit, Safari, Chrome, etc.
@@ -516,9 +524,9 @@ $.fn.serializeObject = function()
       if (!o[this.name].push) {
         o[this.name] = [o[this.name]];
       }
-      o[this.name].push(this.value || '');
+      o[this.name].push(this.value || "");
     } else {
-      o[this.name] = this.value || '';
+      o[this.name] = this.value || "";
     }
   });
   return o;

app/assets/javascripts/app/views/tag_following_action_view.js

@@ -43,12 +43,12 @@ app.views.TagFollowingAction = app.views.Base.extend({
   },
 
   mouseIn : function(){
-    this.$("input").removeClass("green").addClass("btn-danger");
+    this.$("input").removeClass("btn-success").addClass("btn-danger");
     this.$("input").val( Diaspora.I18n.t('stream.tags.stop_following', {tag: this.model.attributes.name} ) );
   },
 
   mouseOut : function() {
-    this.$("input").removeClass("btn-danger").addClass("green");
+    this.$("input").removeClass("btn-danger").addClass("btn-success");
     this.$("input").val( Diaspora.I18n.t('stream.tags.following', {"tag" : this.model.attributes.name} ) );
   },
 

app/assets/javascripts/main.js

@@ -45,8 +45,5 @@
 //= require view
 //= require aspects-dropdown
 //= require mentions
-//= require bootstrap-tooltip
-//= require bootstrap-popover
-//= require bootstrap-dropdown
-//= require bootstrap-modal
+//= require bootstrap
 //= require osmlocator

app/assets/javascripts/view.js

@@ -37,6 +37,7 @@ var View = {
       Diaspora.page.directionDetector.updateBinds();
     });
 
+
     $("a.new_aspect").click(function(){
       $("input#aspect_name").focus();
     });

app/assets/javascripts/widgets/infinite-scroll.js

@@ -13,7 +13,7 @@
       debug: false,
       donetext: Diaspora.I18n.t("infinite_scroll.no_more"),
       loadingText: "",
-      loadingImg: ImagePaths.get("ajax-loader.gif"),
+      loadingImg: ImagePaths.get("ajax-loader2.gif"),
       navSelector: "#pagination",
       nextSelector: ".paginate",
       itemSelector: ".stream_element",

app/assets/stylesheets/admin.scss

@@ -40,12 +40,20 @@ body > div.container {
       height: 50px;
     }
 
-    .actions li {
-      margin-top: .3em;
-    }
+    .actions{ width: 150px; }
+
+    .pull-right .label{ display: inline-block; }
+  }
+}
+
+/** Invites panel **/
+.more_invites{
+  #add-invites-section{
+    line-height: 34px;
+    margin-bottom: 15px;
   }
 }
 
 /** reported posts **/
 
-@import 'report'
+@import 'report';

app/assets/stylesheets/application.scss

@@ -1,9 +1,10 @@
-@import 'bootstrap-fix';
+/* variables */
+@import 'bootstrap-variables'; // our overwrites
+@import 'bootstrap/variables'; // the original bootstrap ones
 
 @import 'perfect-scrollbar';
 
 @import "colors";
-@import 'sizes';
 @import 'mixins';
 
 /* core */
@@ -16,7 +17,6 @@
 @import 'sprites';
 @import 'hovercard';
 @import 'new_styles/base';
-@import 'new_styles/buttons';
 @import 'new_styles/interactions';
 @import 'new_styles/spinner';
 @import 'lightbox';
@@ -31,8 +31,8 @@
 @import 'new_styles/registration';
 @import 'new_styles/forms';
 
-/* navs */
-@import 'new_styles/navs';
+/* terms */
+@import 'terms';
 
 /* profile and settings pages */
 @import 'new_styles/settings';

app/assets/stylesheets/aspects.scss

@@ -6,17 +6,17 @@
       height: 14px;
       display: inline-block;
     }
-    .icon-ok, .icon-refresh {
+    .glyphicon-ok, .icon-refresh {
       padding-right: 5px;
       display: none;
     }
     &.selected {
-      .icon-ok { display: inline-block;}
+      .glyphicon-ok { display: inline-block;}
       .icon-refresh { display: none;}
     }
     &.loading {
       .icon-refresh { display: inline-block;}
-      .icon-ok { display: none;}
+      .glyphicon-ok { display: none;}
     }
     a {
       .text {

app/assets/stylesheets/autocomplete.scss

@@ -26,7 +26,7 @@
   }
   cursor: default;
   display: block;
-  height: 37px;
+  height: 45px;
   position: relative;
   // if width will be 100% horizontal scrollbar will apear
   // when scroll mode will be used
@@ -42,7 +42,7 @@
 }
 
 .ac_loading {
-  background: white image-url('ajax-loader.gif') right center no-repeat;
+  background: white image-url('ajax-loader2.gif') right center no-repeat;
 }
 
 .ac_odd {

app/assets/stylesheets/bootstrap-complete.scss

@@ -1,9 +1,4 @@
 // Calling this file bootstrap would cause an infinite recursion during asset compilation.
-@import 'bootstrap';
-@import 'bootstrap-responsive';
-
-
-// according to the docs, this is part of bootstrap 2.3.x
-.text-left { text-align: left; }
-.text-center { text-align: center; }
-.text-right { text-align: right; }
+@import "bootstrap-sprockets";
+@import "bootstrap-variables";
+@import "bootstrap";

app/assets/stylesheets/bootstrap-fix.scss

@@ -1,24 +0,0 @@
-// A temporary fix for broken classes in bootstrap 2.
-// Can probably be removed when migration of bootstrap 3 is done.
-
-input::placeholder,
-textarea::placeholder {
-  color: #999999;
-}
-input::input-placeholder,
-textarea::input-placeholder {
-  color: #999999;
-}
-
-
-// A temporary fix for mention modal #5329
-
-#new_status_message_pane .modal {
-  position: absolute;
-  max-height: none;
-}
-
-#new_status_message_pane .modal-body{
-  overflow-y: visible;
-  max-height: none;
-}

app/assets/stylesheets/bootstrap-headerfix.scss

@@ -26,8 +26,8 @@ header {
   }
   #global_search {
     form {
+      top: -3px;
       input {
-        height: 15px;
         color: black;
       }
     }

app/assets/stylesheets/bootstrap-variables.scss

@@ -0,0 +1,867 @@
+// Override Bootstrap variables here (defaults from bootstrap-sass v3.3.4):
+
+//
+// Variables
+// --------------------------------------------------
+
+
+//== Colors
+//
+//## Gray and brand colors for use across Bootstrap.
+
+// $gray-base:              #000
+// $gray-darker:            lighten($gray-base, 13.5%) // #222
+// $gray-dark:              lighten($gray-base, 20%)   // #333
+// $gray:                   lighten($gray-base, 33.5%) // #555
+// $gray-light:             lighten($gray-base, 46.7%) // #777
+// $gray-lighter:           lighten($gray-base, 93.5%) // #eee
+
+$brand-primary: darken(#0097FF,5%); // darker creation-blue
+$brand-success: #8EDE3D;
+// $brand-info:            #5bc0de
+// $brand-warning:         #f0ad4e
+// $brand-danger:          #d9534f
+
+
+//== Scaffolding
+//
+//## Settings for some of the most global styles.
+
+//** Background color for `<body>`.
+// $body-bg:               #fff
+//** Global text color on `<body>`.
+// $text-color:            $gray-dark
+
+//** Global textual link color.
+$link-color: rgb(42,156,235);
+//** Link hover color set via `darken()` function.
+// $link-hover-color:      darken($link-color, 15%)
+//** Link hover decoration.
+// $link-hover-decoration: underline
+
+
+//== Typography
+//
+//## Font, line-height, and color for body text, headings, and more.
+
+// $font-family-sans-serif:  "Helvetica Neue", Helvetica, Arial, sans-serif
+// $font-family-serif:       Georgia, "Times New Roman", Times, serif
+//** Default monospace fonts for `<code>`, `<kbd>`, and `<pre>`.
+// $font-family-monospace:   Menlo, Monaco, Consolas, "Courier New", monospace
+// $font-family-base:        $font-family-sans-serif
+
+$font-size-base: 13px;
+// $font-size-large:         ceil(($font-size-base * 1.25)) // ~18px
+$font-size-small: 11px;
+
+// $font-size-h1:            floor(($font-size-base * 2.6)) // ~36px
+// $font-size-h2:            floor(($font-size-base * 2.15)) // ~30px
+// $font-size-h3:            ceil(($font-size-base * 1.7)) // ~24px
+// $font-size-h4:            ceil(($font-size-base * 1.25)) // ~18px
+// $font-size-h5:            $font-size-base
+// $font-size-h6:            ceil(($font-size-base * 0.85)) // ~12px
+
+//** Unit-less `line-height` for use in components like buttons.
+// $line-height-base:        1.428571429 // 20/14
+//** Computed "line-height" (`font-size` * `line-height`) for use with `margin`, `padding`, etc.
+// $line-height-computed:    floor(($font-size-base * $line-height-base)) // ~20px
+
+//** By default, this inherits from the `<body>`.
+// $headings-font-family:    inherit
+// $headings-font-weight:    500
+// $headings-line-height:    1.1
+// $headings-color:          inherit
+
+
+//== Iconography
+//
+//## Specify custom location and filename of the included Glyphicons icon font. Useful for those including Bootstrap via Bower.
+
+//** Load fonts from this directory.
+
+// [converter] If $bootstrap-sass-asset-helper if used, provide path relative to the assets load path.
+// [converter] This is because some asset helpers, such as Sprockets, do not work with file-relative paths.
+// $icon-font-path: if($bootstrap-sass-asset-helper, "bootstrap/", "../fonts/bootstrap/")
+
+//** File name for all font files.
+// $icon-font-name:          "glyphicons-halflings-regular"
+//** Element ID within SVG icon file.
+// $icon-font-svg-id:        "glyphicons_halflingsregular"
+
+
+//== Components
+//
+//## Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start).
+
+// $padding-base-vertical:     6px
+// $padding-base-horizontal:   12px
+
+// $padding-large-vertical:    10px
+// $padding-large-horizontal:  16px
+
+// $padding-small-vertical:    5px
+// $padding-small-horizontal:  10px
+
+// $padding-xs-vertical:       1px
+// $padding-xs-horizontal:     5px
+
+// $line-height-large:         1.3333333 // extra decimals for Win 8.1 Chrome
+// $line-height-small:         1.5
+
+// $border-radius-base:        4px
+// $border-radius-large:       6px
+// $border-radius-small:       3px
+
+//** Global color for active items (e.g., navs or dropdowns).
+// $component-active-color:    #fff
+//** Global background color for active items (e.g., navs or dropdowns).
+// $component-active-bg:       $brand-primary
+
+//** Width of the `border` for generating carets that indicator dropdowns.
+// $caret-width-base:          4px
+//** Carets increase slightly in size for larger components.
+// $caret-width-large:         5px
+
+
+//== Tables
+//
+//## Customizes the `.table` component with basic values, each used across all table variations.
+
+//** Padding for `<th>`s and `<td>`s.
+// $table-cell-padding:            8px
+//** Padding for cells in `.table-condensed`.
+// $table-condensed-cell-padding:  5px
+
+//** Default background color used for all tables.
+// $table-bg:                      transparent
+//** Background color used for `.table-striped`.
+// $table-bg-accent:               #f9f9f9
+//** Background color used for `.table-hover`.
+// $table-bg-hover:                #f5f5f5
+// $table-bg-active:               $table-bg-hover
+
+//** Border color for table and cell borders.
+// $table-border-color:            #ddd
+
+
+//== Buttons
+//
+//## For each of Bootstrap's buttons, define text, background and border color.
+
+// $btn-font-weight:                normal
+
+// $btn-default-color:              #333
+// $btn-default-bg:                 #fff
+// $btn-default-border:             #ccc
+
+// $btn-primary-color:              #fff
+// $btn-primary-bg:                 $brand-primary
+// $btn-primary-border:             darken($btn-primary-bg, 5%)
+
+$btn-success-color: #333;
+// $btn-success-bg:                 $brand-success
+// $btn-success-border:             darken($btn-success-bg, 5%)
+
+// $btn-info-color:                 #fff
+// $btn-info-bg:                    $brand-info
+// $btn-info-border:                darken($btn-info-bg, 5%)
+
+// $btn-warning-color:              #fff
+// $btn-warning-bg:                 $brand-warning
+// $btn-warning-border:             darken($btn-warning-bg, 5%)
+
+// $btn-danger-color:               #fff
+// $btn-danger-bg:                  $brand-danger
+// $btn-danger-border:              darken($btn-danger-bg, 5%)
+
+// $btn-link-disabled-color:        $gray-light
+
+
+//== Forms
+//
+//##
+
+//** `<input>` background color
+// $input-bg:                       #fff
+//** `<input disabled>` background color
+// $input-bg-disabled:              $gray-lighter
+
+//** Text color for `<input>`s
+// $input-color:                    $gray
+//** `<input>` border color
+// $input-border:                   #ccc
+
+// TODO: Rename `$input-border-radius` to `$input-border-radius-base` in v4
+//** Default `.form-control` border radius
+// This has no effect on `<select>`s in some browsers, due to the limited stylability of `<select>`s in CSS.
+// $input-border-radius:            $border-radius-base
+//** Large `.form-control` border radius
+// $input-border-radius-large:      $border-radius-large
+//** Small `.form-control` border radius
+// $input-border-radius-small:      $border-radius-small
+
+//** Border color for inputs on focus
+// $input-border-focus:             #66afe9
+
+//** Placeholder text color
+// $input-color-placeholder:        #999
+
+//** Default `.form-control` height
+// $input-height-base:              ($line-height-computed + ($padding-base-vertical * 2) + 2)
+//** Large `.form-control` height
+// $input-height-large:             (ceil($font-size-large * $line-height-large) + ($padding-large-vertical * 2) + 2)
+//** Small `.form-control` height
+// $input-height-small:             (floor($font-size-small * $line-height-small) + ($padding-small-vertical * 2) + 2)
+
+//** `.form-group` margin
+// $form-group-margin-bottom:       15px
+
+// $legend-color:                   $gray-dark
+// $legend-border-color:            #e5e5e5
+
+//** Background color for textual input addons
+// $input-group-addon-bg:           $gray-lighter
+//** Border color for textual input addons
+// $input-group-addon-border-color: $input-border
+
+//** Disabled cursor for form controls and buttons.
+// $cursor-disabled:                not-allowed
+
+
+//== Dropdowns
+//
+//## Dropdown menu container and contents.
+
+//** Background for the dropdown menu.
+// $dropdown-bg:                    #fff
+//** Dropdown menu `border-color`.
+// $dropdown-border:                rgba(0,0,0,.15)
+//** Dropdown menu `border-color` **for IE8**.
+// $dropdown-fallback-border:       #ccc
+//** Divider color for between dropdown items.
+// $dropdown-divider-bg:            #e5e5e5
+
+//** Dropdown link text color.
+// $dropdown-link-color:            $gray-dark
+//** Hover color for dropdown links.
+// $dropdown-link-hover-color:      darken($gray-dark, 5%)
+//** Hover background for dropdown links.
+// $dropdown-link-hover-bg:         #f5f5f5
+
+//** Active dropdown menu item text color.
+// $dropdown-link-active-color:     $component-active-color
+//** Active dropdown menu item background color.
+// $dropdown-link-active-bg:        $component-active-bg
+
+//** Disabled dropdown menu item background color.
+// $dropdown-link-disabled-color:   $gray-light
+
+//** Text color for headers within dropdown menus.
+// $dropdown-header-color:          $gray-light
+
+//** Deprecated `$dropdown-caret-color` as of v3.1.0
+// $dropdown-caret-color:           #000
+
+
+//-- Z-index master list
+//
+// Warning: Avoid customizing these values. They're used for a bird's eye view
+// of components dependent on the z-axis and are designed to all work together.
+//
+// Note: These variables are not generated into the Customizer.
+
+// $zindex-navbar:            1000
+// $zindex-dropdown:          1000
+// $zindex-popover:           1060
+// $zindex-tooltip:           1070
+// $zindex-navbar-fixed:      1030
+// $zindex-modal-background:  1040
+// $zindex-modal:             1050
+
+
+//== Media queries breakpoints
+//
+//## Define the breakpoints at which your layout will change, adapting to different screen sizes.
+
+// Extra small screen / phone
+//** Deprecated `$screen-xs` as of v3.0.1
+// $screen-xs:                  480px
+//** Deprecated `$screen-xs-min` as of v3.2.0
+// $screen-xs-min:              $screen-xs
+//** Deprecated `$screen-phone` as of v3.0.1
+// $screen-phone:               $screen-xs-min
+
+// Small screen / tablet
+//** Deprecated `$screen-sm` as of v3.0.1
+// $screen-sm:                  768px
+// $screen-sm-min:              $screen-sm
+//** Deprecated `$screen-tablet` as of v3.0.1
+// $screen-tablet:              $screen-sm-min
+
+// Medium screen / desktop
+//** Deprecated `$screen-md` as of v3.0.1
+// $screen-md:                  992px
+// $screen-md-min:              $screen-md
+//** Deprecated `$screen-desktop` as of v3.0.1
+// $screen-desktop:             $screen-md-min
+
+// Large screen / wide desktop
+//** Deprecated `$screen-lg` as of v3.0.1
+// $screen-lg:                  1200px
+// $screen-lg-min:              $screen-lg
+//** Deprecated `$screen-lg-desktop` as of v3.0.1
+// $screen-lg-desktop:          $screen-lg-min
+
+// So media queries don't overlap when required, provide a maximum
+// $screen-xs-max:              ($screen-sm-min - 1)
+// $screen-sm-max:              ($screen-md-min - 1)
+// $screen-md-max:              ($screen-lg-min - 1)
+
+
+//== Grid system
+//
+//## Define your custom responsive grid.
+
+//** Number of columns in the grid.
+// $grid-columns:              12
+//** Padding between columns. Gets divided in half for the left and right.
+// $grid-gutter-width:         30px
+// Navbar collapse
+//** Point at which the navbar becomes uncollapsed.
+// $grid-float-breakpoint:     $screen-sm-min
+//** Point at which the navbar begins collapsing.
+// $grid-float-breakpoint-max: ($grid-float-breakpoint - 1)
+
+
+//== Container sizes
+//
+//## Define the maximum width of `.container` for different screen sizes.
+
+// Small screen / tablet
+// $container-tablet:             (720px + $grid-gutter-width)
+//** For `$screen-sm-min` and up.
+// $container-sm:                 $container-tablet
+
+// Medium screen / desktop
+// $container-desktop:            (940px + $grid-gutter-width)
+//** For `$screen-md-min` and up.
+// $container-md:                 $container-desktop
+
+// Large screen / wide desktop
+// $container-large-desktop:      (1140px + $grid-gutter-width)
+//** For `$screen-lg-min` and up.
+// $container-lg:                 $container-large-desktop
+
+
+//== Navbar
+//
+//##
+
+// Basics of a navbar
+// $navbar-height:                    50px
+// $navbar-margin-bottom:             $line-height-computed
+// $navbar-border-radius:             $border-radius-base
+// $navbar-padding-horizontal:        floor(($grid-gutter-width / 2))
+// $navbar-padding-vertical:          (($navbar-height - $line-height-computed) / 2)
+// $navbar-collapse-max-height:       340px
+
+// $navbar-default-color:             #777
+// $navbar-default-bg:                #f8f8f8
+// $navbar-default-border:            darken($navbar-default-bg, 6.5%)
+
+// Navbar links
+// $navbar-default-link-color:                #777
+// $navbar-default-link-hover-color:          #333
+// $navbar-default-link-hover-bg:             transparent
+// $navbar-default-link-active-color:         #555
+// $navbar-default-link-active-bg:            darken($navbar-default-bg, 6.5%)
+// $navbar-default-link-disabled-color:       #ccc
+// $navbar-default-link-disabled-bg:          transparent
+
+// Navbar brand label
+// $navbar-default-brand-color:               $navbar-default-link-color
+// $navbar-default-brand-hover-color:         darken($navbar-default-brand-color, 10%)
+// $navbar-default-brand-hover-bg:            transparent
+
+// Navbar toggle
+// $navbar-default-toggle-hover-bg:           #ddd
+// $navbar-default-toggle-icon-bar-bg:        #888
+// $navbar-default-toggle-border-color:       #ddd
+
+
+// Inverted navbar
+// Reset inverted navbar basics
+// $navbar-inverse-color:                      lighten($gray-light, 15%)
+// $navbar-inverse-bg:                         #222
+// $navbar-inverse-border:                     darken($navbar-inverse-bg, 10%)
+
+// Inverted navbar links
+// $navbar-inverse-link-color:                 lighten($gray-light, 15%)
+// $navbar-inverse-link-hover-color:           #fff
+// $navbar-inverse-link-hover-bg:              transparent
+// $navbar-inverse-link-active-color:          $navbar-inverse-link-hover-color
+// $navbar-inverse-link-active-bg:             darken($navbar-inverse-bg, 10%)
+// $navbar-inverse-link-disabled-color:        #444
+// $navbar-inverse-link-disabled-bg:           transparent
+
+// Inverted navbar brand label
+// $navbar-inverse-brand-color:                $navbar-inverse-link-color
+// $navbar-inverse-brand-hover-color:          #fff
+// $navbar-inverse-brand-hover-bg:             transparent
+
+// Inverted navbar toggle
+// $navbar-inverse-toggle-hover-bg:            #333
+// $navbar-inverse-toggle-icon-bar-bg:         #fff
+// $navbar-inverse-toggle-border-color:        #333
+
+
+//== Navs
+//
+//##
+
+//=== Shared nav styles
+// $nav-link-padding:                          10px 15px
+// $nav-link-hover-bg:                         $gray-lighter
+
+// $nav-disabled-link-color:                   $gray-light
+// $nav-disabled-link-hover-color:             $gray-light
+
+//== Tabs
+// $nav-tabs-border-color:                     #ddd
+
+// $nav-tabs-link-hover-border-color:          $gray-lighter
+
+// $nav-tabs-active-link-hover-bg:             $body-bg
+// $nav-tabs-active-link-hover-color:          $gray
+// $nav-tabs-active-link-hover-border-color:   #ddd
+
+// $nav-tabs-justified-link-border-color:            #ddd
+// $nav-tabs-justified-active-link-border-color:     $body-bg
+
+//== Pills
+// $nav-pills-border-radius:                   $border-radius-base
+// $nav-pills-active-link-hover-bg:            $component-active-bg
+// $nav-pills-active-link-hover-color:         $component-active-color
+
+
+//== Pagination
+//
+//##
+
+// $pagination-color:                     $link-color
+// $pagination-bg:                        #fff
+// $pagination-border:                    #ddd
+
+// $pagination-hover-color:               $link-hover-color
+// $pagination-hover-bg:                  $gray-lighter
+// $pagination-hover-border:              #ddd
+
+// $pagination-active-color:              #fff
+// $pagination-active-bg:                 $brand-primary
+// $pagination-active-border:             $brand-primary
+
+// $pagination-disabled-color:            $gray-light
+// $pagination-disabled-bg:               #fff
+// $pagination-disabled-border:           #ddd
+
+
+//== Pager
+//
+//##
+
+// $pager-bg:                             $pagination-bg
+// $pager-border:                         $pagination-border
+// $pager-border-radius:                  15px
+
+// $pager-hover-bg:                       $pagination-hover-bg
+
+// $pager-active-bg:                      $pagination-active-bg
+// $pager-active-color:                   $pagination-active-color
+
+// $pager-disabled-color:                 $pagination-disabled-color
+
+
+//== Jumbotron
+//
+//##
+
+// $jumbotron-padding:              30px
+// $jumbotron-color:                inherit
+// $jumbotron-bg:                   $gray-lighter
+// $jumbotron-heading-color:        inherit
+// $jumbotron-font-size:            ceil(($font-size-base * 1.5))
+
+
+//== Form states and alerts
+//
+//## Define colors for form feedback states and, by default, alerts.
+
+// $state-success-text:             #3c763d
+// $state-success-bg:               #dff0d8
+// $state-success-border:           darken(adjust-hue($state-success-bg, -10), 5%)
+
+// $state-info-text:                #31708f
+// $state-info-bg:                  #d9edf7
+// $state-info-border:              darken(adjust-hue($state-info-bg, -10), 7%)
+
+// $state-warning-text:             #8a6d3b
+// $state-warning-bg:               #fcf8e3
+// $state-warning-border:           darken(adjust-hue($state-warning-bg, -10), 5%)
+
+// $state-danger-text:              #a94442
+// $state-danger-bg:                #f2dede
+// $state-danger-border:            darken(adjust-hue($state-danger-bg, -10), 5%)
+
+
+//== Tooltips
+//
+//##
+
+//** Tooltip max width
+// $tooltip-max-width:           200px
+//** Tooltip text color
+// $tooltip-color:               #fff
+//** Tooltip background color
+// $tooltip-bg:                  #000
+// $tooltip-opacity:             .9
+
+//** Tooltip arrow width
+// $tooltip-arrow-width:         5px
+//** Tooltip arrow color
+// $tooltip-arrow-color:         $tooltip-bg
+
+
+//== Popovers
+//
+//##
+
+//** Popover body background color
+// $popover-bg:                          #fff
+//** Popover maximum width
+// $popover-max-width:                   276px
+//** Popover border color
+// $popover-border-color:                rgba(0,0,0,.2)
+//** Popover fallback border color
+// $popover-fallback-border-color:       #ccc
+
+//** Popover title background color
+// $popover-title-bg:                    darken($popover-bg, 3%)
+
+//** Popover arrow width
+// $popover-arrow-width:                 10px
+//** Popover arrow color
+// $popover-arrow-color:                 $popover-bg
+
+//** Popover outer arrow width
+// $popover-arrow-outer-width:           ($popover-arrow-width + 1)
+//** Popover outer arrow color
+// $popover-arrow-outer-color:           fade_in($popover-border-color, 0.05)
+//** Popover outer arrow fallback color
+// $popover-arrow-outer-fallback-color:  darken($popover-fallback-border-color, 20%)
+
+
+//== Labels
+//
+//##
+
+//** Default label background color
+// $label-default-bg:            $gray-light
+//** Primary label background color
+// $label-primary-bg:            $brand-primary
+//** Success label background color
+// $label-success-bg:            $brand-success
+//** Info label background color
+// $label-info-bg:               $brand-info
+//** Warning label background color
+// $label-warning-bg:            $brand-warning
+//** Danger label background color
+// $label-danger-bg:             $brand-danger
+
+//** Default label text color
+// $label-color:                 #fff
+//** Default text color of a linked label
+// $label-link-hover-color:      #fff
+
+
+//== Modals
+//
+//##
+
+//** Padding applied to the modal body
+// $modal-inner-padding:         15px
+
+//** Padding applied to the modal title
+// $modal-title-padding:         15px
+//** Modal title line-height
+// $modal-title-line-height:     $line-height-base
+
+//** Background color of modal content area
+// $modal-content-bg:                             #fff
+//** Modal content border color
+// $modal-content-border-color:                   rgba(0,0,0,.2)
+//** Modal content border color **for IE8**
+// $modal-content-fallback-border-color:          #999
+
+//** Modal backdrop background color
+// $modal-backdrop-bg:           #000
+//** Modal backdrop opacity
+// $modal-backdrop-opacity:      .5
+//** Modal header border color
+// $modal-header-border-color:   #e5e5e5
+//** Modal footer border color
+// $modal-footer-border-color:   $modal-header-border-color
+
+// $modal-lg:                    900px
+// $modal-md:                    600px
+// $modal-sm:                    300px
+
+
+//== Alerts
+//
+//## Define alert colors, border radius, and padding.
+
+// $alert-padding:               15px
+// $alert-border-radius:         $border-radius-base
+// $alert-link-font-weight:      bold
+
+// $alert-success-bg:            $state-success-bg
+// $alert-success-text:          $state-success-text
+// $alert-success-border:        $state-success-border
+
+// $alert-info-bg:               $state-info-bg
+// $alert-info-text:             $state-info-text
+// $alert-info-border:           $state-info-border
+
+// $alert-warning-bg:            $state-warning-bg
+// $alert-warning-text:          $state-warning-text
+// $alert-warning-border:        $state-warning-border
+
+// $alert-danger-bg:             $state-danger-bg
+// $alert-danger-text:           $state-danger-text
+// $alert-danger-border:         $state-danger-border
+
+
+//== Progress bars
+//
+//##
+
+//** Background color of the whole progress component
+// $progress-bg:                 #f5f5f5
+//** Progress bar text color
+// $progress-bar-color:          #fff
+//** Variable for setting rounded corners on progress bar.
+// $progress-border-radius:      $border-radius-base
+
+//** Default progress bar color
+// $progress-bar-bg:             $brand-primary
+//** Success progress bar color
+// $progress-bar-success-bg:     $brand-success
+//** Warning progress bar color
+// $progress-bar-warning-bg:     $brand-warning
+//** Danger progress bar color
+// $progress-bar-danger-bg:      $brand-danger
+//** Info progress bar color
+// $progress-bar-info-bg:        $brand-info
+
+
+//== List group
+//
+//##
+
+//** Background color on `.list-group-item`
+// $list-group-bg:                 #fff
+//** `.list-group-item` border color
+// $list-group-border:             #ddd
+//** List group border radius
+// $list-group-border-radius:      $border-radius-base
+
+//** Background color of single list items on hover
+// $list-group-hover-bg:           #f5f5f5
+//** Text color of active list items
+// $list-group-active-color:       $component-active-color
+//** Background color of active list items
+// $list-group-active-bg:          $component-active-bg
+//** Border color of active list elements
+// $list-group-active-border:      $list-group-active-bg
+//** Text color for content within active list items
+// $list-group-active-text-color:  lighten($list-group-active-bg, 40%)
+
+//** Text color of disabled list items
+// $list-group-disabled-color:      $gray-light
+//** Background color of disabled list items
+// $list-group-disabled-bg:         $gray-lighter
+//** Text color for content within disabled list items
+// $list-group-disabled-text-color: $list-group-disabled-color
+
+// $list-group-link-color:         #555
+// $list-group-link-hover-color:   $list-group-link-color
+// $list-group-link-heading-color: #333
+
+
+//== Panels
+//
+//##
+
+// $panel-bg:                    #fff
+// $panel-body-padding:          15px
+// $panel-heading-padding:       10px 15px
+// $panel-footer-padding:        $panel-heading-padding
+// $panel-border-radius:         $border-radius-base
+
+//** Border color for elements within panels
+// $panel-inner-border:          #ddd
+// $panel-footer-bg:             #f5f5f5
+
+// $panel-default-text:          $gray-dark
+// $panel-default-border:        #ddd
+// $panel-default-heading-bg:    #f5f5f5
+
+// $panel-primary-text:          #fff
+// $panel-primary-border:        $brand-primary
+// $panel-primary-heading-bg:    $brand-primary
+
+// $panel-success-text:          $state-success-text
+// $panel-success-border:        $state-success-border
+// $panel-success-heading-bg:    $state-success-bg
+
+// $panel-info-text:             $state-info-text
+// $panel-info-border:           $state-info-border
+// $panel-info-heading-bg:       $state-info-bg
+
+// $panel-warning-text:          $state-warning-text
+// $panel-warning-border:        $state-warning-border
+// $panel-warning-heading-bg:    $state-warning-bg
+
+// $panel-danger-text:           $state-danger-text
+// $panel-danger-border:         $state-danger-border
+// $panel-danger-heading-bg:     $state-danger-bg
+
+
+//== Thumbnails
+//
+//##
+
+//** Padding around the thumbnail image
+// $thumbnail-padding:           4px
+//** Thumbnail background color
+// $thumbnail-bg:                $body-bg
+//** Thumbnail border color
+// $thumbnail-border:            #ddd
+//** Thumbnail border radius
+// $thumbnail-border-radius:     $border-radius-base
+
+//** Custom text color for thumbnail captions
+// $thumbnail-caption-color:     $text-color
+//** Padding around the thumbnail caption
+// $thumbnail-caption-padding:   9px
+
+
+//== Wells
+//
+//##
+
+// $well-bg:                     #f5f5f5
+// $well-border:                 darken($well-bg, 7%)
+
+
+//== Badges
+//
+//##
+
+// $badge-color:                 #fff
+//** Linked badge text color on hover
+// $badge-link-hover-color:      #fff
+// $badge-bg:                    $gray-light
+
+//** Badge text color in active nav link
+// $badge-active-color:          $link-color
+//** Badge background color in active nav link
+// $badge-active-bg:             #fff
+
+// $badge-font-weight:           bold
+// $badge-line-height:           1
+// $badge-border-radius:         10px
+
+
+//== Breadcrumbs
+//
+//##
+
+// $breadcrumb-padding-vertical:   8px
+// $breadcrumb-padding-horizontal: 15px
+//** Breadcrumb background color
+// $breadcrumb-bg:                 #f5f5f5
+//** Breadcrumb text color
+// $breadcrumb-color:              #ccc
+//** Text color of current page in the breadcrumb
+// $breadcrumb-active-color:       $gray-light
+//** Textual separator for between breadcrumb elements
+// $breadcrumb-separator:          "/"
+
+
+//== Carousel
+//
+//##
+
+// $carousel-text-shadow:                        0 1px 2px rgba(0,0,0,.6)
+
+// $carousel-control-color:                      #fff
+// $carousel-control-width:                      15%
+// $carousel-control-opacity:                    .5
+// $carousel-control-font-size:                  20px
+
+// $carousel-indicator-active-bg:                #fff
+// $carousel-indicator-border-color:             #fff
+
+// $carousel-caption-color:                      #fff
+
+
+//== Close
+//
+//##
+
+// $close-font-weight:           bold
+// $close-color:                 #000
+// $close-text-shadow:           0 1px 0 #fff
+
+
+//== Code
+//
+//##
+
+// $code-color:                  #c7254e
+// $code-bg:                     #f9f2f4
+
+// $kbd-color:                   #fff
+// $kbd-bg:                      #333
+
+// $pre-bg:                      #f5f5f5
+// $pre-color:                   $gray-dark
+// $pre-border-color:            #ccc
+// $pre-scrollable-max-height:   340px
+
+
+//== Type
+//
+//##
+
+//** Horizontal offset for forms and lists.
+// $component-offset-horizontal: 180px
+//** Text muted color
+// $text-muted:                  $gray-light
+//** Abbreviations and acronyms border color
+// $abbr-border-color:           $gray-light
+//** Headings small color
+// $headings-small-color:        $gray-light
+//** Blockquote small color
+// $blockquote-small-color:      $gray-light
+//** Blockquote font size
+$blockquote-font-size: $font-size-base;
+//** Blockquote border color
+// $blockquote-border-color:     $gray-lighter
+//** Page header border color
+// $page-header-border-color:    $gray-lighter
+//** Width of horizontal description list titles
+// $dl-horizontal-offset:        $component-offset-horizontal
+//** Horizontal line color.
+// $hr-border:                   $gray-lighter

app/assets/stylesheets/chat.scss

@@ -1,7 +1,7 @@
-body > .container-fluid.chat-roster-shown {
+body > .container.chat-roster-shown {
   padding-right: 224px;
   #back-to-top { right: 244px; }
 }
-body > .container-fluid.chat-roster-hidden {
+body > .container.chat-roster-hidden {
   #back-to-top { right: 54px; }
 }

app/assets/stylesheets/colors.scss

@@ -10,7 +10,6 @@ $light-grey: #DDDDDD;
 $border-grey: #DDDDDD;
 $border-dark-grey: #999999;
 
-$link-blue : rgb(42,156,235);
 $link-grey: #777777;
 $link-disabled-grey: #999999;
 
@@ -25,7 +24,6 @@ $light-green: lighten($green,20%);
 $red: #A80000;
 $blue: #3F8FBA;
 $dark-blue: darken(#0984C8,10%);
-$creation-blue: #0097FF;
 
 /* colors : http://www.colourlovers.com/palette/2134203/Awezome_in_argyle */
 $cyan : rgb(8,204,249);

app/assets/stylesheets/comments.scss

@@ -10,9 +10,8 @@
   }
   .comments > .comment, .comment.new_comment_form_wrapper {
     .avatar {
-      margin-top: 5px;
-      height: 30px;
-      width: 30px;
+      height: 35px;
+      width: 35px;
     }
     margin: 0;
     border-top: 1px dotted $border-grey;
@@ -20,8 +19,8 @@
 
     .info {
       margin-top: 5px;
-      font-size: 11px;
-      line-height: 11px;
+      font-size: $font-size-small;
+      line-height: $font-size-small;
     }
 
     >.highlighted {
@@ -30,6 +29,7 @@
     }
   }
   .submit_button {
+    margin-top: 10px;
     input {
       float: right;
     }
@@ -39,10 +39,12 @@
   }
   .comment_box {
     width: 95%;
-    height: 30px;
+    height: 35px;
   }
   textarea.comment_box:focus, textarea.comment_box:valid, textarea.comment_box:active {
     border-color: $border-dark-grey;
     & + .submit_button { display: block; }
+    min-height: 35px;
+    box-shadow: none;
   }
 }

app/assets/stylesheets/contacts.scss

@@ -47,8 +47,8 @@
         &:hover { color: $black; }
       }
       &.in_aspect {
-        border-left: 3px solid $green;
-        background-color: lighten($green,35%);
+        border-left: 3px solid $brand-success;
+        background-color: lighten($brand-success,35%);
       }
       &:not(.in_aspect) { border-left: 3px solid $white; }
     }

app/assets/stylesheets/conversations.scss

@@ -18,8 +18,16 @@
       margin: 0 0 1em 0;
       &:last-child { margin-bottom: 0; }
     }
-    &.new_message { border-bottom: none; }
-    .timestamp { font-size: 11px; }
+    &.new_message {
+      border-bottom: none;
+
+      #new_message #message_text{
+        width: 100%;
+        max-width: 100%;
+        min-width: 100%;
+      }
+    }
+    .timestamp { font-size: $font-size-small; }
   }
 
   .stream_element.conversation {
@@ -107,7 +115,7 @@
     .img { line-height: 15px; }
 
     .subject {
-      font-size: $font-size-text;
+      font-size: $font-size-base;
       > * {
         overflow: hidden;
         white-space: nowrap;
@@ -136,11 +144,12 @@
 
     .hide_conversation, .delete_conversation {
       display: block;
-      margin-top: 25px;
+      margin-top: 15px;
       margin-left: 10px;
     }
 
     .avatar {
+      display: inline;
       height: 30px;
       width: 30px;
     }
@@ -191,6 +200,10 @@
         background: $background-grey;
       }
     }
+    div.pagination{
+      text-align: center;
+      width: 100%;
+    }
   }
 }
 
@@ -202,14 +215,21 @@
 
 #conversation_new {
   label { font-weight: bold; }
+
+  #new_conversation #conversation_text{
+    width: 100%;
+    max-width: 100%;
+    min-width: 100%;
+  }
 }
 
 #no_conversations,
 #no_conversation_text {
+  color: $gray-light;
+  font-size: $font-size-h4;
   font-weight: bold;
-  color: #ccc;
+  padding: 50px 0;
   text-align: center;
-  margin-top: 100px;
 }
 
 #no_conversation_text {
@@ -226,3 +246,4 @@
   input#contact_ids { box-shadow: none; }
   label { font-weight: bold; }
 }
+

app/assets/stylesheets/entypo.scss

@@ -25,7 +25,7 @@
   }
 
   &.small {
-    font-size: 1.2em;
+    font-size: 1em;
   }
 
   /* main icon map */

app/assets/stylesheets/facebox.scss

@@ -26,7 +26,7 @@
   }
 
   .tiny_text {
-    font-size: 11px;
+    font-size: $font-size-small;
     font-weight: normal;
   }
 }

app/assets/stylesheets/getting-started.scss

@@ -1,7 +1,7 @@
 #hello-there {
   .avatar {
-    width: 50px;
-    height: 50px;
+    width: 200px;
+    height: 200px;
   }
 
   .well .media{
@@ -10,10 +10,6 @@
 
   .awesome {
     text-align: center;
-
-    .btn.creation {
-      text-shadow: none;
-    }
   }
 
   .hero-unit {
@@ -25,15 +21,12 @@
     margin-top: 80px;
   }
 
-  p, form {
-    margin-left: 30px;
-  }
-
   ul.as-selections {
     width: 100%;
-
     li.as-original {
+      width: 100%;
       input {
+        height: 32px;
         margin-bottom: 15px;
       }
     }

app/assets/stylesheets/header.scss

@@ -9,7 +9,7 @@ body > header {
   z-index: 1001;
   padding: 6px 0;
   color: #CCC;
-  height: 26px;
+  height: 39px;
   position: fixed;
   width: 100%;
   min-width: 620px;
@@ -149,7 +149,7 @@ body > header {
         }
 
         a {
-          font-size: 11px;
+          font-size: $font-size-small;
           font-weight: bold;
         }
       }
@@ -176,6 +176,10 @@ body > header {
             height: 35px;
           }
 
+          .media-body {
+            word-break: break-all;
+          }
+
           .pull-right > .aspect_membership_dropdown { display: none; }
           .unread-toggle { margin: 10px; }
 

app/assets/stylesheets/hovercard.scss

@@ -8,7 +8,6 @@
   max-width: 400px;
 
   background-color: $background-white;
-  height: 70px;
   border: 1px solid $border-dark-grey;
   font-size: small;
 

app/assets/stylesheets/invitations.scss

@@ -8,13 +8,12 @@
 #invitationsModal {
   .modal-header, .modal-body {
     color: $text;
-    font-size: $font-size-text;
+    font-size: $font-size-base;
     text-align: initial;
   }
   #paste_link { font-weight: 700; }
   #invite_code { margin-top: 10px; }
   #codes_left { color: $text-grey; }
-  .control-label { width: 120px; }
   .controls { margin-left: 140px; }
   #email_invitation {
     padding-top: 10px;

app/assets/stylesheets/leftnavbar.scss

@@ -32,7 +32,7 @@
     border-bottom: 1px dashed $border-grey;
     margin-bottom: 10px;
     min-height: 50px;
-    padding-bottom: 10px;
+    padding-bottom: 20px;
     padding-left: 4px;
 
     .avatar {
@@ -90,9 +90,10 @@
     }
 
     /* ---- override app/stylesheets/vendor/autoSuggest.css ---- */
-    ul.as-selections { padding: 1px 5px 4px 5px; }
+    ul.as-selections { padding: 4px 5px; }
+    .as-original{ width: 100%; }
     .tag_input {
-      line-height: $font-size-text;
+      line-height: $font-size-base;
       vertical-align: top;
       width: 100%;
     }

app/assets/stylesheets/mentions.scss

@@ -69,12 +69,12 @@
     bottom: 0px;
     left: 0px;
     top: 0px;
-    padding: 4px 6px;
+    padding: $padding-base-vertical $padding-base-horizontal;
   }
 
   .mentions {
     color: white;
-    font-size: 14px;
+    font-size: $font-size-base;
     font-family: Arial, Helvetica, sans-serif;
     line-height: normal;
     overflow: hidden;

app/assets/stylesheets/mobile/header.scss

@@ -15,28 +15,23 @@ header {
 
   #header_title {
     display: inline-block;
-    width: 30px;
-    height: 30px;
+    width: 45px;
+    height: 100%;
     padding: 7px;
   }
 
   #nav_badges {
     float: right;
-    margin: 7px 0px;
+    margin: 7px 0;
     display: inline-block;
 
     .badge {
       display: inline;
-      margin: 0px 4px;
+      margin: 0 4px;
       padding: 10px 6px;
       font-weight: bold;
       font-size: smaller;
       background-color: transparent;
-
-      img {
-        height: 30px;
-        width: 30px;
-      }
     }
 
     .badge_count {
@@ -53,6 +48,12 @@ header {
       height: 18px;
     }
   }
+  #nav_badges, #header_title{
+    img {
+      height: 30px;
+      width: 30px;
+    }
+  }
 }
 
 #drawer {
@@ -62,7 +63,7 @@ header {
   width: 100%;
   left: 100%;
   background-color: #444;
-  box-shadow: -2px 0px 2px 1px #333;
+  box-shadow: none;
 
   header {
     position: static;
@@ -74,22 +75,23 @@ header {
 
       form {
         position: absolute;
-        left: 5px;
+        left: 0;
         right: 22%;
+        padding: 0 15px;
+        width: 450px;
 
         input {
           box-shadow: 0 1px 1px #444;
           border-radius: 15px;
           width: 100%;
-          margin-top: 7px;
+          margin-top: 5px;
           background-color: #444;
           border: 1px solid #222;
           font-size: 13px;
-          padding: 4px;
+          padding: 6px;
           color: black;
 
           &.active {
-            background-color: $highlight-white;
             background-color: rgba(160,160,160,0.6);
           }
 
@@ -158,11 +160,12 @@ header {
 
   ul {
     list-style: none;
-    margin: 0px;
+    margin: 0;
+    padding: 0;
   }
 }
 
 /* This class is added when the user open the drawer */
 #app.draw > * {
-          transform: translateX(-80%);
+  transform: translateX(-80%);
 }

app/assets/stylesheets/mobile/mobile.scss

@@ -1,9 +1,10 @@
-@import "bootstrap";
-@import "bootstrap-responsive";
+@import "bootstrap-complete";
 @import "colors";
 @import "_mixins";
 @import "vendor/autoSuggest";
 @import "_flash_messages";
+@import 'entypo-fonts';
+@import 'entypo';
 
 @import "header";
 @import "mobile/tags";
@@ -21,28 +22,16 @@ code {
 body {
   background: {
     image: image-url("mobile/hatched-light.jpg");
-    position: fixed;
     /* scale background image down for iOS retina display */
     size: 200px;
   }
-  padding: 0px;
+  padding: 0;
 }
 
-h3 {
-  margin-top: 0px;
-}
-
-.clear {
-  clear: both;
-}
-
-#app > * {
-  transition: all 0.25s ease;
-}
-
-#main {
-  padding: 55px 10px 0px 10px;
-}
+h3 {  margin-top: 0; }
+.clear { clear: both; }
+#app > * { transition: all 0.25s ease; }
+#main { padding: 55px 10px 0 10px; }
 
 .message {
   padding-left: 2px;
@@ -53,19 +42,18 @@ h3 {
   overflow: auto;
   position: relative;
   text-align: left;
-  padding: 10px 0;
   min-height: 34px;
+  padding: 10px 0 0 0;
+  list-style: none;
 
   * { max-width: 100%; }
 
   .avatar {
     border-radius: 4px;
-
     float: left;
-    height: 35px;
-    width: 35px;
-    margin: {
-      right: 10px; }; }
+    margin-top: 0;
+    max-width: 35px;
+  }
 
   .from {
     a {
@@ -82,25 +70,15 @@ h3 {
     }
   }
 
-  > .content,
-  .reshare > .content {
-    padding: 5px;
-  }
-  .info {
-    margin: {
-      top: 0; }; }
-  .photo_attachments {
-    margin: {
-      top: 6px; }; }
-  .timeago {
-    font: {
-      weight: normal; }; }
-  padding: 0 !important;
+  > .content, .reshare > .content { padding: 6px; }
+  .info{ margin-top: 0; }
+  .photo_attachments{ margin-top: 6px; }
+  .timeago{ font-weight: normal; }
 }
 .shield{
   padding: 10px;
   font-size: larger;
-  }
+}
 
 .shield_wrapper{
     height: 100%;
@@ -117,7 +95,6 @@ h3 {
 
 .stream_element .comments {
   width: 100%;
-  padding: 0;
   margin: 0;
   top: 3px;
   .content {
@@ -168,8 +145,7 @@ h3 {
   margin-bottom: 10px;
 
   border: 1px solid #bbb;
-  border-top: 1px solid $border-grey;
-  border-bottom: 1px solid #aaa;
+  border-bottom-color: #aaa;
 }
 
 .stream_element div.img img.avatar {
@@ -180,6 +156,8 @@ h3 {
   padding-top: 10px;
 }
 
+.stream_element .media { padding: 0; }
+
 .photo_attachments {
   position: relative;
   left: 0;
@@ -202,18 +180,23 @@ h3 {
 .more-link, .no-more-posts {
   display: block;
   text-align: center;
-  padding: 0 10px;
-  margin: 0 10px;
+  padding: 0;
+  margin: 20px 0;
   border-radius: 5px;
+  border: 1px solid $text-grey;
 
-  background: {
-    color: rgba(220,220,220,0.8);
-  }
+  background: { color: rgba(220,220,220,0.8); }
 
   h1, h2 {
     color: $text-grey;
     padding: 20px;
     text-shadow: 0 2px 0 #fff;
+    margin: 0;
+  }
+
+  &:hover, &:active{
+    text-decoration: none;
+    border: 1px solid $text-dark-grey;
   }
 }
 .no-more-posts {
@@ -279,7 +262,7 @@ h3 {
   }
 
   &.photos {
-    border-bottom: 0px !important;
+    border-bottom: 0 !important;
   }
 }
 
@@ -470,15 +453,13 @@ h3 {
   background: {
     size: 20px;
     repeat: no-repeat;
-    position: center; };
-
-  height: 13px;
+    position: center;
+  };
 
+  height: 20px;
   width: 20px;
-  padding: 5px;
-
-  margin: {
-    left: 5px; };
+  padding: 0;
+  margin-left: 5px;
 
   &.loading {
     background-image: image-url("mobile-spinner.gif");
@@ -507,7 +488,7 @@ h3 {
 }
 
 #new_status_message {
-  margin: 0px;
+  margin: 0;
 
   fieldset {
     padding: 10px;
@@ -526,14 +507,8 @@ h3 {
   }
 
   textarea {
-    border-radius: 0;
-    box-shadow: 0 2px 3px #999;
-    border: none;
-    border-bottom: 1px solid $border-dark-grey;
-    width: 96%;
-    padding: 2%;
-    margin: 0px;
-    font-size: 14px;
+    min-width: 100%;
+    max-width: 100%;
   }
 }
 
@@ -623,10 +598,14 @@ select {
   overflow: hidden;
 }
 
+.stream_element { padding: 0; }
+
 .notifications {
   list-style: none;
-  margin: 0px;
+  margin: 0;
   clear: right;
+
+  &, & ul { padding: 0; }
 }
 
 .notifications_for_day {
@@ -650,15 +629,21 @@ select {
 
 }
 
-.conversation_participants img.avatar{
+.conversation_participants img.avatar {
   height:35px;
   width:35px;
   margin: 5px 0 5px 2px;
 }
 
-.conversations img.avatar{
-  margin: 10px;
-  float: left;
+.conversations {
+  img.avatar {
+    margin: 10px;
+    float: left;
+  }
+  .no-messages {
+    text-align: center;
+    margin-top: 40px;
+  }
 }
 
 .unread_message_count {
@@ -689,11 +674,6 @@ select {
   color: #3F8FBA;
 }
 
-form#new_conversation.new_message input.button.creation{
-  float: right;
-  margin: 0 5px 5px;
-}
-
 h3.ltr {
   font-size: 18px;
   line-height: 27px;
@@ -712,10 +692,6 @@ h3.ltr {
   word-wrap: break-word;
 }
 
-textarea#message_text {
-  margin: 10px 0 10px;
-}
-
 form#new_conversation.new_conversation {
   background-color: #FFFFFF;
   border-bottom: 1px solid $border-dark-grey;
@@ -742,74 +718,10 @@ form#new_conversation.new_conversation {
 }
 
 textarea#conversation_text {
-  border: 0.2s;
-  border-radius: 0 0 0 0;
   font-size: larger;
-  left: 0;
-  margin: 10px 0;
-  width: 218px;
-  padding: 0;
-}
-
-.bottom_submit_section {
-  display: block;
-  position: relative;
-  text-align: right;
-  padding-bottom: 5px;
-}
-
-.button.creation {
-  display: inline-block;
-  padding: 4px 12px;
-  margin-bottom: 0;
-  font-size: 14px;
-  line-height: 20px;
-  color: #333333;
-  text-align: center;
-  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
-  vertical-align: middle;
-  cursor: pointer;
-  background-color: #f5f5f5;
-  background-image: gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));
-  background-image: linear-gradient(to bottom, #ffffff, #e6e6e6);
-  background-repeat: repeat-x;
-  border: 1px solid #cccccc;
-  border-color: #e6e6e6 #e6e6e6 #bfbfbf;
-  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
-  border-bottom-color: #b3b3b3;
-  border-radius: 4px;
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0);
-  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
-  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
-}
-
-.button.creation:hover,
-.button.creation:focus,
-.button.creation:active {
-  color: #333333;
-  background-color: #e6e6e6;
-}
-
-.button.creation:active {
-  background-color: #cccccc \9;
-}
-
-.button.creation:first-child {
-  margin-left: 0;
-}
-
-.button.creation:hover,
-.button.creation:focus {
-  color: #333333;
-  text-decoration: none;
-  background-position: 0 -15px;
-  transition: background-position 0.1s linear;
-}
-
-.button.creation:focus {
-  outline: thin dotted #333;
-  outline: 5px auto -webkit-focus-ring-color;
-  outline-offset: -2px;
+  width: 100%;
+  min-width: 100%;
+  max-width: 100%;
 }
 
 .registrations_error,
@@ -839,6 +751,8 @@ form#new_user.new_user input.btn {
   }
 }
 
+.media { padding: 12px 0 }
+
 .conversation_error {
   color: #DF0101;
   text-shadow: 1px 1px 5px #666;
@@ -850,7 +764,8 @@ form#new_user.new_user input.btn {
 }
 
 #conversation_inbox {
-  .pagination {
+  div.pagination {
+    width: 100%;
     margin-left: auto;
     margin-right: auto;
     text-align: center;
@@ -899,7 +814,6 @@ h1.session {
   padding: 20px;
   margin: -10px -20px 10px -20px;
   background-color:#4b4b4b;
-  box-shadow: 0 3px 40px rgba(0,0,0,0.8);
   z-index: 10;
   position: relative;
   text-align: center;
@@ -923,16 +837,14 @@ form p.checkbox_select {
   margin-top: 5px;
   min-height: 100px;
   position: relative;
+  margin-bottom: 15px;
+  text-align: center;
+  padding: 0;
 
   img {
     border-radius: 5px;
     box-shadow: 0 1px 2px #666;
 
-    position: absolute;
-    left: 0;
-    height: 100px;
-    width: 100px;
-
     &.avatar {
       @include transition(opacity, 0.5s);
       &.loading {
@@ -940,7 +852,16 @@ form p.checkbox_select {
       }
     }
   }
-  padding-left: 120px;
+}
+
+#birth-date {
+  text-align: center;
+  select{
+    width: 32%;
+    display: inline;
+    &:first-of-type{ float: left; }
+    &:last-of-type{ float: right; }
+  }
 }
 
 #file-upload.button {
@@ -978,7 +899,9 @@ form p.checkbox_select {
   font-size: 1em;
 
   ul {
-    margin: 0 0 0 15px;
+    margin: 0;
+    padding: 0;
+    text-align: center;
   }
 
   li {
@@ -990,6 +913,8 @@ form#update_profile_form {
   select {
     padding: 3px;
   }
+
+  .submit_block { margin-bottom: 20px; }
 }
 
 select#user_language, #user_auto_follow_back_aspect_id, #aspect_ids_ {
@@ -1003,10 +928,6 @@ select#user_language, #user_auto_follow_back_aspect_id, #aspect_ids_ {
   color: inherit;
   background-color: $background-grey;
   border-radius: 10px;
-  .img .avatar {
-    width: 50px;
-    height: 50px;
-  }
 }
 
 .search-mobile {
@@ -1168,16 +1089,8 @@ select#aspect_ids_ {
   }
 }
 
-.remove_post {
-  position: absolute;
-  top: 2px;
-  right: 5px;
-  opacity: 0.5;
-}
-
-.remove_comment {
-  opacity: 0.5;
-}
+.remove_post { opacity: 0.5;  }
+.remove_comment { opacity: 0.5; }
 
 .center {
   text-align: center;
@@ -1202,6 +1115,11 @@ select#aspect_ids_ {
   margin: 0 10px 0 0;
   padding: 3px;
 
+  &, &:focus, &:active{
+    box-shadow: none;
+    border-color: #CCCCCC;
+  }
+
   &.has_connection {
     background-color: $light-green;
   }
@@ -1212,4 +1130,14 @@ select#aspect_ids_ {
   word-wrap: break-word;
 }
 
+#email_prefs {
+  .checkbox{
+    margin: 15px 0;
+  }
+}
+.small-horizontal-spacer { margin: 15px 0; }
+
+.form-control, .form-control:active, .form-control:focus { box-shadow: none; }
+.form-control:active, .form-control:focus { border-color: #999999; }
+
 .tag_following_action { margin: 5px 0 10px 0; }

app/assets/stylesheets/new_styles/_base.scss

@@ -7,18 +7,12 @@ body {
 body {
   margin-top: 40px;
   padding : none;
-  font-size: $font-size-text;
 
   &.lock {
     overflow: hidden;
   }
 }
 
-blockquote p {
-  font-size: $font-size-text;
-  line-height: $line-height;
-}
-
 /* Overflow */
 h1, h2, h3, h4, h5, h6,
 p,
@@ -27,9 +21,6 @@ code,
 pre { word-wrap: break-word; }
 a.tag { word-break: break-all; }
 
-/* new link color */
-a { color : $link-blue  }
-
 .avatar {
   border-radius: 4px;
 
@@ -63,7 +54,6 @@ a { color : $link-blue  }
     display : inline-block;
     position : relative;
     top : 1px;
-    font-family : Roboto-Bold;
   }
 }
 

app/assets/stylesheets/new_styles/_buttons.scss

@@ -1,31 +0,0 @@
-.btn.creation {
-  $button-border-color: #aaa;
-  @include button-gradient($creation-blue);
-  color: #fff;
-  border: 1px solid darken($button-border-color,20%);
-  text-shadow: none;
-  &:hover {
-    background: $creation-blue;
-    border: 1px solid darken($button-border-color,35%);
-  }
-}
-.btn-group.open > .btn.creation {
-  background: $creation-blue;
-}
-
-.btn.green {
-  $button-border-color: #aaa;
-  @include button-gradient($green);
-  color: $grey;
-  border: 1px solid darken($button-border-color,20%);
-
-  &:hover {
-    background: $green;
-    border: 1px solid darken($button-border-color,35%);
-  }
-}
-.btn-group.open > .btn.green {
-  background: $green;
-}
-
-.btn.delete { color: desaturate($red,10%); }

app/assets/stylesheets/new_styles/_forms.scss

@@ -80,6 +80,7 @@ form.block-form {
 
     .entypo {
       position: absolute;
+      line-height: 20px;
       top: 10px;
       left: 10px;
       width: 20px;

app/assets/stylesheets/new_styles/_interactions.scss

@@ -5,19 +5,19 @@
 
     i.entypo {
       color: $text-grey;
-      font-size: $font-size-text;
-      line-height: $line-height;
+      font-size: $font-size-base;
+      line-height: $line-height-base;
       vertical-align: middle;
       &:hover { color: $text; }
-      &.cross { font-size: $line-height; }
+      &.cross { font-size: $line-height-base; }
     }
 
     &.hide_conversation i {
-      font-size: $line-height*1.5;
+      font-size: $line-height-computed*1.5;
     }
 
     &.delete_conversation i {
-      font-size: $font-size-text*1.5;
+      font-size: $font-size-base*1.5;
     }
 
     &.destroy_participation i {

app/assets/stylesheets/new_styles/_navs.scss

@@ -1,15 +0,0 @@
-.nav.nav-tabs{
-  li > a {
-    color: $text-dark-grey;
-    .entypo, .mentionIcon {
-      color: $text-dark-grey;
-      margin-right: 5px;
-    }
-    .mentionIcon { font-weight: 700; }
-  }
-  li.active > a {
-    background-color: $background-grey;
-    color: $black;
-    .entypo, .mentionIcon { color: $black; }
-  }
-}

app/assets/stylesheets/new_styles/_poll.scss

@@ -22,10 +22,10 @@
     height: 10px !important;
 
     .bar {
-      background-image: none;
-      background-color: $border-dark-grey;
+      background: $border-dark-grey none;
       color: $text-dark-grey;
       text-align: left;
+      height: 100%;
     }
   }
   .submit[disabled] {

app/assets/stylesheets/new_styles/_registration.scss

@@ -36,7 +36,7 @@
       font-size: 16px;
       height: 40px;
       padding: 10px 10px 10px 130px;
-      line-height: $line-height;
+      line-height: $line-height-base;
       box-sizing: border-box;
       width: 100%;
       border-bottom: 1px solid $border-grey;

app/assets/stylesheets/new_styles/_settings.scss

@@ -4,7 +4,6 @@
 }
 
 .as-selections #tags {
-	border: none;
 	box-shadow: none;
 }
 
@@ -12,11 +11,21 @@
 	margin-bottom: 0;
 }
 
-#profile_photo_upload .avatar {
-  height: auto;
-  width: auto;
-  max-width: 200px;
-  margin-bottom: 10px;
+#profile_photo_upload {
+  text-align: center;
+
+  .avatar {
+    height: auto;
+    width: auto;
+    max-width: 200px;
+    margin-bottom: 20px;
+  }
 }
 
 .settings_visibilty { margin-left: 10px; }
+
+#profile_bio {
+  width: 100%;
+  max-width: 100%;
+  min-width: 100%;
+}

app/assets/stylesheets/new_styles/_spinner.scss

@@ -17,15 +17,11 @@
   clear: both;
 }
 
-.loaded {
-  animation: fade-in 0.16s linear;
-}
-
 .loader {
-  mask-image: image-url('static-loader.png');
+  mask-image: image-url('ajax-loader2.gif');
   animation: spin 1s infinite ease-in-out, fade-in 0.2s ease-in;
 
-  background-image : image-url("static-loader.png");
+  background-image : image-url("ajax-loader2.gif");
 
   display: inline-block;
   width : 14px;

app/assets/stylesheets/new_styles/_statistics.scss

@@ -4,11 +4,11 @@
   h3{
     margin: 0px;
     padding: 10px;
-    background-color: $green;
+    background-color: $brand-success;
   }
 
-  .span-3 { 
-    width: 30%;
+  .span-3 {
+    width: 100%;
     height: 150px;
     text-align: center;
     border: 1px solid $border-grey;
@@ -25,4 +25,4 @@
       background-color: $background-grey;
     }
   }
-}
+}

app/assets/stylesheets/new_styles/_typography.scss

@@ -16,8 +16,3 @@
   src : image-url('fonts/Roboto-Light.ttf');
   weight : normal;
 }
-
-body, p, h1, h2, h3, h4, h5, h6, textarea, input {
-  font-family : "Helvetica Neue", Helvetica, sans-serif;
-  font-weight : normal;
-}

app/assets/stylesheets/notifications.scss

@@ -1,17 +1,8 @@
 #notifications_container {
-  .nav.nav-tabs{
-    li > a {
-      .badge.badge-default { display: none; }
-    }
-  }
-
   .stream {
     .header {
       border-bottom: 1px solid $border-grey;
-      .btn-toolbar, h4 {
-        margin-bottom: 10px;
-        line-height: 40px;
-      }
+      .btn-toolbar { margin: 11px 0; }
       margin-bottom: 10px;
     }
 
@@ -58,7 +49,6 @@
     .stream_element.media {
       padding: 10px;
       margin: 0px;
-      font-size: 13px;
       line-height: 18px;
       border-bottom: 1px solid $border-grey;
       &:last-child { border: none !important; }
@@ -98,4 +88,9 @@
 
     .no_notifications { text-align: center; }
   }
+
+  .list-group .list-group-item {
+    .entypo, .mentionIcon { margin-right: 5px; }
+    .mentionIcon { font-weight: bold; }
+  }
 }

app/assets/stylesheets/people.scss

@@ -3,6 +3,7 @@
     .term { font-weight: 700; }
     small { margin-left: 15px; }
   }
+  #invitations-button { padding-left: 0; }
 }
 #people_stream {
   .media, .media-body {
@@ -24,6 +25,6 @@
       line-height: 50px;
       margin-right: 10px;
     }
-    .info { font-size: 11px; }
+    .info { font-size: $font-size-small; }
   }
 }

app/assets/stylesheets/profile.scss

@@ -32,13 +32,13 @@
           color: $text-grey;
           &:before { content: '\26aa'; }
         }
-        &.entypo.check { color: darken($green,20%); }
+        &.entypo.check { color: darken($brand-success,20%); }
       }
       .description {
         margin-bottom: 20px;
         .tag {
           background-color: transparent;
-          font-size: $font-size-text;
+          font-size: $font-size-base;
         }
         .tag:not(.entypo) {
           font-weight: 700;
@@ -78,7 +78,7 @@
         > li {
           display: inline-block;
           &.active {
-            border-bottom: 3px solid $creation-blue;
+            border-bottom: 3px solid $brand-primary;
             a {
               color: $black;
               .entypo { color: $black; }
@@ -128,3 +128,21 @@
 
   .stream_container > .pagination { text-align: center; }
 }
+
+#email-form{
+  padding: 0;
+  .form-group{
+    margin-left: 0;
+    margin-right: 0;
+  }
+}
+
+#birth-date{
+  text-align: center;
+  select{
+    width: 32%;
+    display: inline;
+    &:first-of-type{ float: left; }
+    &:last-of-type{ float: right; }
+  }
+}

app/assets/stylesheets/publisher.scss

@@ -1,6 +1,7 @@
 #publisher {
   z-index: 1;
   color: $text-grey;
+  margin: 0;
 
   &.closed {
     #button_container,
@@ -15,30 +16,31 @@
     #publisher_textarea_wrapper { border: 1px solid $border-grey !important; }
   }
 
+  .container-fluid{ padding: 0; }
   .mentions-autocomplete-list ul { width: 100% !important; }
 
   form {
     margin: 0;
     #fileInfo { display: none !important; }
-    #hide_publisher {
-      margin-top: 10px;
-    }
 
     #publisher_spinner {
       text-align: center;
     }
 
     .options_and_submit {
+      padding: 10px 0 ;
       #publisher_service_icons {
-        margin-right: 10px;
-        .btn-link {
+        .btn-link{ text-decoration: none; }
+        .btn-link.question_mark .entypo {
+          color: $text-grey;
+          font-size: 16px;
+          line-height: $line-height-computed;
+        }
+        .btn-link.question_mark:hover.entypo { color: $black; }
+        .btn-link.service_icon {
           padding-left: 5px;
           padding-right: 5px;
-          text-decoration: none;
         }
-        .btn-link.question_mark { margin-left: 5px; }
-        .btn-link.question_mark .entypo { color: $text-grey; }
-        .btn-link.question_mark:hover .entypo { color: $black; }
         .dim { opacity: 0.3; }
         .social_media_logos-wordpress-16x16 {
           display: inline-block;
@@ -71,8 +73,7 @@
         min-height: 70px;
       }
 
-      .help-block {
-        font-size: 13px;
+      .markdownIndications {
         line-height: 30px;
         padding-left: 10px;
         margin-bottom: 0;
@@ -81,14 +82,14 @@
       }
 
       .mentions-input-box .mentions {
-        line-height: $line-height !important;
+        line-height: $line-height-base !important;
       }
 
-      &.with_attachments .row-fluid#photodropzone_container {
+      &.with_attachments #photodropzone_container {
         border-top: 1px dashed $border-grey;
       }
 
-      .row-fluid#poll_creator_container {
+      #poll_creator_container {
         display: none;
         border-top: 1px dashed $border-grey;
         padding:4px 6px 4px 6px;
@@ -104,7 +105,7 @@
         }
       }
 
-      &.with_location .row-fluid#location_container {
+      &.with_location #location_container {
         height: 30px;
         border-top: 1px dashed $border-grey;
         input[type='text'] {
@@ -112,7 +113,7 @@
           color: $text-grey;
         }
       }
-      &.active .row-fluid#button_container {
+      &.active #button_container {
         border-top: 1px solid $border-grey;
       }
 
@@ -187,6 +188,7 @@
         #hide_location {
           text-decoration: none !important;
           font-size: 16px;
+          line-height: $line-height-computed;
           padding: 4px 5px;
           i {
             color: $text-grey;
@@ -214,9 +216,8 @@
         height: 30px;
         line-height: 30px;
         position: absolute;
-        right: 100px;
-        bottom: -31px;
-        font-size: 13px;
+        right: 10px;
+        bottom: -25px;
       }
       &.with_location .counter {
         bottom: -62px;
@@ -232,8 +233,10 @@
 
   .aspect_dropdown {
     .radio {
-      min-height: 0px;
-      padding-left: 0px;
+      min-height: 0;
+      padding-left: 0;
+      margin-top: 0;
+      margin-bottom: 0;
     }
   }
 }

app/assets/stylesheets/sidebar.scss

@@ -13,7 +13,7 @@
       h5 {
         color: $text-dark-grey;
         font-weight: bold;
-        font-size: 13px;
+        font-size: $font-size-base;
         margin: 0;
         &.title-header { margin-left: 5px; }
       }
@@ -21,7 +21,7 @@
 
     .content {
       color: $text-grey;
-      font-size: 11px;
+      font-size: $font-size-small;
       line-height: 18px;
       padding: 5px;
 
@@ -33,9 +33,14 @@
         li { list-style: none; }
       }
 
+      .btn-link {
+        font-size: $font-size-small;
+        padding-left: 0;
+      }
+
       & > #invite_code {
         box-sizing: border-box;
-        font-size: 11px;
+        font-size: $font-size-small;
         height: 30px;
         width: 100%;
       }
@@ -56,6 +61,7 @@
           display: inline-block;
         }
       }
+      .stream-faces img{ display: inline-flex; }
     }
   }
 }

app/assets/stylesheets/single-post-view.scss

@@ -17,14 +17,14 @@
         .post_scope { margin-right: 5px; }
         .status-message-location {
           padding-top: 2px;
-          line-height: $font-size-text;
+          line-height: $font-size-base;
         }
       }
       .bd {
         padding-left: 10px;
       }
     }
-    .row-fluid.reshare {
+    .row.reshare {
       border-top: 1px solid lighten($border-grey,5%);
       padding-top: 10px;
       margin-top: 10px;
@@ -150,5 +150,7 @@
   #reshares, #likes, #comments-meta {
     margin-left: 7px;
     margin-bottom: 8px;
+    img{ display: inline; }
   }
+
 }

app/assets/stylesheets/sizes.scss

@@ -1,2 +0,0 @@
-$font-size-text: 13px;
-$line-height: 20px;

app/assets/stylesheets/stream_element.scss

@@ -27,7 +27,6 @@
     &:hover > .bd > .control-icons { background: #fff; }
   }
   .thumbnail {
-    height: 200px;
     padding: 10px;
     margin: 0 5px 10px;
     text-align: center;
@@ -60,8 +59,8 @@
     a.author-name { color: $blue; }
     .feedback {
       margin-top: 5px;
-      font-size: 11px;
-      line-height: 11px;
+      font-size: $font-size-small;
+      line-height: $font-size-small;
     }
     .likes {
       margin-top: 10px;
@@ -81,7 +80,7 @@
       margin-top: 6px;
     }
     .status-message-location .near-from {
-      font-size: 11px;
+      font-size: $font-size-small;
       color: $text-grey;
     }
     .grey { color: $text-grey; }
@@ -135,11 +134,11 @@
 
   &.highlighted {
     padding-left: 8px;
-    border-left: 3px solid $creation-blue;
+    border-left: 3px solid $brand-primary;
   }
 
   &.post_preview {
-    background-color: lighten($creation-blue,45%);
-    border: 1px solid $creation-blue;
+    background-color: lighten($brand-primary,45%);
+    border: 1px solid $brand-primary;
   }
 }

app/assets/stylesheets/tag.scss

@@ -24,7 +24,7 @@ h1.tag {
 }
 
 #tags_show {
-  .span3 {
+  .col-md-3 {
     h4 { margin: 25px 0 15px; }
     .side_stream #people_stream {
       .name { display: block; }
@@ -35,14 +35,14 @@ h1.tag {
       }
     }
   }
-  .span7 {
+  .col-md-7 {
     .tag-following-action {
       max-width: 100%;
       input[type="submit"] {
         overflow: hidden;
         text-overflow: ellipsis;
         max-width: 100%;
-      }    
+      }
     }
   }
 }

app/assets/stylesheets/terms.scss

@@ -0,0 +1,3 @@
+#terms {
+ .nav-tabs { margin-top: 40px; }
+}

app/assets/stylesheets/vendor/autoSuggest.css

@@ -1,212 +1,203 @@
 /* AutoSuggest CSS - Version 1.2 */
 
 ul.as-selections {
-	list-style-type: none;
-	border: 1px solid #ccc;
-	margin: 0;
-	overflow: auto;
-	background-color: #fff;
-	border-radius: 3px;
-	/* 1% padding (all sides) + 98% width = 100% */
-	padding: 1%;
-	width: 98%;
+  list-style-type: none;
+  margin: 0;
+  overflow: auto;
+  background-color: #fff;
+  border-radius: 3px;
+  width: 100%;
+  padding: 0;
 }
 
 ul.as-selections.loading {
-  background: asset_path("ajax-loader.gif")  right center no-repeat;
+  background: asset_path("ajax-loader2.gif") right center no-repeat;
 }
 
 ul.as-selections li {
-	float: left;
-	margin: 1px 4px 1px 0;
-	cursor: pointer;
+  float: left;
+  margin: 1px 4px 1px 0;
+  cursor: pointer;
 }
 
 ul.as-selections li.as-selection-item {
-	color: #2b3840;
-	font-size: 13px;
-	text-shadow: 0 1px 1px #fff;
-	background-color: #ddeefe;
-	background-image: gradient(linear, 0% 0%, 0% 100%, from(#ddeefe), to(#bfe0f1));
-	border: 1px solid #acc3ec;
-	padding: 0;
+  color: #2b3840;
+  font-size: 13px;
+  text-shadow: 0 1px 1px #fff;
+  background-color: #ddeefe;
+  background-image: gradient(linear, 0% 0%, 0% 100%, from(#ddeefe), to(#bfe0f1));
+  border: 1px solid #acc3ec;
+  padding: 0;
   padding-top: 6px;
   padding-bottom: 6px;
   padding-left: 6px;
-	border-radius: 5px;
-	box-shadow: 0 1px 1px #e4edf2;
+  border-radius: 5px;
+  box-shadow: 0 1px 1px #e4edf2;
   line-height: 10px;
-  margin-top: -1px;
   margin-bottom: 10px;
 }
 
 ul.as-selections li.as-selection-item:last-child {
-	margin-left: 30px;
+  margin-left: 30px;
 }
 
 ul.as-selections li.as-selection-item a.as-close {
-	float: right;
-	margin: 0px 3px 0 0px;
-	padding: 0 3px;
-	cursor: pointer;
-	color: #5491be;
-	font-family: "Helvetica", helvetica, arial, sans-serif;
-	font-size: 14px;
-	font-weight: bold;
-	text-shadow: 0 1px 1px #fff;
-	transition: color .1s ease-in;
+  float: right;
+  margin: 0px 3px 0 0px;
+  padding: 0 3px;
+  cursor: pointer;
+  color: #5491be;
+  font-family: "Helvetica", helvetica, arial, sans-serif;
+  font-size: 14px;
+  font-weight: bold;
+  text-shadow: 0 1px 1px #fff;
+  transition: color .1s ease-in;
 }
 
 ul.as-selections li.as-selection-item.blur {
-	color: #666666;
-	background-color: #f4f4f4;
-	background-image: gradient(linear, 0% 0%, 0% 100%, from(#f4f4f4), to(#d5d5d5));
-	border-color: #bbb;
-	border-top-color: #ccc;
-	box-shadow: 0 1px 1px #e9e9e9;
+  color: #666666;
+  background-color: #f4f4f4;
+  background-image: gradient(linear, 0% 0%, 0% 100%, from(#f4f4f4), to(#d5d5d5));
+  border-color: #bbb;
+  border-top-color: #ccc;
+  box-shadow: 0 1px 1px #e9e9e9;
 }
 
 ul.as-selections li.as-selection-item.blur a.as-close {
-	color: #999;
+  color: #999;
 }
 
 ul.as-selections li:hover.as-selection-item {
-	color: #2b3840;
-	background-color: #bbd4f1;
-	background-image: gradient(linear, 0% 0%, 0% 100%, from(#bbd4f1), to(#a3c2e5));
-	border-color: #6da0e0;
-	border-top-color: #8bb7ed;
+  color: #2b3840;
+  background-color: #bbd4f1;
+  background-image: gradient(linear, 0% 0%, 0% 100%, from(#bbd4f1), to(#a3c2e5));
+  border-color: #6da0e0;
+  border-top-color: #8bb7ed;
 }
 
 ul.as-selections li:hover.as-selection-item a.as-close {
-	color: #4d70b0;
+  color: #4d70b0;
 }
 
 ul.as-selections li.as-selection-item.selected {
-	border-color: #1f30e4;
+  border-color: #1f30e4;
 }
 
 ul.as-selections li.as-selection-item a:hover.as-close {
-	color: #1b3c65;
+  color: #1b3c65;
 }
 
 ul.as-selections li.as-selection-item a:active.as-close {
-	color: #4d70b0;
+  color: #4d70b0;
 }
 
 ul.as-selections li.as-original {
-	margin-left: 0;
+  width: 100%;
+  margin: 0;
   list-style: none;
+  padding: 0;
 }
 
 ul.as-selections li.as-original input {
-	border: none;
-	outline: none;
-	font-size: 13px;
-	width: auto;
-	padding: 0;
-  	margin: 0;
-	height: 20px;
-	line-height: 20px;
-	width: 300px;
-}
-
-ul.as-selections li.as-original.as-original{
-	width: auto;
+  outline: none;
+  font-size: 13px;
+  margin: 0;
+  line-height: 20px;
+  width: 100%;
 }
 
 ul.as-list {
-	position: absolute;
-	list-style-type: none;
+  position: absolute;
+  list-style-type: none;
   list-style: none;
-	margin: 2px 0 0 0;
-	padding: 0;
-	font-size: 13px;
-	color: #000;
-	background-color: #fff;
-	background-color: rgba(255,255,255,0.95);
-	z-index: 2;
-	box-shadow: 0 2px 12px #222;
-	border-radius: 5px;
+  margin: 2px 0 0 0;
+  padding: 0;
+  font-size: 13px;
+  color: #000;
+  background-color: #fff;
+  background-color: rgba(255,255,255,0.95);
+  z-index: 2;
+  box-shadow: 0 2px 12px #222;
+  border-radius: 5px;
 }
 
 li.as-result-item, li.as-message {
-	margin: 0 0 0 0;
-	padding: 5px;
-	background-color: transparent;
-	border: 1px solid #fff;
-	border-bottom: 1px solid #ddd;
-	cursor: pointer;
-	border-radius: 3px;
+  margin: 0 0 0 0;
+  padding: 5px;
+  background-color: transparent;
+  border: 1px solid #fff;
+  border-bottom: 1px solid #ddd;
+  cursor: pointer;
+  border-radius: 3px;
 }
 
 li:first-child.as-result-item {
-	margin: 0;
+  margin: 0;
 }
 
 li.as-message {
-	margin: 0;
-	cursor: default;
+  margin: 0;
+  cursor: default;
 }
 
 li.as-result-item.active {
-	background-color: #3668d9;
-	background-image: gradient(linear, 0% 0%, 0% 64%, from(rgb(110, 129, 245)), to(rgb(62, 82, 242)));
-	border-color: #3342e8;
-	color: #fff;
-	text-shadow: 0 1px 2px #122042;
+  background-color: #3668d9;
+  background-image: gradient(linear, 0% 0%, 0% 64%, from(rgb(110, 129, 245)), to(rgb(62, 82, 242)));
+  border-color: #3342e8;
+  color: #fff;
+  text-shadow: 0 1px 2px #122042;
 }
 
 li.as-result-item em {
-	font-style: normal;
-	background: #444;
-	padding: 0 2px;
-	color: #fff;
+  font-style: normal;
+  background: #444;
+  padding: 0 2px;
+  color: #fff;
 }
 
 li.as-result-item.active em {
-	background: #253f7a;
-	color: #fff;
+  background: #253f7a;
+  color: #fff;
 }
 
 /* Webkit Hacks  */
 @media screen and (-webkit-min-device-pixel-ratio:0) {
-	ul.as-selections li.as-selection-item {
-		padding-top: 6px;
-		padding-bottom: 6px;
-	}
-	ul.as-selections li.as-selection-item a.as-close {
-		margin-top: -1px;
-	}
-	ul.as-selections li.as-original input {
-		height: 20px;
-	}
+  ul.as-selections li.as-selection-item {
+    padding-top: 6px;
+    padding-bottom: 6px;
+  }
+  ul.as-selections li.as-selection-item a.as-close {
+    margin-top: -1px;
+  }
+  ul.as-selections li.as-original input {
+    height: 20px;
+  }
 }
 
 /* Opera Hacks  */
 @media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {
-	ul.as-list {
-		border: 1px solid #ccc;
-	}
-	ul.as-selections li.as-selection-item a.as-close {
-		margin-left: 4px;
-		margin-top: 0;
-	}
+  ul.as-list {
+    border: 1px solid #ccc;
+  }
+  ul.as-selections li.as-selection-item a.as-close {
+    margin-left: 4px;
+    margin-top: 0;
+  }
 }
 
 /* IE Hacks  */
 ul.as-list {
-	border: 1px solid #ccc\9;
+  border: 1px solid #ccc\9;
 }
 ul.as-selections li.as-selection-item a.as-close {
-	margin-left: 4px\9;
-	margin-top: 0\9;
+  margin-left: 4px\9;
+  margin-top: 0\9;
 }
 
 /* Firefox 3.0 Hacks */
 ul.as-list,  x:-moz-any-link, x:default {
-	border: 1px solid #ccc;
+  border: 1px solid #ccc;
 }
 BODY:first-of-type ul.as-list, x:-moz-any-link, x:default { /* Target FF 3.5+ */
-	border: none;
+  border: none;
 }

app/assets/templates/aspect_create_modal_tpl.jst.hbs

@@ -1,40 +1,51 @@
-<div class="modal hide fade" id="newAspectModal" tabindex="-1" role="dialog" aria-labelledby="newAspectModalLabel" aria-hidden="true">
+<div class="modal fade" id="newAspectModal" tabindex="-1" role="dialog" aria-labelledby="newAspectModalLabel"
+     aria-hidden="true" xmlns="http://www.w3.org/1999/html">
 
-  <div class="modal-header">
-    <button class="close" type="button" data-dismiss="modal" aria-hidden="true">&times;</button>
-    <h3 id="newAspectModalLabel">{{ t "aspects.create.add_a_new_aspect" }}</h3>
-  </div>
+  <div class="modal-dialog">
+    <div class="modal-content">
+      <div class="modal-header">
+        <button class="close" type="button" data-dismiss="modal" aria-hidden="true">&times;</button>
+        <h3 class="modal-title" id="newAspectModalLabel">{{ t "aspects.create.add_a_new_aspect" }}</h3>
+      </div>
 
-  <div class="modal-body">
-    <form>
-      <fieldset>
-        {{#if addPersonId}}
-          <input id="aspect_person_id" type="hidden" value="{{ personId }}">
-        {{/if}}
+      <div class="modal-body">
+        <form>
+          <fieldset>
+            {{#if addPersonId}}
+              <input id="aspect_person_id" type="hidden" value="{{ personId }}">
+            {{/if}}
 
-        <div class="control-group">
-          <label for="aspect_name">{{ t "aspects.name" }}</label>
-          <input id="aspect_name" class="input-block-level" maxlength=20 type="text">
+            <form class="form-horizontal">
+              <div class="form-group">
+                <label class="col-sm-2 control-label" for="aspect_name">{{ t "aspects.name" }}</label>
+                <div class="col-sm-10">
+                  <input id="aspect_name" class="input-block-level form-control" maxlength=20 type="text"/>
+                </div>
+              </div>
+
+              <div class="form-group">
+                <div class="col-sm-offset-2 col-sm-10">
+                  <div class="checkbox">
+                   <label for="aspect_contacts_visible" class="checkbox inline">
+                      <input id="aspect_contacts_visible" type="checkbox"> {{ t "aspects.make_aspect_list_visible" }}
+                   </label>
+                  </div>
+                </div>
+              </div>
+            </form>
+
+          </fieldset>
+        </form>
+      </div>
+
+      <div class="modal-footer">
+        <div class="btn btn-default" data-dismiss="modal" aria-hidden="true">
+          {{ t "cancel" }}
         </div>
-
-        <div class="control-group">
-          <label for="aspect_contacts_visible" class="checkbox inline">
-            <input id="aspect_contacts_visible" type="checkbox">
-            {{ t "aspects.make_aspect_list_visible" }}
-          </label>
+        <div class="btn btn-primary">
+          {{ t "create" }}
         </div>
-
-      </fieldset>
-    </form>
-  </div>
-
-  <div class="modal-footer">
-    <div class="btn" data-dismiss="modal" aria-hidden="true">
-      {{ t "cancel" }}
-    </div>
-    <div class="btn creation">
-      {{ t "create" }}
+      </div>
     </div>
   </div>
-
 </div>

app/assets/templates/comment-stream_tpl.jst.hbs

@@ -20,9 +20,10 @@
 
     <div class="bd">
       <form accept-charset="UTF-8" action="/posts/{{id}}/comments" class="new_comment" id="new_comment_on_{{id}}" method="post">
-        <textarea class="comment_box" id="comment_text_on_{{id}}" name="text" rows="2" required placeholder="{{t "stream.comment"}}" />
+        <textarea class="comment_box form-control" id="comment_text_on_{{id}}" name="text" rows="2" required placeholder="{{t
+        "stream.comment"}}" />
         <div class="submit_button">
-          <input class="btn creation" id="comment_submit_{{id}}" name="commit" type="submit" value="{{t "stream.comment"}}" />
+          <input class="btn btn-primary" id="comment_submit_{{id}}" name="commit" type="submit" value="{{t "stream.comment"}}" />
         </div>
       </form>
     </div>

app/assets/templates/contact_tpl.jst.hbs

@@ -1,4 +1,4 @@
-<div class="stream_element media contact {{in_aspect}}" id={{person_id}}>
+<div class="container-fluid stream_element media contact {{in_aspect}}" id={{person_id}}>
   <div class="pull-right">
     {{{aspectMembershipIndicator this in_aspect}}}
   </div>

app/assets/templates/header_tpl.jst.hbs

@@ -56,7 +56,7 @@
 
         <div class="notifications">
           <div class="ajax_loader">
-            <img alt="Ajax-loader" src="{{imageUrl "ajax-loader.gif"}}">
+            <img alt="Ajax-loader" src="{{imageUrl "ajax-loader2.gif"}}">
           </div>
         </div>
         <div class="view_all">

app/assets/templates/help_tpl.jst.hbs

@@ -4,8 +4,8 @@
     <h2 class="help_header">{{ title_header }}</h2>
   </div>
 
-  <div class="row-fluid">
-    <div class="span3">
+  <div class="row">
+    <div class="col-md-3">
       <div id='faq_nav'>
         <ul>
           <li>
@@ -78,7 +78,7 @@
       </div>
     </div>
 
-    <div class="span9 last" id=faq>
+    <div class="col-md-9 last" id=faq>
     </div>
   </div>
 </div>

app/assets/templates/photo_tpl.jst.hbs

@@ -1,4 +1,4 @@
-<div class="media span4">
+<div class="media col-md-4">
   <div class="bd">
     {{#if loggedIn}}
       <div class="control-icons">
@@ -20,7 +20,7 @@
       </div>
     {{/if}}
 
-    <div class="thumbnail">
+    <div class="thumbnail img-thumbnail">
       <a href="#" class="photo-link">
         <img src="{{sizes.large}}" class="photo big_photo" data-small-photo="{{sizes.small}}" data-full-photo="{{sizes.large}}" rel="lightbox">
       </a>

app/assets/templates/poll_creator_tpl.jst.hbs

@@ -1,20 +1,20 @@
-<div class="poll-question control-group">
-  <input class="input-block-level" placeholder="{{t 'publisher.question' }}" type="text" name="poll_question">
+<div class="poll-question form-group">
+  <input class="input-block-level form-control" placeholder="{{t 'publisher.question' }}" type="text" name="poll_question">
 </div>
-<div class="poll-answers">
-  <div class="poll-answer row-fluid">
-    <div class="span11">
-      <input type="text" class="input-block-level" name="poll_answers[]" placeholder="{{t 'publisher.option' }}">
+<div class="poll-answers form-group clearfix row">
+  <div class="poll-answer form-group clearfix">
+    <div class="col-md-11">
+      <input type="text" class="input-block-level form-control" name="poll_answers[]" placeholder="{{t 'publisher.option' }}">
     </div>
-    <div class="span1">
+    <div class="col-md-1">
       <i class="remove-answer entypo cross"></i>
     </div>
   </div>
-  <div class="poll-answer row-fluid">
-    <div class="span11">
-      <input type="text" class="input-block-level" name="poll_answers[]" placeholder="{{t 'publisher.option' }}">
+  <div class="poll-answer form-group clearfix">
+    <div class="col-md-11">
+      <input type="text" class="input-block-level form-control" name="poll_answers[]" placeholder="{{t 'publisher.option' }}">
     </div>
-    <div class="span1">
+    <div class="col-md-1">
       <i class="remove-answer entypo cross"></i>
     </div>
   </div>

app/assets/templates/poll_tpl.jst.hbs

@@ -1,29 +1,31 @@
 {{#if poll}}
   <div class="poll_form">
-    <div class="row-fluid poll_head">
+    <div class="poll_head">
       <strong>{{poll.question}}</strong>
       <div class="poll_statistic pull-right">
         {{t "poll.count" count=poll.participation_count}}
       </div>
     </div>
-    <div class="row-fluid poll_content">
+    <div class="poll_content">
       {{#if show_form}}
         <form action="/posts/{{poll.post_id}}/poll_participations" method="POST">
           {{#poll.poll_answers}}
-            <label class="radio result-row">
-              <input type="radio" name="vote" value="{{id}}"/>
-              {{answer}}
-              <span class="percentage pull-right" style="display: none;"></span>
-              <div class="poll_progress_bar_wrapper progress" style="display: none">
-                <div class="poll_progress_bar bar" data-answerid="{{id}}">
-              </div>
+            <div class="radio result-row">
+              <label>
+                <input type="radio" name="vote" value="{{id}}"/>
+                {{answer}}
+                <span class="percentage form-control-feedback" style="display: none;"></span>
+                <div class="poll_progress_bar_wrapper progress" style="display: none">
+                  <div class="poll_progress_bar bar" data-answerid="{{id}}" style="height: 100%"></div>
+                </div>
+              </label>
             </div>
-            </label>
           {{/poll.poll_answers}}
           <div class="toggle_result_wrapper">
             <a class="toggle_result" href="#">{{t "poll.show_result"}}</a>
           </div>
-          <input type="submit" class="button submit pull-rigth btn" style="float:right;" value="{{t "poll.vote"}}"/>
+          <input type="submit" class="submit pull-right btn btn-default" value="{{t "poll.vote"}}"/>
+          <div class="clearfix"></div>
         </form>
       {{else}}
         {{#poll.poll_answers}}

app/assets/templates/profile_header_tpl.jst.hbs

@@ -2,7 +2,7 @@
   <div class="pull-right">
     {{#if is_own_profile}}
       {{!-- can't block myself, so don't check it here --}}
-      <a href="{{urlTo 'editProfile'}}" id="edit_profile" class="btn btn-primary creation">{{t 'people.edit_my_profile'}}</a>
+      <a href="{{urlTo 'editProfile'}}" id="edit_profile" class="btn btn-primary">{{t 'people.edit_my_profile'}}</a>
     {{else}} {{#if is_blocked}}
       <a href="#" id="unblock_user_button" class="btn btn-danger">{{t 'people.stop_ignoring'}}</a>
     {{else}}
@@ -46,14 +46,14 @@
         {{#if is_receiving}}
           {{!-- create status message with mention --}}
           <span class="profile_button">
-            <span id="mention_button" class="profile-header-icon" title="{{t 'people.mention'}}" data-placement="bottom" data-toggle="modal" data-target="#mentionModal">@</span>
+            <span id="mention_button" class="profile-header-icon" title="{{t 'people.mention'}}" data-placement="bottom" data-toggle="modal">@</span>
           </span>
         {{/if}}
 
         {{#if is_mutual}}
           {{!-- create private conversation with person --}}
           <span class="profile_button">
-            <i id="message_button" class="entypo profile-header-icon mail" title="{{t 'people.message'}}" data-placement="bottom" data-toggle="modal" data-target="#conversationModal"></i>
+            <i id="message_button" class="entypo profile-header-icon mail" title="{{t 'people.message'}}" data-placement="bottom" data-toggle="modal"></i>
           </span>
         {{/if}}
 

app/assets/templates/single-post-viewer/single-post-content_tpl.jst.hbs

@@ -1,6 +1,7 @@
-<div id='head' class='row-fluid'>
-  <div class='row-fluid'>
-    <div id='post-info' class='span8'>
+<div id='head' class='row'>
+  <div class='col-md-12
+  '>
+    <div id='post-info' class='col-md-8'>
       <div class="img pull-left">
         {{#if root}}
           {{#linkToAuthor root.author}}
@@ -64,12 +65,12 @@
       </div>
     </div>
     {{#unless root}}
-      <div id='single-post-actions' class='span4' />
+      <div id='single-post-actions' class='col-md-4' />
     {{/unless}}
   </div>
   {{#if root}}
-    <div class='row-fluid reshare'>
-      <div class='span8' id='reshare-info'>
+    <div class='row reshare'>
+      <div class='col-md-8' id='reshare-info'>
         <i class='entypo retweet small pull-left'></i>
         <div class="img pull-left">
           {{#linkToAuthor author}}
@@ -90,11 +91,11 @@
           <span id='single-post-moderation' />
         </div>
       </div>
-      <div id='single-post-actions' class='span4' />
+      <div id='single-post-actions' class='col-md-4' />
     </div>
   {{/if}}
 </div>
-<div id='body' class='row-fluid'>
-  <div id='real-post-content' class='post-content span12'>
+<div id='body' class='row'>
+  <div id='real-post-content' class='post-content col-md-12'>
   </div>
 </div>

app/assets/templates/single-post-viewer_tpl.jst.hbs

@@ -1,8 +1,8 @@
 <div id='single-post-container' class='container-fluid'>
-  <div class='row-fluid'>
-    <div id='single-post-content' class='span6'>
+  <div class='row'>
+    <div id='single-post-content' class='col-md-6'>
     </div>
-    <div id='single-post-interactions' class='span6'>
+    <div id='single-post-interactions' class='col-md-6'>
     </div>
   </div>
 </div>

app/assets/templates/stream-element_tpl.jst.hbs

@@ -1,5 +1,4 @@
 <div class="media">
-
   {{#with author}}
     <a href="/people/{{guid}}" class="img {{{hovercardable this}}}">
       {{{personImage this}}}

app/assets/templates/tag_following_action_tpl.jst.hbs

@@ -1,8 +1,8 @@
 <div class="pull-right tag-following-action">
   <form accept-charset="UTF-8" action="/tag_followings" method="post">
-      <input type="submit" class="btn 
+      <input type="submit" class="btn
       {{#if tag_is_followed }}
-        green followed
+        btn-success followed
       {{else}}
         btn-default
       {{/if}}

app/assets/templates/tag_following_list_tpl.jst.hbs

@@ -1,5 +1,5 @@
 <li>
   <form id="new_tag_following" accept-charset="UTF-8" action="/tag_followings" method="post">
-    <input class="tag_input" type="text" name="name" placeholder="{{t "stream.followed_tag.add_a_tag"}}" />
+    <input class="tag_input form-control" type="text" name="name" placeholder="{{t "stream.followed_tag.add_a_tag"}}" />
   </form>
 </li>

app/helpers/aspect_global_helper.rb

@@ -12,7 +12,7 @@ module AspectGlobalHelper
       aspect_membership_ids[a.id] = record.id
     end
 
-    button_class = selected_aspects.size>0 ? "green" : "btn-default"
+    button_class = selected_aspects.size > 0 ? "btn-success" : "btn-default"
     button_class << case size
       when "small"
         " btn-small"

app/helpers/invitation_codes_helper.rb

@@ -6,13 +6,13 @@ module InvitationCodesHelper
   end
 
   def invite_link(invite_code)
-    text_field_tag :invite_code, invite_code_url(invite_code), :readonly => true
+    text_field_tag :invite_code, invite_code_url(invite_code), class: "form-control", readonly: true
   end
 
   def invited_by_message
     inviter = current_user.invited_by
     if inviter.present?
-      contact = current_user.contact_for(inviter.person) || Contact.new 
+      contact = current_user.contact_for(inviter.person) || Contact.new
       render :partial => 'people/add_contact', :locals => {:inviter => inviter.person, :contact => contact}
     end
   end

app/helpers/people_helper.rb

@@ -32,7 +32,8 @@ module PeopleHelper
   end
 
   def person_image_tag(person, size = :thumb_small)
-    image_tag(person.profile.image_url(size), :alt => person.name, :class => 'avatar', :title => person.name, 'data-person_id' => person.id)
+    image_tag(person.profile.image_url(size), alt: person.name, class: "avatar img-responsive center-block",
+              title: person.name, "data-person_id" => person.id)
   end
 
   def person_image_link(person, opts={})

app/views/admins/_user_entry.haml

@@ -3,11 +3,11 @@
   %div.pull-left
     - if user.person
       %span.media-object
-        = person_image_tag(user.person)
+        = person_image_tag(user.person, size: :thumb_small)
 
   %div.media-body.row
     %div.pull-right
-      %span.label
+      %span.label.label-default
         = t('.id')
         = user.id
       %span.label.label-info
@@ -18,20 +18,20 @@
       = user.person.name if user.person
 
     %div.pull-right
-      %ul.unstyled.text-right.actions
-        %li= link_to t('admins.user_search.view_profile'), person_path(user.person), class: 'btn btn-mini'
-        %li= link_to t('admins.user_search.add_invites'), add_invites_path(user.invitation_code), class: 'btn btn-info btn-mini'
+      .unstyled.text-right.actions
+        = link_to t('admins.user_search.view_profile'), person_path(user.person), class: 'btn btn-default btn-block btn-xs'
+        = link_to t('admins.user_search.add_invites'), add_invites_path(user.invitation_code), class: 'btn btn-info btn-block btn-xs'
         - unless user.person.closed_account
-          %li= link_to t('admins.user_search.close_account'), admin_close_account_path(user), method: :post, data: { confirm: t('admins.user_search.are_you_sure') }, class: 'btn btn-danger btn-mini'
+          = link_to t('admins.user_search.close_account'), admin_close_account_path(user), method: :post, data: { confirm: t('admins.user_search.are_you_sure') }, class: 'btn btn-danger btn-block btn-xs'
 
         - unless user.closed_account?
           - unless user.access_locked?
-            %li= link_to t('admins.user_search.lock_account'), admin_lock_account_path(user), method: :post, data: { confirm: t('admins.user_search.are_you_sure_lock_account') }, class: 'btn btn-danger btn-mini'
+            = link_to t('admins.user_search.lock_account'), admin_lock_account_path(user), method: :post, data: { confirm: t('admins.user_search.are_you_sure_lock_account') }, class: 'btn btn-danger btn-block btn-xs'
           - else
-            %li= link_to t('admins.user_search.unlock_account'), admin_unlock_account_path(user), method: :post, data: { confirm: t('admins.user_search.are_you_sure_unlock_account') }, class: 'btn btn-danger btn-mini'
-	  
+            = link_to t('admins.user_search.unlock_account'), admin_unlock_account_path(user), method: :post, data: { confirm: t('admins.user_search.are_you_sure_unlock_account') }, class: 'btn btn-danger btn-block btn-xs'
+
     %div.row
-      %div.span5
+      %div.col-md-5
         %dl.dl-horizontal
           %dt= t('username')
           %dd= user.username
@@ -47,15 +47,15 @@
           %dt= t('.account_closed')
           %dd
             - if user.person.closed_account
-              %span.badge.badge-warning= t('.yes')
+              %span.label.label-warning= t('.yes')
             - else
-              %span.badge.badge-success= t('.no')
+              %span.label.label-success= t('.no')
           %dt= t('.nsfw')
           %dd
             - if user.person.profile.nsfw
-              %span.badge.badge-warning= t('.yes')
+              %span.label.label-warning= t('.yes')
             - else
-              %span.badge.badge-success= t('.no')
+              %span.label.label-success= t('.no')
 
         %h4= t('layouts.header.profile')
 

app/views/admins/correlations.haml

@@ -3,7 +3,7 @@
     = render :partial => 'admins/admin_bar'
 
   %div.row
-    %div.span12
+    %div.col-md-12
       %h1
         = t('.correlations_count')
       %ul

app/views/admins/stats.html.haml

@@ -34,7 +34,7 @@
       - if name == :users
         - name = t('.users', :count => model[:yesterday])
 
-      .span3
+      .col-md-3
         %h2{:style => 'font-weight:bold;'}
           = name.to_s
         %h4
@@ -43,12 +43,12 @@
             = "(#{model[:change]}%)"
 
   %div.row
-    %div.span12
+    %div.col-md-12
       %p.alert.alert-info.text-center
         != t('.current_segment', :post_yest => @posts[:yesterday]/@user_count.to_f, :post_day => @posts[:day_before]/@user_count.to_f)
 
   %div.row
-    %div.span12
+    %div.col-md-12
       %h3= t('.50_most')
       %ul
       - @popular_tags.each do |name,count|

app/views/admins/user_search.html.haml

@@ -3,47 +3,56 @@
     = render :partial => 'admins/admin_bar'
 
   %div.row
-    %div.user_search.span9
+    %div.user_search.col-md-8
       %h3= t('admins.admin_bar.user_search')
       = form_for @search, url: {action: 'user_search'}, html: {method: :get, class: 'form-horizontal'} do |f|
-        %div.control-group
-          = f.label :username, t('username'), class: 'control-label'
-          %div.controls
-            = f.text_field :username
+        %div.form-group
+          = f.label :username, t('username'), class: 'col-sm-2 control-label'
+          %div.col-sm-10
+            = f.text_field :username, class: "form-control"
 
-        %div.control-group
-          = f.label :email, t('email'), class: 'control-label'
-          %div.controls
-            = f.text_field :email
+        %div.form-group
+          = f.label :email, t('email'), class: 'col-sm-2 control-label'
+          %div.col-sm-10
+            = f.text_field :email, class: "form-control"
 
-        %div.control-group
-          = f.label :guid, t('admins.user_entry.guid'), class: 'control-label'
-          %div.controls
-            = f.text_field :guid
+        %div.form-group
+          = f.label :guid, t('admins.user_entry.guid'), class: 'col-sm-2 control-label'
+          %div.col-sm-10
+            = f.text_field :guid, class: "form-control"
 
-        %div.control-group
-          %div.controls
+        %div.form-group
+          %div.col-sm-offset-2.col-sm-10
             = f.label :under13 do
               = f.check_box :under13
               = t(".under_13")
-            = submit_tag t("admins.stats.go"), class: "btn btn-primary"
+        %div.form-group
+          %div.clearfix.col-sm-12
+            = submit_tag t("admins.stats.go"), class: "btn btn-primary pull-right"
 
-    %div.more_invites.span3
+    %div.more_invites.col-md-4
       %h3= t("shared.invitations.invites")
+      #add-invites-section.clearfix
+        != t(".you_currently", count: current_user.invitation_code.count,
+            link: link_to(t(".add_invites"), add_invites_path(current_user.invitation_code),
+            class: "btn btn-link pull-right"))
 
-      != t(".you_currently", count: current_user.invitation_code.count, link: link_to(t(".add_invites"), add_invites_path(current_user.invitation_code)))
-
-      = form_tag "admin_inviter", method: :get do
-        = t(".email_to")
-        = text_field_tag "identifier"
-        = submit_tag t("services.remote_friend.invite"), class: "btn btn-default"
+      = form_tag "admin_inviter", method: :get, class: "form-horizontal" do
+        .form-group
+          %label.col-sm-4.control-label
+            = t(".email_to")
+          .col-sm-8
+            = text_field_tag "identifier", nil, class: "form-control"
+        .form-group
+          .clearfix.col-md-12
+            = submit_tag t("services.remote_friend.invite"), class: "btn btn-default pull-right"
 
   %div.row
-    %div.span12
+    %div.col-md-12
       %div.alert.alert-info.text-center= t('.users', :count => @users.count)
 
   %div.row
-    %div.users.span12
+    %div.users.col-md-12
       %ul.media-list
         - @users.each do |user|
           = render partial: 'user_entry', locals: { user: user }

app/views/aspect_memberships/_aspect_membership_dropdown.haml

@@ -14,18 +14,17 @@
       %li.aspect_selector{ :class => ('selected' if aspect_membership_ids[aspect.id].present?), 'data-aspect_id' => aspect.id, 'data-membership_id' => aspect_membership_ids[aspect.id], :tabindex => '0' }
         %a
           %span.status_indicator
-            %i.icon-ok
+            %i.glyphicon.glyphicon-ok
             %i.icon-refresh
           %span.text
             = aspect.name
 
-    - if (dropdown_may_create_new_aspect && defined?(person) && person)
+    - if dropdown_may_create_new_aspect && defined?(person) && person
       %li.divider
-      %li.newItem
-        .add_aspect
-          %a{ href: "#" }
-            = t("contacts.index.add_a_new_aspect")
+      %li.newItem.add_aspect
+        %a{ href: "#", data: { toggle: "modal", target: "#newAspectModal" }}
+          = t("contacts.index.add_a_new_aspect")
 
-  - if (dropdown_may_create_new_aspect && defined?(person) && person)
+  - if dropdown_may_create_new_aspect && defined?(person) && person
     .newAspectContainer
       -# JS

app/views/aspect_memberships/_aspect_membership_dropdown.mobile.haml

@@ -1,13 +1,13 @@
 %div
-  %select{:name => 'user_aspects', :class => 'user_aspects', 'data-person-id' => @person.id}
-    %option{:value => 'list_cover', :class => 'list_cover', :disabled => 'true', :selected => 'true'}
+  %select{name: 'user_aspects', class: 'user_aspects form-control', 'data-person-id' => @person.id}
+    %option{value: 'list_cover', class: 'list_cover', disabled: 'true', selected: 'true'}
       = t("add_contact")
     - contact = current_user.contact_for(@person)
     - current_user.aspects.each do |aspect|
       - if contact.try(:in_aspect?, aspect)
-        - membership_id = contact.aspect_memberships.where(:aspect_id => aspect.id).limit(1).pluck(:id).first
-        %option{:value => aspect.id, 'data-name' => aspect.name, 'data-membership_id' => membership_id, :class => 'selected'}
+        - membership_id = contact.aspect_memberships.where(aspect_id: aspect.id).limit(1).pluck(:id).first
+        %option{value: aspect.id, 'data-name' => aspect.name, 'data-membership_id' => membership_id, class: 'selected'}
           = "✓ #{t('shared.aspect_dropdown.mobile_row_checked', name: aspect.name)}"
       - else
-        %option{:value => aspect.id, 'data-name' => aspect.name}
+        %option{value: aspect.id, 'data-name' => aspect.name}
           = "– #{t('shared.aspect_dropdown.mobile_row_unchecked', name: aspect.name)}"

app/views/comments/_comment.mobile.haml

@@ -2,18 +2,22 @@
 -#   licensed under the Affero General Public License version 3 or later.  See
 -#   the COPYRIGHT file.
 
-%li.comment{:data=>{:guid=>comment.id}, :class => ("hidden" if(defined? hidden))}
+%li.comment{data:{guid:comment.id}, class: ("hidden" if(defined? hidden))}
   .content
-    .remove_comment
-      .right
-        - if user_signed_in? && comment.author == current_user.person
-          = link_to(image_tag("mobile/deletelabel.png"), comment_path(comment), method: :delete, data: { confirm: "#{t('are_you_sure')}" }, class: "remove")
-    .from
-      = person_image_link(comment.author)
-      = person_link(comment.author)
-      .info
-        %span
-          = timeago(comment.created_at ? comment.created_at : Time.now)
+    .media
+      .media-left
+        = person_image_link(comment.author, size: :thumb_small, class: "media-object")
+      .media-body
+        .from.pull-left
+          = person_link(comment.author)
+          .info
+            %span
+              = timeago(comment.created_at ? comment.created_at : Time.now)
+        .remove_comment
+          .pull-right
+            - if user_signed_in? && comment.author == current_user.person
+              = link_to(raw("<i class='entypo trash'></i>"), comment_path(comment), method: :delete,
+                          data: { confirm: "#{t('are_you_sure')}" }, class: "remove")
 
-    %div{:class => direction_for(comment.text)}
+    %div{class: direction_for(comment.text)}
       = comment.message.markdownified

app/views/comments/_new_comment.mobile.haml

@@ -2,9 +2,10 @@
 -#   licensed under the Affero General Public License version 3 or later.  See
 -#   the COPYRIGHT file.
 
-= form_tag( post_comments_path(post_id), :id => "new_comment_on_#{post_id}", :class => 'new_comment', :autocomplete => "off") do
+= form_tag( post_comments_path(post_id), id: "new_comment_on_#{post_id}", class: 'new_comment', autocomplete: "off") do
   %fieldset
     .control-group
-      = hidden_field_tag :post_id,  post_id, :id => "post_id_on_#{post_id}"
-      = text_area_tag :text, nil, :class => "span12 comment_box", :id => "comment_text_on_#{post_id}", :placeholder => t('.comment'), :autofocus => true
-      = submit_tag t('.comment'), :id => "comment_submit_#{post_id}", 'data-disable-with' => t('.commenting'), :class => "btn primary"
+      = hidden_field_tag :post_id,  post_id, id: "post_id_on_#{post_id}"
+      = text_area_tag :text, nil, class: "col-md-12 comment_box form-control form-group", id: "comment_text_on_#{post_id}", placeholder: t('.comment'), autofocus: true
+      = submit_tag t('.comment'), id: "comment_submit_#{post_id}", 'data-disable-with' => t('.commenting'), class: "btn btn-primary pull-right"
+      .clearfix

app/views/contacts/_aspect_listings.haml

@@ -1,34 +1,28 @@
 #aspect_nav
-  %ul.nav.nav-tabs.nav-stacked.synced
-    %li.all_contacts{:class => ("active" if params["set"] == "all")}
-      %a{:href => contacts_path(:set => "all")}
-        = t('contacts.index.all_contacts')
-        .badge.badge-default.pull-right
-          = all_contacts_count
+  %ul.list-group.synced.ui-sortable
+    %a.list-group-item.ui-sortable-handle.all_contacts{class: ("active" if params["set"] == "all"), href: contacts_path(set: "all")}
+      = t('contacts.index.all_contacts')
+      .badge.badge-default.pull-right
+        = all_contacts_count
 
-    %li.all_aspects{:class => ("active" if !params["set"] && !params["a_id"] && !@spotlight)}
-      %a{:href => contacts_path}
-        = t('contacts.index.my_contacts')
-        .badge.badge-default.pull-right
-          = my_contacts_count
+    %a.list-group-item.ui-sortable-handle.all_aspects{class: ("active" if !params["set"] && !params["a_id"] && !@spotlight), href: contacts_path}
+      = t('contacts.index.my_contacts')
+      .badge.badge-default.pull-right
+        = my_contacts_count
 
     - all_aspects.each do |aspect|
-      %li.aspect{:data => {:aspect_id => aspect.id}, :class => ("active" if params["a_id"].to_i == aspect.id)}
-        %a{:href => contacts_path(:a_id => aspect.id)}
-          .badge.badge-default.pull-right
-            = aspect.contacts.size
-          .name
-            = aspect
-
-    %li.new_aspect
-      %a{ "data-toggle" => "modal", "data-target" => "#newAspectModal", href: "#"}
-        = t("aspects.aspect_listings.add_an_aspect")
-
-      #newAspectContainer
-        -# JS
-
-    %li.only_sharing{:class => ("active" if params["set"] == "only_sharing")}
-      %a{:href => contacts_path(:set => "only_sharing")}
-        = t('contacts.index.only_sharing_with_me')
+      %a.list-group-item.ui-sortable-handle.aspect{data: {aspect_id: aspect.id}, class: ("active" if params["a_id"].to_i == aspect.id), href: contacts_path(a_id: aspect.id)}
         .badge.badge-default.pull-right
-          = only_sharing_count
+          = aspect.contacts.size
+        .name
+          = aspect
+
+    %a.list-group-item.ui-sortable-handle.new_aspect{ data: { toggle: "modal", target: "#newAspectModal" }, href: "#"}
+      = t('aspects.aspect_listings.add_an_aspect')
+    #newAspectContainer
+      -# JS
+
+    %a.list-group-item.ui-sortable-handle.only_sharing{ class: ("active" if params["set"] == "only_sharing"), href: contacts_path(set: "only_sharing")}
+      = t('contacts.index.only_sharing_with_me')
+      .badge.badge-default.pull-right
+        = only_sharing_count

app/views/contacts/_header.html.haml

@@ -6,30 +6,30 @@
 
       = link_to aspect_toggle_contact_visibility_path(@aspect), id: "contacts_visibility_toggle", class: "contacts_button", method: :put, remote: true do
         -if @aspect.contacts_visible?
-          %i.entypo.lock-open.contacts-header-icon{:title => t('aspects.edit.aspect_list_is_visible')}
+          %i.entypo.lock-open.contacts-header-icon{title: t('aspects.edit.aspect_list_is_visible')}
         -else
-          %i.entypo.lock.contacts-header-icon{:title => t('aspects.edit.aspect_list_is_not_visible')}
+          %i.entypo.lock.contacts-header-icon{title: t('aspects.edit.aspect_list_is_not_visible')}
 
       -if AppConfig.chat.enabled?
         = link_to aspect_toggle_chat_privilege_path(@aspect), id: "chat_privilege_toggle", class: "contacts_button", method: :put, remote: true do
           -if @aspect.chat_enabled?
-            %i.entypo.chat.enabled.contacts-header-icon{:title => t('aspects.edit.aspect_chat_is_enabled')}
+            %i.entypo.chat.enabled.contacts-header-icon{title: t('aspects.edit.aspect_chat_is_enabled')}
           -else
-            %i.entypo.chat.contacts-header-icon{:title => t('aspects.edit.aspect_chat_is_not_enabled')}
+            %i.entypo.chat.contacts-header-icon{title: t('aspects.edit.aspect_chat_is_not_enabled')}
 
       = link_to @aspect, method: "delete", data: { confirm: t('aspects.edit.confirm_remove_aspect') }, class: 'delete contacts_button', id: 'delete_aspect' do
-        %i.entypo.trash.contacts-header-icon{:title => t('delete')}
+        %i.entypo.trash.contacts-header-icon{title: t('delete')}
     .pull-right
-      = search_field_tag :contact_search, "", id: "contact_list_search", class: "search-query",  placeholder: t('contacts.index.user_search')
+      = search_field_tag :contact_search, "", id: "contact_list_search", class: "search-query form-control",  placeholder: t('contacts.index.user_search')
     %h3
       %span#aspect_name
         = @aspect.name
       %span#change_aspect_name.contacts_button
-        %i.entypo.pencil.contacts-header-icon{:title => t('aspects.edit.rename')}
+        %i.entypo.pencil.contacts-header-icon{title: t('aspects.edit.rename')}
     #aspect_name_form
-      = form_for @aspect, :remote => true do |aspect|
-        = aspect.text_field :name, :maxlength => 20
-        = aspect.submit t('aspects.edit.update'), 'data-disable-with' => t('aspects.edit.updating'), :class => "btn"
+      = form_for @aspect, remote: true, html: { class: "form-inline edit_aspect"} do |aspect|
+        = aspect.text_field :name, class: "form-control", :maxlength => 20
+        = aspect.submit t('aspects.edit.update'), 'data-disable-with' => t('aspects.edit.updating'), class: "btn btn-default"
 
   - else
     %h3

app/views/contacts/_sidebar.html.haml

@@ -6,9 +6,15 @@
   .text-center.spotlight
     = link_to t("contacts.spotlight.community_spotlight"), community_spotlight_path, class: "btn btn-link"
 .text-center
-  .btn.btn-link{ "data-toggle" => "modal", "data-target" => "#invitationsModal"}
+  #invitations-button.btn.btn-link{ "data-toggle" => "modal" }
     = t("invitations.new.invite_someone_to_join")
   = render "shared/modal",
       path: new_user_invitation_path,
       id: "invitationsModal",
       title: t("invitations.new.invite_someone_to_join")
+
+-# This will have to be extracte in a JS view
+:javascript
+  $("#invitations-button").click(function(){
+    app.helpers.showModal("#invitationsModal");
+  });

app/views/contacts/index.html.haml

@@ -2,11 +2,11 @@
   = t('.title')
 
 .container-fluid#contacts_container
-  .row-fluid
-    .span3
+  .row
+    .col-md-3
       = render 'contacts/sidebar'
 
-    .span9
+    .col-md-9
       #people_stream.stream.contacts
         = render 'contacts/header'
 
@@ -25,7 +25,7 @@
               != t('.no_contacts_message',
                    :community_spotlight => link_to(t('.community_spotlight'), community_spotlight_path))
             %p
-              .btn.btn-link{ 'data-toggle' => 'modal', 'data-target' => '#invitationsModal'}
+              .btn.btn-link{ 'data-toggle' => 'modal' }
                 = t('invitations.new.invite_someone_to_join')
 
 -if @aspect