profile edit page ported to bootstrap

app/assets/stylesheets/vendor/autoSuggest.css

@@ -3,16 +3,15 @@
 ul.as-selections {
 	list-style-type: none;
 	border: 1px solid #ccc;
-	padding: 4px 0 4px 4px;
 	margin: 0;
 	overflow: auto;
 	background-color: #fff;
-
-  border-radius: 3px;
-  -webkit-border-radius: 3px;
-  -moz-border-radius: 3px;
-  
-  width: 214px;
+	border-radius: 3px;
+	-webkit-border-radius: 3px;
+	-moz-border-radius: 3px;
+	/* 1% padding (all sides) + 98% width = 100% */  
+	padding: 1%;
+	width: 98%;
 }
 
 ul.as-selections.loading {
@@ -22,6 +21,7 @@ ul.as-selections.loading {
 ul.as-selections li {
 	float: left;
 	margin: 1px 4px 1px 0;
+	cursor: pointer;
 }
 
 ul.as-selections li.as-selection-item {
@@ -32,8 +32,8 @@ ul.as-selections li.as-selection-item {
 	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ddeefe), to(#bfe0f1));
 	border: 1px solid #acc3ec;
 	padding: 0;
-  padding-top: 3px;
-  padding-bottom: 3px;
+  padding-top: 6px;
+  padding-bottom: 6px;
   padding-left: 6px;
 	border-radius: 5px;
 	-webkit-border-radius: 5px;
@@ -43,7 +43,7 @@ ul.as-selections li.as-selection-item {
 	-moz-box-shadow: 0 1px 1px #e4edf2;
   line-height: 10px;
   margin-top: -1px;
-  margin-bottom: -1px;
+  margin-bottom: 10px;
 }
 
 ul.as-selections li.as-selection-item:last-child {
@@ -112,9 +112,11 @@ ul.as-selections li.as-original input {
 	outline: none;
 	font-size: 13px;
 	width: auto;
-	height: 14px;
 	padding: 0;
-  margin: 0;
+  	margin: 0;
+	height: 20px;
+	line-height: 20px;
+	width: 300px;
 }
 
 ul.as-selections li.as-original.as-original{
@@ -184,14 +186,14 @@ li.as-result-item.active em {
 /* Webkit Hacks  */
 @media screen and (-webkit-min-device-pixel-ratio:0) {	
 	ul.as-selections li.as-selection-item {
-		padding-top: 3px;
-		padding-bottom: 3px;
+		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: 15px;
+		height: 20px;
 	}
 }
 

app/controllers/profiles_controller.rb

@@ -4,6 +4,9 @@
 
 class ProfilesController < ApplicationController
   before_filter :authenticate_user!, :except => ['show']
+  before_filter -> { @css_framework = :bootstrap }, only: [:show, :edit]
+ 
+  layout ->(c) { request.format == :mobile ? "application" : "with_header_with_footer" }
 
   respond_to :html, :except => [:show]
   respond_to :js, :only => :update

app/views/photos/_new_profile_photo.haml

@@ -60,6 +60,8 @@
 #profile_photo_upload
   = owner_image_tag(:thumb_medium)
 
+  .clearfix
+
   #file-upload.btn
     =t('.upload')
 

app/views/profiles/_edit.haml

@@ -9,58 +9,58 @@
   = render 'profiles/edit_public', :profile => profile, :aspect => aspect, :person => person
 
   %hr
-  %br
+
   %h3
     = t('profiles.edit.your_private_profile')
 
-
   %h4
     = t('profiles.edit.your_bio')
-  = text_area_tag 'profile[bio]', profile.bio, :rows => 5, :placeholder => t('fill_me_out')
+  = text_area_tag 'profile[bio]', profile.bio, :rows => 5, :placeholder => t('fill_me_out'), :class => 'span12'
 
-  %br
+  .small-horizontal-spacer
 
   %h4
     = t('profiles.edit.your_location')
-  = text_field_tag 'profile[location]', profile.location, :placeholder => t('fill_me_out')
+  = text_field_tag 'profile[location]', profile.location, :placeholder => t('fill_me_out'), :class => 'span12'
 
-
-  %br
+  .small-horizontal-spacer
 
   %h4
     = t('profiles.edit.your_gender')
-  = text_field_tag 'profile[gender]', profile.gender, :placeholder => t("fill_me_out")
+  = text_field_tag 'profile[gender]', profile.gender, :placeholder => t("fill_me_out"), :class => 'span12'
 
-  %br
+  .small-horizontal-spacer
 
   %h4
     = t('profiles.edit.your_birthday')
   = select_date profile.birthday, :prompt => true,
     :default => true, :order => t('date.order'), :start_year => 2000, :end_year => 1910, :prefix => 'profile[date]'
 
-  %br
-  %br
+  .small-horizontal-spacer
 
   %h4
     = t('search')
+ 
+  .well
+    = label_tag 'profile[searchable]', :class => "checkbox" do
+      = check_box_tag 'profile[searchable]', true, profile.searchable
+      = t('profiles.edit.allow_search')
 
-  %p{:class=>"checkbox_select"}
-    = check_box_tag 'profile[searchable]', true, profile.searchable
-    = label_tag 'profile[searchable]', t('profiles.edit.allow_search')
-  %br
-  %br
+  .small-horizontal-spacer
 
   %h4
     = t('nsfw')
   = t('profiles.edit.nsfw_explanation')
-  %p{:class=>"checkbox_select"}
-    = check_box_tag 'profile[nsfw]', true, profile.nsfw?
-    = label_tag 'profile[nsfw]', t('profiles.edit.nsfw_check')
-  %br
+  .well
+    = label_tag 'profile[nsfw]', :class => "checkbox" do
+      = check_box_tag 'profile[nsfw]', true, profile.nsfw?
+      = t('profiles.edit.nsfw_check')
+  
+  .small-horizontal-spacer
+
   = t('profiles.edit.nsfw_explanation2')
-  %br
-  %br
-  %br
+  
+  .small-horizontal-spacer
 
   .submit_block
     =yield(:submit_block)

app/views/profiles/_edit_public.haml

@@ -41,24 +41,27 @@
 
 %h4
   = t('profiles.edit.your_name')
-= label_tag 'profile[first_name]', t('profiles.edit.first_name')
-= text_field_tag 'profile[first_name]', profile.first_name
 
-= label_tag 'profile[first_name]', t('profiles.edit.last_name')
-= text_field_tag 'profile[last_name]', profile.last_name
+.row-fluid
+  .span6
+    = label_tag 'profile[first_name]', t('profiles.edit.first_name')
+    = text_field_tag 'profile[first_name]', profile.first_name, :class => 'span12'
+  .span6
+    = label_tag 'profile[last_name]', t('profiles.edit.last_name')
+    = text_field_tag 'profile[last_name]', profile.last_name, :class => 'span12'
 
-%br
+.small-horizontal-spacer
 
 %h4
   = t('profiles.edit.your_tags')
 
 = text_field_tag 'profile[tag_string]', "", :placeholder => t('profiles.edit.your_tags_placeholder')
 
-%br
+.small-horizontal-spacer
 
 %h4
   = t('profiles.edit.your_photo')
 
 = render 'photos/new_profile_photo', :aspect => aspect, :person => person
 
-%br
+.small-horizontal-spacer

app/views/profiles/edit.haml

@@ -2,16 +2,22 @@
 -#   licensed under the Affero General Public License version 3 or later.  See
 -#   the COPYRIGHT file.
 
+.bootstrap_header_padding
 
-#section_header
-  %h2
-    = t('settings')
-  = render 'shared/settings_nav'
+.container
+  .row-fluid
+    .span12
+      #section_header
+        %h2
+          = t('settings')
+        = render 'shared/settings_nav'
 
-.span-12.prepend-5.last
-  - content_for :submit_block do
-    = link_to t('cancel'), local_or_remote_person_path(current_user.person), :class => "button"
-    = submit_tag t('.update_profile'), :class => "creation", :id => "update_profile"
-  = render :partial => 'edit', :locals => {:person => @person, 
-    :profile => @profile, :aspect => @aspect, :step => @step}
+.container
+  .row-fluid
+    .span12
+    - content_for :submit_block do
+      = link_to t('cancel'), local_or_remote_person_path(current_user.person), :class => "btn"
+      = submit_tag t('.update_profile'), :class => "creation", :id => "update_profile", :class => "btn"
+    = render :partial => 'edit', :locals => {:person => @person, 
+      :profile => @profile, :aspect => @aspect, :step => @step}