status-im/ETHReport
2
0
Fork 0
mirror of https://github.com/status-im/ETHReport.git synced 2025-02-18 00:46:38 +00:00
Code Issues Projects Releases Wiki Activity

When click on topic or project, scrolls search bar into view

Browse Source 
Esp for when on mobile
This commit is contained in:
Sharyn 2018-07-11 11:16:33 +02:00
parent 4709c74138
commit 731a57878d
4 changed files with 24 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
components/projectsList/index.js
View File

@ -1,4 +1,5 @@
import React from 'react';
import AnchorLink from 'react-anchor-link-smooth-scroll';
import { PropTypes } from 'prop-types';
import Data from '../../data/archives/projects';
import './style.scss';
@ -9,9 +10,8 @@ const ProjectsList = props => (
<ul>
{
Data.map(project => (
// eslint-disable-next-line
<li key={project} onClick={props.setSearchTerm}>
<span>{ project }</span>
<li key={project}>
<AnchorLink href="#browse" onClick={props.setSearchTerm}>{ project }</AnchorLink>
</li>
))
}

13
components/projectsList/style.scss
View File

@ -13,12 +13,17 @@
padding: 0 calculateRem(8) calculateRem(8) 0;
cursor: pointer;
span {
background-color: rgba(0, 0, 0, 0.1);
padding: calculateRem(4) calculateRem(12);
a {
display: inline-block;
text-decoration: none;
background-color: $red;
padding: calculateRem(8) calculateRem(12);
border-radius: 4px;
color: #fff;
transition: background-color 0.5s ease;
&:hover {
background-color: rgba(0, 0, 0, 0.3);
background-color: $dark-red;
}
}
}

6
components/topicsList/index.js
View File

@ -1,4 +1,5 @@
import React from 'react';
import AnchorLink from 'react-anchor-link-smooth-scroll';
import { PropTypes } from 'prop-types';
import Data from '../../data/archives/topics';
import './style.scss';
@ -9,9 +10,8 @@ const TopicsList = props => (
<ul>
{
Data.map(topic => (
// eslint-disable-next-line
<li key={topic} onClick={props.setSearchTerm}>
<span>{ topic }</span>
<li key={topic}>
<AnchorLink href="#browse" onClick={props.setSearchTerm}>{ topic }</AnchorLink>
</li>
))
}

13
components/topicsList/style.scss
View File

@ -13,12 +13,17 @@
padding: 0 calculateRem(8) calculateRem(8) 0;
cursor: pointer;
span {
background-color: rgba(0, 0, 0, 0.1);
padding: calculateRem(4) calculateRem(12);
a {
display: inline-block;
text-decoration: none;
background-color: $red;
padding: calculateRem(8) calculateRem(12);
border-radius: 4px;
color: #fff;
transition: background-color 0.5s ease;
&:hover {
background-color: rgba(0, 0, 0, 0.3);
background-color: $dark-red;
}
}
}