Mobile version

Gemfile

@@ -25,6 +25,8 @@ gem "rolify"
 
 gem "haml-rails"
 gem "twitter-bootstrap-rails"
+gem "mobile-fu"
+gem "topcoat-rails"
 
 gem "figaro"
 

Gemfile.lock

@@ -84,6 +84,9 @@ GEM
     method_source (0.8.2)
     mime-types (1.25.1)
     minitest (5.3.5)
+    mobile-fu (1.3.1)
+      rack-mobile-detect
+      rails
     multi_json (1.10.1)
     multi_xml (0.5.5)
     multipart-post (2.0.0)
@@ -114,6 +117,8 @@ GEM
     pry-rails (0.3.2)
       pry (>= 0.9.10)
     rack (1.5.2)
+    rack-mobile-detect (0.4.0)
+      rack
     rack-test (0.6.2)
       rack (>= 1.0)
     rails (4.1.2)
@@ -168,6 +173,8 @@ GEM
     thor (0.19.1)
     thread_safe (0.3.4)
     tilt (1.4.1)
+    topcoat-rails (0.8.0)
+      railties (>= 3.0)
     treetop (1.4.15)
       polyglot
       polyglot (>= 0.3.1)
@@ -199,6 +206,7 @@ DEPENDENCIES
   haml-rails
   jbuilder (~> 2.0)
   jquery-rails
+  mobile-fu
   omniauth-github
   pg
   pry-rails
@@ -210,6 +218,7 @@ DEPENDENCIES
   spring
   sqlite3
   thin
+  topcoat-rails
   turbolinks
   twitter-bootstrap-rails
   uglifier (>= 1.3.0)

app/assets/stylesheets/application-mobile.css

@@ -0,0 +1,17 @@
+/*
+ * This is a manifest file that'll be compiled into application.css, which will include all the files
+ * listed below.
+ *
+ * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
+ * or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
+ *
+ * You're free to add application-wide styles to this file and they'll appear at the bottom of the
+ * compiled file so the styles you add here take precedence over styles defined in any styles
+ * defined in the other CSS/SCSS files in this directory. It is generally better to create a new
+ * file per style scope.
+ *
+ *  require_tree .
+ *= require topcoat/mobile-light
+ *= require mobile
+ *= require_self
+ */

app/assets/stylesheets/mobile.css.scss

@@ -0,0 +1,58 @@
+/* http://outof.me/navigation-drawer-pattern-with-topcoat-css-library/ */
+$trans-time: 0.3s;
+
+#slide-out {
+    display:block;
+    position:absolute;
+    top:0;
+    left:0;
+    width:0;
+    height:100%;
+    webkit-transition: all $trans-time ease;
+    transition: all $trans-time ease;
+}
+
+#slide-out:target {
+  /* width: 320px; */
+  width: 90%;
+  transition: all $trans-time ease;
+}
+
+.open-menu {
+  display: block;
+}
+
+.close-menu {
+  display: none;
+}
+
+.page-wrap {
+  position: absolute;
+  left: 0;
+  width: 100%;
+  webkit-transition: all $trans-time ease;
+  transition: all $trans-time ease;
+}
+/*
+.page-wrap {
+  float: right;
+  width: 100%;
+}
+*/
+
+#slide-out:target + .page-wrap {
+  /* width: 20%; */
+  left: 90%;
+}
+
+#slide-out:target + .page-wrap .close-menu {
+    display: block;
+  }
+#slide-out:target + .page-wrap .open-menu {
+    display: none;
+}
+
+a {
+  color: #288edf;
+  text-decoration: none;
+}

app/controllers/application_controller.rb

@@ -3,6 +3,9 @@ class ApplicationController < ActionController::Base
   # For APIs, you may want to use :null_session instead.
   protect_from_forgery with: :exception
   before_action :set_locale
+  before_filter :force_tablet_html
+
+  has_mobile_fu
 
   def new_session_path(scope)
     new_user_session_path
@@ -16,4 +19,8 @@ def set_locale
   rescue_from CanCan::AccessDenied do |exception|
     redirect_to :back, alert: exception.message
   end
+
+  def force_tablet_html
+    session[:tablet_view] = false
+  end
 end

app/controllers/topics_controller.rb

@@ -44,9 +44,11 @@ def create
     respond_to do |format|
       if @topic.save
         format.html { redirect_to @topic, notice: 'Topic was successfully created.' }
+        format.mobile { redirect_to @topic, notice: 'Topic was successfully created.' }
         format.json { render :show, status: :created, location: @topic }
       else
         format.html { render :new }
+        format.mobile { render :new }
         format.json { render json: @topic.errors, status: :unprocessable_entity }
       end
     end
@@ -58,6 +60,7 @@ def update
     respond_to do |format|
       if @topic.update(topic_params)
         format.html { redirect_to @topic, notice: 'Topic was successfully updated.' }
