BradNut/boredgame
1
0
Fork 0
mirror of https://github.com/BradNut/boredgame synced 2025-09-08 17:40:22 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Large screen max width, button styles.

Browse source
This commit is contained in:
Bradley Shellnut 2022-08-11 16:34:45 -07:00
parent 6f42d02737
commit a1ebc2a1c4
5 changed files with 35 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/lib/components/header/Header.svelte
View file

@ -25,7 +25,7 @@
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: 0 var(--containerPadding); padding: var(--containerPadding);
font-size: 1.6rem; font-size: 1.6rem;
@media (max-width: 1000px) { @media (max-width: 1000px) {

9
src/lib/components/random/index.svelte
View file

@ -14,7 +14,7 @@
const randomGame: SavedGameType = $collectionStore.at(randomNumber)!; const randomGame: SavedGameType = $collectionStore.at(randomNumber)!;
const response = await fetch(`/api/game/${randomGame?.id}`, { const response = await fetch(`/api/game/${randomGame?.id}`, {
method: 'GET', method: 'GET',
headers: { accept: 'application/json' }, headers: { accept: 'application/json' }
}); });
const responseData = await response.json(); const responseData = await response.json();
console.log('responseData', responseData); console.log('responseData', responseData);
@ -37,3 +37,10 @@
<button class="btn" type="button" on:click={() => getRandomCollectionGame()} <button class="btn" type="button" on:click={() => getRandomCollectionGame()}
>Random from collection 🎲</button >Random from collection 🎲</button
> >
<style lang="scss">
button {
max-width: 450px;
padding: var(--spacing-8) var(--spacing-16);
}
</style>

5
src/lib/components/search/random/index.svelte
View file

@ -35,4 +35,9 @@
display: grid; display: grid;
grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(3, 1fr);
} }
button {
max-width: 450px;
padding: var(--spacing-8) var(--spacing-16);
}
</style> </style>

29
src/routes/__layout.svelte
View file

@ -15,24 +15,21 @@
import '$root/styles/styles.scss'; import '$root/styles/styles.scss';
$: { $: {
if ($navigating) { if ($navigating) {
debounce(() => {boredState.set({ loading: true });}, 250); debounce(() => {
} boredState.set({ loading: true });
if (!$navigating) { }, 250);
boredState.set({ loading: false }); }
} if (!$navigating) {
} boredState.set({ loading: false });
}
}
if (browser) { if (browser) {
let collectionEmpty = $collectionStore.length === 0 || false; let collectionEmpty = $collectionStore.length === 0 || false;
console.log('collectionEmpty', collectionEmpty); console.log('collectionEmpty', collectionEmpty);
console.log('localStorage.collection', localStorage.collection); console.log('localStorage.collection', localStorage.collection);
if ( if (collectionEmpty && localStorage?.collection && localStorage.collection.length !== 0) {
collectionEmpty &&
localStorage &&
localStorage.collection &&
localStorage.collection.length !== 0
) {
const collection = JSON.parse(localStorage.collection); const collection = JSON.parse(localStorage.collection);
console.log('collection', collection); console.log('collection', collection);
if (collection && collection.length !== 0) { if (collection && collection.length !== 0) {
@ -120,9 +117,9 @@
padding: 2rem 0rem; padding: 2rem 0rem;
max-width: 80%; max-width: 80%;
/* @media (max-width: 850px) { @media (min-width: 1500px) {
max-width: 80%; max-width: 60%;
} */ }
box-sizing: border-box; box-sizing: border-box;
} }

10
src/routes/index.svelte
View file

@ -123,7 +123,13 @@
} }
.random-buttons { .random-buttons {
display: grid; display: flex;
grid-template-columns: 1fr 1fr; place-content: space-between;
place-items: center;
@media (max-width: 650px) {
display: grid;
grid-template-columns: 1fr 1fr;
}
} }
</style> </style>