OTWO-7469 people page ui fix for tablet

app/assets/javascripts/steamgraph.js

@@ -90,7 +90,7 @@ Streamgraph = {
         else if (window.innerWidth >= 768 && window.innerWidth <= 1024)
           {var width = 515; var height = 300; var transform_new = 0;}
         else
-          {var width = 715; var height = 300; var transform_new = 0;}
+          {var width = 1024; var height = 300; var transform_new = 0;}
 
       var margin = {top: 0, right: 0, bottom: 0, left: 0};
       var width = width - margin.left - margin.right

app/assets/stylesheets/accounts/languages.sass

@@ -23,4 +23,4 @@
   .contributors
     background-color: #237b46 !important
   .commits
-    background-color: #8f908f !important
+    background-color: #8f908f !important

app/assets/stylesheets/accounts/mini_header.sass

@@ -5,10 +5,8 @@
 #mini_account_header .laurel img
   margin-top: -8px
 #mini_account_row
-  min-height: 100px
   display: table
   float: left
-  margin-top: -10px
   .col-md-1
     padding-left: 0px
     display: table-cell
@@ -21,7 +19,9 @@
     height: 9px
     display: block
 #mini_account_header
-  min-height: 80px
+  margin-top: -15px
   position: relative
+  min-height: 80px
+  margin-left: -10px
   form
     display: inline

app/assets/stylesheets/accounts/show.sass

@@ -26,7 +26,6 @@
 #account_header
   margin-top: -15px
   margin-left: 20px
-  width: 790px
   position: relative
   min-height: 145px
   .info
@@ -44,13 +43,11 @@
     display: inline
 @media only all and (min-width: 320px) and (max-width: 480px)
   #account_header
-    width: auto
     .social-connect
       .btn-info
        font-size: 10px !important
-  #account_name
-    margin-top: -134px
-    margin-left: 64px
+  #account_name_header
+    margin-top: 10px
     h1
       font-size: 14px !important
       width: auto
@@ -89,9 +86,8 @@
         font-size: 6px !important
 @media (min-width: 540px) and (max-width: 1024px)
   #account_header
-    width: 83.33333333%;
     margin-left: 8px
-  #account_name
+  #account_name_header
     h1
       font-size: 24px !important
       width: auto

app/assets/stylesheets/badges.sass

@@ -1,8 +1,7 @@
 .mini-badges-section
   position: absolute
-  height: 62px
   top: 50%
-  right: 4px
+  left: 20px
   margin-top: -31px
 
   .describer-badge
@@ -87,20 +86,22 @@
     &.last
       :margin-right 0
 
-#account_header
+.account_header
   .mini-badges-section
     position: relative
     margin: 27px 4px 0 0
+    float: right
     .account-badge
       margin: 0 20px 31px 0
       height: 48px
       width: 48px
       &.last
         margin-right: 0
 @media only all and (min-width: 320px) and (max-width: 480px)
-  #account_header
+  .account_header
     .mini-badges-section
-      margin: 5px 43px 0 0
+      margin: 0 0 15px
+      float: none
       .account-badge
         margin: 0 20px 20px 0
 

app/assets/stylesheets/forums_topics_posts.sass

@@ -71,6 +71,7 @@
 
 #post_body_text_size
   font-size: 13px
+  word-wrap: break-word
 
 .well.posts ul li
   margin-left: 20px

app/assets/stylesheets/managed_projects_bootstrap_responsive.scss

@@ -0,0 +1,105 @@
+// Managed Projects Responsive Layout using Bootstrap grid
+
+#managed_projects_list, #projects_index_list {
+  .well {
+    // Use Bootstrap's grid for main project block
+    @media (min-width: 768px) {
+      flex-wrap: wrap;
+      align-items: flex-start;
+    }
+    @media (max-width: 767px) {
+      display: block;
+    }
+
+    h2.title {
+      @media (min-width: 768px) {
+        width: 100%;
+        display: block;
+      }
+      @media (max-width: 767px) {
+        width: 100%;
+        display: block;
+        float: none !important;
+      }
+    }
+
+    #inner_content {
+      @media (min-width: 1200px) {
+        flex-wrap: nowrap;
+        width: 100%;
+      }
+      @media (min-width: 768px) and (max-width: 1199px) {
+        flex-wrap: wrap;
+        width: 100%;
+      }
+      @media (max-width: 767px) {
+        display: block;
+        width: 100%;
+      }
+
+      .logo {
+        @media (min-width: 768px) {
+          flex: 0 0 64px;
+          max-width: 64px;
+          margin-right: 15px;
+        }
+        @media (max-width: 767px) {
+          display: block;
+          margin: 0 auto 10px;
+          text-align: center;
+        }
+      }
+
+      .info, .stats, .reviews-and-pai {
+        @media (min-width: 1200px) {
+          flex: 1 1 0;
+          min-width: 0;
+        }
+        @media (min-width: 768px) and (max-width: 1199px) {
+          flex: 1 1 100%;
+          min-width: 0;
+        }
+        @media (max-width: 767px) {
+          display: block;
+        }
+      }
+
+      .info {
+        @media (min-width: 1200px) {
+          margin-left: 10px;
+          width: 980px;
+        }
+        @media (max-width: 767px) {
+          margin: 0 0 10px 0;
+        }
+
+        i {
+          float: right !important;
+        }
+      }
+
+      .stats, .reviews-and-pai {
+        @media (min-width: 768px) {
+          margin-left: 10px;
+        }
+      }
+    }
+
+    .add-info, .tags {
+      @media (max-width: 767px) {
+        width: 100%;
+        display: block;
+        margin-bottom: 10px;
+      }
+    }
+
+    .licenses {
+      @media (max-width: 767px) {
+        text-align: left;
+        width: 100%;
+        display: block;
+        margin-bottom: 10px;
+      }
+    }
+  }
+}