+        format.mobile { redirect_to @topic, notice: 'Topic was successfully updated.' }
         format.json { render :show, status: :ok, location: @topic }
       end
     end
@@ -69,6 +72,7 @@ def destroy
     respond_to do |format|
       if @topic.destroy
         format.html { redirect_to topics_url, notice: 'Topic was successfully destroyed.' }
+        format.mobile{ redirect_to topics_url, notice: 'Topic was successfully destroyed.' }
         format.json { head :no_content }
       end
     end

app/views/home/index.mobile.haml

@@ -0,0 +1,13 @@
+%h1.center= t 'hello'
+.center
+  - if current_user
+    %a{href: topics_path}
+      %button.topcoat-button
+        Topics
+    %br
+    %button.topcoat-button= link_to "Sign Out", destroy_user_session_path
+  - else
+    %p.center
+      To sign up for a lighting talk, please login with Github and enter your topic!
+    %button.topcoat-button= link_to "Sign In with Github", user_omniauth_authorize_path(provider: :github)
+

app/views/layouts/application.mobile.haml

@@ -0,0 +1,67 @@
+!!!
+%html{lang: "en"}
+  %head
+    %meta{charset: "utf-8"}/
+    %meta{content: "IE=Edge,chrome=1", "http-equiv" => "X-UA-Compatible"}/
+    %meta{content: "width=device-width, initial-scale=1.0", name: "viewport"}/
+    %title= content_for?(:title) ? yield(:title) : "Lightning310"
+    = csrf_meta_tags
+    / Le HTML5 shim, for IE6-8 support of HTML elements
+    /[if lt IE 9]
+      <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6.1/html5shiv.js" type="text/javascript"></script>
+    = stylesheet_link_tag "application-mobile", :media => "all"
+    / For third-generation iPad with high-resolution Retina display:
+    / Size should be 144 x 144 pixels
+    = favicon_link_tag 'apple-touch-icon-144x144-precomposed.png', :rel => 'apple-touch-icon-precomposed', :type => 'image/png', :sizes => '144x144'
+    / For iPhone with high-resolution Retina display:
+    / Size should be 114 x 114 pixels
+    = favicon_link_tag 'apple-touch-icon-114x114-precomposed.png', :rel => 'apple-touch-icon-precomposed', :type => 'image/png', :sizes => '114x114'
+    / For first- and second-generation iPad:
+    / Size should be 72 x 72 pixels
+    = favicon_link_tag 'apple-touch-icon-72x72-precomposed.png', :rel => 'apple-touch-icon-precomposed', :type => 'image/png', :sizes => '72x72'
+    / For non-Retina iPhone, iPod Touch, and Android 2.1+ devices:
+    / Size should be 57 x 57 pixels
+    = favicon_link_tag 'apple-touch-icon-precomposed.png', :rel => 'apple-touch-icon-precomposed', :type => 'image/png'
+    / For all other devices
+    / Size should be 32 x 32 pixels
+    = favicon_link_tag 'favicon.ico', :rel => 'shortcut icon'
+    = javascript_include_tag "application"
+  %body
+
+    #slide-out.topcoat-list.side-nav
+      %h3.topcoat-list__header Actions
+      %ul.topcoat-list__container
+        %a{href: root_path}
+          %li.topcoat-list__item
+            Home
+        %a{href: topics_path}
+          %li.topcoat-list__item
+            Topics
+        - if current_user
+          %a{href: destroy_user_session_path}
+            %li.topcoat-list__item
+              Sign Out
+        - else
+          %a{href: user_omniauth_authorize_path(provider: :github)}
+            %li.topcoat-list__item
+              Sign in with Github
+    .page-wrap
+      .topcoat-navigation-bar
+        %div{'data-no-turbolinks' => true}
+          .topcoat-navigation-bar__item.quarter
+            .open-menu
+              %a{href: '#slide-out'}
+                %span.topcoat-icon--large.topcoat-icon--menu-stack
+            .close-menu
+              %a{href: '#'}
+                %span.topcoat-icon--large.topcoat-icon--menu-stack
+        .topcoat-navigation-bar__item.center
+          %h1.topcoat-navigation-bar__title
+            Lightning 310
+      #main-content
+        = bootstrap_flash
+        = notice
+        = alert
+        = yield
+      %footer
+        %p © Company 2014

app/views/topics/_form.mobile.haml

