Merge branch 'responsive_design'

brucehsu · Aug 16, 2012 · 6545448 · 6545448
2 parents 4c0ebea + 70e5739
commit 6545448
Show file tree

Hide file tree

Showing 4 changed files with 141 additions and 8 deletions.
diff --git a/Gemfile b/Gemfile
@@ -4,7 +4,7 @@ gem 'rest-more', '>=1.0.0', '< 2.0'
 gem 'sinatra', '>=1.3.0'
 gem 'nokogiri', '>=1.5.0'
 gem 'slim', '>=1.2'
-gem 'sass', '>=3.1'
+gem 'sass', '>=3.2'
 gem 'json', '>=1.3'
 gem 'coffee-script', '>=2.2'
 gem 'execjs'

diff --git a/Gemfile.lock b/Gemfile.lock
@@ -21,7 +21,7 @@ GEM
       rest-client
     rest-more (1.0.2)
       rest-core (>= 1.0.0)
-    sass (3.1.20)
+    sass (3.2.1)
     sinatra (1.3.2)
       rack (~> 1.3, >= 1.3.6)
       rack-protection (~> 1.2)
@@ -44,7 +44,7 @@ DEPENDENCIES
   nokogiri (>= 1.5.0)
   rest-core (>= 1.0.3, < 2.0)
   rest-more (>= 1.0.0, < 2.0)
-  sass (>= 3.1)
+  sass (>= 3.2)
   sinatra (>= 1.3.0)
   slim (>= 1.2)
   therubyracer
diff --git a/views/index.slim b/views/index.slim
@@ -13,11 +13,12 @@ body
         input type='button' value='Add link' class='link_btn' onclick='getTitle();'
       input type='submit' value='Post' class='post_widget'
       br
-      input type='checkbox' name='post_comment' value='true' class='comment_widget' Post as comment
+      input type='checkbox' name='post_comment' value='true'class='comment_widget_checkbox'
+      label for='post_comment' class='comment_widget_text' Post as comment
       div id='word_count_indicator' class='word_count_widget' 0
       div id='post_result' class='post_result_widget'
     br
     - @auth_url.each do |sns, link|
-      a href="#{link}" Link with #{sns.to_s.capitalize}
+      a class="sns_link" href="#{link}" Link with #{sns.to_s.capitalize}
       br
 
diff --git a/views/stylesheet.scss b/views/stylesheet.scss
@@ -5,6 +5,12 @@ $link_width: $width - 86;
 $height: 400px;
 $border: 1px solid;
 
+$media: only screen;
+$iphone-min-width: 320px;
+$iphone-max-width: 480px;
+$ipad-min-width: 768px;
+$ipad-max-width: 1024px;
+
 .rounded {
     border-radius: $radius;
 }
@@ -14,31 +20,79 @@ $border: 1px solid;
 }
 
 .widget_box {
+    @media #{$media} and (min-device-width: $iphone-min-width) and (max-device-width: $iphone-max-width) {
+        width: 98%;
+    }
+
+    @media #{$media} and (min-device-width: $ipad-min-width) and (max-device-width: $ipad-max-width) {
+        width: 85%;
+    }
+
     float: center;
     position: relative;
     margin: auto;
-    width: $width+50;
-    height:$height+50;
+
+    width: $width + 50;
+    height: $height + 50;
+
     background-color: lighten($color, 100%);
 }
 
 @mixin widget {
     margin: 20px;
 }
 
-.comment_widget {
+.comment_widget_text {
+    @media #{$media} and (min-device-width: $iphone-min-width) and (max-device-width: $iphone-max-width) {
+        font-size: 36px;
+    }
+
+    @media #{$media} and (min-device-width: $ipad-min-width) and (max-device-width: $ipad-max-width) {
+        font-size: 24px;
+    }
+
     margin-top: 0px;
     margin-bottom: 0px;
 }
 
+.comment_widget_checkbox {
+    @media #{$media} and (min-device-width: $iphone-min-width) and (max-device-width: $iphone-max-width) {
+        width: 42px;
+        height: 42px;
+    }
+
+    @media #{$media} and (min-device-width: $ipad-min-width) and (max-device-width: $ipad-max-width) {
+        width: 30px;
+        height: 30px;
+    }
+}
+
 .word_count_widget {
+    @media #{$media} and (min-device-width: $iphone-min-width) and (max-device-width: $iphone-max-width) {
+        width: 95%;
+        font-size: 36px;
+    }
+
+    @media #{$media} and (min-device-width: $ipad-min-width) and (max-device-width: $ipad-max-width) {
+        width: 85%;
+        font-size: 24px;
+    }
+
     margin-top: 0px;
     margin-bottom: 0px;
     text-align: right;
     width: $width;
 }
 
 .post_result_widget {
+    @media #{$media} and (min-device-width: $iphone-min-width) and (max-device-width: $iphone-max-width) {
+        width: 95%;
+    }
+
+    @media #{$media} and (min-device-width: $ipad-min-width) and (max-device-width: $ipad-max-width) {
+        width: 85%;
+    }
+
     margin-top: 0px;
     margin-bottom: 3px;
     text-align: center;
