Mirrors/gamebrary
2
0
Fork 0
mirror of https://github.com/romancm/gamebrary synced 2024-11-23 19:53:14 +00:00
Code Issues Projects Releases Packages Wiki Activity

Added loading placeholders

Browse source
This commit is contained in:
Roman Cervantes 2019-01-11 13:20:21 -07:00
parent 1bcd18715a
commit dd0936c272
8 changed files with 1072 additions and 1063 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

88
src/components/GameBoard/GameBoardPlaceholder.vue Normal file
View file

@ -0,0 +1,88 @@
<template lang="html">
<div class="gameboard-placeholder">
<div class="list" v-for="list in lists" :key="list.name">
<div class="list-header" />
<div class="games">
<div class="game">
<placeholder
image
v-for="n in list.games.length"
:lines="2"
:key="n"
/>
</div>
</div>
</div>
</div>
</template>
<script>
import { mapState } from 'vuex';
import Placeholder from '@/components/Placeholder/Placeholder';
export default {
components: {
Placeholder,
},
computed: {
...mapState(['gameLists', 'platform']),
lists() {
return this.gameLists && this.gameLists[this.platform.code]
? this.gameLists[this.platform.code]
: null;
},
},
methods: {
randomColumn() {
return Math.floor(Math.random() * 4) + 1;
},
},
};
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
@import "~styles/styles.scss";
.gameboard-placeholder {
user-select: none;
display: flex;
align-items: flex-start;
}
.list {
flex-shrink: 0;
cursor: default;
border-radius: $border-radius;
background: $color-white;
overflow: hidden;
position: relative;
width: $list-width;
margin-right: $gp;
max-height: calc(100vh - 81px);
.list-header {
background: $color-dark-gray;
height: $list-header-height;
position: absolute;
width: 100%;
}
.games {
margin-top: $list-header-height;
width: 100%;
padding: $gp / 2;
.game {
.placeholder {
padding-right: $gp;
background: $color-white;
margin-bottom: $gp / 2;
}
}
}
}
</style>

110
src/components/GameDetail/GameDetailPlaceholder.vue Normal file
View file

