Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

New search layout + New Navigation #20

Merged
merged 9 commits into from
Jul 4, 2019
Merged

New search layout + New Navigation #20

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
869feb5
add Deportes category + navigation updates in mobile (color test)
sergiofruto May 2, 2019
cfdb40a
lint fix
sergiofruto May 2, 2019
9457e76
added search components(wip)
sergiofruto May 3, 2019
befd99f
route issue test
sergiofruto May 4, 2019
f9f643f
desktop search working
sergiofruto May 5, 2019
234e798
removed console log
sergiofruto May 5, 2019
a2259f4
removed test link
sergiofruto May 5, 2019
1b91931
new search flow
sergiofruto May 6, 2019
a76089f
lint error
sergiofruto May 6, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Next Next commit
add Deportes category + navigation updates in mobile (color test)
  • Loading branch information
@sergiofruto
sergiofruto committed May 2, 2019
commit 869feb53a29904994964646df2e5b91c1b30127d
32 changes: 17 additions & 15 deletions shared/components/Header.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,10 +48,15 @@ export default class Header extends Component {
width: 100%;
align-items: center;
background-color: white;
margin-bottom: 24px;
box-shadow: 0 2px 2px -6px #cecece;
}

@media screen and (min-width: 1200px) {
header {
margin-bottom: 24px;
}
}

header.transparent {
background-color: transparent;
}
Expand All @@ -67,10 +72,10 @@ export default class Header extends Component {
justify-content: space-between;
margin: 0 auto;
width: 100%;
padding: 15px 15px 24px;
// padding: 15px 15px 24px;
}

