Tweak style and fix on mobile

babel · Apr 5, 2017 · c61a370 · c61a370
1 parent 161cd26
commit c61a370
Show file tree

Hide file tree

Showing 7 changed files with 98 additions and 87 deletions.
diff --git a/_includes/open-issues.html b/_includes/open-issues.html
@@ -0,0 +1,20 @@
+<h2>Open Issues</h2>
+
+<div class="open-issues">
+  <div class="open-issues-section open-issues-section--beginner">
+    <div class="open-issues-section__content">
+      <div class="open-issues-section__title">
+        Beginner Friendly
+      </div>
+      <ul class="issues"></ul>
+    </div>
+  </div>
+  <div class="open-issues-section open-issues-section--help-wanted">
+    <div class="open-issues-section__content">
+      <div class="open-issues-section__title">
+        Help Wanted
+      </div>
+      <ul class="issues"></ul>
+    </div>
+  </div>
+</div>
diff --git a/_sass/pages/_contributing.scss b/_sass/pages/_contributing.scss
@@ -1,24 +1,63 @@
-.openIssues {
+.open-issues {
+  @include flexbox;
+  @include flex-direction(column);
+  background: #F9F9F9;
+  margin-bottom: 48px;
+
+  @media (min-width: $screen-md-min) {
+    @include flex-direction(row);
+  }
+
+  h2 {
+    font-size: 2rem;
+    margin: 0;
+  }
 
   ul {
-    list-style:none;
-    padding-left:0;
-
-    li {
-      margin-bottom: 10px;
-
-      a {
-        color: #323330;
-      }
-
-      span.issueNumber {
-        background-color: #f5da55;
-        padding: 3px 5px;
-        margin-right: 5px;
-        display:inline-block;
-        min-width: 48px;
-        text-align:right;
-      }
-    }
-  }
-}
+    list-style: none;
+    padding-left: 0;
+  }
+}
+
+.open-issues-section {
+  @include align-self(stretch);
+  @include flex(1);
+  @include flexbox;
+  margin: 12px;
+
+  &__content {
+    @include flex(1);
+    background: #FFF;
+    padding: 24px;
+  }
+
+  &__title {
+    border-bottom: 1px solid #EEE;
+    font-size: 2rem;
+    font-weight: 700;
+    padding-bottom: 9px;
+  }
+}
+
+.issue {
+  margin: 12px 0;
+
+  a {
+    @include align-items(flex-start);
+    @include flexbox;
+    color: #323330;
+  }
+
+  &__number {
+    background-color: #f5da55;
+    display: inline-block;
+    margin-right: 8px;
+    min-width: 48px;
+    padding: 3px 5px;
+    text-align: right;
+  }
+
+  &__title {
+    padding-top: 3px;
+  }
+}
diff --git a/docs/contributing/babel-preset-env.md b/docs/contributing/babel-preset-env.md
@@ -7,18 +7,6 @@ custom_js_with_timestamps:
 - contributing.js
 ---
 
-<h2>Open Issues</h2>
-<div class="container-fluid openIssues">
-    <div class="col-md-6">
-        <h2>Beginner Friendly</h2>
-        <ul class="beginnerFriendlyIssues">
-        </ul>
-    </div>
-    <div class="col-md-6">
-        <h2>Help Wanted</h2>
-        <ul class="helpWantedIssues">
-        </ul>
-    </div>
-</div>
+{% include open-issues.html %}
 
 {% include babel-preset-env/CONTRIBUTING.md %}
diff --git a/docs/contributing/babel.md b/docs/contributing/babel.md
@@ -4,21 +4,9 @@ title: Contributing
 description: Contributing to Babel
 permalink: /contributing/babel
 custom_js_with_timestamps:
-- contributing.js
+  - contributing.js
 ---
 
-<h2>Open Issues</h2>
-<div class="container-fluid openIssues">
-    <div class="col-md-6">
-        <h2>Beginner Friendly</h2>
-        <ul class="beginnerFriendlyIssues">
-        </ul>
-    </div>
-    <div class="col-md-6">
-        <h2>Help Wanted</h2>
-        <ul class="helpWantedIssues">
-        </ul>
-    </div>
-</div>
+{% include open-issues.html %}
 
 {% include babel/CONTRIBUTING.md %}
