Merge pull request #3944 from MrZYX/modular_layouts

Modular layouts

Changelog.md

@@ -12,6 +12,8 @@
 ## Refactor
 
 * Refactor people_controller#show and photos_controller#index [#4002](https://github.com/diaspora/diaspora/issues/4002)
+* Modularize layout [#3944](https://github.com/diaspora/diaspora/pull/3944)
+* Add header to the sign up page [#3944](https://github.com/diaspora/diaspora/pull/3944)
 
 ## Features
 

app/assets/stylesheets/new_styles/_registration.scss

@@ -1,6 +1,5 @@
 #registration {
   position : absolute;
-  top : 0;
   left : 0;
   background-color : #afc652;
   min-height : 100%;
@@ -8,10 +7,6 @@
 
   color : #fff;
 
-  .container {
-    margin-top : 100px;
-  }
-
   #create-something-text {
     font-family : Roboto-Light;
     font-size : 100px;
@@ -52,3 +47,55 @@
     }
   }
 }
+
+ul#landing_nav {
+  margin: 0;
+  padding: 0;
+
+  position: absolute;
+  top: 10px;
+  right: 20px;
+
+  > li {
+    display: inline;
+    margin-right: 0.5em;
+
+    &:last-child {
+      margin-right: 0;
+    }
+
+    a {
+      color: $blue;
+
+      &.login {
+        @include border-radius(5px);
+        @include box-shadow(0,1px,1px,#666);
+
+        padding: 5px 8px;
+
+        background-color: #000;
+
+        border-top: 1px solid #000;
+
+        &:hover {
+          background-color: #222;
+        }
+      }
+    }
+
+    text-shadow: 0 1px 0 #000;
+  }
+}
+
+
+body > header {
+  @include box-shadow(0,1px,3px,rgba(0,0,0,0.9));
+
+  background-color: rgb(40,35,35);
+  background-image: image-url('header-bg.png');
+
+  z-index: 1001;
+  padding: 6px 0;
+  color: #CCC;
+  height: 26px;
+}

app/controllers/application_controller.rb

@@ -22,6 +22,8 @@ class ApplicationController < ActionController::Base
                 :tags,
                 :open_publisher
 
+  layout ->(c) { request.format == :mobile ? "application" : "centered_with_header_with_footer" }
+
   private
 
   def ensure_http_referer_is_set

app/controllers/home_controller.rb

@@ -10,16 +10,17 @@ class HomeController < ApplicationController
     elsif is_mobile_device?
       if partial_dir.join('_show.mobile.haml').exist? ||
          partial_dir.join('_show.mobile.erb').exist?
-        render :show, layout: 'post'
+        render :show
       else
         redirect_to user_session_path
       end
     elsif partial_dir.join("_show.html.haml").exist? ||
           partial_dir.join("_show.html.erb").exist?
-      render :show, layout: 'post'
+      render :show
     else
-        render file: Rails.root.join("public", "default.html"),
-               layout: 'post'
+      @css_framework = :bootstrap # Hack, port site to one framework
+      render file: Rails.root.join("public", "default.html"),
+             layout: 'application'
     end
   end
 

app/controllers/posts_controller.rb

@@ -11,7 +11,8 @@ class PostsController < ApplicationController
   before_filter :set_format_if_malformed_from_status_net, :only => :show
   before_filter :find_post, :only => [:show, :next, :previous, :interactions]
 
-  layout 'post'
+  layout 'application'
+  before_filter -> { @css_framework = :bootstrap }
 
   respond_to :html,
              :mobile,
@@ -20,7 +21,7 @@ class PostsController < ApplicationController
 
   rescue_from Diaspora::NonPublic do |exception|
     respond_to do |format|
-      format.all { render :template=>'errors/not_public', :status=>404 }
+      format.all { @css_framework = :bootstrap; render :template=>'errors/not_public', :status=>404, :layout => "application"}
     end
   end
 