@@ -47,6 +101,16 @@ $border: 1px solid;
 }
 
 .text_widget {
+    @media #{$media} and (min-device-width: $iphone-min-width) and (max-device-width: $iphone-max-width) {
+        width: 95%;
+        height: 680px;
+    }
+
+    @media #{$media} and (min-device-width: $ipad-min-width) and (max-device-width: $ipad-max-width) {
+        width: 85%;
+        height: 768px;
+    }
+
     margin-bottom: 5px;
     width: $width;
     height: $height;
@@ -55,19 +119,47 @@ $border: 1px solid;
 }
 
 .post_widget {
+    @media #{$media} and (min-device-width: $iphone-min-width) and (max-device-width: $iphone-max-width) {
+        width: 95%;
+        font-size: 28px;
+    }
+
+    @media #{$media} and (min-device-width: $ipad-min-width) and (max-device-width: $ipad-max-width) {
+        width: 85%;
+        font-size: 18px;
+    }
+
     margin-top: 0px;
     margin-bottom: 0px;
     width: $width;
     horizontal-align: center;
 }
 
 .link_box {
+    @media #{$media} and (min-device-width: $iphone-min-width) and (max-device-width: $iphone-max-width) {
+        width: 95%;
+    }
+
+    @media #{$media} and (min-device-width: $ipad-min-width) and (max-device-width: $ipad-max-width) {
+        width: 85%;
+    }
+
     margin-top: 0px;
     margin-bottom: 0px;
     width: $width;
 }
 
 .success_box {
+    @media #{$media} and (min-device-width: $iphone-min-width) and (max-device-width: $iphone-max-width) {
+        width: 95%;
+        font-size: 28px;
+    }
+
+    @media #{$media} and (min-device-width: $ipad-min-width) and (max-device-width: $ipad-max-width) {
+        width: 85%;
+        font-size: 18px;
+    }
+
     text-align: center;
     margin-top: 0px;
     margin-bottom: 0px;
@@ -79,6 +171,16 @@ $border: 1px solid;
 }
 
 .failed_box {
+    @media #{$media} and (min-device-width: $iphone-min-width) and (max-device-width: $iphone-max-width) {
+        width: 95%;
+        font-size: 28px;
+    }
+
+    @media #{$media} and (min-device-width: $ipad-min-width) and (max-device-width: $ipad-max-width) {
+        width: 85%;
+        font-size: 18px;
+    }
+
     margin-top: 0px;
     margin-bottom: 3px;
     text-align: center;
@@ -93,6 +195,16 @@ $border: 1px solid;
 }
 
 .link_url {
+    @media #{$media} and (min-device-width: $iphone-min-width) and (max-device-width: $iphone-max-width) {
+        width: 80%;
+        font-size: 28px;
+    }
+
+    @media #{$media} and (min-device-width: $ipad-min-width) and (max-device-width: $ipad-max-width) {
+        width: 85%;
+        font-size: 18px;
+    }
+
     margin: 3px;
     margin-bottom: 5px;
     margin-left: 0px;
@@ -102,10 +214,30 @@ $border: 1px solid;
 }
 
 .link_btn {
+    @media #{$media} and (min-device-width: $iphone-min-width) and (max-device-width: $iphone-max-width) {
+        width: 20%;
+        font-size: 28px;
+    }
+
+    @media #{$media} and (min-device-width: $ipad-min-width) and (max-device-width: $ipad-max-width) {
+        width: 15%;
+        font-size: 18px;
+    }
+
     margin: 3px;
     margin-bottom: 5px;
     margin-left: 1px;
     margin-right: 0px;
     align: center;
     width: 80px;
+}
+
+.sns_link {
+    @media #{$media} and (min-device-width: $iphone-min-width) and (max-device-width: $iphone-max-width) {
+        font-size: 36px;
+    }
+
+    @media #{$media} and (min-device-width: $ipad-min-width) and (max-device-width: $ipad-max-width) {
+        font-size:24px;
+    }
 }