app/assets/stylesheets/positions.sass

@@ -24,7 +24,6 @@
     right: 0px
 
 .one-project
-  width: 940px
   background-color: #F2F2F2
   margin-top: 20px
   margin-bottom: 10px

app/assets/stylesheets/projects.sass

@@ -61,10 +61,6 @@ $pai_levels: (('very_high',0), ('high', 1), ('moderate', 2), ('low', 3), ('very_
       color: #fff
   .logo
     margin: 25px 20px 25px 0
-  .info
-    width: 490px
-    i
-      float: right
   .claimed-by-org
     margin: 0 15px 0 10px
   .desc
@@ -77,7 +73,6 @@ $pai_levels: (('very_high',0), ('high', 1), ('moderate', 2), ('low', 3), ('very_
     span
       margin-left: 10px
     a
-      width: 80px
       text-align: right
       display: inline-block
       font-weight: bold
@@ -105,8 +100,6 @@ $pai_levels: (('very_high',0), ('high', 1), ('moderate', 2), ('low', 3), ('very_
   .add-info
     clear: left
     width: 574px
-    .main_language
-      margin-left: 85px
     a
       text-decoration: underline
   .tags

app/assets/stylesheets/search-dingus.sass

@@ -8,11 +8,7 @@
     display: inline !important
     select
       width: 400px
-  .col-md-5
-    width: 43%
-
   .col-md-4
-    width: 32%
     #sort_by
       float: right
       padding-right: 10px

app/assets/stylesheets/sidebar.sass

@@ -118,7 +118,7 @@
       display: flex
       flex-direction: row
       flex-wrap: wrap
-      width: 100%
+      width: auto
 
       .actions
         width: 50%

app/assets/stylesheets/static_forms.sass

@@ -326,6 +326,9 @@ input.span10, textarea.span10, .uneditable-input.span10
 input.span9, textarea.span9, .uneditable-input.span9
   width: 686px
 
+input.new_project_input.span9
+  width: 100%
+
 input.span8, textarea.span8, .uneditable-input.span8
   width: 606px
 

app/assets/stylesheets/streamgraph.sass

@@ -1,13 +1,10 @@
 #ohloh_streamgraph
   &.languages
     height: 300px !important
-  #ohloh_stream
-    width: 940px !important
-  width: 715px
+  width: 940px
   height: 350px !important
   float: left
-  margin-left: 15px
-  margin-right: 10px
+  margin-left: 90px
   .highlight
     stroke: #663300
     stroke-width: 2px
@@ -63,8 +60,7 @@
     background: asset_url('charts/watermark_692.png') no-repeat center left
 @media only all and (min-width: 320px) and (max-width: 480px)
   #ohloh_streamgraph
-    &.languages
-      height: 150px !important
+    margin-left: 0
     #ohloh_stream
       width: auto !important
     width: auto !important
@@ -75,5 +71,6 @@
     #ohloh_stream
       width: auto !important
     width: auto !important
-  #streamgraph_legend
-    margin-right: 48px
+@media (min-width: 700px) and (max-width: 800px)
+  #ohloh_streamgraph
+    margin-left: 0