diff --git a/Changelog.md b/Changelog.md index ac065dd29..13d706c9e 100644 --- a/Changelog.md +++ b/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) diff --git a/Gemfile b/Gemfile index 8ee81010b..ce9880224 100644 --- a/Gemfile +++ b/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" diff --git a/Gemfile.lock b/Gemfile.lock index bb5fe80bc..dbf214036 100644 --- a/Gemfile.lock +++ b/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) diff --git a/app/assets/images/ajax-loader.gif b/app/assets/images/ajax-loader.gif deleted file mode 100644 index e40f19a28..000000000 Binary files a/app/assets/images/ajax-loader.gif and /dev/null differ diff --git a/app/assets/images/mobile/deletelabel.png b/app/assets/images/mobile/deletelabel.png deleted file mode 100644 index b3e53ee3a..000000000 Binary files a/app/assets/images/mobile/deletelabel.png and /dev/null differ diff --git a/app/assets/images/static-loader.png b/app/assets/images/static-loader.png deleted file mode 100644 index 1b3709935..000000000 Binary files a/app/assets/images/static-loader.png and /dev/null differ diff --git a/app/assets/javascripts/app/app.js b/app/assets/javascripts/app/app.js index de6913f21..cad4f3c0f 100644 --- a/app/assets/javascripts/app/app.js +++ b/app/assets/javascripts/app/app.js @@ -127,7 +127,7 @@ var app = { $("a.disabled").click(function(event) { event.preventDefault(); }); - }, + } }; $(function() { diff --git a/app/assets/javascripts/app/helpers/handlebars-helpers.js b/app/assets/javascripts/app/helpers/handlebars-helpers.js index 1862dc11b..36614780e 100644 --- a/app/assets/javascripts/app/helpers/handlebars-helpers.js +++ b/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('<%= title %>')({ - 'src': avatar[size], - 'img_class': imageClass, - 'title': _.escape(name) + return _.template("\" class=\"<%= imageClass %>\" " + + "title=\"<%= title %>\" alt=\"<%= title %>\" />")({ + src: avatar[size], + imageClass: imageClass + " avatar img-responsive center-block", + title: _.escape(name) }); }); diff --git a/app/assets/javascripts/app/helpers/modal_helper.js b/app/assets/javascripts/app/helpers/modal_helper.js new file mode 100644 index 000000000..77e84034e --- /dev/null +++ b/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(); + }); + }; +})(); diff --git a/app/assets/javascripts/app/pages/contacts.js b/app/assets/javascripts/app/pages/contacts.js index 782120b22..a0d01c8e6 100644 --- a/app/assets/javascripts/app/pages/contacts.js +++ b/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" }) }); diff --git a/app/assets/javascripts/app/router.js b/app/assets/javascripts/app/router.js index 8cefd3f1a..0a9958bcf 100644 --- a/app/assets/javascripts/app/router.js +++ b/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") }); }); } }); diff --git a/app/assets/javascripts/app/views/aspect_create_view.js b/app/assets/javascripts/app/views/aspect_create_view.js index 4ef77c808..0ec50afa2 100644 --- a/app/assets/javascripts/app/views/aspect_create_view.js +++ b/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) { diff --git a/app/assets/javascripts/app/views/aspect_membership_view.js b/app/assets/javascripts/app/views/aspect_membership_view.js index 4d8d52367..e15d654a4 100644 --- a/app/assets/javascripts/app/views/aspect_membership_view.js +++ b/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 diff --git a/app/assets/javascripts/app/views/aspects_dropdown_view.js b/app/assets/javascripts/app/views/aspects_dropdown_view.js index 70e446704..ae9d7d897 100644 --- a/app/assets/javascripts/app/views/aspects_dropdown_view.js +++ b/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"); diff --git a/app/assets/javascripts/app/views/bookmarklet_view.js b/app/assets/javascripts/app/views/bookmarklet_view.js index 71b505edd..c85ffdf7c 100644 --- a/app/assets/javascripts/app/views/bookmarklet_view.js +++ b/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 diff --git a/app/assets/javascripts/app/views/location_view.js b/app/assets/javascripts/app/views/location_view.js index 0fe6be15d..f6aedec15 100644 --- a/app/assets/javascripts/app/views/location_view.js +++ b/app/assets/javascripts/app/views/location_view.js @@ -10,18 +10,24 @@ app.views.Location = Backbone.View.extend({ }, render: function(){ - $(this.el).append('ajax-loader'); + $("", { 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(''); - $('#location_coords').val(latlng.latitude + "," + latlng.longitude); + $(element).empty(); + $("", + { id: "location_address", + value: address, + type: "text", + class: "input-block-level form-control" + }).appendTo($(element)); + + $("#location_coords").val(latlng.latitude + "," + latlng.longitude); }); - }, + } }); // @license-end - diff --git a/app/assets/javascripts/app/views/notification_dropdown_view.js b/app/assets/javascripts/app/views/notification_dropdown_view.js index 36de9c954..3b373a169 100644 --- a/app/assets/javascripts/app/views/notification_dropdown_view.js +++ b/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); }); }); diff --git a/app/assets/javascripts/app/views/notifications_view.js b/app/assets/javascripts/app/views/notifications_view.js index 808ce6749..583c8ce0f 100644 --- a/app/assets/javascripts/app/views/notifications_view.js +++ b/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"); } } }); diff --git a/app/assets/javascripts/app/views/profile_header_view.js b/app/assets/javascripts/app/views/profile_header_view.js index 7a460e182..322f81bf8 100644 --- a/app/assets/javascripts/app/views/profile_header_view.js +++ b/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'); diff --git a/app/assets/javascripts/app/views/publisher/getting_started_view.js b/app/assets/javascripts/app/views/publisher/getting_started_view.js index 6d36a83a7..25b1dacfd 100644 --- a/app/assets/javascripts/app/views/publisher/getting_started_view.js +++ b/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); diff --git a/app/assets/javascripts/app/views/publisher/uploader_view.js b/app/assets/javascripts/app/views/publisher/uploader_view.js index 00580f57a..1e99b3177 100644 --- a/app/assets/javascripts/app/views/publisher/uploader_view.js +++ b/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 = $('
'); - this.publisher.el_wrapper.before(this.el_info); + this.info = $("
"); + 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( - '
  • ' + - '
    ' + - ' '+ - '
  • ' + publisher.wrapperEl.addClass("with_attachments"); + publisher.photozoneEl.append( + "
  • " + + "
    " + + " \"\""+ + "
  • " ); }, 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( - '
    ' + - Diaspora.I18n.t('photo_uploader.error', {file: fileName}) + - '
    ' + this.trigger("change"); + this.info.text(Diaspora.I18n.t("photo_uploader.error", {file: fileName})); + this.publisher.wrapperEl.find("#photodropzone_container").first().after( + "
    " + + Diaspora.I18n.t("photo_uploader.error", {file: fileName}) + + "
    " ); } }, @@ -93,58 +93,58 @@ app.views.PublisherUploader = Backbone.View.extend({ var publisher = this.publisher; // add form input element - publisher.$('.content_creation form').append( - '' + publisher.$(".content_creation form").append( + "" ); // 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( - '
    '+ - '
    ' + "
    "+ + "
    " ) - .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"); }); } }); diff --git a/app/assets/javascripts/app/views/publisher_view.js b/app/assets/javascripts/app/views/publisher_view.js index fece5dd08..d4ef03085 100644 --- a/app/assets/javascripts/app/views/publisher_view.js +++ b/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('
    '); - this.el_wrapper.addClass('with_location'); + if($("#location").length === 0){ + $("#location_container").append("
    "); + 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; diff --git a/app/assets/javascripts/app/views/tag_following_action_view.js b/app/assets/javascripts/app/views/tag_following_action_view.js index 37d95ff2a..e62754c0c 100644 --- a/app/assets/javascripts/app/views/tag_following_action_view.js +++ b/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} ) ); }, diff --git a/app/assets/javascripts/main.js b/app/assets/javascripts/main.js index 58f9db688..deaf9217a 100644 --- a/app/assets/javascripts/main.js +++ b/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 diff --git a/app/assets/javascripts/view.js b/app/assets/javascripts/view.js index 508da666d..32c14d325 100644 --- a/app/assets/javascripts/view.js +++ b/app/assets/javascripts/view.js @@ -37,6 +37,7 @@ var View = { Diaspora.page.directionDetector.updateBinds(); }); + $("a.new_aspect").click(function(){ $("input#aspect_name").focus(); }); diff --git a/app/assets/javascripts/widgets/infinite-scroll.js b/app/assets/javascripts/widgets/infinite-scroll.js index d3fa5be01..4e0c745b9 100644 --- a/app/assets/javascripts/widgets/infinite-scroll.js +++ b/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", diff --git a/app/assets/stylesheets/admin.scss b/app/assets/stylesheets/admin.scss index 2084f5e3d..f8caef389 100644 --- a/app/assets/stylesheets/admin.scss +++ b/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'; diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss index 3638522c2..abff7dda9 100644 --- a/app/assets/stylesheets/application.scss +++ b/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'; diff --git a/app/assets/stylesheets/aspects.scss b/app/assets/stylesheets/aspects.scss index 3c9b1ac22..1295f6cb5 100644 --- a/app/assets/stylesheets/aspects.scss +++ b/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 { diff --git a/app/assets/stylesheets/autocomplete.scss b/app/assets/stylesheets/autocomplete.scss index c23205248..4f3394ae6 100644 --- a/app/assets/stylesheets/autocomplete.scss +++ b/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 { diff --git a/app/assets/stylesheets/bootstrap-complete.scss b/app/assets/stylesheets/bootstrap-complete.scss index 7e36e3854..8f57874aa 100644 --- a/app/assets/stylesheets/bootstrap-complete.scss +++ b/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"; diff --git a/app/assets/stylesheets/bootstrap-fix.scss b/app/assets/stylesheets/bootstrap-fix.scss deleted file mode 100644 index 47b6c0c4d..000000000 --- a/app/assets/stylesheets/bootstrap-fix.scss +++ /dev/null @@ -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; -} diff --git a/app/assets/stylesheets/bootstrap-headerfix.scss b/app/assets/stylesheets/bootstrap-headerfix.scss index 53f4919dc..792b44c6c 100644 --- a/app/assets/stylesheets/bootstrap-headerfix.scss +++ b/app/assets/stylesheets/bootstrap-headerfix.scss @@ -26,8 +26,8 @@ header { } #global_search { form { + top: -3px; input { - height: 15px; color: black; } } diff --git a/app/assets/stylesheets/bootstrap-variables.scss b/app/assets/stylesheets/bootstrap-variables.scss new file mode 100644 index 000000000..599a7303a --- /dev/null +++ b/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-bg: #fff +//** Global text color on ``. +// $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 ``, ``, and `
    `.
    +// $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 ``.
    +// $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 ``s and ``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
    +//
    +//##
    +
    +//** `` background color
    +// $input-bg:                       #fff
    +//** `` background color
    +// $input-bg-disabled:              $gray-lighter
    +
    +//** Text color for ``s
    +// $input-color:                    $gray
    +//** `` 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 ``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
    diff --git a/app/assets/stylesheets/chat.scss b/app/assets/stylesheets/chat.scss
    index 3be259038..88232bcf4 100644
    --- a/app/assets/stylesheets/chat.scss
    +++ b/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; }
     }
    diff --git a/app/assets/stylesheets/colors.scss b/app/assets/stylesheets/colors.scss
    index fdd29ec3b..272821cc7 100644
    --- a/app/assets/stylesheets/colors.scss
    +++ b/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);
    diff --git a/app/assets/stylesheets/comments.scss b/app/assets/stylesheets/comments.scss
    index d21f77fde..a56a02de9 100644
    --- a/app/assets/stylesheets/comments.scss
    +++ b/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;
       }
     }
    diff --git a/app/assets/stylesheets/contacts.scss b/app/assets/stylesheets/contacts.scss
    index 9a356689d..25044f66c 100644
    --- a/app/assets/stylesheets/contacts.scss
    +++ b/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; }
         }
    diff --git a/app/assets/stylesheets/conversations.scss b/app/assets/stylesheets/conversations.scss
    index f37a0d3c1..4e35d2b0a 100644
    --- a/app/assets/stylesheets/conversations.scss
    +++ b/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; }
     }
    +
    diff --git a/app/assets/stylesheets/entypo.scss b/app/assets/stylesheets/entypo.scss
    index a2d2a3774..50f3f8b22 100644
    --- a/app/assets/stylesheets/entypo.scss
    +++ b/app/assets/stylesheets/entypo.scss
    @@ -25,7 +25,7 @@
       }
     
       &.small {
    -    font-size: 1.2em;
    +    font-size: 1em;
       }
     
       /* main icon map */
    diff --git a/app/assets/stylesheets/facebox.scss b/app/assets/stylesheets/facebox.scss
    index 18b07f2a3..43440b475 100644
    --- a/app/assets/stylesheets/facebox.scss
    +++ b/app/assets/stylesheets/facebox.scss
    @@ -26,7 +26,7 @@
       }
     
       .tiny_text {
    -    font-size: 11px;
    +    font-size: $font-size-small;
         font-weight: normal;
       }
     }
    diff --git a/app/assets/stylesheets/getting-started.scss b/app/assets/stylesheets/getting-started.scss
    index 57b4d0a6f..372f87467 100644
    --- a/app/assets/stylesheets/getting-started.scss
    +++ b/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;
           }
         }
    diff --git a/app/assets/stylesheets/header.scss b/app/assets/stylesheets/header.scss
    index 7e4757ae8..e51398ba9 100644
    --- a/app/assets/stylesheets/header.scss
    +++ b/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; }
     
    diff --git a/app/assets/stylesheets/hovercard.scss b/app/assets/stylesheets/hovercard.scss
    index eb5ae9518..f7b69b378 100644
    --- a/app/assets/stylesheets/hovercard.scss
    +++ b/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;
     
    diff --git a/app/assets/stylesheets/invitations.scss b/app/assets/stylesheets/invitations.scss
    index 366b0caf4..a78bed09f 100644
    --- a/app/assets/stylesheets/invitations.scss
    +++ b/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;
    diff --git a/app/assets/stylesheets/leftnavbar.scss b/app/assets/stylesheets/leftnavbar.scss
    index 6bee6e8d6..a055f34bb 100644
    --- a/app/assets/stylesheets/leftnavbar.scss
    +++ b/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%;
         }
    diff --git a/app/assets/stylesheets/mentions.scss b/app/assets/stylesheets/mentions.scss
    index 6647170ee..fc25ebf28 100644
    --- a/app/assets/stylesheets/mentions.scss
    +++ b/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;
    diff --git a/app/assets/stylesheets/mobile/header.scss b/app/assets/stylesheets/mobile/header.scss
    index 3c887aa8d..6a72b0e75 100644
    --- a/app/assets/stylesheets/mobile/header.scss
    +++ b/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%);
     }
    diff --git a/app/assets/stylesheets/mobile/mobile.scss b/app/assets/stylesheets/mobile/mobile.scss
    index d6d056beb..925b45410 100644
    --- a/app/assets/stylesheets/mobile/mobile.scss
    +++ b/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; }
    diff --git a/app/assets/stylesheets/new_styles/_base.scss b/app/assets/stylesheets/new_styles/_base.scss
    index 318b99484..5717a8189 100644
    --- a/app/assets/stylesheets/new_styles/_base.scss
    +++ b/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;
       }
     }
     
    diff --git a/app/assets/stylesheets/new_styles/_buttons.scss b/app/assets/stylesheets/new_styles/_buttons.scss
    deleted file mode 100644
    index 732f98af3..000000000
    --- a/app/assets/stylesheets/new_styles/_buttons.scss
    +++ /dev/null
    @@ -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%); }
    diff --git a/app/assets/stylesheets/new_styles/_forms.scss b/app/assets/stylesheets/new_styles/_forms.scss
    index 7e4203b84..d6d07257c 100644
    --- a/app/assets/stylesheets/new_styles/_forms.scss
    +++ b/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;
    diff --git a/app/assets/stylesheets/new_styles/_interactions.scss b/app/assets/stylesheets/new_styles/_interactions.scss
    index 96c147eaf..e221496e1 100644
    --- a/app/assets/stylesheets/new_styles/_interactions.scss
    +++ b/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 {
    diff --git a/app/assets/stylesheets/new_styles/_navs.scss b/app/assets/stylesheets/new_styles/_navs.scss
    deleted file mode 100644
    index d93871c92..000000000
    --- a/app/assets/stylesheets/new_styles/_navs.scss
    +++ /dev/null
    @@ -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; }
    -  }
    -}
    diff --git a/app/assets/stylesheets/new_styles/_poll.scss b/app/assets/stylesheets/new_styles/_poll.scss
    index c7eba90ce..2b98d3959 100644
    --- a/app/assets/stylesheets/new_styles/_poll.scss
    +++ b/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] {
    diff --git a/app/assets/stylesheets/new_styles/_registration.scss b/app/assets/stylesheets/new_styles/_registration.scss
    index 7d006d187..170bab40d 100644
    --- a/app/assets/stylesheets/new_styles/_registration.scss
    +++ b/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;
    diff --git a/app/assets/stylesheets/new_styles/_settings.scss b/app/assets/stylesheets/new_styles/_settings.scss
    index 88e181e88..2220ba114 100644
    --- a/app/assets/stylesheets/new_styles/_settings.scss
    +++ b/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%;
    +}
    diff --git a/app/assets/stylesheets/new_styles/_spinner.scss b/app/assets/stylesheets/new_styles/_spinner.scss
    index 49086f97e..2876c8eae 100644
    --- a/app/assets/stylesheets/new_styles/_spinner.scss
    +++ b/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;
    diff --git a/app/assets/stylesheets/new_styles/_statistics.scss b/app/assets/stylesheets/new_styles/_statistics.scss
    index 30a9a871b..26bb1f9b7 100644
    --- a/app/assets/stylesheets/new_styles/_statistics.scss
    +++ b/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;
         }
       }
    -}
    \ No newline at end of file
    +}
    diff --git a/app/assets/stylesheets/new_styles/_typography.scss b/app/assets/stylesheets/new_styles/_typography.scss
    index d56f074f0..dca3ee64d 100644
    --- a/app/assets/stylesheets/new_styles/_typography.scss
    +++ b/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;
    -}
    diff --git a/app/assets/stylesheets/notifications.scss b/app/assets/stylesheets/notifications.scss
    index d784105c7..099bcc7ca 100644
    --- a/app/assets/stylesheets/notifications.scss
    +++ b/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; }
    +  }
     }
    diff --git a/app/assets/stylesheets/people.scss b/app/assets/stylesheets/people.scss
    index c217dcca4..750e3a01c 100644
    --- a/app/assets/stylesheets/people.scss
    +++ b/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; }
       }
     }
    diff --git a/app/assets/stylesheets/profile.scss b/app/assets/stylesheets/profile.scss
    index 7c868ff55..a598b4bf9 100644
    --- a/app/assets/stylesheets/profile.scss
    +++ b/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; }
    +  }
    +}
    diff --git a/app/assets/stylesheets/publisher.scss b/app/assets/stylesheets/publisher.scss
    index 8df3350b3..262611b63 100644
    --- a/app/assets/stylesheets/publisher.scss
    +++ b/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;
         }
       }
     }
    diff --git a/app/assets/stylesheets/sidebar.scss b/app/assets/stylesheets/sidebar.scss
    index 28d012ceb..ea9d1378d 100644
    --- a/app/assets/stylesheets/sidebar.scss
    +++ b/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; }
         }
       }
     }
    diff --git a/app/assets/stylesheets/single-post-view.scss b/app/assets/stylesheets/single-post-view.scss
    index 7ddcb9576..ed232ea84 100644
    --- a/app/assets/stylesheets/single-post-view.scss
    +++ b/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; }
       }
    +
     }
    diff --git a/app/assets/stylesheets/sizes.scss b/app/assets/stylesheets/sizes.scss
    deleted file mode 100644
    index 3679382d4..000000000
    --- a/app/assets/stylesheets/sizes.scss
    +++ /dev/null
    @@ -1,2 +0,0 @@
    -$font-size-text: 13px;
    -$line-height: 20px;
    diff --git a/app/assets/stylesheets/stream_element.scss b/app/assets/stylesheets/stream_element.scss
    index 0041de0da..fc7aa109d 100644
    --- a/app/assets/stylesheets/stream_element.scss
    +++ b/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;
       }
     }
    diff --git a/app/assets/stylesheets/tag.scss b/app/assets/stylesheets/tag.scss
    index aa49a815d..fc4098d57 100644
    --- a/app/assets/stylesheets/tag.scss
    +++ b/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%;
    -      }    
    +      }
         }
       }
     }
    diff --git a/app/assets/stylesheets/terms.scss b/app/assets/stylesheets/terms.scss
    new file mode 100644
    index 000000000..94eec299c
    --- /dev/null
    +++ b/app/assets/stylesheets/terms.scss
    @@ -0,0 +1,3 @@
    +#terms {
    + .nav-tabs { margin-top: 40px; }
    +}
    diff --git a/app/assets/stylesheets/vendor/autoSuggest.css b/app/assets/stylesheets/vendor/autoSuggest.css
    index 760365e3c..cf87b15e1 100644
    --- a/app/assets/stylesheets/vendor/autoSuggest.css
    +++ b/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;
     }
    diff --git a/app/assets/templates/aspect_create_modal_tpl.jst.hbs b/app/assets/templates/aspect_create_modal_tpl.jst.hbs
    index bcb326553..ad131f838 100644
    --- a/app/assets/templates/aspect_create_modal_tpl.jst.hbs
    +++ b/app/assets/templates/aspect_create_modal_tpl.jst.hbs
    @@ -1,40 +1,51 @@
    -