managed_projects page fix fir tablet and mobile

Author: Niharika1117

app/assets/stylesheets/accounts/languages.sass

@@ -23,4 +23,14 @@
   .contributors
     background-color: #237b46 !important
   .commits
-    background-color: #8f908f !important
+    background-color: #8f908f !important
+
+@media (max-width: 767px)
+  #language_detail
+    overflow-x: auto
+    -webkit-overflow-scrolling: touch
+    width: 100%
+  table 
+    min-width: 600px
+    width: max-content
+    display: table

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/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

@@ -99,3 +99,18 @@
     font-size: 8px !important
   .global_top_search_icon
     font-size: 10px !important
+
+@media (max-width: 767px)
+  #search-dingus
+    #sort_chosen
+      width: 84px !important;
+
+@media (min-width: 1200px)
+  #search-dingus
+    #sort_chosen
+      width: auto !important;
+
+@media (min-width: 768px) and (max-width: 1199px)
+  #search-dingus
+    #sort_chosen
+      width: auto !important;

app/assets/stylesheets/streamgraph.sass

@@ -1,15 +1,12 @@
 #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: #777472ff
     stroke-width: 2px
   .x_axis
     path
@@ -63,17 +60,15 @@
     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
     #ohloh_stream
-      width: auto !important
-    width: auto !important
+      width: inherit !important
+    width: inherit !important
   #streamgraph_legend
     font-size: 13px !important
 @media (min-width: 540px) and (max-width: 1024px)
   #ohloh_streamgraph
     #ohloh_stream
-      width: auto !important
-    width: auto !important
+      width: inherit !important
+    width: inherit !important
   #streamgraph_legend
     margin-right: 48px

app/assets/stylesheets/streamgraph_responsive.sass

@@ -0,0 +1,25 @@
+/* Language Graph Responsive Alignment */
+
+/* Desktop view - Center the stream graph */
+@media (min-width: 1025px)
+  #ohloh_streamgraph
+    float: left !important
+    margin-left:  120px !important
+    margin-right: auto !important
+    display: block
+  .nomargin
+    margin-left:  120px !important
+
+/* Tablet and Mobile - Keep left alignment with title */
+@media (max-width: 1024px)
+  #ohloh_streamgraph
+    float: left
+    margin-left: 0 !important
+    margin-right: 0
+
+/* Mobile specific adjustments */
+@media (max-width: 768px)
+  #ohloh_streamgraph
+    width: 100% !important
+    margin-left: 0 !important
+    float: none

app/views/positions/_commits_by_individual_project_highchart.html.haml

@@ -3,4 +3,4 @@
   - chart_data = ChartDecorator.new.project_commit_history(@account, position.project_id)
   .margin_bottom_5
     .chart-with-data{ id: "project_contributions_#{position.project_id}", 'data-value' => chart_data.as_json,
-                      'data-pname' => pname, style: 'width: 910px; height: 170px' }
+                      'data-pname' => pname, style: 'height: 170px' }

app/views/positions/_commits_by_individual_projects.html.haml

@@ -1,4 +1,4 @@
-.col-xs-12.col-sm-12.col-md-6.position-item
+.col-xs-12.col-sm-12.col-md-12.position-item
   %div{ class: position.decorate.analyzed_class_name }
     %div
       .col-xs-6.col-sm-6.col-md-6.one-project-header-left

app/views/positions/_commits_by_projects_extended.html.haml

@@ -1,3 +1,3 @@
 .padding_one_top
 - chart_data = ChartDecorator.new.combined_commit_history(@account)
-.chart-with-data#all_projects{ 'data-value' => chart_data.as_json, style: 'width: 940px; height: 300px' }
+.chart-with-data#all_projects{ 'data-value' => chart_data.as_json, style: 'height: 300px' }

app/views/positions/index.html.haml

@@ -13,7 +13,7 @@
 #positions-index-page
   - if @account.positions.exists?
     = render 'commits_by_projects_extended'
-    .row.mezzo.padding_one_top
+    .mezzo.padding_one_top
       - @positions.each do |position|
         = render 'commits_by_individual_projects', position: position
       = will_paginate @positions