@media screen and (min-width: 1024px) {
@media screen and (min-width: 1200px) {
header .inner-wrapper {
flex-direction: row;
max-width: 1108px;
Expand All @@ -84,14 +89,14 @@ export default class Header extends Component {
align-items: center;
width: 100%;
border-bottom: 1px solid #eee;
padding-bottom: 15px;
padding: 15px;
}

@media screen and (min-width: 1024px) {
@media screen and (min-width: 1200px) {
.top-nav {
max-width: 220px;
width: auto;
padding-bottom: 0;
padding: 0;
border-bottom: 0;
}
}
Expand All @@ -117,14 +122,14 @@ export default class Header extends Component {

nav {
width: 100%;
padding-top: 24px;
margin-left: auto;
padding: 15px 0;
overflow: scroll;
}

@media screen and (min-width: 1024px) {
nav {
width: auto;
padding-top: 0;
padding: 0;
}
}

Expand All @@ -133,8 +138,6 @@ export default class Header extends Component {
grid-template-columns: 1fr 1fr;
grid-column-gap: 6px;
grid-row-gap: 6px;
// display: flex;
// flex-wrap: wrap;
}

nav > ul li {
Expand All @@ -155,13 +158,12 @@ export default class Header extends Component {
nav > ul > li > a {
display: flex;
justify-content: center;
padding: 7px 5px;
border: 2px solid ${vars.colors.coralPink};
border-radius: 3px;
padding: 8px 14px;
border-radius: 6px;
font-size: 14px;
font-weight: 600;
letter-spacing: 0.19px;
color: ${vars.colors.coralPink};
color: white;
transition: color .25s ease-in;
}

Expand Down
136 changes: 102 additions & 34 deletions shared/components/Nav.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,46 +4,61 @@ import vars from '../variables';

const categories = [
{
name: 'Espectáculos',
slug: 'espectaculos',
id: 4,
name: 'Política',
slug: 'politica',
id: 1,
},
{
name: 'Internacionales',
slug: 'internacionales',
id: 2,
},
{
name: 'Tecnología',
slug: 'tecnologia',
id: 3,
},
{
name: 'Internacionales',
slug: 'internacionales',
id: 2,
name: 'Espectáculos',
slug: 'espectaculos',
id: 4,
},
{
name: 'Política',
slug: 'politica',
id: 1,
name: 'Deportes',
slug: 'deportes',
id: 5,
},
]

const navColors = [
'#FC4B63',
'#9F539B',
'#9562D3',
'#3A537A',
'#007CC1',
'#007787',
'#2F4858',
]

const Nav = () => (
<nav>
<ul>
<li>
<ul className="nav-list">
<li className="nav-list-item">
<Link route="/">
<a>
Home
</a>
</Link>
</li>
<li>
<li className="nav-list-item">
<Link route="/popular">
<a>
Popular
</a>
</Link>
</li>
{ categories.map(({ id, name, slug }) => (
<li key={id}>
<li key={id} className="nav-list-item">
<Link
route="category-slug"
params={{ category: id, slug }}
Expand All @@ -54,71 +69,124 @@ const Nav = () => (
</Link>
</li>
))}
</ul>
</ul>
<style jsx>{`
nav {
width: 100%;
padding-top: 24px;
margin-left: auto;
padding: 15px 0;
overflow: scroll;
}

@media screen and (min-width: 1024px) {
@media screen and (min-width: 1200px) {
nav {
width: auto;
padding-top: 0;
padding-bottom: 0;
}
}

nav > ul {
display: grid;
grid-template-columns: 1fr 1fr;
grid-column-gap: 6px;
grid-row-gap: 6px;
.nav-list {
display: flex;
}

nav > ul li {
.nav-list-item {
flex: 1 1 45%;
}

.nav-list-item:first-child {
padding-left: 15px;
}

.nav-list-item:last-child {
padding-right: 15px;
}

@media screen and (min-width: 1200px) {
.nav-list-item:first-child,
.nav-list-item:last-child {
padding: 0;
}
}

.nav-list-item:not(:last-child){
margin-right: 16px;
}

.nav-list-item:nth-child(1) a {
background-color: ${navColors[0]}
}

.nav-list-item:nth-child(2) a {
background-color: ${navColors[1]}
}

.nav-list-item:nth-child(3) a {
background-color: ${navColors[2]}
}

.nav-list-item:nth-child(4) a {
background-color: ${navColors[3]}
}

.nav-list-item:nth-child(5) a {
background-color: ${navColors[4]}
}

.nav-list-item:nth-child(6) a {
background-color: ${navColors[5]}
}

.nav-list-item:nth-child(7) a {
background-color: ${navColors[6]}
}

@media screen and (min-width: 768px) {
nav > ul {
.nav-list {
display: flex;
}

nav > ul li {
.nav-list-item li {
flex: 1 1 auto;
}

nav > ul > li:not(:last-child) {
.nav-list-item:not(:last-child) {
margin-right: 14px;
}
}


nav > ul > li > a {
.nav-list-item > a {
display: flex;
justify-content: center;
padding: 7px 5px;
border: 2px solid ${vars.colors.coralPink};
border-radius: 3px;
padding: 8px 14px;
border-radius: 6px;
font-size: 14px;
font-weight: 600;
letter-spacing: 0.19px;
color: ${vars.colors.coralPink};
background-color: #cecece;
color: white;
transition: color .25s ease-in;
}

nav > ul > li > a:hover,
nav > ul > li > a:focus {
.nav-list-item > a:hover,
.nav-list-item > a:focus {
color: ${vars.colors.coralPink};
transition: color .25s ease-out;
}

@media screen and (min-width: 768px) {
nav > ul > li > a {
.nav-list-item > a {
padding: 12px 24px;
font-size: 16px;
border: none;
}
}

@media screen and (min-width: 1200px) {
.nav-list-item > a {
padding: 7px 5px;
color: ${vars.colors.slate};
background-color: transparent!important;
}
}
`}</style>
Expand Down
1 change: 1 addition & 0 deletions shared/lib/utils.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ export const newsCategories = [
{ id: 2, key: 'Internacionales' },
{ id: 3, key: 'Tecnología' },
{ id: 4, key: 'Espectáculos' },
{ id: 5, key: 'Deportes' },
];

export const sourcesWithSSL = [
Expand Down