Landing page

app/controllers/application_controller.rb

@@ -1,6 +1,6 @@
 class ApplicationController < ActionController::Base
   check_authorization :unless => :devise_controller?
-  skip_authorization_check :only => [:index, :search, :search_db, :about]
+  skip_authorization_check :only => [:landing, :index, :search, :search_db, :about]
   protect_from_forgery with: :exception
   add_flash_types :success, :warning, :danger, :info
 

app/helpers/application_helper.rb

@@ -265,5 +265,16 @@ def get_filters(design_methods)
 
     return filters
   end
+
+  def resource_name
+    :user
+  end
+
+  def resource
+    @resource ||= User.new
+  end
 
+  def devise_mapping
+    @devise_mapping ||= Devise.mappings[:user]
+  end
 end

app/views/application/_landing.html.haml

@@ -0,0 +1,121 @@
+%meta{:content => "width=device-width, initial-scale=1", :name => "viewport"}
+- if !user_signed_in?
+  .panel.panel-default.login-margin.panel-primary
+    .panel-heading
+      %h3.panel-title Register
+    .panel-body
+      = form_for(resource, :as => resource_name, :url => registration_path(resource_name)) do |f|
+        = devise_error_messages!
+        .input
+          = f.text_field :username, {:autofocus => true, :class => "form-control", :placeholder => "Username"}
+        %br/
+        .input
+          = f.text_field :first_name, {:autofocus => true, :class => "form-control", :placeholder => "First name"}
+        %br/
+        .input
+          = f.text_field :last_name, {:autofocus => true, :class => "form-control", :placeholder => "Last name"}
+        %br/
+        .input
+          = f.email_field :email, {:autofocus => true, :class => "form-control", :placeholder => "Email"}
+        %br/
+        .input
+          = f.password_field :password, { :class => "form-control", :placeholder => "Password"}
+        %br/
+        .input
+          = f.password_field :password_confirmation, { :class => "form-control", :placeholder => "Password Confirmation"}
+        %br/
+        .row
+          .col-md-12
+            .col-xs-6.col-md-8
+              = link_to "Sign in", new_session_path(resource_name)
+            .col-xs-8.col-md-4
+              = f.submit "Register", {:class=> "btn btn-default pull-right" }
+.howdoesitwork{:style=>"margin-top:15%;padding:0 10% 0 10%"}
+  %hr/
+  .h1{:style=>"text-align:center;margin-bottom:10%;"}
+    How Does it Work?
+  .col-xs6.col-md-4
+
+    .thumbnail{:style=>"height:300px;"}
+      .h3{:style=>"text-align:center"}
+        1
+        %br
+        JOIN
+      .p{:style=>"text-align:center"}
+        Join the community to find designers who share similar interests as you
+        and start building your professional network.
+  .col-xs12.col-md-4
+    .thumbnail{:style=>"height:300px;"}
+      .h3{:style=>"text-align:center"}
+        2
+        %br
+        LEARN
+      .p{:style=>"text-align:center"}
+        Browse methods and case studies to improve your design skills. Learn what to do
+        and what to not do to successfully complete your next design task.
+  .col-xs12.col-md-4
+    .thumbnail{:style=>"height:300px;"}
+      .h3{:style=>"text-align:center"}
+        3
+        %br
+        SHARE
+      .p{:style=>"text-align:center"}
+        Participate in discussions where you can post questions
+        and answers regarding various design topics.
+.getstarted{:style=>"margin-top:60%;padding:0 10% 0 10%"}
+  %hr/
+  .h2{:style=>"text-align:center; font-size:4em;margin-bottom:10%;"}
+    Get Started!
+  .col-md-6
+    %a{:href=>'/case_studies'}
+      .thumbnail{:style=>"text-align:center; font-size:3em"}
+        %span.glyphicon.glyphicon-envelope
+        %br
+        Case Studies
+  .col-md-6
+    %a{:href=>'/design_methods'}
+      .thumbnail{:style=>"text-align:center; font-size:3em"}
+        %span.glyphicon.glyphicon-envelope
+        %br
+        Design Methods
+  .col-md-12
+    %a{:href=>'/discussions'}
+      .thumbnail{:style=>"text-align:center; font-size:3em"}
+        %span.glyphicon.glyphicon-comment
+        %br
+        Discussions
+.thedxcommunity{:style=>"margin-top:60%;padding:0 10% 0 10%"}
+  %hr/
+  .h2{:style=>"text-align:center; font-size:2em;margin-bottom:10%;"}
+    The Design Exchange Community
+  .col-md-4
+    .thumbnail{:style=>"text-align:center; font-size:1em"}
+      - if User.find_by(id:1).profile_picture.present?
+        = image_tag(user.profile_picture, class: "img-responsive", :style => "padding: 5%")
+      - else
+        = image_tag("no-profile-available.jpg", class: "img-responsive" , :style => "padding: 5%", :size=>"150x150")
+      .h3
+        First Last
+      .p
+        "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
+
+
+  .col-md-4
+    .thumbnail{:style=>"text-align:center; font-size:1em"}
+      = image_tag("no-profile-available.jpg", class: "img-responsive" , :style => "padding: 5%", :size=>"150x150")
+      .h3
+        First Last
+      .p
+        "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
+
+
+  .col-md-4
+    .thumbnail{:style=>"text-align:center; font-size:1em"}
+      = image_tag("no-profile-available.jpg", class: "img-responsive" , :style => "padding: 5%", :size=>"150x150")
+      .h3
+        First Last
+      .p
+        "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
+
+
+

