ntr/crates
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

stylez

Browse Source
This commit is contained in:
ntr committed 2022-08-14 22:17:42 +10:00
1 parent 9a42c290ae
commit b0bca74ee2
5 files changed
+140 -38
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

client/src/app.tsx
+1 -1
View File
@@ -22,7 +22,7 @@ function App() {
const user = await actions.getLogin();
if (!user) return route('/login');
setUser(user);
route('/');
route('/search');
}
getLogin();
client/src/components/header.tsx
+2 -2
View File
@@ -11,9 +11,9 @@ const Header = ({ user }) => {
);
return (
<header class={'header'}>
<h1>N8CR8</h1>
<header>
{user ? nav() : null}
<div></div>
</header>
);
}
client/src/routes/login.tsx
+6 -6
View File
@@ -6,7 +6,6 @@ const Login = ({ success }) => {
const [mode, setMode] = useState('login')
const [email, setEmail] = useState('')
const [password, setPassword] = useState('');
// const [discogs, setDiscogs] = useState('');
const [confirmPassword, setConfirmPassword] = useState('');
async function postLogin() {
@@ -23,15 +22,15 @@ const Login = ({ success }) => {
<div class="login">
<form action="">
<div class="item">
<label for="email">email: </label>
<label for="email">email</label>
<input type="email" name="email" id="email" value={email} required onChange={(e) => setEmail(e.target.value)} />
</div>
<div class="item">
<label for="password">confirm password: </label>
<label for="password">password</label>
<input type="password" name="password" id="password" value={password} required onChange={(e) => setConfirmPassword(e.target.value)} />
</div>
<div class="item">
<label for="password">confirm password: </label>
<label for="password">confirm password</label>
<input type="password" name="password" id="password" value={password} required onChange={(e) => setConfirmPassword(e.target.value)} />
</div>
<div class="item">
@@ -47,11 +46,11 @@ const Login = ({ success }) => {
<div class="login">
<form action="">
<div class="item">
<label for="email">email: </label>
<label for="email">email</label>
<input type="email" name="email" id="email" value={email} required onChange={(e) => setEmail(e.target.value)} />
</div>
<div class="item">
<label for="password">password: </label>
<label for="password">password</label>
<input type="password" name="password" id="password" value={password} required onChange={(e) => setPassword(e.target.value)} />
</div>
<div class="item">
@@ -68,6 +67,7 @@ function LoginPage({ success }) {
return (
<div class="landing">
<Login success={success} />
<div></div>
<div class="info">
<p>Mates Crates is a record importing service.</p>
<p>We bundle orders together from thousands of online stores to reduce the cost of shipping vinyl.</p>
client/src/routes/search.tsx
+38 -9
View File
@@ -4,21 +4,39 @@ import axios from 'axios';
function result(r) {
return (
<div>{r.title}</div>
<article key={r.id}>
<button> + </button>
<div>
<h3>{r.title}</h3>
<h5 class='alt-text' >{r.year}</h5>
<h5 class='alt-text'>{r.country}</h5>
<h5 class='alt-text'>{r.format.join(' ')}</h5>
</div>
<img src={r.thumb} />
</article>
);
}
const User = () => {
const [artist, setArtist] = useState('')
const [title, setTitle] = useState('');
const [artist, setArtist] = useState('nine inch nails')
const [title, setTitle] = useState('the fragile');
const [results, setResults] = useState([]);
const [noResults, setNoResults] = useState(false);
async function fetchResults() {
const { data } = await axios.post(`http://localhost:41337/want/search`, {
artist,
title,
});
console.log(data);
if (data.length === 0) {
setResults([]);
return setNoResults(true);
}
setNoResults(false);
setResults(data);
}
@@ -27,17 +45,28 @@ const User = () => {
fetchResults();
}
const topEl = results.length
? <button onClick={() => window.scrollTo(0, 0)}> top </button>
: null;
const noResultsEl = noResults
? <article>No Results</article>
: null;
return (
<div class={'home'}>
<form action="" method="get" class="form-example">
<label for="artist">Artist: </label>
<input type="text" name="artist" id="artist" value={artist} onChange={e => setArtist(e.target.value) } required />
<label for="title">Title: </label>
<input type="text" name="title" id="title" value={title} onChange={e => setTitle(e.target.value)} required />
<div class='search'>
<form action="" method="get">
<label for="artist">Artist</label>
<input type="text" name="artist" placeholder="Ben Klock" id="artist" value={artist} onChange={e => setArtist(e.target.value) } required />
<label for="title">Title</label>
<input type="text" name="title" placeholder="Subzero" id="title" value={title} onChange={e => setTitle(e.target.value)} required />
<input type="submit" value="Search" onClick={handleSubmit} />
</form>
<div></div>
<div>
{noResultsEl}
{results.map(result)}
{topEl}
</div>
</div>
);
client/src/style/index.less
+93 -20
View File
@@ -47,17 +47,23 @@ html {
:root {
--breakpoint-medium: 35em;
--breakpoint-large: 56em;
--color-dark-blue: #101014;
--color-mid-blue: #16171d;
--color-light-blue: #1f2128;
--color-mid-grey: #9BA0B3;
--color-off-white: #F4F1D0;
--color-accent-blue: #5E9ED6;
--color-blue-gray: #506485;
--base-accent-color: var(--color-accent-blue);
--fg-color: var(--color-off-white);
--hover-link-color: var(--color-off-white);
--base-background-color: var(--color-dark-blue);
--secondary-background-color: var(--color-mid-blue);
--tertiary-background-color: var(--color-light-blue);
--small-font-size: 0.75em;
--base-font-size: 1em;
--smedium-font-size: 1.333em;
@@ -68,12 +74,13 @@ html {
--secondary-font-family: monospace;
--base-font-color: var(--color-off-white);
--secondary-font-color: var(--color-mid-grey);
--base-line-height: 1.4;
--header-line-height: 1.2;
--min-font-size: var(--base-font-size);
--max-font-size: var(--large-font-size);
--base-duration: .3s;
--base-timing: cubic-bezier(0.645, 0.045, 0.355, 1.000);
--base-border-color: var(--secondary-font-color);
--base-border: 1px solid var(--base-border-color);
--hover-border: 1px solid var(--base-font-color);
@@ -81,10 +88,11 @@ html {
--base-border-radius: .2rem;
--base-focus: 2px solid var(--base-accent-color);
--base-outline-offset: 0.25em;
--base-box-shadow: 0 1px 2px 0px rgba(0, 0, 0, .25);
--hover-box-shadow: 0 2px 10px 1px rgba(0, 0, 0, .5);
--base-spacing: 1rem;
--base-spacing-half: calc(var(--base-spacing)/2);
--base-spacing-double: calc(var(--base-spacing)*2);
--utility-bar-header-height: calc(var(--base-spacing) * 1.5);
}
@@ -119,7 +127,17 @@ button, select {
button, [type=button], [type=reset], [type=submit] {
-webkit-appearance:button;
cursor:pointer
border-color: transparent;
cursor:pointer;
font-family: var(--secondary-font-family);
font-size: var(--small-font-size);
text-transform: uppercase;
&:hover {
background: var(--tertiary-background-color);
border-color: transparent;
}
}
// ok actual styles
@@ -129,23 +147,26 @@ body {
}
main {
padding: 0 10% 0 10%;
padding: 0 5% 0 5%;
}
button, [type=submit] {
padding: var(--base-spacing-half);
background: var(--secondary-background-color);
}
.landing {
display: flex;
display: grid;
grid-template-columns: 1fr 0.5fr 2fr;
.login {
flex: 1;
button {
width: 100%;
}
}
.info {
flex: 1;
p {
margin-bottom: var(--base-spacing);
}
@@ -153,28 +174,80 @@ button, [type=submit] {
}
.alt-text {
font-family: var(--secondary-font-family);
font-size: var(--small-font-size);
text-transform: uppercase;
}
.search {
display: grid;
grid-template-columns: 1fr 0.5fr 2fr;
article {
display: grid;
grid-template-columns: 1fr 4fr 1fr;
background-color: var(--secondary-background-color);
padding: var(--base-spacing);
margin-bottom: var(--base-spacing);
button {
margin-right: var(--base-spacing);
background: var(--tertiary-background-color);
border-color: var(--secondary-background-color);
}
}
}
form {
margin-bottom: var(--base-spacing);
label {
margin-bottom: var(--base-spacing-half);
}
label, input {
display: block;
}
input, button {
width: 100%;
}
input {
padding: var(--base-spacing-half);
margin-bottom: var(--base-spacing);
}
label {
font-family: var(--secondary-font-family);
font-size: var(--small-font-size);
text-transform: uppercase;
margin-bottom: var(--base-spacing-half);
}
}
a {
// padding-left: var(--base-spacing);
margin-right: var(--base-spacing);
color: var(--secondary-font-color);
font-family: var(--secondary-font-family);
font-size: var(--small-font-size);
text-transform: uppercase;
&:hover {
color: var(--fg-color);
}
}
.header {
display: flex;
header {
display: grid;
grid-template-columns: 1fr min-content 1fr;
padding-bottom: var(--base-spacing);
}
.home {
min-height: 100%;
width: 100%;
display: flex;
display: grid;
grid-template-columns: 1fr 0.5fr 2fr;
.bundle {
flex: 1;