light_mobile 0.0.2 → 0.0.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: fccd16ca88cb142929c239c8337d9155be9bc53a
-  data.tar.gz: 003903363eb21e6c0b9148472a90665cd7265ccd
+  metadata.gz: 009b1c5db61a89a92593d33631e46eddabc76688
+  data.tar.gz: 5d251ca79f8c329193eea19d07d29a30ce2ba89d
 SHA512:
-  metadata.gz: 5e4c17a8d4614bee9ac566fd6a0c9bd3d2fe6b300f474d41f39bb7f1f3ffd2e572f5b23f66f5425a0eba90ae6d42b4269c5ba76444870713ba536c49eb801371
-  data.tar.gz: ca123691596a97685cc2b2b74eaa2699770dcb44d3fac4a7db52525827602059a6aeb89819ff024020dc1176815eb8abcb362a8836a0d8e9414631503ebf1ec5
+  metadata.gz: 1216d1839ea095c86f510708cd8b06f49d6813197d4aa00fd8993eb530ac3651edc91c0e007ab642b4528a4fb555b7d147d31e709e6161d5db536f3c53243e58
+  data.tar.gz: ab978b3980369133a18924c0833870a3eba597f418a02df6071cc381ce6ce9d6ab2d45e536db2f389ac7365f69b4ca91ee8bff86e98224f112e7a494b6f77be1

data/README.md

@@ -64,6 +64,37 @@ Add a new file "app/assets/javascripts/application_mobile.js.coffee":
 #tab-assigned-users This is the assigned users
 ```
 
+### Flash errors
+
+In beginning of the body-element do something like this:
+```haml
+%body
+  - if flash.any?
+    .mobile-flash-messages
+      - flash.each do |flash_type, message|
+        .mobile-flash{class: "mobile-flash-#{flash_type}"}
+          = message
+          = link_to _("OK"), "#", class: ["mobile-button", "mobile-flash-ok"]
+
+### Link buttons
+
+```haml
+= link_to "Users", users_path, class: "mobile-button"
+= link_to "Users", users_path, class: ["mobile-button", "mobile-button-primary"]
+= link_to "Users", users_path, class: ["mobile-button", "mobile-button-danger"], data: {confirm: "Are you sure?"}
+```
+
+### Tables
+
+```haml
+%table.mobile-table
+  %tbody
+    %tr
+      %td Row 1
+    %tr
+      %td Row 2
+```
+
 ## License
 
 This project rocks and uses MIT-LICENSE.

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

@@ -0,0 +1,15 @@
+# This is a manifest file that'll be compiled into application.js, which will include all the files
+# listed below.
+#
+# Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
+# or vendor/assets/javascripts of plugins, if any, can be referenced here using a relative path.
+#
+# It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
+# compiled file.
+#
+# Read Sprockets README (https://github.com/sstephenson/sprockets#sprockets-directives) for details
+# about supported directives.
+#
+#= require light_mobile/flash_errors
+#= require light_mobile/menu
+#= require light_mobile/tabs

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

@@ -0,0 +1,5 @@
+$ ->
+  $(".mobile-flash-ok").click (e) ->
+    e.preventDefault()
+    parent_flash = $(this).parent(".mobile-flash")
+    parent_flash.remove()

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

@@ -8,6 +8,10 @@
  * You're free to add application-wide styles to this file and they'll appear at the top of the
  * compiled file, but it's generally better to create a new file per style scope.
  *
- *= require_self
- *= require_tree .
+ *= require light_mobile/buttons
+ *= require light_mobile/flash_errors
+ *= require light_mobile/menu
+ *= require light_mobile/simple_form
+ *= require light_mobile/tables
+ *= require light_mobile/tabs
 */

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

@@ -0,0 +1,30 @@
+.mobile-flash-messages {
+  position: relative;
+
+  .mobile-flash {
+    position: fixed;
+    display: block;
+    top: 70px;
+    left: 0;
+    right: 0;
+    border: 1px solid black;
+    background-color: white;
+    border-radius: 7px;
+    color: #ffffff;
+    padding: 15px 15px 15px 15px;
+    width: 70%;
+    max-width: 400px;
+    background-color: #2c3b62;
+    opacity: 0.94;
+    text-align: center;
+    margin: auto;
+  }
+
+  .mobile-flash-ok {
+    margin-top: 15px;
+    margin-bottom: 0px;
+    background: linear-gradient(#c0c6d2, #606b87);
+    border-color: #212c4c;
+    color: #ffffff !important;
+  }
+}

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

@@ -13,7 +13,7 @@ table.mobile-tabs {
         background-color: #f6f6f6;
         list-style-type: none;
         padding: 10px;
-        text-align: center;
+        text-align: left;
         cursor: pointer;
         width: auto;
       }
@@ -34,6 +34,13 @@ table.mobile-tabs {
         border-bottom-right-radius: 10px;
         border-right: 1px solid #ababab;
       }
+
+      > td.mobile-tab-icon {
+        background-size: auto 75%;
+        background-repeat: no-repeat;
+        background-position: 7px 5px;
+        padding-left: 44px;
+      }
     }
   }
 }

data/lib/light_mobile/tabs.rb

@@ -12,11 +12,17 @@ class LightMobile::Tabs
     tr = table.add_ele(:tbody).add_ele(:tr)
 
     @tabs.each do |tab|
-      td = tr.add_ele(:td)
+      td = tr.add(:td)
 
       td.classes << "mobile-tab-active" if tab[:active]
       td.data[:tab] = tab[:id]
-      td.add_str tab[:label]
+
+      if tab[:icon]
+        td.css["background-image"] = "url('#{tab[:icon]}')"
+        td.classes << "mobile-tab-icon"
+      end
+
+      td.add_str tab[:label] if tab[:label]
     end
 
     table.html.html_safe

data/lib/light_mobile/version.rb

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

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: light_mobile
 version: !ruby/object:Gem::Version
-  version: 0.0.2
+  version: 0.0.3
 platform: ruby
 authors:
 - Kasper Johansen
@@ -65,11 +65,13 @@ files:
 - 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/application.js.coffee
+- app/assets/javascripts/light_mobile/flash_errors.js.coffee
 - app/assets/javascripts/light_mobile/menu.js.coffee
 - 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/flash_errors.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

data/app/assets/javascripts/light_mobile/application.js

@@ -1,13 +0,0 @@
-// This is a manifest file that'll be compiled into application.js, which will include all the files
-// listed below.
-//
-// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
-// or vendor/assets/javascripts of plugins, if any, can be referenced here using a relative path.
-//
-// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
-// compiled file.
-//
-// Read Sprockets README (https://github.com/sstephenson/sprockets#sprockets-directives) for details
-// about supported directives.
-//
-//= require_tree .