jap_mag 0.0.2 → 0.0.3

data/README.md

@@ -6,25 +6,37 @@ This gem helps designers start a project that follows JapMag. It consists of sev
 
 ## Installation
 
+Please note JapMag only supports Rails 3+.
+
 Add this line to your application's Gemfile:
 
-    gem 'jap_mag'
+    gem 'jap_mag', git: "git://github.com/felixding/JapMag.git"
 
 And then execute:
 
     $ bundle
 
-Or install it yourself as:
+In your CSS manifest (application.css in default):
 
-    $ gem install jap_mag
+     *= require jap_mag
 
-## Usage
+In your Javascript manifest (application.js in default):
 
-In your CSS manifest (application.css in default):
+	 //= require jquery
+     //= require jquery_ujs
+     //= require jap_mag
 
-     *= require jap_mag
+In your app/controllers/application_controll.rb, add
+
+     include JapMag
+     
+For a new Rails app, delete app/views/layout/application.html.erb.
+
+Done! Now start your Rails app and you will see a JapMag-powered website!
+     
+## Usage
 
-Documentation is one the way. Stay tuned!
+Documentation is on the way. Stay tuned!
 
 ## Contributing
 

data/app/assets/javascripts/jap_mag/base.js

@@ -0,0 +1,9 @@
+$(document).ready(function() {
+	if($("body").hasClass("Mobile")) {
+		/*
+		* Hide toolbar by default
+		* see http://www.catswhocode.com/blog/10-useful-code-snippets-to-develop-iphone-friendly-websites
+		*/
+		setTimeout(scrollTo, 0, 0, 1);
+	};
+});

data/app/assets/javascripts/jap_mag.js

@@ -0,0 +1 @@
+//= require jap_mag/base

data/app/assets/stylesheets/{base.scss → jap_mag/base.scss}

@@ -6,7 +6,7 @@ body {
 	color: $color_body;
 }
 
-#body {
+#wrapper {
 	width: $base_width;
 	padding: 10px;
 	margin: 0 auto;
