Skip to content

Commit 62aeaeb

Browse files
AlidotSalAlidotSal
committed
add homepage banner
1 parent 8f7758b commit 62aeaeb

File tree

9 files changed

+34
-32
lines changed

9 files changed

+34
-32
lines changed

‎README.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ Key tools used in this React project are:
2020

2121
If you would like to download the code and try it for yourself:
2222

23-
1. Clone the repo: `git@github.com:SKempin/mdb.git`
23+
1. Clone the repo: `https://github.com/AlidotSal/MDB.git`
2424
2. `cd MDB`
2525
2. Install packages: `pnpm install`
2626
3. start development server `npm run start`

‎index.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
font-family: "BiondiSansW00-Regular";
1414
src: url("./assets/fonts/b.woff2") format("woff2");
1515
font-display: swap;
16-
}.body{font-family: 'BiondiSansW00-Regular';}.search-area{max-width: 500px;margin: 0 auto;display: grid;grid-auto-flow: row;justify-items: center;}.search-bar {padding: 2em 0;}.search-bar label {position: relative;}.search-bar label:before {content: "";position: absolute;left: 0.5em;top: 0;bottom: 0;width: 15px;background: url("/assets/search.svg") center / contain no-repeat;}.search-bar input {color: #1f1f1f;font-family: inherit;height: 2.4em;padding: 1em 3em;border: 1px solid #cdcdcd;border-radius: 0.5em;background-color: #efebef;}.search-bar input:focus{outline: none; box-shadow: 0 0 3px #000;}main.home-lists{max-width: 1100px;margin: 0 auto;}.home-lists .list{border-bottom: 1px solid rgb(51 51 51 / .5);}.home-lists .list > div{margin: .5em 0;padding: 1em;overflow-x: scroll;display: grid;grid-auto-flow: column;gap: 1em;}.home-lists .list div section{width: 9em;background-color: #f1f1f1;border-radius: 0.2em;box-shadow: 0 1px 13px rgba(0, 0, 0, 0.25), 0 1px 4px rgba(0, 0, 0, 0.2);}</style>
16+
}.body{font-family: 'BiondiSansW00-Regular';}.search-area{max-width: 500px;margin: 0 auto;display: grid;grid-auto-flow: row;justify-items: center;}.search-bar {padding: 2em 0;}.search-bar label {position: relative;}.search-bar label:before {content: "";position: absolute;left: 0.5em;top: 0;bottom: 0;width: 15px;background: url("/assets/search.svg") center / contain no-repeat;}.search-bar input {color: #1f1f1f;font-family: inherit;height: 2.4em;padding: 1em 3em;border: 1px solid #cdcdcd;border-radius: 0.5em;background-color: #efebef;}.search-bar input:focus{outline: none; box-shadow: 0 0 3px #000;}main.home-lists{max-width: 1100px;margin-inline: auto;}.home-lists .list{border-bottom: 1px solid rgb(51 51 51 / .5);}.home-lists .list > div{margin: .5em 0;padding: 1em;overflow-x: scroll;display: grid;grid-auto-flow: column;gap: 1em;}.home-lists .list div section{width: 9em;background-color: #f1f1f1;border-radius: 0.2em;box-shadow: 0 1px 13px rgba(0, 0, 0, 0.25), 0 1px 4px rgba(0, 0, 0, 0.2);}.bg-url{background-image: url('/assets/bg.png')}</style>
1717
<title>MyMDb: All the information you need about Movies and TV Shows</title>
1818
</head>
1919
<body>

‎src/assets/images/bg.png

1.43 MB
Loading

‎src/components/List.jsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ export default (props) => {
1919
return (
2020
<Show when={data()}>
2121
<div class="list">
22-
<div class="w-full my-4 p-4 flex gap-6">
22+
<div class="w-full my-4 p-4 flex gap-6 overflow-x-auto">
2323
<For each={props.list}>
2424
{(item, i) => (
2525
<Link

‎src/components/MovieDropDown.jsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ export default () => {
4343
ref={inputRef}
4444
type="text"
4545
onChange={(e) => handleInput(e.target.value)}
46-
placeholder="type a movie title"
46+
placeholder="search for a movie, tv show ..."
4747
></input>
4848
<span
4949
onClick={() => {

‎src/components/Trending.jsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import List from "./List";
33
export default (props) => {
44

55
return (
6-
<main class="home-lists">
6+
<main class="home-lists mt-12">
77
<div class="upcoming">
88
<h3>Coming Soon To Theaters:</h3>
99
{props.data.upcoming && <List list={props.data.upcoming.results} />}

‎src/pages/home/Home.jsx

+9-6
Original file line numberDiff line numberDiff line change
@@ -3,20 +3,23 @@ import { useRouteData } from "solid-app-router";
33
import MovieDropDown from "../../components/MovieDropDown";
44
import Trending from "../../components/Trending";
55
import Loading from "../../components/Loading";
6+
import BG from '../../assets/images/bg.png';
67

78
export default () => {
89
const data = useRouteData();
910

1011
return (
1112
<Suspense fallback={<Loading />}>
1213
<Show when={data()}>
13-
<figure>
14-
<blockquote class="m-0 p-4 bg-gray-100 rounded-2" cite="https://movie-quote-api.herokuapp.com/">
14+
<div class={`w-full mx-auto bg-url md:w-80%`}>
15+
<figure class="my-0 py-4">
16+
<blockquote class="m-0 p-4 bg-gray-100 rounded-2" cite="https://movie-quote-api.herokuapp.com/">
1517
<p>{data().quote.quote}</p>
16-
</blockquote>
17-
<figcaption class="mt-2">—{data().quote.role}, <cite>{data().quote.show}</cite></figcaption>
18-
</figure>
19-
<MovieDropDown />
18+
</blockquote>
19+
<figcaption class="mt-2">—{data().quote.role}, <cite>{data().quote.show}</cite></figcaption>
20+
</figure>
21+
<MovieDropDown />
22+
</div>
2023
<Trending data={data()} />
2124
</Show>
2225
</Suspense>

‎src/pages/person/[id].jsx

+4-6
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import { useRouteData } from "solid-app-router";
22
import { createEffect, Show, Suspense } from "solid-js";
33
import Videos from "../../components/Videos";
44
import List from "../../components/List";
5-
import Back from "../../components/BackButton";
65
import instagram from "../../assets/images/instagram.svg";
76
import twitter from "../../assets/images/twitter.svg";
87
import facebook from "../../assets/images/facebook.svg";
@@ -23,7 +22,6 @@ export default () => {
2322
<Suspense fallback={<Loading />}>
2423
<Show when={data()}>
2524
<section class="max-w-screen-xl my-0 mx-auto">
26-
<Back />
2725
<div class="grid gap-4">
2826
<div class="grid gap-4 p-4">
2927
<div class="flex flex-col gap-4 md:flex-row">
@@ -47,7 +45,7 @@ export default () => {
4745
rel="noopener noreferrer"
4846
href={`https://www.imdb.com/name/${data().externals.imdb_id}/`}
4947
>
50-
<img class="w-8" src={imdb} alt="" />
48+
<img class="w-6 md:w-8" src={imdb} alt="" />
5149
</a>
5250
</div>
5351
</Show>
@@ -59,7 +57,7 @@ export default () => {
5957
rel="noopener noreferrer"
6058
href={`https://www.facebook.com/${data().externals.facebook_id}/`}
6159
>
62-
<img class="w-8" src={facebook} alt="" />
60+
<img class="w-6 md:w-8" src={facebook} alt="" />
6361
</a>
6462
</div>
6563
</Show>
@@ -70,7 +68,7 @@ export default () => {
7068
rel="noopener noreferrer"
7169
href={`https://www.instagram.com/${data().externals.instagram_id}/`}
7270
>
73-
<img class="w-8" src={instagram} alt="" />
71+
<img class="w-6 md:w-8" src={instagram} alt="" />
7472
</a>
7573
</div>
7674
</Show>
@@ -81,7 +79,7 @@ export default () => {
8179
rel="noopener noreferrer"
8280
href={`https://www.twitter.com/${data().externals.twitter_id}/`}
8381
>
84-
<img class="w-8" src={twitter} alt="" />
82+
<img class="w-6 md:w-8" src={twitter} alt="" />
8583
</a>
8684
</div>
8785
</Show>

‎vite.config.js

+16-15
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,21 @@
11
import { defineConfig } from "vite";
22
import solidPlugin from "vite-plugin-solid";
3-
import Unocss from 'unocss/vite'
3+
import Unocss from "unocss/vite";
44

55
export default defineConfig({
6-
plugins: [solidPlugin(), Unocss({
7-
rules: [
8-
['shadow-even-blue', { 'box-shadow': '0 0 0 2px #4c9de6' }],
9-
['overflow-overlay', { overflow: 'overlay' }],
10-
['shadow-even-white', { 'box-shadow': '0 0 0 1px #fff, 0 0 1px 1px #333' }],
11-
],
12-
})],
13-
build: {
14-
target: "esnext",
15-
polyfillDynamicImport: false,
16-
},
17-
optimizeDeps: {
18-
exclude: ["@rturnq/solid-router"],
19-
},
6+
plugins: [
7+
solidPlugin(),
8+
Unocss({
9+
rules: [
10+
["shadow-even-blue", { "box-shadow": "0 0 0 2px #4c9de6" }],
11+
["overflow-overlay", { overflow: "overlay" }],
12+
[
13+
"shadow-even-white",
14+
{ "box-shadow": "0 0 0 1px #fff, 0 0 1px 1px #333" },
15+
],
16+
],
17+
}),
18+
],
19+
build: { target: "esnext", polyfillDynamicImport: false },
20+
optimizeDeps: { exclude: ["@rturnq/solid-router"] },
2021
});

0 commit comments

Comments
 (0)