User details preview

Gemfile

@@ -41,6 +41,7 @@ gem 'bootstrap-sass'
 gem 'bootstrap-sass-extras'
 gem 'bootswatch-rails'
 gem 'autoprefixer-rails'
+gem "font-awesome-rails"
 
 group :development do
   gem 'spring'

Gemfile.lock

@@ -104,6 +104,8 @@ GEM
     faker (1.4.3)
       i18n (~> 0.5)
     ffi (1.9.3)
+    font-awesome-rails (4.2.0.0)
+      railties (>= 3.2, < 5.0)
     formatador (0.2.5)
     globalize (4.0.2)
       activemodel (>= 4.0.0, < 5)
@@ -283,6 +285,7 @@ DEPENDENCIES
   devise-i18n
   factory_girl_rails
   faker
+  font-awesome-rails
   globalize (~> 4.0.2)
   guard-rspec
   jquery-rails

app/assets/javascripts/management/application.js

@@ -1,3 +1,4 @@
 //= require jquery
 //= require jquery_ujs
 //= require bootstrap-sprockets
+//= require_directory .

app/assets/stylesheets/management/_user_details.css.scss

@@ -0,0 +1,22 @@
+.user-details {
+    @extend .modal;
+    @extend .fade;
+    .center {
+        text-align: center;
+    }
+
+    .profile-image {
+        @extend .img-circle;
+        max-width: 140px;
+        max-height: 140px;
+    }
+
+    .social {
+        @extend .btn-group;
+
+        a {
+            @extend .btn;
+            @extend .btn-default;
+        }
+    }
+}

app/assets/stylesheets/management/application.css.scss

@@ -2,5 +2,7 @@
 @import "bootswatch/simplex/variables";
 @import "bootstrap";
 @import "bootswatch/simplex/bootswatch";
+@import "font-awesome";
 @import "navbar";
 @import "record_table";
+@import "user_details";

app/controllers/management/users_controller.rb

@@ -1,14 +1,16 @@
 module Management
   class UsersController < ManagementController
-    before_action :assign_user, only: [:toggle_admin]
+    before_action :assign_user, only: [:show, :toggle_admin]
 
     def index
       @users = User.all
     end
 
     def toggle_admin
-      @user.admin = !@user.admin
+      @user.toggle_admin!
-      @user.save
+    end
+
+    def show
     end
 
     private

app/models/speaker_profile.rb

@@ -17,4 +17,8 @@ class SpeakerProfile < ActiveRecord::Base
   def twitter=(handle)
     write_attribute :twitter, handle.gsub(/\A@/,'') if handle
   end
+
+  def name
+    "#{first_name} #{last_name}"
+  end
 end

app/models/user.rb

@@ -9,4 +9,8 @@ class User < ActiveRecord::Base
   has_many :workshops
 
   accepts_nested_attributes_for :speaker_profile, update_only: true
+
+  def toggle_admin!
+    update admin: !admin
+  end
 end

app/views/management/users/_about_user.html.slim

@@ -0,0 +1,32 @@
+.user-details id="about-user-#{@user.id}" tabindex="-1" role="dialog" aria-hidden="true"
+  .modal-dialog
+    .modal-content
+      .modal-header
+        button type="button" class="close" data-dismiss="modal" aria-hidden="true"
+        h4.modal-title = t(:more_about_user, user: @user.speaker_profile.name)
+      .modal-body
+        .center
+          = image_tag @user.speaker_profile.picture.url, class: "profile-image"
+          h3.media-heading
+            = @user.speaker_profile.name
+            small< = @user.speaker_profile.organisation
+          div.social
+            = link_to "mailto://#{@user.email}"
+              = fa_icon :envelope
+            - if @user.speaker_profile.github.present?
+              = link_to "https://github.com/#{@user.speaker_profile.github}"
+                = fa_icon :github
+            - if @user.speaker_profile.twitter.present?
+              = link_to "https://twitter.com/#{@user.speaker_profile.twitter}"
+                = fa_icon :twitter
+
+        hr
+
+        h5 = SpeakerProfile.human_attribute_name(:biography)
+        = simple_format @user.speaker_profile.biography
+
+        p #{glyph(:phone)} #{Phony.format(@user.speaker_profile.mobile_phone, format: :international)}
+
+      .modal-footer
+        button type="button" class="btn btn-default" data-dismiss="modal"
+          = t(:close)

app/views/management/users/_modal_test.html.erb

@@ -0,0 +1,23 @@
+<!-- Button trigger modal -->
+<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
+  Launch demo modal
+</button>
+
+<!-- Modal -->
+<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
+  <div class="modal-dialog">
+    <div class="modal-content">
+      <div class="modal-header">
+        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
+        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
+      </div>
+      <div class="modal-body">
+        ...
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+        <button type="button" class="btn btn-primary">Save changes</button>
+      </div>
+    </div>
+  </div>
+</div>

app/views/management/users/_user.html.slim

@@ -11,7 +11,7 @@ tr id="user-#{user.id}"
         = link_to glyph(:unchecked), toggle_admin_management_user_path(user), remote: true, method: :post, data: {confirm: t(:are_you_sure)}, class: 'unchecked'
   td
     .actions
-      = link_to management_user_path(user), title: t(:view)
+      = link_to management_user_path(user), title: t(:view), remote: true, disabled: user.speaker_profile.blank?
         = glyph(:share)
       = link_to edit_management_user_path(user), title: t(:edit)
         = glyph(:edit)

app/views/management/users/show.js.erb

@@ -0,0 +1,5 @@
+$('body').append('<%= j render 'about_user' %>');
+$('#about-user-<%= @user.id %>').on('hidden.bs.modal', function () {
+  $(this).remove();
+});
+$('#about-user-<%= @user.id %>').modal('show');

config/locales/management.bg.yml

@@ -2,3 +2,4 @@ bg:
   are_you_sure: Сигурен ли си?
   view: Преглед
   home: Начало
+  more_about_user: "Повече информация за %{user}"