diff options
| author | Kamran Ahmed <kamranahmed.se@gmail.com> | 2018-08-31 08:08:44 +0500 |
|---|---|---|
| committer | Kamran Ahmed <kamranahmed.se@gmail.com> | 2018-08-31 08:08:44 +0500 |
| commit | 2c76aab9c5b3ba8b327620a8603d0d1f0fda1e56 (patch) | |
| tree | 355068cb745ab6c11e7e5c75592eac1eda97e6f9 | |
| parent | Add images (diff) | |
| download | githunt-2c76aab9c5b3ba8b327620a8603d0d1f0fda1e56.tar.gz | |
Fix the responsiveness
| -rw-r--r-- | src/components/filters/index.js | 4 | ||||
| -rw-r--r-- | 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> |