diff --git a/docs/contributing/babili.md b/docs/contributing/babili.md
@@ -7,18 +7,6 @@ custom_js_with_timestamps:
 - contributing.js
 ---
 
-<h2>Open Issues</h2>
-<div class="container-fluid openIssues">
-    <div class="col-md-6">
-        <h2>Beginner Friendly</h2>
-        <ul class="beginnerFriendlyIssues">
-        </ul>
-    </div>
-    <div class="col-md-6">
-        <h2>Help Wanted</h2>
-        <ul class="helpWantedIssues">
-        </ul>
-    </div>
-</div>
+{% include open-issues.html %}
 
 {% include babili/CONTRIBUTING.md %}
diff --git a/docs/contributing/babylon.md b/docs/contributing/babylon.md
@@ -7,18 +7,6 @@ custom_js_with_timestamps:
 - contributing.js
 ---
 
-<h2>Open Issues</h2>
-<div class="container-fluid openIssues">
-    <div class="col-md-6">
-        <h2>Beginner Friendly</h2>
-        <ul class="beginnerFriendlyIssues">
-        </ul>
-    </div>
-    <div class="col-md-6">
-        <h2>Help Wanted</h2>
-        <ul class="helpWantedIssues">
-        </ul>
-    </div>
-</div>
+{% include open-issues.html %}
 
 {% include babylon/CONTRIBUTING.md %}
diff --git a/scripts/contributing.js b/scripts/contributing.js
@@ -32,35 +32,35 @@
     }
 
     $.ajax(githubIssuesEndpoint, {
-            data : {
-                labels : 'beginner-friendly'
+            data: {
+                labels: 'beginner-friendly'
             },
-            success : function(data){
+            success: function(data){
                 for(var i = 0; i < data.length; i++){
-                    $('.beginnerFriendlyIssues').append('<li><a href="' + data[i].html_url + '"><span class="issueNumber">#' + data[i].number +'</span><span>' + data[i].title + '</span></a></li>');
+                    $('.open-issues-section--beginner .issues').append('<li class="issue"><a href="' + data[i].html_url + '"><span class="issue__number">#' + data[i].number +'</span><span class="issue__title">' + data[i].title + '</span></a></li>');
                 }
             },
             error : function(xhr, status, error){
-                $('.beginnerFriendlyIssues').append('<li><a href="' + githubHTMLBeginnerFriendlyURL + '"><span>Failed to load issues. View Beginner-Friendly issues on Github.</span></a></li>');
+                $('.open-issues-section--beginner .issues').append('<li><a href="' + githubHTMLBeginnerFriendlyURL + '"><span>Failed to load issues. View Beginner-Friendly issues on Github.</span></a></li>');
                 throw error;
             }
         }
     );
 
     $.ajax(githubIssuesEndpoint, {
-            data : {
-                labels : 'help wanted'
+            data: {
+                labels: 'help wanted'
             },
-            success : function(data){
+            success: function(data){
                 for(var i = 0; i < data.length; i++){
-                    $('.helpWantedIssues').append('<li><a href="' + data[i].html_url + '"><span class="issueNumber">#' + data[i].number +'</span><span>' + data[i].title + '</span></a></li>');
+                    $('.open-issues-section--help-wanted .issues').append('<li class="issue"><a href="' + data[i].html_url + '"><span class="issue__number">#' + data[i].number +'</span><span class="issue__title">' + data[i].title + '</span></a></li>');
                 }
             },
-            error : function(xhr, status, error){
-                $('.helpWantedIssues').append('<li><a href="' + githubHTMLHelpWantedURL + '"><span>Failed to load issues. View Help-Wanted issues on Github.</span></a></li>');
+            error: function(xhr, status, error){
+                $('.open-issues-section--help-wanted .issues').append('<li><a href="' + githubHTMLHelpWantedURL + '"><span>Failed to load issues. View Help-Wanted issues on Github.</span></a></li>');
                 throw error;
             }
         }
     );
 
-})(jQuery);
+})(jQuery);