Skip to content
This repository has been archived by the owner on Sep 7, 2021. It is now read-only.

Commit

Permalink
[Release] v0.5.0 (#229)
Browse files Browse the repository at this point in the history
Refactor voor consistentie en redesign
  • Loading branch information
Thijs authored Jun 8, 2021
1 parent 6d5c42d commit 373e432
Show file tree
Hide file tree
Showing 39 changed files with 709 additions and 553 deletions.
3 changes: 1 addition & 2 deletions .env.example
Original file line number Diff line number Diff line change
@@ -1,2 +1 @@
VITE_API_URL=https://acc-jungle-gym-api.herokuapp.com
VITE_STRAPI_API_URL=https://jungle-gym-cms.herokuapp.com
VITE_API_URL=https://acc-jungle-gym-api.herokuapp.com
2 changes: 1 addition & 1 deletion package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "jungle_gym",
"version": "0.4.0-0",
"version": "0.5.0",
"description": "JungleGym is an app for primary school teachers that will help them with their gymnastics lessons",
"scripts": {
"dev": "svelte-kit dev",
Expand Down
54 changes: 34 additions & 20 deletions src/app.css
Original file line number Diff line number Diff line change
@@ -1,36 +1,34 @@
/* GLOBAL STYLES */

:root {
--font-heading: 'Montserrat Alternates', sans-serif;
--font-body: 'Poppins', sans-serif;

--color-turquoise: hsl(192, 80%, 80%);
--color-dark-blue: hsl(221, 43%, 16%);
--color-light-orange: hsl(92, 30%, 64%);
--color-light-orange-hover: hsl(13, 100%, 89%);
--color-pink: hsl(337, 92%, 64%);
--color-black: hsl(0, 0%, 11%);
--color-black: hsl(197, 69%, 5%);
--color-grey: hsl(240, 5%, 45%);
--color-light-grey: hsl(198, 19%, 89%);
--color-lighter-grey: hsl(0, 0%, 95%);
--color-white: hsl(0, 0%, 100%);
--color-white: hsl(0, 0%, 98%);

--color-accent-1: #266525;
--color-accent-2: #e04646;
--color-base-dark: hsl(120, 36%, 13%);
--color-base-normal: hsl(119, 45%, 28%);
--color-base-light: hsl(92, 30%, 64%);
--color-accent-action: hsl(0, 71%, 58%);
--color-accent-normal: hsl(49, 83%, 50%);
--color-accent-dark: hsl(221, 43%, 16%);
--color-accent-alt: hsl(28, 83%, 77%);

--font-heading: 'Montserrat Alternates', sans-serif;
--font-body: 'Poppins', sans-serif;
--font-body-color: var(--color-black);
--font-heading-color: var(--color-dark-blue);

--font-heading: 'Montserrat Alternates', sans-serif;
--font-heading-color: var(--color-accent-dark);
--font-heading-base-size: 20px;
}

#svelte {
position: relative;
overflow-x: hidden;
html {
max-width: 100%;
}

body {
width: 100%;
overflow-x: hidden;
color: var(--font-body-color);
font-family: var(--font-body);
background-color: var(--color-white);
Expand All @@ -47,10 +45,16 @@ h5,
h6 {
font-family: var(--font-heading);
color: var(--font-heading-color);
font-size: var(--font-heading-base-size);
margin: 0;
}

main {
padding: 0 1em;
padding: 0 0.5rem;
}

section {
margin: 0.5rem 0;
}

a {
Expand All @@ -71,8 +75,18 @@ button {
font-family: inherit;
}

section {
margin: 1.5rem 0;
}

section > h1 {
font-size: 1.2em;
margin-left: 1rem;
font-weight: 600;
margin-bottom: 0;
}

.leaves-bg {
background: url('$lib/assets/images/background/leavesBackground.svg');
background-position: 20% 0;
background-size: 250%;
}
Original file line number Diff line number Diff line change
Expand Up @@ -10,15 +10,14 @@

<style>
article {
background-color: var(--color-lighter-grey);
background-color: var(--color-light-grey);
border-radius: 1em;
margin: 1em 0;
padding: 1em;
justify-content: space-between;
}
article h1 {
color: var(--color-dark-blue);
display: flex;
justify-content: space-between;
margin: 0;
Expand Down
66 changes: 66 additions & 0 deletions src/lib/Cards/GameCard.svelte
Original file line number Diff line number Diff line change
@@ -0,0 +1,66 @@
<script lang="ts">
import type { Game } from '$lib/games';
import CardLabel from '$lib/shared/Label/CardLabel.svelte';
import OfflineLabel from '$lib/shared/Label/OfflineLabel.svelte';
import { formatTargetGroups } from '$lib/Utils/formatTargetGroups';
export let game: Game;
const targetGroupString = formatTargetGroups(game.targetGroup);
</script>

<article>
<h1>{game.name}</h1>
{#if game.offline}
<OfflineLabel />
{/if}
<ul>
<li><CardLabel label={targetGroupString} icon={undefined} /></li>
<li><CardLabel label={game.category} icon={undefined} /></li>
<li><CardLabel label={`Min. ${game.minimumPlayers} `} icon="group" /></li>
</ul>
</article>

<style>
article {
background-color: var(--color-white);
border-radius: 1.5em;
padding: 1em;
justify-content: space-between;
box-shadow: 0px 2px 4px 2px rgba(21, 45, 21, 0.1);
/* filter: drop-shadow(0 0.2em 0.2em hsl(92, 30%, 64%)) alternatief shadow */
}
ul {
display: flex;
flex-wrap: wrap;
list-style: none;
margin: 0;
padding: 0;
min-height: 3em;
}
ul li {
margin: 2px;
}
article h1 {
display: flex;
justify-content: space-between;
margin: 0;
line-height: 1em;
font-size: 1em;
min-height: 2em;
}
article h1::after {
content: '';
background: url('$lib/assets/icons/GameCard/cardArrow.svg') no-repeat top center;
background-size: 0.5em;
width: 0.5em;
}
ul {
margin-top: 1em;
}
</style>
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@
}
ul a {
background-color: var(--color-turquoise);
background-color: var(--color-base-light);
border-radius: 1em;
margin-bottom: 2em;
padding: 1.5rem 2rem;
Expand All @@ -38,7 +38,7 @@
ul a div h1 {
font-size: 1em;
color: var(--color-dark-blue);
color: var(--color-accent-dark);
font-weight: 400;
margin: 0;
display: flex;
Expand Down
3 changes: 1 addition & 2 deletions src/lib/Env.js
Original file line number Diff line number Diff line change
@@ -1,2 +1 @@
// export const BASE_API_URL = import.meta.env.VITE_API_URL;
export const BASE_API_URL = import.meta.env.VITE_STRAPI_API_URL;
export const BASE_API_URL = import.meta.env.VITE_API_URL;
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<script lang="ts">
import GameListPopup from '$lib/GameList/GameListPopup.svelte';
import FilterButton from '$lib/Button/FilterButton.svelte';
import FilterPopup from '$lib/Filters/FilterPopup.svelte';
import FilterButton from '$lib/shared/Button/FilterButton.svelte';
import { goto } from '$app/navigation';
export let query: URLSearchParams;
Expand Down Expand Up @@ -128,13 +128,12 @@
</button>
<article class:filter-options-close={!open} class:filter-options-open={open}>
<FilterButton filterTitle="Spelsoort" on:click={() => (category = !category)} />
<!-- Disabled filters for now -->
<!-- <FilterButton filterTitle="Groepen" on:click={() => (targetGroup = !targetGroup)} /> -->
<!-- <FilterButton
filterTitle="Minumum spelers"
<!-- <FilterButton filterTitle="Groepen" on:click={() => (targetGroup = !targetGroup)} />
<FilterButton
filterTitle="Minimum spelers"
on:click={() => (minimumPlayers = !minimumPlayers)}
/> -->
<!-- <FilterButton filterTitle="materialen" on:click={() => (materialen = !materialen)} /> -->
/>
<FilterButton filterTitle="materialen" on:click={() => (materialen = !materialen)} /> -->

<div>
<a href="/spellen" on:click={resetAllFilters}
Expand All @@ -145,7 +144,7 @@
</section>

{#if category}
<GameListPopup
<FilterPopup
filterTitle="Categorie"
filterItems={gameNames}
activeQueries={query.getAll('category')}
Expand All @@ -154,25 +153,28 @@
{/if}

{#if targetGroup}
<GameListPopup
<FilterPopup
filterTitle="targetGroup"
filterItems={groupNames}
activeQueries={query.getAll('targetGroup')}
on:close={() => (targetGroup = !targetGroup)}
/>
{/if}

{#if minimumPlayers}
<GameListPopup
<FilterPopup
filterTitle="minimumPlayers"
filterItems={childrenCount}
activeQueries={query.getAll('minimumPlayers')}
on:close={() => (minimumPlayers = !minimumPlayers)}
/>
{/if}

{#if materialen}
<GameListPopup
<FilterPopup
filterTitle="materialen"
filterItems={materialNames}
activeQueries={query.getAll('material')}
on:close={() => (materialen = !materialen)}
/>
{/if}
Expand All @@ -190,7 +192,7 @@
display: flex;
align-items: center;
justify-content: space-between;
background-color: var(--color-light-orange);
background-color: var(--color-base-light);
padding: 0em 1em;
width: 100%;
height: 3em;
Expand Down Expand Up @@ -221,7 +223,7 @@
}
article {
background-color: var(--color-light-orange);
background-color: var(--color-base-light);
border-radius: 0em 0em 2em 2em;
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -142,7 +142,7 @@
}
input:checked + label > span {
border: 1px solid var(--color-light-orange);
border: 1px solid var(--color-base-light);
}
input:checked + label > span::before {
Expand All @@ -158,8 +158,8 @@
}
input:checked + label {
border: 1px solid var(--color-light-orange);
color: var(--color-light-orange);
border: 1px solid var(--color-base-light);
color: var(--color-base-light);
}
.black-overlay {
Expand Down Expand Up @@ -205,7 +205,7 @@
0% {
width: 0;
height: 0;
border-color: var(--color-light-orange);
border-color: var(--color-base-light);
transform: translate3d(0, 0, 0) rotate(45deg);
}
33% {
Expand All @@ -216,7 +216,7 @@
100% {
width: 0.2em;
height: 0.5em;
border-color: var(--color-light-orange);
border-color: var(--color-base-light);
transform: translate3d(0, -0.5em, 0) rotate(45deg);
}
}
Expand Down
Loading

0 comments on commit 373e432

Please sign in to comment.