@@ -16,10 +16,17 @@ a {
 	color: $color_blue;
 	text-decoration: none;
 
+	&.dangerous {
+		color: red;
+	}
+	
+	&.edit {
+		color: $color_yellow;
+	}
 	
 	&:hover {
 		color: #fff;
-	    background-color: #000;
+	  background-color: #000;
 	}
 
 	img {
@@ -37,7 +44,6 @@ em {
 
 h1, h2, h3, h4 {
 	font-weight: normal;
-	color: black;
 	line-height: 1em;
 	margin: 0 0 1em;
 	-webkit-font-smoothing: antialiased;
@@ -54,14 +60,16 @@ h1 {
 
 h2 {
 	font-size: 1.6em;
+	line-height: 1.6em;
 }
 
 h3 {
 	font-size: 1.4em;
+	line-height: 1.4em;
 }
 
 p {
-	margin: 1em 0;
+	margin: 0.5em 0;
 }
 
 blockquote {
@@ -83,6 +91,10 @@ blockquote {
 		overflow: hidden;
 		margin: 20px 0 0;
 		
+		&.left {
+			float: left;
+		}
+		
 		li {
 			float: left;
 			margin: 0 10px 0 0;
@@ -91,6 +103,8 @@ blockquote {
 			
 			&:last-child {
 				border: none;
+				margin-right: 0;
+				padding-right: 0;
 			}
 			
 			.highlight {
@@ -102,9 +116,21 @@ blockquote {
 			}
 		}
 	}
+	
+	.admin-navigation {
+		@extend .navigation;
+		margin: 10px 0 0;
+		padding: 10px;
+		background: #eee;
+		float: left;
+		
+		li {
+			border: none;
+		}
+	}
 }
 
-#wrapper {
+#body {
 	margin: 0;
 	padding: 0;
 	overflow: hidden;
@@ -145,65 +171,4 @@ blockquote {
 			background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAALCAIAAAD5gJpuAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAHzSURBVHjaYkxOP8IAB//+Mfz7w8Dwi4HhP5CcJb/n/7evb16/APL/gRFQDiAAw3JuAgAIBEDQ/iswEERjGzBQLEru97ll0g0+3HvqMn1SpqlqGsZMsZsIe0SICA5gt5a/AGIEarCPtFh+6N/ffwxA9OvP/7//QYwff/6fZahmePeB4dNHhi+fGb59Y4zyvHHmCEAAAW3YDzQYaJJ93a+vX79aVf58//69fvEPlpIfnz59+vDhw7t37968efP3b/SXL59OnjwIEEAsDP+YgY53b2b89++/awvLn98MDi2cVxl+/vl6mituCtBghi9f/v/48e/XL86krj9XzwEEEENy8g6gu22rfn78+NGs5Ofr16+ZC58+fvyYwX8rxOxXr169fPny+fPn1//93bJlBUAAsQADZMEBxj9/GBxb2P/9+S/R8u3vzxuyaX8ZHv3j8/YGms3w8ycQARmi2eE37t4ACCDGR4/uSkrKAS35B3TT////wADOgLOBIaXIyjBlwxKAAGKRXjCB0SOEaeu+/y9fMnz4AHQxCP348R/o+l+//sMZQBNLEvif3AcIIMZbty7Ly6t9ZmXl+fXj/38GoHH/UcGfP79//BBiYHjy9+8/oUkNAAHEwt1V/vI/KBY/QSISFqM/GBg+MzB8A6PfYC5EFiDAABqgW776MP0rAAAAAElFTkSuQmCC) no-repeat 0 2px;
 		}
 	}
-}
-
-.field_with_errors {
-  padding: 2px;
-  background-color: red;
-  display: table;
-}
-
-#error_explanation {
-  width: 450px;
-  border: 2px solid red;
-  padding: 7px;
-  padding-bottom: 0;
-  margin-bottom: 20px;
-  background-color: #f0f0f0;
-
-  h2 {
-    text-align: left;
-    font-weight: bold;
-    padding: 5px 5px 5px 15px;
-    font-size: 1em;
-    margin: -7px;
-    margin-bottom: 0px;
-    background-color: #c00;
-    color: #fff;
-	}
- 
-	ul li {
-	    list-style: square;
-	} 
-}
-
-ol.list {
-	list-style: decimal;
-	margin: 1em 0;
-	padding: 0 0 0 4em;
-	
-	li {
-		margin: 0 0 0.5em 0;
-	}
-}
-
-/* iPhone 2G, 3G, 3GS Portrait */
-@media only screen and (device-width: 320px) and (orientation: portrait) {
-	@include iphone(300px);
-}
-
-/* iPhone 2G, 3G, 3GS Landscape */
-@media only screen and (max-device-width: 480px) and (orientation: landscape) {
-	/* CSS3 Rules for iPhone in Landscape Orientation */
-	@include iphone(460px);
-}
-
-/* iPhone 4, 4S Portrait */
-@media only screen and (device-width: 480px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {
-	@include iphone(300px);
-}
-
-/* iPhone 4, 4S Landscape */
-@media only screen and (device-width: 960px) and (orientation: landscape) {
-	@include iphone(460px);
 }

data/app/assets/stylesheets/jap_mag/mixins.scss

@@ -0,0 +1,69 @@
+@mixin rounded($radius: 5px) {
+  border-radius: $radius;
+  -moz-border-radius: $radius;
+  -webkit-border-radius: $radius;
+}
+
+
+@mixin box-shadow($effect: 1px 0px 5px black) {
+	box-shadow: $effect;
+	-moz-box-shadow: $effect;
+	-webkit-box-shadow: $effect;
+}
+
+@mixin iphone_base {
+	html {
+		-webkit-text-size-adjust: none;
+	}
+
+	body {
+		font-size: 14px;
+	}
+	
+	#wrapper {
+		padding: 10px;
+		margin: 0 auto;
+	}
+	
+	#body {
+		.primary {
+			margin: 0 0 10px 0;
+		}
+	}
+	
+	form.basic {	
+		input[type=text], input[type=email], input[type=password], textarea {
+			width: 95%;
+		}
+	}
+}
+
+@mixin set_width($base_width) {
+	#wrapper {
+		width: $base_width - 20px;
+	}
+}
+
+/* iPhone 2G, 3G, 3GS, 4, 4S, 5 Portrait */
+@mixin iphone_portrait {
+	@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (orientation: portrait) {
+		@include set_width(320px);
+		@content;
+	}
+}
+
+/* iPhone 2G, 3G, 3GS, 4, 4S Landscape */
+@mixin iphone_4s_landscape {
+	@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (orientation: landscape) {
+		@include set_width(480px);
+		@content;
+	}
+}
+
+/* iPhone 5 Landscape */
+@mixin iphone_5_landscape {
+	@media only screen and (width: 568px) and (orientation: landscape) {
+		@include set_width(568px);
+		@content;
+	}
+}

data/app/assets/stylesheets/{variables.scss → jap_mag/variables.scss}

@@ -1,10 +1,12 @@
 $base_width: 800px;
 
 $color_green: #53a440;
-$color_blue: #3b7fa6;
+$color_light_green: #7dde66;
+$color_lighter_green: #65b453;
+$color_blue: #3b7fa6; /*#56a1cc;*/
 $color_light_blue: #6aa5c6;
 $color_lighter_blue: #EBF8F9;
-$color_red: #e75151;
+$color_red: #e75151;/*#ff5656;*/
 $color_yellow: #fc9729;
 $color_pink: #FF7676;
 $color_body: #000;

data/app/assets/stylesheets/{widgets.scss → jap_mag/widgets.scss}

@@ -71,10 +71,8 @@ table.basic {
 	border: none;
 	border-collapse: collapse;
 	border-spacing: 0;
-	font-size: 12px;
 	margin: 0;
 	padding: 0;
-	text-align: left;
 	width: 100%;
 
 	td, & th {
@@ -125,7 +123,7 @@ table.basic {
 
 /* rating stars */
 .rating {
-	background: url(/assets/star.gif) repeat-x 0 -32px;
+	background: url(data:image/gif;base64,R0lGODlhEAAwAOYAAKE3N8XFxemzG8yADefCWtSEhNBzc97e3uSvr8BgYOO4Q/fsvMVSUtbW1uK2NOS9Zvb29urLRtqpqe7u7t2oKfHcmt66uuzPea1GRvfp6ey8Iu3CMOnGQevNmc1sbPbhYvTf3/TZWvHOU+fn58daWtmdJc97e9eSkvfrtb9CQsJKSt+vMefEcuzHx+nHTO/FKe/VTPz47+a9QvLVWMxmZszMzPv12Pv15ua/OeiwJfHbot2qRfHcf71KStOPIqo/P+S7Su7DS+WtOO3Sq////9iMjNN8fPTWQOrJgfHNL/LQRfXeXemzIPnu7vLWVe3QWu7DQdGLGenHbu3Ly+/IT+W2OO3OSe+9Ke/OKeq1K961MclgYOu9RO+1QvLcV/DLOffenOi6uuvOh9uUlOy/SLRMTNaZK/LfsLhERPfWSv///wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEHAGoALAAAAAAQADAAAAf/gGqCg2oQE4SIiA0NiY0TiyONiouMkoIjDQcHmYkTmoublKAjEJuan6KpaqCiNa41izVEgqyxrrEQhK2vDTW5hJi9vJyIoa2LicapNYmUNZqvzIiukYMjNQGdkoeWIFOWiAY04IMtNDQI5Go0BgYk5Ag0RkZbRYktYwZbNCYeW+4MaBRAkKGfgXlGPDBgQMKDPxIMVKhxWIAGCYgRVaigEbGJoHNGMGpMwVGFx0H/SqpIQTJFBkQS/mlcedFEoiLnGOyLSCJBIgMe2l08R6JMooYMUhQ4gQYNgx+JNI4hJAEDgERhJFkAZ2OBOkFPInxdYMVKBXURnDjBQQ6MlRAhjDhcSISCxxMOb5V8EYHDARApOm48geFliWElL15soBKES5UVK9SIgPHhSJIkiTVoYMJFyIoYglxYWXL5hWYBZIRQAD1IxgzEpgUI4ELhBqIKHGaY1iCgSpUHiS5EiLABCpQsOarsSESAiggqMqpwcWwmkQIqVSiwQFKihJAoiSCLIdTBx4BEZyQNGRQIADs=) repeat-x 0 -32px;
 	height: 16px;
 
 	span {
@@ -282,6 +280,16 @@ form.basic {
 			}
 		}
 	}
+	
+	ul.checkboxes {
+		li.checkbox {
+			margin: 0 0 10px;
+			
+			label {
+				margin: 0 0 0 5px;
+			}
+		}
+	}
 }
 /* @end */
 
@@ -391,20 +399,11 @@ ul.scopes {
 	border-top: 1px solid #eee;
 	overflow: hidden;
 
-	&.description {
-		.key {
-			display: none;
-		}
-
-		.value {
-			width: 100%;
-		}
-	}
-
 	.key {
 		float: left;
 		width: 200px;
 		text-transform: uppercase;
+		font-weight: bold;
 	}
 
 	.value {
@@ -446,6 +445,45 @@ ul.scopes {
 }
 
 .list {
-	list-style: disc;
-	margin: 0 0 9px 3em;
-}
+	margin: 1em 0;
+	padding: 0 0 0 4em;
+	
+	li {
+		margin: 0 0 0.5em 0;
+	}
+}
+
+ol.list {
+	list-style-type: decimal;
+}
+
+.field_with_errors {
+  padding: 2px;
+  background-color: red;
+  display: table;
+}
+
+#error_explanation {
+  width: 450px;
+  border: 2px solid red;
+  padding: 7px;
+  padding-bottom: 0;
+  margin-bottom: 20px;
+  background-color: #f0f0f0;
+
+  h2 {
+    text-align: left;
+    font-weight: bold;
+    padding: 5px 5px 5px 15px;
+    font-size: 1em;
+    margin: -7px;
+    margin-bottom: 0px;
+    background-color: #c00;
+    color: #fff;
+	}
+ 
+	ul {
+	  list-style: square;
+		@extend .list;
+	} 
+}

data/app/assets/stylesheets/jap_mag.css

@@ -9,8 +9,8 @@
  * compiled file, but it's generally better to create a new file per style scope.
  *
  *= require_self
- *= require reset
- *= require variables
- *= require widgets
- *= require base
+ *= require jap_mag/reset
+ *= require jap_mag/variables
+ *= require jap_mag/widgets
+ *= require jap_mag/base
  */

data/app/helpers/{widgets_helper.rb → jap_mag_widgets_helper.rb}

@@ -1,4 +1,28 @@
-module WidgetsHelper
+module JapMagWidgetsHelper
+  
+  def is_mobile_device?
+    mobile_user_agents = 'palm|blackberry|nokia|phone|midp|mobi|symbian|chtml|ericsson|minimo|audiovox|motorola|samsung|telit|upg1|windows ce|ucweb|astel|plucker|x320|x240|j2me|sgh|portable|sprint|docomo|kddi|softbank|android|mmp|pdxgw|netfront|xiino|vodafone|portalmmm|sagem|mot-|sie-|ipod|up\\.b|webos|amoi|novarra|cdm|alcatel|pocket|iphone|mobileexplorer|mobile'
+    request.user_agent.to_s.downcase =~ Regexp.new(mobile_user_agents)
+  end
+  
+  def get_body_class
+    c = []
+    c << controller.controller_name
+    c << "mobile" if is_mobile_device?
+    
+    c.collect{|e| e.titleize.gsub(/\s/, "")}.join " "
+  end
+  
+  def get_body_id
+    content_for(:id).to_s.titleize.gsub(/\s/, "") unless content_for(:id).blank?
+  end
+  
+  def get_wrapper_class
+    c = []
+    c << controller.action_name
+    
+    c.collect{|e| e.titleize.gsub(/\s/, "")}.join " "
+  end
 
   #
   # navigation helper
@@ -139,6 +163,25 @@ module WidgetsHelper
       end
     end
   end
+  
+  def last_deployed_at
+    file = File.join("tmp", "restart.txt")
+    File.exists?(file) ? File.atime(file) : nil
+  end
+  
+  def current_controller_action_in?(*args)
+    args.each do |element|
+      if element.include?("#")
+        array = element.match(/([a-z\-\_]*)#([a-z\-\_]*)/).to_a
+        c, a = array[1], array[2]
+        return true if controller.controller_name == c && controller.action_name == a
+      else
+        return true if controller.controller_name == element
+      end
+    end
+    
+    false
+  end
 
   protected
   

data/app/views/layouts/application.erb

@@ -5,27 +5,28 @@
 	<meta charset="utf-8"/>
 	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
 	<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1, minimum-scale=1,user-scalable=yes" />
-
+	<meta name="description" content="<%= t "slogan" %>" />
+	<meta name="keywords" content="<%= t "logo" %>" />
 	<title><%= content_for(:title) %></title>
-
 	<%= stylesheet_link_tag    "application", :media => "all" %>
+	<%= javascript_include_tag "application" %>
+	<%= render "layouts/rss" %>
 	<%= csrf_meta_tags %>
 </head>
 
-<body class="<%= controller.controller_name.titleize.gsub(/\s/, "") %>"<%= raw " id=\"#{content_for(:id).to_s.titleize.gsub(/\s/, "")}\"" unless content_for(:id).blank? %>>
-	<div class="<%= (controller.action_name).titleize.gsub(/\s/, "") %>" id="body">
+<body class="<%= get_body_class %>"<%= " id=\"#{get_body_id}\"".html_safe if get_body_id  %>>
+	<div class="<%= get_wrapper_class %>" id="wrapper">
 		<%= render :partial => "/layouts/header" %>
 
-		<div id="wrapper">
+		<div id="body">
 			<%= render :partial => "/layouts/flash", :locals => {:flash => flash} %>
 			<%= yield %>
 		</div>
 
 		<%= render :partial => "/layouts/footer" %>
 	</div>
-	<%= render "/layouts/ga" if Rails.env.production? %>
+	<%= render "/layouts/tracking" if Rails.env.production? %>
 	<!-- layout:application -->
-	<%= javascript_include_tag "application" %>
 	<!--[if lt IE 9]>
 	<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
 	<![endif]-->

data/config/locales/en.yml

@@ -0,0 +1,3 @@
+en:
+  logo: "My Shiny New Site"
+  slogan: ""

data/lib/jap_mag.rb

@@ -1,6 +1,14 @@
-require "jap_mag/version"
-
 module JapMag
+  # i18N
+  def _ key, options={}
+    key = (key[0] == "/") ? key.gsub("/", "") : "#{params[:controller]}.#{params[:action]}.#{key}"
+    t(key, options)
+  end
+  
+  def self.included base
+    base.helper_method :_
+  end
+  
   class Engine < Rails::Engine
   end
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: jap_mag
 version: !ruby/object:Gem::Version
-  version: 0.0.2
+  version: 0.0.3
   prerelease: 
 platform: ruby
 authors:
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2012-09-10 00:00:00.000000000 Z
+date: 2012-10-19 00:00:00.000000000 Z
 dependencies: []
 description: JapMag is the design language created by Felix Ding. This gem helps designers
   start a project that follows JapMag.
@@ -24,23 +24,25 @@ files:
 - LICENSE
 - README.md
 - Rakefile
-- app/assets/stylesheets/base.scss
+- app/assets/javascripts/jap_mag.js
+- app/assets/javascripts/jap_mag/base.js
 - app/assets/stylesheets/jap_mag.css
-- app/assets/stylesheets/mixins.scss
-- app/assets/stylesheets/reset.scss
-- app/assets/stylesheets/variables.scss
-- app/assets/stylesheets/widgets.scss
-- app/controllers/application_controller.rb
-- app/helpers/widgets_helper.rb
+- app/assets/stylesheets/jap_mag/base.scss
+- app/assets/stylesheets/jap_mag/mixins.scss
+- app/assets/stylesheets/jap_mag/reset.scss
+- app/assets/stylesheets/jap_mag/variables.scss
+- app/assets/stylesheets/jap_mag/widgets.scss
+- app/helpers/jap_mag_widgets_helper.rb
 - app/views/layouts/_flash.erb
 - app/views/layouts/_footer.erb
-- app/views/layouts/_ga.erb
 - app/views/layouts/_header.erb
 - app/views/layouts/_navigation.erb
+- app/views/layouts/_rss.erb
+- app/views/layouts/_tracking.erb
 - app/views/layouts/application.erb
+- config/locales/en.yml
 - jap_mag.gemspec
 - lib/jap_mag.rb
-- lib/jap_mag/version.rb
 homepage: https://github.com/felixding/JapMag
 licenses: []
 post_install_message: 

data/app/assets/stylesheets/mixins.scss

@@ -1,28 +0,0 @@
-@mixin rounded($radius: 5px) {
-  border-radius: $radius;
-  -moz-border-radius: $radius;
-  -webkit-border-radius: $radius;
-}
-
-
-@mixin box-shadow($effect: 1px 0px 5px black) {
-	box-shadow: $effect;
-	-moz-box-shadow: $effect;
-	-webkit-box-shadow: $effect;
-}
-
-@mixin iphone($base_width) {
-	html {
-		-webkit-text-size-adjust: none;
-	}
-
-	#body {
-		width: $base_width;
-	}
-	
-	form.basic {	
-		input[type=text], input[type=email], input[type=password], textarea {
-			width: 95%;
-		}
-	}
-}

data/app/controllers/application_controller.rb

@@ -1,11 +0,0 @@
-class ApplicationController < ActionController::Base
-
-  # i18N
-  def _ key, options={}
-    key = (key[0] == "/") ? key.gsub("/", "") : "#{params[:controller]}.#{params[:action]}.#{key}"
-    t(key, options)
-  end
-
-  helper_method :_
-
-end

data/lib/jap_mag/version.rb

@@ -1,3 +0,0 @@
-module JapMag
-  VERSION = "0.0.2"
-end