light_mobile 0.0.1 → 0.0.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: e6900551f3d587dd6fb345fc83df56013e115bed
-  data.tar.gz: 1da7ad64139204a9ae106207204ab8e187affb34
+  metadata.gz: fccd16ca88cb142929c239c8337d9155be9bc53a
+  data.tar.gz: 003903363eb21e6c0b9148472a90665cd7265ccd
 SHA512:
-  metadata.gz: fe0275b97ac67d27d77672ba18c3e2d2a2506f40ad58e76a6825fddc19356d95d7e74057bcf7115809f651ef7188c8298da945505efcceb3bc32cc80d9676bc1
-  data.tar.gz: a521eff34366bdfa929c583614c8518e90aff0c351f21032fedfcabdcf095dde84e28ff9fc927fff2aa7de82fef6a49a89b407a4d34e8e314ecc0bf8148d0608
+  metadata.gz: 5e4c17a8d4614bee9ac566fd6a0c9bd3d2fe6b300f474d41f39bb7f1f3ffd2e572f5b23f66f5425a0eba90ae6d42b4269c5ba76444870713ba536c49eb801371
+  data.tar.gz: ca123691596a97685cc2b2b74eaa2699770dcb44d3fac4a7db52525827602059a6aeb89819ff024020dc1176815eb8abcb362a8836a0d8e9414631503ebf1ec5

data/README.md

@@ -0,0 +1,69 @@
+# LightMobile
+
+## Installation
+
+
+### Gemfile
+
+Add to your Gemfile and bundle.
+
+```ruby
+gem "light_mobile"
+```
+
+### ApplicationController
+
+Add this include to your ApplicationController.
+
+```ruby
+class ApplicationController < ActionController::Base
+  include LightMobile::DynamicRenderer
+end
+```
+
+### MimeTypes
+
+Add this to "config/initializers/mime_types.rb":
+
+```ruby
+require "light_mobile/mime_types"
+```
+
+### CSS
+
+Add a new file "app/assets/stylesheets/application_mobile.css.scss":
+
+```scss
+/*
+ *= require light_mobile/buttons
+ *= require light_mobile/menu
+ *= require light_mobile/simple_form
+ *= require light_mobile/tables
+*/
+```
+
+### JavaScript
+
+Add a new file "app/assets/javascripts/application_mobile.js.coffee":
+```coffee
+#= require light_mobile/menu
+```
+
+## Usage
+
+### Tabs
+
+```haml
+= mobile_tabs do |tabs|
+  - tabs.tab label: "Details", id: "tab-details", active: true
+  - tabs.tab label: "Comments", id: "tab-comments"
+  - tabs.tab label: "Assigned Users", id: "tab-assigned-users"
+
+#tab-details This is the details
+#tab-comments This is the comments
+#tab-assigned-users This is the assigned users
+```
+
+## License
+
+This project rocks and uses MIT-LICENSE.

data/app/assets/javascripts/light_mobile/tabs.js.coffee

