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

Jump to bottom

Slider & Header rework #2

Merged
merged 2 commits into from Feb 21, 2020
Merged

Slider & Header rework #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1b85e4c
Slider redone. But, no links :(
abykal Feb 21, 2020
5336f1e
New Header Styling
abykal Feb 21, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
7 changes: 5 additions & 2 deletions src/components/elements/Footer.js
View file
Open in desktop
@@ -1,9 +1,12 @@
import React from 'react'

import TMDBlogo from '../../images/tmdb_logo.svg';

const Footer = () => {
return (
<div className="bottom-0 h-32 p-10 bg-gray-500 mt-24 text-indigo-100 hover:bg-indigo-200 hover:text-gray-600">
<h3>A project created with React Hooks, Tailwind CSS, TMDb and more...</h3>
<div className="bottom-0 h-48 p-10 mt-24 text-indigo-500 footer-gradient flex justify-between">
<p className="text-gray-800">A project created with React Hooks, Tailwind CSS, TMDb and more...</p>
<img className="w-20 sm:w-32" src={TMDBlogo} alt="tmdb-logo" />
</div>
)
}
Expand Down
43 changes: 16 additions & 27 deletions src/components/elements/Header.js
View file
Open in desktop
Expand Up @@ -2,36 +2,25 @@ import React from 'react'
import { Link } from '@reach/router'

// import '../../styles/header.css'
import MoveeLogo from '../../images/brand.png';
import TMDBlogo from '../../images/tmdb_logo.svg';
import MoveeLogo from '../../images/logo.png';


const Header = () => (
<div className="box-border my-5">
<div className="max-w-screen-xl min-h-48 px-5 py-0 mx-0 my-auto box-border sm:m-w-screen-xl sm:min-h-0">
<Link to="/">
<img className="inline-block mx-0 w-24 sm:mt-2 sm:w-48" src={MoveeLogo} alt="app-logo" />
</Link>
<img className="w-20 mt-4 sm:inline-block sm:mt-16 sm:w-32 float-right inline-block" src={TMDBlogo} alt="tmdb-logo" />
</div>
<nav class="flex items-center justify-between flex-wrap p-6">
<div class="flex items-center flex-shrink-0 text-white mr-6">
<Link to="/">
<img
className="inline-block mx-0 w-16 mr-5 sm:w-12"
src={MoveeLogo}
alt="app-logo"
/>
</Link>
<span class="font-semibold text-blue-500 text-5xl tracking-tight brand-gradient">MFlix</span>
</div>
)
</nav>
);


// const Header = () => (
// <div className="box-border px-0 py-5">
// <div className="max-w-screen-xl min-h-48 px-5 py-0 mx-0 my-auto box-border sm:m-w-screen-xl sm:min-h-0">
// <img className="w-32 sm:mt-2 sm:w-64" src={MoveeLogo} alt="movie-logo" />
// <img className="float-right inline-block w-20 mt-6 sm:inline-block sm:mt-3 sm:w-32" src={TMDBlogo} alt="tmdb-logo" />
// </div>
// </div>
// )
export default Header;

// const Header = () => (
// <div className="">
// <div className="header-content">
// <img className="MoveeLogo" src={MoveeLogo} alt="movie-logo" />
// <img className="TMDBLogo" src={TMDBlogo} alt="tmdb-logo" />
// </div>
// </div>
// )

export default Header;
2 changes: 1 addition & 1 deletion src/components/elements/SearchBar.js
View file
Open in desktop
Expand Up @@ -22,7 +22,7 @@ const SearchBar = ({ callback }) => {
<div className="w-full h-24 pl-6 pr-0 py-5 box-border text-white">
<div className="max-w-screen-xl w-full h-12 bg-gray-300 mx-auto rounded-lg relative text-white">
<FontAwesome className="absolute left-10p top-5p text-indigo-500 z-1000" name="search" size="2x" />
<input className="text-3xl absolute left-40p mx-4 my-auto py-0 pl-0 pr-16 border-0 w-11/12 bg-transparent h-10 text-white border-box focus:outline-none md:text-3xl" type="text" placeholder="Search Movies" onChange={doSearch} value={state}/>
<input className="text-3xl absolute left-40p mx-4 my-auto py-0 pl-0 pr-16 border-0 w-11/12 bg-transparent h-10 text-indigo-500 border-box focus:outline-none md:text-3xl" type="text" placeholder="Search Movies" onChange={doSearch} value={state}/>
</div>
</div>
)
Expand Down
57 changes: 36 additions & 21 deletions src/components/elements/Slider.js
View file
Open in desktop
Expand Up @@ -5,9 +5,7 @@ import '../../styles/slider.css'
import { IMAGE_BASE_URL, POSTER_SIZE } from '../../config'


const Slider = ({ nowshowing }) => {
const posterURL = "http://image.tmdb.org/t/p/w500";

const Slider = ({ nowshowing, clickable }) => {

const bgNSImage = (poster) => ({
backgroundImage: `url(${IMAGE_BASE_URL}${POSTER_SIZE}${poster})`,
Expand All @@ -16,28 +14,45 @@ const Slider = ({ nowshowing }) => {
backgroundRepeat: 'no-repeat'
})


return (
<div className="popular-articles">
<header className="popular-header header-card white-underline-links">
<h2 className="header-card-title text-white font-medium">Releases for <br />this <br />month</h2>
</header>

<div className="mini-card-grid">
{
nowshowing.slice(0,8).map(movie => {
return (
<Link to={`/${movie.id}`}>
<article key={movie.id} className="mini-card module module-article article cursor-pointer" style={bgNSImage(movie.poster_path)}>
</article>
</Link>
)
})
}
</div>
<div className="popular-articles mx-auto">
<header className="popular-header header-card white-underline-links">
<h2 className="header-card-title">
Releases <br />
this <br />
month
</h2>
</header>

<div className="mini-card-grid">
{nowshowing.slice(0, 8).map(movie => {
return clickable ? (
<article
key={movie.id}
className="mini-card module module-article article cursor-pointer clickable"
style={bgNSImage(movie.poster_path)}
>
<Link to={`/${movie.id}`}></Link>
</article>
) : (
<article
key={movie.id}
className="mini-card module module-article article cursor-pointer clickable"
style={bgNSImage(movie.poster_path)}
></article>
);
})}
</div>
)
</div>
);
}

export default Slider







16 changes: 15 additions & 1 deletion src/styles/extra.css
View file
Open in desktop
Expand Up @@ -245,8 +245,22 @@
display: flex;
justify-content: center;
align-items: center;
background: #8d2cdd;
background: #500ccf;
color: whitesmoke;
width: 100%;
height: 88vh;
}



.footer-gradient {
/* background-color: #000000; */
background-image: linear-gradient(180deg, #100e17 0%, #000000 74%);
}

.brand-gradient {
font-size: 72px;
background: -webkit-linear-gradient( #500ccf, #1b6eda);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}