212bb33142
* Projects page * Continue work on bulk edit * editLinks is now bulkEdit * Bulk Edit Links completed * Edit URL clear fields. * Create project button + other bulk buttons. * Pagination (w/o reactivity.) * Apply suggestions from code review Co-authored-by: triphora <emmaffle@modrinth.com> * Sorting fixed, broken page count though? * Only make editable projects selectable + remove delete button * Shorthand * Start using computed * Fix pagination * Add Pagination Switching * Final Style Changes * Cleanup * Action Affects dropdown * Switch to checkbox swizzle * Projects dashboard, the most hellish thing I have ever worked on * Rewrite project dashboard without tables * why's that there * Fix mod message icon * New project settings page * Remove extra slash * Bulk project route and improve styling of links UI * Remove beta label from Monetization * Relevant page links in project settings * Don't vertically center header rows * Improve error messages, add remove project icon button, add saving feedback, begin project checklist, fix license settings * Remove contextual link from project settings, disable WIP checklist * Fix bulk edit * Project checklist, add featured gallery image to project pages, fix random bugs * Remove old check * Remove icon border on grid mode and hide project status card when unnecessary * Fix build * Make checklist progress smaller and add collapsing * Remove uneven gap on nav cards * Improve wrapping of checklist * Replace project settings header link with status * Fix bugs + status stuff * Fix warns + compile error * Update wording * Hide environment type nag for project types without it * Make member dropdown match Co-authored-by: mineblock11 <93472213+mineblock11@users.noreply.github.com> Co-authored-by: triphora <emmaffle@modrinth.com> Co-authored-by: Jai A <jaiagr+gpg@pm.me> Co-authored-by: Geometrically <18202329+Geometrically@users.noreply.github.com>
108 lines
2.1 KiB
Vue
108 lines
2.1 KiB
Vue
<template>
|
|
<NuxtLink v-if="link !== null" class="nav-link button-base" :to="link">
|
|
<div class="nav-content">
|
|
<slot />
|
|
<span>{{ label }}</span>
|
|
<span v-if="beta" class="beta-badge">BETA</span>
|
|
<span v-if="chevron" class="chevron"><ChevronRightIcon /></span>
|
|
</div>
|
|
</NuxtLink>
|
|
<button
|
|
v-else-if="action"
|
|
class="nav-link button-base"
|
|
:class="{ 'danger-button': danger }"
|
|
@click="action"
|
|
>
|
|
<span class="nav-content">
|
|
<slot />
|
|
<span>{{ label }}</span>
|
|
<span v-if="beta" class="beta-badge">BETA</span>
|
|
</span>
|
|
</button>
|
|
<span v-else>i forgor 💀</span>
|
|
</template>
|
|
|
|
<script>
|
|
import ChevronRightIcon from '~/assets/images/utils/chevron-right.svg?inline'
|
|
|
|
export default {
|
|
name: 'NavStackItem',
|
|
components: {
|
|
ChevronRightIcon,
|
|
},
|
|
props: {
|
|
link: {
|
|
default: null,
|
|
type: String,
|
|
},
|
|
action: {
|
|
default: null,
|
|
type: Function,
|
|
},
|
|
label: {
|
|
required: true,
|
|
type: String,
|
|
},
|
|
beta: {
|
|
default: false,
|
|
type: Boolean,
|
|
},
|
|
chevron: {
|
|
default: false,
|
|
type: Boolean,
|
|
},
|
|
danger: {
|
|
default: false,
|
|
type: Boolean,
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.nav-link {
|
|
font-weight: var(--font-weight-bold);
|
|
background-color: transparent;
|
|
color: var(--text-color);
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: row;
|
|
gap: 0.25rem;
|
|
box-shadow: none;
|
|
padding: 0;
|
|
width: 100%;
|
|
|
|
:where(.nav-link) {
|
|
--text-color: var(--color-text);
|
|
--background-color: var(--color-raised-bg);
|
|
}
|
|
|
|
.nav-content {
|
|
box-sizing: border-box;
|
|
padding: 0.5rem 0.75rem;
|
|
border-radius: var(--size-rounded-sm);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.4rem;
|
|
flex-grow: 1;
|
|
background-color: var(--background-color);
|
|
}
|
|
|
|
&.nuxt-link-exact-active {
|
|
.nav-content {
|
|
color: var(--color-button-text-active);
|
|
background-color: var(--color-button-bg);
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
|
|
.beta-badge {
|
|
margin: 0;
|
|
}
|
|
|
|
.chevron {
|
|
margin-left: auto;
|
|
}
|
|
}
|
|
</style>
|