From 2c76aab9c5b3ba8b327620a8603d0d1f0fda1e56 Mon Sep 17 00:00:00 2001
From: Kamran Ahmed <kamranahmed.se@gmail.com>
Date: Fri, 31 Aug 2018 08:08:44 +0500
Subject: Fix the responsiveness

---
 src/components/filters/index.js |  4 ++--
 src/components/top-nav/index.js | 15 +++++++++++----
 2 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/src/components/filters/index.js b/src/components/filters/index.js
index 3b746b5..46aafcf 100644
--- a/src/components/filters/index.js
+++ b/src/components/filters/index.js
@@ -7,7 +7,7 @@ import './styles.css';
 import DateJumpFilter from './date-jump-filter';
 
 const Filters = (props) => (
-  <div className="filters-wrap">
+  <div className="filters-wrap mt-3 mt-sm-3 mt-md-0 mt-xl-0 mt-lg-0">
     <div className="filter-item">
       <LanguageFilter
         selectedLanguage={ props.selectedLanguage }
@@ -20,7 +20,7 @@ const Filters = (props) => (
         selectedDateJump={ props.selectedDateJump }
       />
     </div>
-    <div className="filter-item">
+    <div className="filter-item d-none d-sm-none d-md-none d-xl-block d-lg-block">
       <ViewFilter
         selectedViewType={ props.selectedViewType }
         updateViewType={ props.updateViewType }
diff --git a/src/components/top-nav/index.js b/src/components/top-nav/index.js
index 56169d0..ff7b350 100644
--- a/src/components/top-nav/index.js
+++ b/src/components/top-nav/index.js
@@ -22,7 +22,8 @@ class TopNav extends React.Component {
             <Logo/>
             <div className="logo-text">
               <h4>GitHunt</h4>
-              <p className="text-muted">Most starred projects on GitHub</p>
+              <p className="text-muted d-none d-sm-inline-block d-md-inline-block d-xl-inline-block d-lg-inline-block">Most starred projects on GitHub</p>
+              <p className="text-muted d-inline-block d-sm-none d-md-none d-xl-none d-lg-none">Top Github Projects</p>
             </div>
           </a>
           <div className="float-right external-btns">
@@ -35,7 +36,9 @@ class TopNav extends React.Component {
                 <a href='https://goo.gl/e7YP1h'
                    target='_blank'
                    rel="noopener noreferrer"
-                   className="btn btn-danger"><i className="fa fa-chrome mr-1"></i> Use Extension</a>
+                   className="btn btn-danger d-none d-sm-none d-md-inline-block d-xl-inline-block d-lg-inline-block">
+                  <i className="fa fa-chrome mr-1"></i> Use Extension
+                </a>
               )
             }
             {
@@ -43,13 +46,17 @@ class TopNav extends React.Component {
                 <a href='https://twitter.com/kamranahmedse'
                    target='_blank'
                    rel="noopener noreferrer"
-                   className="btn btn-danger"><i className="fa fa-comment mr-1"></i> Give Feedback</a>
+                   className="btn btn-danger d-none d-sm-none d-md-inline-block d-xl-inline-block d-lg-inline-block">
+                  <i className="fa fa-comment mr-1"></i> Give Feedback
+                </a>
               )
             }
             <a href={ `https://twitter.com/intent/tweet?text=${this.tweet}` }
                target='_blank'
                rel="noopener noreferrer"
-               className="btn btn-primary btn-tweet"><i className="fa fa-twitter mr-1"></i> Tweet</a>
+               className="btn btn-primary btn-tweet d-none d-sm-none d-md-none d-xl-inline-block d-lg-inline-block">
+              <i className="fa fa-twitter mr-1"></i> Tweet
+            </a>
           </div>
         </div>
       </div>
-- 
cgit v1.2.3