eightequal/AstralRinth
1
0
Fork 0
forked from didirus/AstralRinth
Code Pull Requests Activity

Layout refactor (#150)

Browse Source 
* Revert recent commits

* Move things around, and do preparation work for nested page systems.

* Fixed issue on side bar not appearing
This commit is contained in:
Redblueflame
2021-03-31 19:09:18 +02:00
committed by GitHub
parent e80a5d82a4
commit af8fc53704
29 changed files with 100 additions and 152 deletions
Download Patch File Download Diff File Expand all files Collapse all files

132
components/ui/search/Categories.vue Normal file
View File

@@ -0,0 +1,132 @@
<template>
<div class="categories">
<p v-if="categories.includes('fabric')">
<FabricLoader aria-hidden="true" />
Fabric
</p>
<p v-if="categories.includes('forge')">
<ForgeLoader aria-hidden="true" />
Forge
</p>
<p v-if="categories.includes('technology')">
<TechCategory aria-hidden="true" />
Technology
</p>
<p v-if="categories.includes('adventure')">
<AdventureCategory aria-hidden="true" />
Adventure
</p>
<p v-if="categories.includes('magic')">
<MagicCategory aria-hidden="true" />
Magic
</p>
<p v-if="categories.includes('utility')">
<UtilityCategory aria-hidden="true" />
Utility
</p>
<p v-if="categories.includes('decoration')">
<DecorationCategory aria-hidden="true" />
Decoration
</p>
<p v-if="categories.includes('library')">
<LibraryCategory aria-hidden="true" />
Library
</p>
<p v-if="categories.includes('cursed')">
<CursedCategory aria-hidden="true" />
Cursed
</p>
<p v-if="categories.includes('worldgen')">
<WorldGenCategory aria-hidden="true" />
Worldgen
</p>
<p v-if="categories.includes('storage')">
<StorageCategory aria-hidden="true" />
Storage
</p>
<p v-if="categories.includes('food')">
<FoodCategory aria-hidden="true" />
Food
</p>
<p v-if="categories.includes('equipment')">
<EquipmentCategory aria-hidden="true" />
Equipment
</p>
<p v-if="categories.includes('misc')">
<MiscCategory aria-hidden="true" />
Misc
</p>
</div>
</template>
<script>
import TechCategory from '~/assets/images/categories/tech.svg?inline'
import AdventureCategory from '~/assets/images/categories/adventure.svg?inline'
import CursedCategory from '~/assets/images/categories/cursed.svg?inline'
import DecorationCategory from '~/assets/images/categories/decoration.svg?inline'
import EquipmentCategory from '~/assets/images/categories/equipment.svg?inline'
import FoodCategory from '~/assets/images/categories/food.svg?inline'
import LibraryCategory from '~/assets/images/categories/library.svg?inline'
import MagicCategory from '~/assets/images/categories/magic.svg?inline'
import MiscCategory from '~/assets/images/categories/misc.svg?inline'
import StorageCategory from '~/assets/images/categories/storage.svg?inline'
import UtilityCategory from '~/assets/images/categories/utility.svg?inline'
import WorldGenCategory from '~/assets/images/categories/worldgen.svg?inline'
import ForgeLoader from '~/assets/images/categories/forge.svg?inline'
import FabricLoader from '~/assets/images/categories/fabric.svg?inline'
export default {
name: 'Categories',
components: {
TechCategory,
AdventureCategory,
CursedCategory,
DecorationCategory,
EquipmentCategory,
FoodCategory,
LibraryCategory,
MagicCategory,
MiscCategory,
StorageCategory,
UtilityCategory,
WorldGenCategory,
ForgeLoader,
FabricLoader,
},
props: {
categories: {
type: Array,
default() {
return []
},
},
},
}
</script>
<style lang="scss" scoped>
.categories {
@extend %row;
flex-wrap: wrap;
p {
display: flex;
align-items: center;
flex-direction: row;
background-color: var(--color-category-bg);
border-radius: var(--size-rounded-max);
color: var(--color-category-text);
margin-top: 0.25em;
margin-bottom: 0.25em;
margin-right: 0.5em;
padding: 0.4em 0.7em;
font-size: var(--font-size-sm);
height: 1em;
svg {
width: 15px;
margin-right: 5px;
}
}
}
</style>

114
components/ui/search/Pagination.vue
View File

@@ -1,114 +0,0 @@
<template>
<div v-if="pages.length > 1" class="columns paginates">
<button
:class="{ disabled: currentPage === 1 }"
class="paginate has-icon"
aria-label="Previous Page"
@click="currentPage !== 1 ? switchPage(currentPage - 1) : null"
>
<LeftArrowIcon />
</button>
<div
v-for="(item, index) in pages"
:key="'page-' + item"
:class="{
'page-number': currentPage !== item,
}"
class="page-number-container"
>
<div v-if="pages[index - 1] + 1 !== item && item !== 1" class="has-icon">
<GapIcon />
</div>
<button
:class="{ 'page-number current': currentPage === item }"
@click="currentPage !== item ? switchPage(item) : null"
>
{{ item }}
</button>
</div>
<button
:class="{ disabled: currentPage === pages[pages.length - 1] }"
class="paginate has-icon"
aria-label="Next Page"
@click="
currentPage !== pages[pages.length - 1]
? switchPage(currentPage + 1)
: null
"
>
<RightArrowIcon />
</button>
</div>
</template>
<script>
import GapIcon from '~/assets/images/utils/gap.svg'
import LeftArrowIcon from '~/assets/images/utils/left-arrow.svg'
import RightArrowIcon from '~/assets/images/utils/right-arrow.svg'
export default {
name: 'Pagination',
components: {
GapIcon,
LeftArrowIcon,
RightArrowIcon,
},
props: {
currentPage: {
type: Number,
default: 1,
},
pages: {
type: Array,
default() {
return []
},
},
},
methods: {
switchPage(newPage) {
this.$emit('switch-page', newPage)
},
},
}
</script>
<style scoped lang="scss">
button {
min-width: 2rem;
padding: 0 0.5rem;
height: 2rem;
border-radius: 2rem;
background: transparent;
&.page-number.current {
background: var(--color-button-bg-hover);
color: var(--color-button-text-hover);
cursor: default;
}
&.paginate.disabled {
background: none;
color: var(--color-button-text-disabled);
cursor: default;
}
&:hover {
background: var(--color-button-bg-active);
color: var(--color-button-text-active);
}
}
.has-icon {
display: flex;
align-items: center;
padding: 0 0.5rem;
height: 2rem;
svg {
width: 1rem;
}
}
.page-number-container {
display: flex;
max-height: 2rem;
}
</style>