@@ -30,7 +31,7 @@ class PostsController < ApplicationController
     respond_to do |format|
       format.html{ gon.post = PostPresenter.new(@post, current_user); render 'posts/show' }
       format.xml{ render :xml => @post.to_diaspora_xml }
-      format.mobile{render 'posts/show', :layout => "application"}
+      format.mobile{render 'posts/show' }
       format.json{ render :json => PostPresenter.new(@post, current_user) }
     end
   end

app/controllers/registrations_controller.rb

@@ -5,7 +5,8 @@
 class RegistrationsController < Devise::RegistrationsController
   before_filter :check_registrations_open_or_vaild_invite!, :check_valid_invite!
 
-  layout "post", :only => :new
+  layout "with_header", :only => [:new]
+  before_filter -> { @css_framework = :bootstrap }, only: [:new]
 
   def create
     @user = User.build(params[:user])

app/controllers/sessions_controller.rb

@@ -4,6 +4,7 @@
 
 class SessionsController < Devise::SessionsController
 
-  layout "post", :only => [:new]
+  layout "application", :only => [:new]
+  before_filter -> { @css_framework = :bootstrap }, only: [:new]
 
-end
+end

app/controllers/status_messages_controller.rb

@@ -11,7 +11,7 @@ class StatusMessagesController < ApplicationController
              :mobile,
              :json
 
-  layout :bookmarklet_layout, :only => :bookmarklet
+  layout 'application', only: :bookmarklet
 
   # Called when a user clicks "Mention" on a profile page
   # @param person_id [Integer] The id of the person to be mentioned
@@ -114,14 +114,4 @@ class StatusMessagesController < ApplicationController
   def remove_getting_started
     current_user.disable_getting_started
   end
-
-  # Define bookmarklet layout depending on whether
-  # user is in mobile or desktop mode
-  def bookmarklet_layout
-    if request.format == :mobile
-      'application'
-    else
-      'blank'
-    end
-  end
 end

app/controllers/streams_controller.rb

@@ -64,8 +64,8 @@ class StreamsController < ApplicationController
     end
 
     respond_with do |format|
-      format.html { render 'layouts/main_stream' }
-      format.mobile { render 'layouts/main_stream' }
+      format.html { render 'streams/main_stream' }
+      format.mobile { render 'streams/main_stream' }
       format.json { render :json => @stream.stream_posts.map {|p| LastThreeCommentsDecorator.new(PostPresenter.new(p, current_user)) }}
     end
   end

app/controllers/users_controller.rb

@@ -114,12 +114,13 @@ class UsersController < ApplicationController
   end
 
   def getting_started
-    @aspect   = :getting_started
     @user     = current_user
     @person   = @user.person
     @profile  = @user.profile
 
-    render "users/getting_started"
+    @css_framework = :bootstrap
+    @include_application_css = true #Hack for multiple CSS frameworks and having two main styles
+    render "users/getting_started", layout: "with_header_with_footer"
   end
 
   def getting_started_completed

app/views/errors/not_public.haml

@@ -10,10 +10,12 @@
 - content_for :head do
   = stylesheet_link_tag :error_pages, :media => 'all'
 
-#big-number.transparent
-  404
+- content_for :after_content do
 
-#content
-  = t('error_messages.post_not_public')
-  %br
-  = t('error_messages.login_try_again', :login_link => new_user_session_path).html_safe
+  #big-number.transparent
+    404
+
+  #content
+    = t('error_messages.post_not_public')
+    %br
+    = t('error_messages.login_try_again', :login_link => new_user_session_path).html_safe

app/views/layouts/_footer.html.haml

@@ -0,0 +1,5 @@
+%footer
+  .container
+    %ul#footer_nav
+      = render :partial =>'shared/links'
+      = image_tag 'branding/powered_by_diaspora.png', :height => "11px", :width => "145px"

app/views/layouts/_header.html.haml

@@ -2,11 +2,13 @@
 -#   licensed under the Affero General Public License version 3 or later.  See
 -#   the COPYRIGHT file.
 