app/views/application/index.html.haml

@@ -1,18 +1,21 @@
-/ Methods
-.row
-  .col-md-4
-    %h3= link_to "Methods", design_methods_path
-    %p Discover new ways to approach design problems.
-  .col-md-8
-    .row
-      - @design_methods.each do |method|
-        = render "/application/thumbnail_compact", locals: @thumb_obj = thumbnail(method, "3")
-/ Case Studies
-.row
-  .col-md-4
-    %h3= link_to "Case Studies", case_studies_path
-    %p Find examples of real world design problems.
-  .col-md-8
-    .row
-      - @case_studies.each do |cs|
-        = render "/application/thumbnail_compact", locals: @thumb_obj = thumbnail(cs, "3")
+/ - if user_signed_in?
+/   / Methods
+/   .row
+/     .col-md-4
+/       %h3= link_to "Methods", design_methods_path
+/       %p Discover new ways to approach design problems.
+/     .col-md-8
+/       .row
+/         - @design_methods.each do |method|
+/           = render "/application/thumbnail_compact", locals: @thumb_obj = thumbnail(method, "3")
+/   / Case Studies
+/   .row
+/     .col-md-4
+/       %h3= link_to "Case Studies", case_studies_path
+/       %p Find examples of real world design problems.
+/     .col-md-8
+/       .row
+/         - @case_studies.each do |cs|
+/           = render "/application/thumbnail_compact", locals: @thumb_obj = thumbnail(cs, "3")
+/ - else
+= render partial: "landing"

app/views/application/landing.html.haml

