more responsive stuffs [ci skip]

app/assets/javascripts/app/views/small_frame.js

@@ -79,9 +79,17 @@ app.views.SmallFrame = app.views.Post.extend({
     if(!(this.model.get("photos") || [])[0]) { return }
 
     var modifiers = [this.dimensionsClass(), this.colorClass()].join(' ')
+      , width;
+
+    /* mobile width
+    *
+    *  currently does not re-calculate on orientation change */
+    if($(window).width() <= 767) {
+      width = $(window).width();
+    }
 
     var firstPhoto = this.model.get("photos")[0]
-      , width = (modifiers.search("x2") != -1 ? this.DOUBLE_COLUMN_WIDTH : this.SINGLE_COLUMN_WIDTH)
+      , width = width || (modifiers.search("x2") != -1 ? this.DOUBLE_COLUMN_WIDTH : this.SINGLE_COLUMN_WIDTH)
       , ratio = width / firstPhoto.dimensions.width;
 
     return(ratio * firstPhoto.dimensions.height)

app/assets/stylesheets/new_styles/_base.scss

@@ -1,6 +1,6 @@
 body {
   background-image : image_url("pattern.png");
-  padding : none !important;
+  padding : none;
 }
 
 /* new link color */
@@ -473,3 +473,10 @@ div[data-template=flow] {
     font-family : Roboto-Bold;
   }
 }
+
+/* responsive */
+@media (max-width: 767px) {
+  body {
+    padding : 0;
+ }
+}

app/assets/stylesheets/new_styles/_canvas.scss

@@ -338,7 +338,7 @@
   }
 }
 
-/* canvas responsive */
+/* responsive */
 @media (max-width: 767px) {
   body {
     padding : 0;
@@ -352,6 +352,7 @@
     margin-bottom : 10px;
 
     .content {
+      font-size : 0.9em;
       margin : 0 20px;
       width : auto !important;
     }

app/assets/stylesheets/new_styles/_profile.scss

@@ -212,7 +212,7 @@
   }
 }
 
-/* canvas responsive */
+/* responsive */
 @media (max-width: 767px) {
   .profile-image-container {
     height : 100px;
@@ -228,7 +228,8 @@
     padding-bottom : 20px;
   }
 
-  #wallpaper-upload {
+  #wallpaper-upload,
+  .edit-control {
     display : none;
   }
 }

app/assets/templates/profile-info.jst.hbs

@@ -36,10 +36,13 @@
         </span>
 
         {{#if is_own_profile}}
+            <span class="edit-control">
                 <span class="divider">•</span>
                     <a href="/profile/edit" title="Edit Profile" rel="tooltip" style="margin-left:2px;">
                         <i class="icon-cog icon-white"></i>
                     </a>
+                </span>
+            </span>
         {{/if}}
     </div>