-.container{:style => "position:relative;"}
-  = link_to image_tag('branding/logo_small.png', :height => "16px", :width => "161px", :style => 'position:relative;top:5px;'), root_path
+%header
+    - unless current_user
+        .container{:style => "position:relative;"}
+        = link_to image_tag('branding/logo_small.png', :height => "16px", :width => "161px", :style => 'margin-left: 10px'), root_path
 
-  %ul#landing_nav
-    %li= link_to '@joindiaspora', "http://twitter.com/joindiaspora"
-    %li= link_to 'github', "https://github.com/diaspora/diaspora"
-    %li= link_to t('.blog'), 'http://blog.joindiaspora.com/'
-    %li= link_to t('.login'), new_user_session_path, :class => 'login'
+        %ul#landing_nav
+            %li= link_to '@joindiaspora', "http://twitter.com/joindiaspora"
+            %li= link_to 'github', "https://github.com/diaspora/diaspora"
+            %li= link_to t('.blog'), 'http://blog.joindiaspora.com/'
+            %li= link_to t('.login'), new_user_session_path, :class => 'login'

app/views/layouts/application.html.haml

@@ -18,11 +18,15 @@
     %title
       = page_title yield(:page_title)
 
+    = og_site_name
     = chartbeat_head_block
     = include_mixpanel
 
-    = include_base_css_framework
-    = stylesheet_link_tag 'login', 'application', 'default'
+    = include_base_css_framework(@css_framework)
+    - if @css_framework == :bootstrap && !@include_application_css
+      = stylesheet_link_tag :default, 'new-templates', :media => 'all'
+    - else
+      = stylesheet_link_tag 'login', 'application', 'default'
 
     - if rtl?
       = stylesheet_link_tag :rtl, :media => 'all'
@@ -46,31 +50,24 @@
     = yield(:head)
     = csrf_meta_tag
 
+    - if @post.present?
+      %link{:rel => 'alternate', :type => "application/json+oembed", :href => "#{oembed_url(:url => post_url(@post))}"}
+      = og_page_specific_tags(@post)
+
     = include_gon(:camel_case => true, :namespace => :preloads)
 
   %body
     = flash_messages
 
-    %header
-      - unless current_user
-        = render 'layouts/header'
+    = yield :before_content
 
-    .container
-      - if @aspect == :getting_started
-        = yield
-      - else
-        .span-24.last
-          = yield
-
-    - unless @landing_page
-      %a{:id=>"back-to-top", :title=>"#{t('.back_to_top')}", :href=>"#"}
-        ⇧
-
-    %footer
+    - if content_for?(:container_content)
       .container
-        %ul#footer_nav
-          = render :partial =>'shared/links'
-        = image_tag 'branding/powered_by_diaspora.png', :height => "11px", :width => "145px"
+        =  yield(:container_content)
+    - else
+      = content_for?(:content) ? yield(:content) : yield
+
+    = yield :after_content
 
     = include_chartbeat
     = include_mixpanel_guid

app/views/layouts/blank.haml

@@ -1,35 +0,0 @@
--#   Copyright (c) 2010-2012, Diaspora Inc.  This file is
--#   licensed under the Affero General Public License version 3 or later.  See
--#   the COPYRIGHT file.
-
-!!!
-%html{:lang => I18n.locale.to_s, :dir => (rtl?) ? 'rtl' : 'ltr'}
-  %head
-    %meta{:charset => 'utf-8'}
-    %meta{"http-equiv"=>"Content-Type", :content=>"text/html; charset=utf-8"}
-
-    = csrf_meta_tag
-
-    %link{:rel => 'shortcut icon', :href => "#{image_path('favicon.png')}" }
-    %link{:rel => 'apple-touch-icon', :href => "#{image_path('apple-touch-icon.png')}"}
-
-    %title
-      = page_title yield(:page_title)
-
-    = include_base_css_framework
-    = stylesheet_link_tag 'application', 'default'
-    = translation_missing_warnings
-    :css
-      body { padding: 0; margin: 0; }
-
-    = jquery_include_tag
-    = javascript_include_tag :main, :templates, :home
-    = load_javascript_locales
-    = set_asset_host
-    = set_current_user_in_javascript
-
-    = yield(:head)
-
-  %body
-
-    = yield