@@ -0,0 +1,126 @@
+
+:css
+  .howdoesitwork{
+    background-color: "gray";
+  }
+%meta{:content => "width=device-width, initial-scale=1", :name => "viewport"}
+- if !user_signed_in?
+  .panel.panel-default.login-margin.panel-primary
+    .panel-heading
+      %h3.panel-title Register
+    .panel-body
+      = form_for(resource, :as => resource_name, :url => registration_path(resource_name)) do |f|
+        = devise_error_messages!
+        .input
+          = f.text_field :username, {:autofocus => true, :class => "form-control", :placeholder => "Username"}
+        %br/
+        .input
+          = f.text_field :first_name, {:autofocus => true, :class => "form-control", :placeholder => "First name"}
+        %br/
+        .input
+          = f.text_field :last_name, {:autofocus => true, :class => "form-control", :placeholder => "Last name"}
+        %br/
+        .input
+          = f.email_field :email, {:autofocus => true, :class => "form-control", :placeholder => "Email"}
+        %br/
+        .input
+          = f.password_field :password, { :class => "form-control", :placeholder => "Password"}
+        %br/
+        .input
+          = f.password_field :password_confirmation, { :class => "form-control", :placeholder => "Password Confirmation"}
+        %br/
+        .row
+          .col-md-12
+            .col-md-8
+              = link_to "Sign in", new_session_path(resource_name)
+            .col-md-4
+              = f.submit "Register", {:class=> "btn btn-default pull-right" }
+.howdoesitwork{:style=>"margin-top:15%;padding:0 10% 0 10%"}
+  %hr/
+  .h1{:style=>"text-align:center;margin-bottom:10%;"}
+    How Does it Work?
+  .col-xs6.col-md-4
+
+    .thumbnail{:style=>"height:300px;"}
+      .h3{:style=>"text-align:center"}
+        1
+        %br
+        JOIN
+      .p{:style=>"text-align:center"}
+        Join the community to find designers who share similar interests as you
+        and start building your professional network.
+  .col-xs12.col-md-4
+    .thumbnail{:style=>"height:300px;"}
+      .h3{:style=>"text-align:center"}
+        2
+        %br
+        LEARN
+      .p{:style=>"text-align:center"}
+        Browse methods and case studies to improve your design skills. Learn what to do
+        and what to not do to successfully complete your next design task.
+  .col-xs12.col-md-4
+    .thumbnail{:style=>"height:300px;"}
+      .h3{:style=>"text-align:center"}
+        3
+        %br
+        SHARE
+      .p{:style=>"text-align:center"}
+        Participate in discussions where you can post questions
+        and answers regarding various design topics.
+.getstarted{:style=>"margin-top:60%;padding:0 10% 0 10%"}
+  %hr/
+  .h2{:style=>"text-align:center; font-size:4em;margin-bottom:10%;"}
+    Get Started!
+  .col-md-6
+    %a{:href=>'/case_studies'}
+      .thumbnail{:style=>"text-align:center; font-size:3em"}
+        %span.glyphicon.glyphicon-envelope
+        %br
+        Case Studies
+  .col-md-6
+    %a{:href=>'/design_methods'}
+      .thumbnail{:style=>"text-align:center; font-size:3em"}
+        %span.glyphicon.glyphicon-envelope
+        %br
+        Design Methods
+  .col-md-12
+    %a{:href=>'/discussions'}
+      .thumbnail{:style=>"text-align:center; font-size:3em"}
+        %span.glyphicon.glyphicon-comment
+        %br
+        Discussions
+.thedxcommunity{:style=>"margin-top:60%;padding:0 10% 0 10%"}
+  %hr/
+  .h2{:style=>"text-align:center; font-size:2em;margin-bottom:10%;"}
+    The Design Exchange Community
+  .col-md-4
+    .thumbnail{:style=>"text-align:center; font-size:1em"}
+      - if User.find_by(id:1).profile_picture.present?
+        = image_tag(user.profile_picture, class: "img-responsive", :style => "padding: 5%")
+      - else
+        = image_tag("no-profile-available.jpg", class: "img-responsive" , :style => "padding: 5%", :size=>"150x150")
+      .h3
+        First Last
+      .p
+        "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
+
+
+  .col-md-4
+    .thumbnail{:style=>"text-align:center; font-size:1em"}
+      = image_tag("no-profile-available.jpg", class: "img-responsive" , :style => "padding: 5%", :size=>"150x150")
+      .h3
+        First Last
+      .p
+        "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
+
+
+  .col-md-4
+    .thumbnail{:style=>"text-align:center; font-size:1em"}
+      = image_tag("no-profile-available.jpg", class: "img-responsive" , :style => "padding: 5%", :size=>"150x150")
+      .h3
+        First Last
+      .p
+        "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
+
+
+

app/views/design_methods/index.html.haml

@@ -4,7 +4,7 @@
   	var eH = $('#create-btn').height()
   	$('#create-btn').css('margin-top', (pH - eH)/2)
     $('#hidden').click(function() {
-      $("#hiddenMethods").toggle();
+      $("#hiddenMethods").toggle(this.checked);
     });
   });
 :css