@ -0,0 +1,110 @@
<template lang="html">
<div>
<div class="game-detail">
<div class="game-hero" />
<div class="game-detail-container">
<div class="game-info">
<placeholder image large />
<div>
<placeholder :lines="1" large class="title" />
<placeholder :lines="5" class="description" />
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import Placeholder from '@/components/Placeholder/Placeholder';
export default {
components: {
Placeholder,
},
};
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
@import "~styles/styles.scss";
.game-detail {
display: flex;
justify-content: center;
background: $color-light-gray;
min-height: calc(100vh - #{$navHeight});
@media($small) {
margin: 0;
}
&.dark {
.game-detail-container {
background: #333;
color: $color-gray;
}
}
}
.game-hero {
background-color: $color-dark-gray;
position: absolute;
width: 100%;
left: 0;
height: 400px;
z-index: 1;
@media($small) {
background: none !important;
}
}
.game-info {
display: grid;
grid-template-columns: 180px auto;
grid-gap: $gp * 2;
margin: 0 $gp;
@media($small) {
grid-gap: 0;
grid-template-columns: 1fr;
text-align: center;
.game-description {
text-align: justify;
}
}
.game-description {
line-height: 1.4rem;
}
}
.game-detail-container {
background-color: rgba(255, 255, 255, 0.95);
-webkit-box-shadow: 0 0 2px 0 $color-gray;
box-shadow: 0 0 2px 0 $color-gray;
width: $container-width;
max-width: 100%;
z-index: 1;
margin: 100px;
padding: $gp 0;
border-radius: $border-radius;
.title {
width: 50%;
}
.description {
width: 75%;
}
@media($small) {
margin: 0;
border-radius: 0;
}
}
</style>

86
src/components/Placeholder/Placeholder.vue Normal file
View file

@ -0,0 +1,86 @@
<template lang="html">
<div class="placeholder" :class="{ 'has-image': image, large }" v-if="image || lines">
<div class="image" v-if="image" />
<div class="text" v-if="lines">
<div
class="text-line"
v-for="n in lines"
:key="n"
/>
</div>
</div>
</template>
<script>
export default {
props: {
image: Boolean,
large: Boolean,
lines: Number,
},
};
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
@import "~styles/styles.scss";
.placeholder {
max-width: 100%;
&.has-image {
display: grid;
grid-template-columns: 80px auto;
grid-gap: $gp;
}
}
// Animation
@keyframes placeholder{
0%{
background-position: -468px 0
}
100%{
background-position: 468px 0
}
}
.animated-background {
animation-duration: 1s;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
animation-name: placeholder;
animation-timing-function: linear;
background: $color-light-gray;
background: linear-gradient(to right,
$color-light-gray 8%,
#F0F0F0 18%, $color-light-gray 33%);
background-size: 800px 104px;
height: 96px;
position: relative;
}
.image {
height: 120px;
width: 80px;
@extend .animated-background;
}
.text-line {
height: 12px;
width: 100%;
margin-bottom: $gp / 2;
@extend .animated-background;
}
.large {
.text-line {
height: 30px;
}
.image {
height: 220px;
width: 175px;
}
}
</style>

15
src/pages/GameBoard/GameBoard.vue
View file

@ -7,14 +7,7 @@
:class="{ dark: darkModeEnabled, 'drag-scroll-active': dragScrollActive }"
v-dragscroll:nochilddrag
>
<template v-if="loading">
Loading...
</template>
<!-- <div v-else-if="!gameLists[platform.code]">
// TODO: SHOW FTU
Boom
</div> -->
<game-board-placeholder v-if="loading" />
<template>
<list
@ -22,7 +15,7 @@
:games="list.games"
:listIndex="listIndex"
:key="`${list.name}-${listIndex}`"
v-if="list"
v-if="list && !loading"
v-for="(list, listIndex) in gameLists[platform.code]"
@end="dragEnd"
@remove="tryDelete(listIndex)"
@ -39,6 +32,7 @@
<script>
import { dragscroll } from 'vue-dragscroll';
import AddList from '@/components/Lists/AddList';
import GameBoardPlaceholder from '@/components/GameBoard/GameBoardPlaceholder';
import Panel from '@/components/Panel/Panel';
import { $success, $error, swal } from '@/shared/modals';
import List from '@/components/GameBoard/List';
@ -58,6 +52,7 @@ export default {
draggable,
List,
AddList,
GameBoardPlaceholder,
Panel,
},
@ -210,7 +205,7 @@ export default {
.panel {
margin-right: $gp;
width: 300px;
width: $list-width;
}
.lists {

80
src/pages/GameDetail/GameDetail.vue
View file

@ -1,47 +1,51 @@
<template lang="html">
<!-- eslint-disable -->
<div class="game-detail" v-if="game" :class="{ dark: darkModeEnabled }">
<div class="game-hero" :style="style" />
<div>
<game-detail-placeholder v-if="!game" />
<div class="game-detail-container">
<div class="game-info">
<game-header />
<div class="game-detail" v-else :class="{ dark: darkModeEnabled }">
<div class="game-hero" :style="style" />
<div class="game-detail-container">
<div class="game-info">
<game-header />
<div>
<h2>{{ game.name }}</h2>
<p class="game-description" v-html="game.summary" />
<affiliate-link />
<game-review-box />
</div>
<div>
<h2>{{ game.name }}</h2>
<p class="game-description" v-html="game.summary" />
<affiliate-link />
<game-review-box />
</div>
</div>
<game-screenshots />
<game-videos />
<game-screenshots />
<game-videos />
<div class="igdb-credit">
<small>Powered by:</small>
<a href="https://igdb.github.io/api/" target="_blank">
<svg class="pull-left mar-sm-right" height="35px" space="preserve" style="margin-left:-9px;margin-top:-7px;" version="1.1" viewBox="0 0 419.3 482.7" width="40px" xmlns="http://www.w3.org/2000/svg"><g><polygon fill="#00A552" points="210,228.7 416.4,121.1 210,478.7"></polygon><polygon fill="#009345" points="210,228.7 3.6,121.1 210,478.7"></polygon><polygon fill="#01DF6B" points="416.4,121.1 3.6,121.1 210,228.7"></polygon><polygon fill="#01DF6B" points="3.6,361 211.2,4.1 416.4,361"></polygon><polygon fill="#00A552" points="210,228.7 310.3,176.4 210,361"></polygon><polygon fill="#009345" points="110.6,176.9 210,361 210,228.7"></polygon></g></svg><svg class="pull-left" style="margin-left:-9px;" version="1.1" viewBox="0 0 419.3 100" width="120px" xmlns="http://www.w3.org/2000/svg"><g><path d="M58.4,58.2H54V5.6h4.4V58.2z" fill="#000000"></path><path d="M110.7,51.9c-1.5,2.2-4,3.9-7.2,5.1s-7,1.8-11,1.8c-4.1,0-7.8-1-11-3s-5.7-4.8-7.4-8.4
c-1.8-3.6-2.6-7.8-2.7-12.4v-6.6c0-7.3,1.8-13.1,5.5-17.3s8.6-6.3,14.9-6.3c5.4,0,9.8,1.4,13.1,4.1c3.3,2.8,5.3,6.6,5.9,11.4h-4.4
c-0.7-3.9-2.2-6.8-4.7-8.8s-5.8-3-9.8-3c-4.9,0-8.8,1.7-11.7,5.2c-2.9,3.5-4.3,8.4-4.3,14.8v6.2c0,4,0.7,7.5,2,10.6
c1.4,3.1,3.3,5.5,5.9,7.1c2.5,1.7,5.5,2.5,8.8,2.5c3.8,0,7.1-0.6,9.9-1.8c1.8-0.8,3.1-1.7,4-2.8V37H92.1v-3.8h18.6V51.9z" fill="#000000"></path><path d="M123.3,58.2V5.6H138c4.3,0,8.2,1,11.6,2.9c3.4,2,6.1,4.8,8,8.4c1.9,3.7,2.9,7.8,2.9,12.5v4.8
c0,4.7-1,8.9-2.9,12.5s-4.6,6.4-8,8.4c-3.5,2-7.4,3-11.9,3L123.3,58.2L123.3,58.2z M127.7,9.3v45.1h10c5.5,0,10-1.8,13.3-5.5
s5-8.6,5-14.9v-4.6c0-6.1-1.7-10.9-5-14.5s-7.6-5.5-13-5.5L127.7,9.3L127.7,9.3z" fill="#000000"></path><path d="M171.7,58.2V5.6h15.6c5.6,0,9.9,1.2,12.8,3.5c2.9,2.3,4.4,5.8,4.4,10.3c0,2.7-0.7,5.1-2.2,7.1
s-3.5,3.5-6.1,4.3c3.1,0.7,5.5,2.2,7.4,4.5s2.8,5,2.8,8.1c0,4.6-1.5,8.3-4.5,10.9s-7.2,3.9-12.5,3.9H171.7z M176.2,29.2h12.1
c3.7-0.1,6.6-0.9,8.6-2.6c2-1.7,3.1-4.1,3.1-7.3c0-3.4-1.1-5.9-3.2-7.5c-2.1-1.6-5.3-2.4-9.6-2.4h-11.1L176.2,29.2L176.2,29.2z
M176.2,32.9v21.5h13.3c3.8,0,6.8-1,9.1-2.9c2.2-1.9,3.3-4.6,3.3-8.1c0-3.2-1.1-5.8-3.2-7.7s-5.1-2.8-8.8-2.8H176.2z" fill="#000000"></path><path d="M215.7,55.6c0-0.8,0.3-1.6,0.8-2.2c0.5-0.6,1.3-0.9,2.3-0.9s1.7,0.3,2.3,0.9c0.6,0.6,0.8,1.3,0.8,2.2
c0,0.8-0.3,1.5-0.8,2.1c-0.6,0.5-1.3,0.8-2.3,0.8s-1.7-0.3-2.3-0.8C215.9,57.1,215.7,56.4,215.7,55.6z" fill="#01DF6B"></path><path d="M248.2,55.3c3,0,5.5-0.8,7.6-2.5c2-1.7,3.1-3.9,3.3-6.6h4.2c-0.1,2.4-0.9,4.6-2.2,6.5c-1.4,2-3.2,3.5-5.5,4.6
c-2.3,1.1-4.7,1.7-7.3,1.7c-5.1,0-9.2-1.8-12.2-5.3c-3-3.6-4.5-8.4-4.5-14.4V38c0-3.9,0.7-7.3,2-10.2c1.3-3,3.3-5.3,5.8-6.9
c2.5-1.6,5.5-2.4,8.8-2.4c4.3,0,7.8,1.3,10.6,3.8c2.8,2.6,4.3,5.9,4.5,10.1h-4.2c-0.2-3.1-1.3-5.5-3.3-7.4c-2-1.9-4.5-2.8-7.6-2.8
c-3.9,0-6.9,1.4-9.1,4.2c-2.2,2.8-3.2,6.8-3.2,11.9v1.3c0,5,1.1,8.9,3.2,11.7C241.2,53.9,244.3,55.3,248.2,55.3z" fill="#01DF6B"></path><path d="M269.5,38.1c0-3.8,0.7-7.1,2.2-10.2c1.5-3,3.5-5.4,6.2-7c2.7-1.7,5.7-2.5,9.1-2.5c5.2,0,9.4,1.8,12.6,5.5
c3.2,3.6,4.8,8.5,4.8,14.5v0.9c0,3.8-0.7,7.2-2.2,10.2s-3.5,5.4-6.2,7s-5.7,2.5-9.1,2.5c-5.2,0-9.4-1.8-12.6-5.5
c-3.2-3.6-4.9-8.5-4.9-14.5v-0.9H269.5z M273.8,39.3c0,4.7,1.2,8.5,3.6,11.5s5.6,4.5,9.5,4.5s7.1-1.5,9.5-4.5s3.6-7,3.6-11.9v-0.8
c0-3-0.6-5.7-1.7-8.2s-2.7-4.4-4.7-5.8c-2-1.4-4.3-2-6.9-2c-3.9,0-7,1.5-9.4,4.5s-3.6,7-3.6,11.9v0.8H273.8z" fill="#01DF6B"></path><path d="M317.2,19.1l0.1,6.4c1.4-2.4,3.3-4.1,5.4-5.3c2.2-1.2,4.6-1.8,7.2-1.8c6.2,0,10.1,2.5,11.7,7.6
c1.4-2.4,3.3-4.3,5.6-5.6c2.3-1.3,4.9-2,7.7-2c8.4,0,12.7,4.6,12.8,13.7v26.1h-4.3V32.4c0-3.5-0.8-6.1-2.3-7.8s-3.9-2.5-7.2-2.5
c-3.1,0-5.7,1.1-7.9,3c-2.1,2-3.3,4.4-3.6,7.2v25.9h-4.1V32.1c0-3.3-0.8-5.8-2.4-7.5c-1.6-1.6-3.9-2.5-7.2-2.5
c-2.7,0-5.1,0.8-7,2.3c-2,1.6-3.4,3.9-4.3,6.9v26.8h-4.3V19L317.2,19.1L317.2,19.1z" fill="#01DF6B"></path></g></svg>
</a>
<div class="igdb-credit">
<small>Powered by:</small>
<a href="https://igdb.github.io/api/" target="_blank">
<svg class="pull-left mar-sm-right" height="35px" space="preserve" style="margin-left:-9px;margin-top:-7px;" version="1.1" viewBox="0 0 419.3 482.7" width="40px" xmlns="http://www.w3.org/2000/svg"><g><polygon fill="#00A552" points="210,228.7 416.4,121.1 210,478.7"></polygon><polygon fill="#009345" points="210,228.7 3.6,121.1 210,478.7"></polygon><polygon fill="#01DF6B" points="416.4,121.1 3.6,121.1 210,228.7"></polygon><polygon fill="#01DF6B" points="3.6,361 211.2,4.1 416.4,361"></polygon><polygon fill="#00A552" points="210,228.7 310.3,176.4 210,361"></polygon><polygon fill="#009345" points="110.6,176.9 210,361 210,228.7"></polygon></g></svg><svg class="pull-left" style="margin-left:-9px;" version="1.1" viewBox="0 0 419.3 100" width="120px" xmlns="http://www.w3.org/2000/svg"><g><path d="M58.4,58.2H54V5.6h4.4V58.2z" fill="#000000"></path><path d="M110.7,51.9c-1.5,2.2-4,3.9-7.2,5.1s-7,1.8-11,1.8c-4.1,0-7.8-1-11-3s-5.7-4.8-7.4-8.4
c-1.8-3.6-2.6-7.8-2.7-12.4v-6.6c0-7.3,1.8-13.1,5.5-17.3s8.6-6.3,14.9-6.3c5.4,0,9.8,1.4,13.1,4.1c3.3,2.8,5.3,6.6,5.9,11.4h-4.4
c-0.7-3.9-2.2-6.8-4.7-8.8s-5.8-3-9.8-3c-4.9,0-8.8,1.7-11.7,5.2c-2.9,3.5-4.3,8.4-4.3,14.8v6.2c0,4,0.7,7.5,2,10.6
c1.4,3.1,3.3,5.5,5.9,7.1c2.5,1.7,5.5,2.5,8.8,2.5c3.8,0,7.1-0.6,9.9-1.8c1.8-0.8,3.1-1.7,4-2.8V37H92.1v-3.8h18.6V51.9z" fill="#000000"></path><path d="M123.3,58.2V5.6H138c4.3,0,8.2,1,11.6,2.9c3.4,2,6.1,4.8,8,8.4c1.9,3.7,2.9,7.8,2.9,12.5v4.8
c0,4.7-1,8.9-2.9,12.5s-4.6,6.4-8,8.4c-3.5,2-7.4,3-11.9,3L123.3,58.2L123.3,58.2z M127.7,9.3v45.1h10c5.5,0,10-1.8,13.3-5.5
s5-8.6,5-14.9v-4.6c0-6.1-1.7-10.9-5-14.5s-7.6-5.5-13-5.5L127.7,9.3L127.7,9.3z" fill="#000000"></path><path d="M171.7,58.2V5.6h15.6c5.6,0,9.9,1.2,12.8,3.5c2.9,2.3,4.4,5.8,4.4,10.3c0,2.7-0.7,5.1-2.2,7.1
s-3.5,3.5-6.1,4.3c3.1,0.7,5.5,2.2,7.4,4.5s2.8,5,2.8,8.1c0,4.6-1.5,8.3-4.5,10.9s-7.2,3.9-12.5,3.9H171.7z M176.2,29.2h12.1
c3.7-0.1,6.6-0.9,8.6-2.6c2-1.7,3.1-4.1,3.1-7.3c0-3.4-1.1-5.9-3.2-7.5c-2.1-1.6-5.3-2.4-9.6-2.4h-11.1L176.2,29.2L176.2,29.2z
M176.2,32.9v21.5h13.3c3.8,0,6.8-1,9.1-2.9c2.2-1.9,3.3-4.6,3.3-8.1c0-3.2-1.1-5.8-3.2-7.7s-5.1-2.8-8.8-2.8H176.2z" fill="#000000"></path><path d="M215.7,55.6c0-0.8,0.3-1.6,0.8-2.2c0.5-0.6,1.3-0.9,2.3-0.9s1.7,0.3,2.3,0.9c0.6,0.6,0.8,1.3,0.8,2.2
c0,0.8-0.3,1.5-0.8,2.1c-0.6,0.5-1.3,0.8-2.3,0.8s-1.7-0.3-2.3-0.8C215.9,57.1,215.7,56.4,215.7,55.6z" fill="#01DF6B"></path><path d="M248.2,55.3c3,0,5.5-0.8,7.6-2.5c2-1.7,3.1-3.9,3.3-6.6h4.2c-0.1,2.4-0.9,4.6-2.2,6.5c-1.4,2-3.2,3.5-5.5,4.6
c-2.3,1.1-4.7,1.7-7.3,1.7c-5.1,0-9.2-1.8-12.2-5.3c-3-3.6-4.5-8.4-4.5-14.4V38c0-3.9,0.7-7.3,2-10.2c1.3-3,3.3-5.3,5.8-6.9
c2.5-1.6,5.5-2.4,8.8-2.4c4.3,0,7.8,1.3,10.6,3.8c2.8,2.6,4.3,5.9,4.5,10.1h-4.2c-0.2-3.1-1.3-5.5-3.3-7.4c-2-1.9-4.5-2.8-7.6-2.8
c-3.9,0-6.9,1.4-9.1,4.2c-2.2,2.8-3.2,6.8-3.2,11.9v1.3c0,5,1.1,8.9,3.2,11.7C241.2,53.9,244.3,55.3,248.2,55.3z" fill="#01DF6B"></path><path d="M269.5,38.1c0-3.8,0.7-7.1,2.2-10.2c1.5-3,3.5-5.4,6.2-7c2.7-1.7,5.7-2.5,9.1-2.5c5.2,0,9.4,1.8,12.6,5.5
c3.2,3.6,4.8,8.5,4.8,14.5v0.9c0,3.8-0.7,7.2-2.2,10.2s-3.5,5.4-6.2,7s-5.7,2.5-9.1,2.5c-5.2,0-9.4-1.8-12.6-5.5
c-3.2-3.6-4.9-8.5-4.9-14.5v-0.9H269.5z M273.8,39.3c0,4.7,1.2,8.5,3.6,11.5s5.6,4.5,9.5,4.5s7.1-1.5,9.5-4.5s3.6-7,3.6-11.9v-0.8
c0-3-0.6-5.7-1.7-8.2s-2.7-4.4-4.7-5.8c-2-1.4-4.3-2-6.9-2c-3.9,0-7,1.5-9.4,4.5s-3.6,7-3.6,11.9v0.8H273.8z" fill="#01DF6B"></path><path d="M317.2,19.1l0.1,6.4c1.4-2.4,3.3-4.1,5.4-5.3c2.2-1.2,4.6-1.8,7.2-1.8c6.2,0,10.1,2.5,11.7,7.6
c1.4-2.4,3.3-4.3,5.6-5.6c2.3-1.3,4.9-2,7.7-2c8.4,0,12.7,4.6,12.8,13.7v26.1h-4.3V32.4c0-3.5-0.8-6.1-2.3-7.8s-3.9-2.5-7.2-2.5
c-3.1,0-5.7,1.1-7.9,3c-2.1,2-3.3,4.4-3.6,7.2v25.9h-4.1V32.1c0-3.3-0.8-5.8-2.4-7.5c-1.6-1.6-3.9-2.5-7.2-2.5
c-2.7,0-5.1,0.8-7,2.3c-2,1.6-3.4,3.9-4.3,6.9v26.8h-4.3V19L317.2,19.1L317.2,19.1z" fill="#01DF6B"></path></g></svg>
</a>
</div>
</div>
</div>
</div>
@ -55,6 +59,7 @@ import GameScreenshots from '@/components/GameDetail/GameScreenshots';
import GameVideos from '@/components/GameDetail/GameVideos';
import GameReviewBox from '@/components/GameDetail/GameReviewBox';
import AffiliateLink from '@/components/GameDetail/AffiliateLink';
import GameDetailPlaceholder from '@/components/GameDetail/GameDetailPlaceholder';
export default {
components: {
@ -63,6 +68,7 @@ export default {
GameVideos,
GameReviewBox,
AffiliateLink,
GameDetailPlaceholder,
},
computed: {

13
src/pages/ShareList/ShareList.vue
View file

@ -1,6 +1,6 @@
<template lang="html">
<main v-dragscroll:nochilddrag>
<span v-if="loading">Loading...</span>
<game-board-placeholder v-if="loading" />
<section
v-if="!loading && listData && publicGameData"
@ -9,11 +9,9 @@
>
<header>{{ list.name }} ({{ list.games.length }})</header>
<div class="empty-list" v-if="!list.games.length">
<h3>This collection is empty</h3>
</div>
<div class="games">
<p v-if="!list.games.length">This list is empty</p>
<div class="games" v-else>
<div
v-if="publicGameData[game]"
class="game-card"
@ -35,6 +33,7 @@
<script>
import firebase from 'firebase/app';
import GameBoardPlaceholder from '@/components/GameBoard/GameBoardPlaceholder';
import { swal } from '@/shared/modals';
import { dragscroll } from 'vue-dragscroll';
import { mapState } from 'vuex';
@ -48,6 +47,10 @@ db.settings({
});
export default {
components: {
GameBoardPlaceholder,
},
directives: {
dragscroll,
},

1
src/styles/partials/_measurements.scss
View file

@ -3,6 +3,7 @@ $gp: 16px;
$navHeight: 48px;
$container-width: 900px;
$list-header-height: 30px;
$list-width: 300px;
// Media queries
$small: "max-width: 780px";

1742
yarn.lock
View file

File diff suppressed because it is too large Load diff