app/views/layouts/centered_with_header_with_footer.html.haml

@@ -0,0 +1,5 @@
+- content_for :container_content do
+    .span-24.last
+        = yield
+
+= render template: "layouts/with_header_with_footer"

app/views/layouts/post.haml

@@ -1,67 +0,0 @@
--#   Copyright (c) 2010-2011, Diaspora Inc.  This file is
--#   licensed under the Affero General Public License version 3 or later.  See
--#   the COPYRIGHT file.
-
-!!!
-%html{:lang => I18n.locale.to_s, :dir => (rtl?) ? 'rtl' : 'ltr'}
-  %head
-    %meta{:charset => 'utf-8'}
-    %meta{"http-equiv"=>"Content-Type", :content=>"text/html; charset=utf-8"}
-
-    %meta{:name => "description", :content => "Diaspora*"}
-    %meta{:name => "author", :content => "Diaspora, Inc."}
-
-    %meta{:name => "HandheldFriendly", :content => "True"}
-    %meta{:name => "MobileOptimized", :content => "320"}
-    %meta{:name => "viewport", :content => "initial-scale=1, maximum-scale=1"}
-
-    %link{:rel => 'shortcut icon', :href => "#{image_path('favicon.png')}" }
-    %link{:rel => 'apple-touch-icon', :href => "#{image_path('apple-touch-icon.png')}"}
-
-    = og_site_name
-    = chartbeat_head_block
-    = include_mixpanel
-
-    %title
-      = page_title yield(:page_title)
-
-    = include_base_css_framework(:bootstrap)
-    = stylesheet_link_tag :default, 'new-templates', :media => 'all'
-
-    - if rtl?
-      = stylesheet_link_tag :rtl, :media => 'all'
-
-    = old_browser_js_support
-    <!--[if IE]>
-    = javascript_include_tag :ie
-    <![endif]-->
-
-    = jquery_include_tag
-
-    = set_current_user_in_javascript
-
-    - unless @landing_page
-      = javascript_include_tag :main, :templates
-      = load_javascript_locales
-
-    = set_asset_host
-    = translation_missing_warnings
-    = current_user_atom_tag
-
-    - if @post.present?
-      %link{:rel => 'alternate', :type => "application/json+oembed", :href => "#{oembed_url(:url => post_url(@post))}"}
-      = og_page_specific_tags(@post)
-
-    = yield(:head)
-    = csrf_meta_tag
-
-    = include_gon(:camel_case => true, :namespace => :preloads)
-
-  %body
-    = flash_messages
-    #container
-    = yield
-
-
-    = include_chartbeat
-    = include_mixpanel_guid

app/views/layouts/with_header.html.haml

@@ -0,0 +1,4 @@
+- content_for :before_content do
+    = render 'layouts/header'
+
+= render template: "layouts/application"

app/views/layouts/with_header_with_footer.html.haml

@@ -0,0 +1,4 @@
+- content_for :after_content do
+    = render 'layouts/footer'
+
+= render template: "layouts/with_header"

app/views/posts/show.html.haml

@@ -4,3 +4,6 @@
 
 - content_for :page_title do
   = post_page_title @post
+
+- content_for :content do
+  #container

app/views/status_messages/bookmarklet.html.haml

@@ -35,5 +35,7 @@
 
 - content_for(:head) do
   :css
+    body { padding:0; margin-top: 0; }
+    .container { width: auto; }
     #new_status_message_pane { margin: 1em 0 0; }
-    #new_status_message_pane h4 { margin: 0 0 0 1em; }
+    #new_status_message_pane h4 { margin: 0 0 0 1em; }

app/views/streams/main_stream.html.haml

@@ -60,3 +60,6 @@
     .content
 
   = render 'shared/right_sections'
+
+  %a{:id=>"back-to-top", :title=>"#{t('.back_to_top')}", :href=>"#"}
+    ⇧