@@ -0,0 +1,43 @@
+$ ->
+  $("table.mobile-tabs").each ->
+    lightMobileInitTabs($(this))
+
+lightMobileInitTabs = (tabs) ->
+  tds = $("tbody > tr > td", tabs)
+
+  tds.click (e) ->
+    lightMobileActivateTab(tabs, $(this))
+
+  if match = location.hash.match(/^#mobile-tab-(.+)$/)
+    mobile_tab_active = match[1]
+
+  tds.each ->
+    tab = $(this)
+    active_tab = false
+
+    container = $("#" + tab.data("tab"))
+    container.addClass("mobile-tabs-container")
+
+    if mobile_tab_active
+      active_tab = true if mobile_tab_active == tab.data("tab")
+    else if tab.hasClass("mobile-tab-active")
+      active_tab = true
+
+    if active_tab
+      tab.addClass("mobile-tab-active")
+      container.addClass("mobile-tabs-container-active")
+    else
+      tab.removeClass("mobile-tab-active")
+
+lightMobileActivateTab = (tabs, tab) ->
+  active_tab = $("> tbody > tr > td.mobile-tab-active", tabs)
+  active_tab.removeClass("mobile-tab-active")
+  tab.addClass("mobile-tab-active")
+
+  active_container = $("#" + active_tab.data("tab"))
+  active_container.removeClass("mobile-tabs-container-active")
+
+  new_container = $("#" + tab.data("tab"))
+  new_container.addClass("mobile-tabs-container-active")
+
+  location.hash = "mobile-tab-" + tab.data("tab")

data/app/assets/stylesheets/light_mobile/{application.css → application.css.scss}

@@ -10,4 +10,4 @@
  *
  *= require_self
  *= require_tree .
- */
+*/

data/app/assets/stylesheets/light_mobile/buttons.css.scss

@@ -4,7 +4,6 @@ a.mobile-button:link, a.mobile-button:visited, a.mobile-button:hover, a.mobile-b
   text-decoration: none;
   display: block;
   color: #000000;
-  cursor: default;
 }
 
 .mobile-button {
@@ -16,6 +15,8 @@ a.mobile-button:link, a.mobile-button:visited, a.mobile-button:hover, a.mobile-b
   text-align: center;
   height: 41px;
   white-space: nowrap;
+  cursor: pointer;
+  margin-bottom: 10px;
 
   &.mobile-button-primary {
     border-color: #006486;
@@ -25,13 +26,14 @@ a.mobile-button:link, a.mobile-button:visited, a.mobile-button:hover, a.mobile-b
 
   &.mobile-button-dark {
     border-color: #7c7c7c;
-    background-image: url("/gfx/mobile/buttons/button_dark_bg.png");
+    background-image: url("/assets/light_mobile/buttons/button_dark_bg.png");
     color: #ffffff !important;
   }
 
   &.mobile-button-danger {
     border-color: #761c18;
     background: linear-gradient(#aa363b, #8d1f23);
+    color: #ffffff !important;
   }
 
   &.mobile-button-small {

data/app/assets/stylesheets/light_mobile/menu.css.scss

@@ -3,14 +3,14 @@
   top: 8px;
   left: 8px;
   border: 1px solid #7c7c7c;
-  background-image: url("/gfx/mobile/buttons/button_dark_bg.png");
+  background-image: url("/assets/light_mobile/buttons/button_dark_bg.png");
   border-radius: 3px;
   width: 24px;
   height: 24px;
   cursor: pointer;
 
   .mobile-menu-button-icon {
-    background-image: url("/gfx/icons/menu_icon.png");
+    background-image: url("/assets/light_mobile/buttons/menu_icon.png");
     background-size: 19px 19px;
     background-repeat: no-repeat;
     background-position: 2px 2px;

data/app/assets/stylesheets/light_mobile/tables.css.scss

@@ -47,6 +47,11 @@
     td:not(:first-child):not(:last-child) {
       border-top: 1px solid #ababab;
     }
+
+    /* If there is only one row, then the top border should still be shown */
+    td:first-child:last-child {
+      border-top: 1px solid #ababab;
+    }
   }
 
   /* If a thead is present, the border of the first td row should not have radius. */

data/app/assets/stylesheets/light_mobile/tabs.css.scss

@@ -0,0 +1,47 @@
+table.mobile-tabs {
+  width: 100%;
+  border-spacing: 0px;
+  border-collapse: separate;
+  margin-bottom: 15px;
+  table-layout: fixed;
+
+  > tbody {
+    > tr {
+      > td {
+        border: 1px solid #ababab;
+        border-right: none;
+        background-color: #f6f6f6;
+        list-style-type: none;
+        padding: 10px;
+        text-align: center;
+        cursor: pointer;
+        width: auto;
+      }
+
+      > td.mobile-tab-active {
+        font-weight: bold;
+        background-color: #5595bf;
+        color: #ffffff;
+      }
+
+      > td:first-child {
+        border-top-left-radius: 10px;
+        border-bottom-left-radius: 10px;
+      }
+
+      > td:last-child {
+        border-top-right-radius: 10px;
+        border-bottom-right-radius: 10px;
+        border-right: 1px solid #ababab;
+      }
+    }
+  }
+}
+
+.mobile-tabs-container {
+  display: none;
+
+  &.mobile-tabs-container-active {
+    display: block;
+  }
+}

data/app/helpers/light_mobile/tabs_helper.rb

@@ -0,0 +1,7 @@
+module LightMobile::TabsHelper
+  def mobile_tabs(args = {})
+    tabs = LightMobile::Tabs.new(args)
+    yield tabs
+    return tabs.to_html
+  end
+end

data/lib/light_mobile.rb

@@ -1,4 +1,15 @@
 require "light_mobile/engine"
+require "html_gen"
 
 module LightMobile
+  def self.const_missing(name)
+    file_name = "#{::File.dirname(__FILE__)}/light_mobile/#{::StringCases.camel_to_snake(name)}.rb"
+
+    if ::File.exists?(file_name)
+      require file_name
+      return ::LightMobile.const_get(name) if ::LightMobile.const_defined?(name)
+    end
+
+    super
+  end
 end

data/lib/light_mobile/dynamic_renderer.rb

@@ -0,0 +1,22 @@
+module LightMobile::DynamicRenderer
+  # In order to only render mobile views if they exist.
+  def render(*args, &blk)
+    if request.user_agent && view_context.agent_mobile? && (session[:light_mobile_version].to_s == "mobile" || !session[:light_mobile_version].present?)
+      name = args[0]
+      name = action_name.to_sym if !name.is_a?(Symbol) && !name.is_a?(String)
+
+      if name.is_a? Symbol
+        view_paths.each do |view_path|
+          ActionView::Template::Handlers.extensions.each do |handler|
+            full_path = "#{view_path}/#{controller_path}/#{name}.mobile.#{handler}"
+            next unless File.exists? full_path
+            request.format = :mobile
+            self.formats = [:mobile, :html]
+          end
+        end
+      end
+    end
+
+    super
+  end
+end

data/lib/light_mobile/mime_types.rb

@@ -0,0 +1 @@
+Mime::Type.register "text/html", :mobile

data/lib/light_mobile/tabs.rb

@@ -0,0 +1,24 @@
+class LightMobile::Tabs
+  def initialize(args)
+    @tabs = []
+  end
+
+  def tab(args)
+    @tabs << args
+  end
+
+  def to_html
+    table = ::HtmlGen::Element.new(:table, classes: ["mobile-tabs"])
+    tr = table.add_ele(:tbody).add_ele(:tr)
+
+    @tabs.each do |tab|
+      td = tr.add_ele(:td)
+
+      td.classes << "mobile-tab-active" if tab[:active]
+      td.data[:tab] = tab[:id]
+      td.add_str tab[:label]
+    end
+
+    table.html.html_safe
+  end
+end

data/lib/light_mobile/version.rb

@@ -1,3 +1,3 @@
 module LightMobile
-  VERSION = "0.0.1"
+  VERSION = "0.0.2"
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: light_mobile
 version: !ruby/object:Gem::Version
-  version: 0.0.1
+  version: 0.0.2
 platform: ruby
 authors:
 - Kasper Johansen
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2014-09-12 00:00:00.000000000 Z
+date: 2015-02-13 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -24,6 +24,20 @@ dependencies:
     - - "~>"
       - !ruby/object:Gem::Version
         version: 4.0.0
+- !ruby/object:Gem::Dependency
+  name: html_gen
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - '='
+      - !ruby/object:Gem::Version
+        version: 0.0.6
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - '='
+      - !ruby/object:Gem::Version
+        version: 0.0.6
 - !ruby/object:Gem::Dependency
   name: sqlite3
   requirement: !ruby/object:Gem::Requirement
@@ -46,21 +60,30 @@ extensions: []
 extra_rdoc_files: []
 files:
 - MIT-LICENSE
-- README.rdoc
+- README.md
 - Rakefile
+- app/assets/images/light_mobile/buttons/button_dark_bg.png
+- app/assets/images/light_mobile/buttons/menu_icon.png
+- app/assets/images/light_mobile/layout/header_bar_bg.png
 - app/assets/javascripts/light_mobile/application.js
 - app/assets/javascripts/light_mobile/menu.js.coffee
-- app/assets/stylesheets/light_mobile/application.css
+- app/assets/javascripts/light_mobile/tabs.js.coffee
+- app/assets/stylesheets/light_mobile/application.css.scss
 - app/assets/stylesheets/light_mobile/buttons.css.scss
 - app/assets/stylesheets/light_mobile/menu.css.scss
 - app/assets/stylesheets/light_mobile/simple_form.css.scss
 - app/assets/stylesheets/light_mobile/tables.css.scss
+- app/assets/stylesheets/light_mobile/tabs.css.scss
 - app/controllers/light_mobile/application_controller.rb
 - app/helpers/light_mobile/application_helper.rb
+- app/helpers/light_mobile/tabs_helper.rb
 - app/views/layouts/light_mobile/application.html.erb
 - config/routes.rb
 - lib/light_mobile.rb
+- lib/light_mobile/dynamic_renderer.rb
 - lib/light_mobile/engine.rb
+- lib/light_mobile/mime_types.rb
+- lib/light_mobile/tabs.rb
 - lib/light_mobile/version.rb
 - lib/tasks/light_mobile_tasks.rake
 - test/dummy/README.rdoc

data/README.rdoc

@@ -1,3 +0,0 @@
-= LightMobile
-
-This project rocks and uses MIT-LICENSE.