@@ -0,0 +1,19 @@
+= form_for @topic, :html => { :class => 'form-horizontal' } do |f|
+  - @topic.errors.full_messages.each do |error|
+    %br
+    = error
+  .control-group
+    = f.label :title, :class => 'control-label'
+    .controls
+      = f.text_field :title, :class => 'topcoat-text-input'
+  .control-group
+    = f.label :description, :class => 'control-label'
+    .controls
+      = f.text_area :description, :class => 'topcoat-textarea'
+  .control-group
+    = f.label :proposed_date, :class => 'control-label'
+    .controls
+      = f.date_field :proposed_date, :class => 'topcoat-text-input'
+  .form-actions
+    = f.submit nil, :class => 'topcoat-button'
+    = link_to t('.cancel', :default => t("helpers.links.cancel")), topics_path, :class => 'topcoat-button'

app/views/topics/_topic_list_mobile.haml

@@ -0,0 +1,7 @@
+- topics.each do |topic|
+  %a{href: topic_path(topic)}
+    %li.topcoat-list__item
+      %span= topic.title
+      ( by 
+      %span= get_student_name_for(topic)
+      )

app/views/topics/edit.mobile.haml

@@ -0,0 +1,4 @@
+- model_class = Topic
+.page-header
+  %h1=t '.title', :default => [:'helpers.titles.edit', 'Edit %{model}'], :model => model_class.model_name.human.titleize
+= render :partial => "form"

app/views/topics/index.mobile.haml

@@ -0,0 +1,18 @@
+- model_class = Topic
+
+.topcoat-list
+
+  %h3.topcoat-list__header Approved Topics
+  %ul.topcoat-list__container
+    = render 'topic_list_mobile', topics: @approved_topics
+
+  %h3.topcoat-list__header Pending Topics
+  %ul.topcoat-list__container
+    = render 'topic_list_mobile', topics: @pending_topics
+
+  %h3.topcoat-list__header Completed Topics
+  %ul.topcoat-list__container
+    = render 'topic_list_mobile', topics: @completed_topics
+
+= link_to t('.new', :default => t("helpers.links.new")), new_topic_path, :class => 'topcoat-button'
+

app/views/topics/new.mobile.haml

@@ -0,0 +1,4 @@
+- model_class = Topic
+.page-header
+  %h1=t '.title', :default => [:'helpers.titles.edit', 'Edit %{model}'], :model => model_class.model_name.human.titleize
+= render :partial => "form"

app/views/topics/show.mobile.haml

@@ -0,0 +1,45 @@
+- model_class = Topic
+.page-header
+  %h1.center
+    Topic: 
+    %span= @topic.title
+
+
+%p.center
+  = image_tag @student.image, height: 100, width: 100, class: 'img-circle'
+  %br
+  = @student.name
+  %strong
+    = link_to @student.github_name, "http://github.com/#{@student.github_name}", target: :new
+
+.topcoat-list
+  %h3.topcoat-list__header
+    Lighting Talk Topic
+  %ul.topcoat-list__container
+    %li.topcoat-list__item
+      %span Title: 
+      %span= @topic.title
+    %li.topcoat-list__item
+      %span= @topic.description
+    %li.topcoat-list__item
+      %span Date:
+      %span= @topic.proposed_date
+    %li.topcoat-list__item
+      %span Completed: 
+      %span= @topic.completed_date
+    %li.topcoat-list__item
+      %span Approved:
+      %span= @topic.approved
+      - if current_user.is_admin?
+        = link_to "Approve", approve_topic_path(@topic), class: 'topcoat-button' if [email protected]
+        = link_to "Complete", complete_topic_path(@topic), class: 'topcoat-button' if (@topic.approved && [email protected]_date)
+    %li.topcoat-list__item
+    - if can? :modify, @topic
+      = link_to t('.edit', :default => t("helpers.links.edit")), edit_topic_path(@topic), :class => 'topcoat-button'
+      = link_to t('.destroy', :default => t("helpers.links.destroy")), topic_path(@topic), :method => :delete, :data => { :confirm => t('.confirm', :default => t("helpers.links.confirm", :default => 'Are you sure?')) }, :class => 'topcoat-button'
+
+
+-# .form-actions
+  -# = link_to t('.back', :default => t("helpers.links.back")), topics_path, :class => 'btn'
+  -# = link_to t('.edit', :default => t("helpers.links.edit")), edit_topic_path(@topic), :class => 'btn'
+  -# = link_to t('.destroy', :default => t("helpers.links.destroy")), topic_path(@topic), :method => "delete", :data => { :confirm => t('.confirm', :default => t("helpers.links.confirm", :default => 'Are you sure?')) }, :class => 'btn btn-danger'

config/environments/production.rb

@@ -24,10 +24,10 @@
 
   # Compress JavaScripts and CSS.
   config.assets.js_compressor = :uglifier
-  # config.assets.css_compressor = :sass
+  config.assets.css_compressor = :sass
 
   # Do not fallback to assets pipeline if a precompiled asset is missed.
-  config.assets.compile = false
+  # config.assets.compile = false
 
   # Generate digests for assets URLs.
   config.assets.digest = true