feat: feedback changes part 1

This commit is contained in:
Diex5 2024-09-27 12:14:49 +02:00
parent 5ed800eac3
commit dcf953862c
21 changed files with 115 additions and 39 deletions

View file

@ -81,6 +81,8 @@ const projectItems: { label: string | string[], type: string, rating?: ProjectRa
text-12px text-12px
leading-16px leading-16px
lg:hidden lg:hidden
md:opacuty-100
opacity-70
> >
{{ project.usecases?.join(', ') }} {{ project.usecases?.join(', ') }}
</p> </p>
@ -118,8 +120,11 @@ const projectItems: { label: string | string[], type: string, rating?: ProjectRa
> >
<UnoIcon <UnoIcon
i-ic-baseline-language i-ic-baseline-language
text="24px app-text-grey" text="24px app-text-grey hover:app-white"
transition-all
duration-250
/> />
</NuxtLink> </NuxtLink>
<NuxtLink <NuxtLink
v-if="projectItem.label[1]" v-if="projectItem.label[1]"
@ -130,8 +135,10 @@ const projectItems: { label: string | string[], type: string, rating?: ProjectRa
> >
<UnoIcon <UnoIcon
i-mdi-github i-mdi-github
text="24px app-text-grey" text="24px app-text-grey hover:app-white"
text-27px text-27px
transition-all
duration-250
/> />
</NuxtLink> </NuxtLink>
<NuxtLink <NuxtLink
@ -143,7 +150,9 @@ const projectItems: { label: string | string[], type: string, rating?: ProjectRa
> >
<UnoIcon <UnoIcon
i-bi-twitter-x i-bi-twitter-x
text="24px app-text-grey" text="24px app-text-grey hover:app-white"
transition-all
duration-250
/> />
</NuxtLink> </NuxtLink>
</div> </div>
@ -189,7 +198,10 @@ const projectItems: { label: string | string[], type: string, rating?: ProjectRa
<UnoIcon <UnoIcon
i-iconoir-internet i-iconoir-internet
text="24px" text="20px"
md:opacity-100
opacity-70
hover:opacity="100"
/> />
</NuxtLink> </NuxtLink>
<div <div

View file

@ -29,6 +29,9 @@ function onOptionSelected(value: string | number) {
<HeadlessListboxButton <HeadlessListboxButton
:id="`headless-listbox-button-${name}`" :id="`headless-listbox-button-${name}`"
class="relative cursor-pointer py-6px px-14px text-left border-2px bg-app-white text-app-black text-xs sm:text-sm sm:leading-6" class="relative cursor-pointer py-6px px-14px text-left border-2px bg-app-white text-app-black text-xs sm:text-sm sm:leading-6"
hover="bg-app-black text-app-white"
transition="all"
duration-250
:class="{ 'text-app-danger!': isOptionSelected?.value === 'sunset' }" :class="{ 'text-app-danger!': isOptionSelected?.value === 'sunset' }"
> >
<span class="block truncate mr-8px font">{{ isOptionSelected?.label }} <span <span class="block truncate mr-8px font">{{ isOptionSelected?.label }} <span

View file

@ -13,6 +13,7 @@
</div> </div>
<div <div
p-24px p-24px
pb-8px
flex flex
items-center items-center
> >

View file

@ -98,6 +98,8 @@ defineExpose({
<ProjectCreateComponentsInput <ProjectCreateComponentsInput
v-model="description" v-model="description"
lg="w-1/2" lg="w-1/2"
textarea
:textarea-rows="5"
label="Description" label="Description"
text-area text-area
required required

View file

@ -58,6 +58,13 @@ defineExpose({
flex-col flex-col
gap-24px gap-24px
> >
<ProjectCreateComponentsSelect
v-model="assetType"
:options="assetCustodyData?.map(c => ({ label: c.name, value: c.id }))"
label="Asset custody type"
placeholder="Select custody type"
hint="How are users fund handled? (non-custody, multisig, pool,...)"
/>
<ProjectCreateComponentsToggle <ProjectCreateComponentsToggle
v-model="openSource" v-model="openSource"
label="Open source" label="Open source"
@ -69,13 +76,7 @@ defineExpose({
hint="Are developers able to upgrade and change deployed contract?" hint="Are developers able to upgrade and change deployed contract?"
/> />
</div> </div>
<ProjectCreateComponentsSelect
v-model="assetType"
:options="assetCustodyData?.map(c => ({ label: c.name, value: c.id }))"
label="Asset custody type"
placeholder="Select custody type"
hint="How are users fund handled? (non-custody, multisig, pool,...)"
/>
<ProjectCreateComponentsCategoryDivider <ProjectCreateComponentsCategoryDivider
w-full w-full
title="ADDITIONAL INFO" title="ADDITIONAL INFO"

View file

@ -11,6 +11,7 @@ defineProps<{
justify-between justify-between
gap-8px gap-8px
my-40px my-40px
mb-24px
lg="gap-32px" lg="gap-32px"
> >
<div <div

View file

@ -97,6 +97,7 @@ function addOption() {
</HeadlessComboboxLabel> </HeadlessComboboxLabel>
<div class="relative font-700 mt-2 bg-app-black"> <div class="relative font-700 mt-2 bg-app-black">
<HeadlessComboboxButton <HeadlessComboboxButton
as="div" as="div"
class="relative w-full cursor-pointer p-8px text-left border-2px text-app-white bg-black sm:text-sm sm:leading-6" class="relative w-full cursor-pointer p-8px text-left border-2px text-app-white bg-black sm:text-sm sm:leading-6"
:class="error ? 'border-app-danger/50' : 'border-white/30'" :class="error ? 'border-app-danger/50' : 'border-white/30'"
@ -146,7 +147,7 @@ function addOption() {
> >
<HeadlessComboboxOptions <HeadlessComboboxOptions
lg="w-1/2" lg="w-1/2"
class="w-full absolute z-100 max-h-60 divide-y-2px border-2px border-t-0 overflow-auto bg-app-black text-app-white focus:outline-none sm:text-sm border-white/30" class="w-full absolute z-100 max-h-60 divide-y-2px border-2px border-t-0 overflow-auto bg-app-black text-app-white focus:outline-none sm:text-sm border-white"
> >
<div <div
v-if="filteredOptions.length === 0 && query !== '' && props.canAddNew" v-if="filteredOptions.length === 0 && query !== '' && props.canAddNew"

View file

@ -11,8 +11,8 @@ defineProps<{
flex flex
justify-between justify-between
gap-8px gap-8px
lg:gap-32px lg:gap-24px
mt-36px mt-24px
> >
<div <div
flex flex

View file

@ -12,7 +12,7 @@ const { switcher } = storeToRefs(useData())
const groupCollapsed = ref(false) const groupCollapsed = ref(false)
const shownProjectsCount = ref(15) const shownProjectsCount = ref(10)
const shownProjects = computed(() => props.group.projects.slice(0, shownProjectsCount.value)) const shownProjects = computed(() => props.group.projects.slice(0, shownProjectsCount.value))
</script> </script>
@ -41,7 +41,7 @@ const shownProjects = computed(() => props.group.projects.slice(0, shownProjects
/> />
<button <button
type="button" type="button"
:class="[groupCollapsed ? 'i-ic-baseline-arrow-drop-up' : 'i-ic-baseline-arrow-drop-down']" :class="[groupCollapsed ? 'i-ic-baseline-arrow-drop-down' : 'i-ic-baseline-arrow-drop-up']"
text="app-text-grey 24px" text="app-text-grey 24px"
@click="groupCollapsed = !groupCollapsed" @click="groupCollapsed = !groupCollapsed"
/> />
@ -79,6 +79,8 @@ const shownProjects = computed(() => props.group.projects.slice(0, shownProjects
text="12px lg:14px" text="12px lg:14px"
leading="24px lg:32px" leading="24px lg:32px"
font-bold font-bold
pt-16px
pb-24px
text-app-text-grey text-app-text-grey
@click="shownProjectsCount += 15" @click="shownProjectsCount += 15"
> >

View file

@ -34,6 +34,8 @@ const cardTitles = ref< { label: string, sortKey: string, togglable?: boolean }[
mb-16px mb-16px
> >
<div <div
py-8px
flex flex
items-center items-center
gap-4px gap-4px
@ -45,6 +47,8 @@ const cardTitles = ref< { label: string, sortKey: string, togglable?: boolean }[
text="12px lg:14px" text="12px lg:14px"
leading="16px lg:24px" leading="16px lg:24px"
whitespace-nowrap whitespace-nowrap
md:mt-0px
mt-4px
> >
Project name Project name
</p> </p>
@ -87,6 +91,9 @@ const cardTitles = ref< { label: string, sortKey: string, togglable?: boolean }[
text="12px lg:14px " text="12px lg:14px "
leading="16px lg:24px" leading="16px lg:24px"
whitespace-nowrap whitespace-nowrap
hover="text-app-white"
transition-all
duration-250
> >
{{ title.label }} {{ title.label }}
</p> </p>

View file

@ -45,7 +45,6 @@ const logo = props.project?.logos?.at(0)?.url
relative relative
> >
<NuxtImg <NuxtImg
border="1px app-text-grey"
:src="logo ?? '/no-image-1-1.svg'" :src="logo ?? '/no-image-1-1.svg'"
class="bg-app-bg-grey object-cover h-full vertical-align[middle] block w-full h-[300px] " class="bg-app-bg-grey object-cover h-full vertical-align[middle] block w-full h-[300px] "
/> />
@ -84,7 +83,7 @@ const logo = props.project?.logos?.at(0)?.url
items-center items-center
lg:items-start lg:items-start
justify-between justify-between
gap-y="lg:12px 24px" gap-y="12px"
text-app-text-grey text-app-text-grey
w-full w-full
> >
@ -127,6 +126,8 @@ const logo = props.project?.logos?.at(0)?.url
Usecases: Usecases:
</h2> </h2>
<p <p
mt-8px
mb-16px
text-app-white text-app-white
col-span-9 col-span-9
> >
@ -142,6 +143,8 @@ const logo = props.project?.logos?.at(0)?.url
order-3 order-3
lg:order-2 lg:order-2
w-full w-full
md:ml-0px
ml-18px
> >
<div <div
flex flex
@ -205,11 +208,14 @@ const logo = props.project?.logos?.at(0)?.url
flex-col flex-col
lg:flex-row lg:flex-row
gap-y-4px gap-y-4px
items-center md:items-center
items-start
> >
<p <p
text="12px lg:16px" text="12px lg:16px"
leading="16px lg:24px" leading="16px lg:24px"
md:ml-0
ml-10px
> >
{{ rating.name }}: {{ rating.name }}:
</p> </p>
@ -246,7 +252,7 @@ const logo = props.project?.logos?.at(0)?.url
text="16px lg:24px app-white" text="16px lg:24px app-white"
leading="24px md:32px" leading="24px md:32px"
max-h-="32px md:40px" max-h-="32px md:40px"
max-w="84px" max-w="md:84px 64px"
w-full w-full
h-full h-full
font-700 font-700

View file

@ -74,8 +74,11 @@ defineProps<{
> >
Assets used Assets used
</h3> </h3>
<p leading="20px lg:24px"> <p
{{ project.assets_used?.map((a) => a.toUpperCase()).join(', ') }} leading="20px lg:24px"
:class=" project.assets_used ? '' : 'opacity-50'"
>
{{ project.assets_used ? project.assets_used?.map((a) => a.toUpperCase()).join(', ') : 'N/A' }}
</p> </p>
</div> </div>
<div> <div>
@ -86,7 +89,10 @@ defineProps<{
> >
Native token Native token
</h3> </h3>
<p leading="20px lg:24px"> <p
leading="20px lg:24px"
:class=" project.tokens?.length ? '' : 'opacity-50'"
>
{{ project.tokens?.length ? project.tokens[0]?.name : 'N/A' }} {{ project.tokens?.length ? project.tokens[0]?.name : 'N/A' }}
</p> </p>
</div> </div>
@ -98,8 +104,11 @@ defineProps<{
> >
Project launch day Project launch day
</h3> </h3>
<p leading="20px lg:24px"> <p
{{ project.product_launch_day || 'N/A'}} leading="20px lg:24px"
:class=" project.product_launch_day ? '' : 'opacity-50'"
>
{{ project.product_launch_day || 'N/A' }}
</p> </p>
</div> </div>
</div> </div>

View file

@ -32,7 +32,7 @@ withDefaults(defineProps<{ items: ProjectRatingItem[], compact?: boolean }>(), {
> >
<div <div
:class="[item.isValid ? 'i-ic-sharp-thumb-up' : 'i-ic-sharp-thumb-down']" :class="[item.isValid ? 'i-ic-sharp-thumb-up' : 'i-ic-sharp-thumb-down']"
text-20px text-16px
mt--4px mt--4px
/> />
{{ item.label }} {{ item.label }}

View file

@ -16,6 +16,7 @@ defineProps<{
py-12px py-12px
px-16px px-16px
bg-app-bg-audits-card bg-app-bg-audits-card
hover="brightness-120%"
> >
<div <div
grid grid

View file

@ -27,6 +27,8 @@ const isSearchFocused = ref(false)
w-full w-full
h-40px h-40px
hover:opacity-100 hover:opacity-100
md:max-w-470px
:class="isSearchFocused ? 'opacity-100' : 'opacity-25'" :class="isSearchFocused ? 'opacity-100' : 'opacity-25'"
> >
<div <div

View file

@ -54,7 +54,7 @@ const selectedValue = useVModel(props, 'modelValue', emits)
leave-to-class="opacity-0" leave-to-class="opacity-0"
> >
<HeadlessListboxOptions <HeadlessListboxOptions
class="absolute z-100 max-h-60 w-full divide-y-2px border-2px overflow-auto bg-app-black text-app-white focus:outline-none sm:text-sm" class="absolute md: left--12 z-100 max-h-60 w-150px divide-y-2px border-2px overflow-auto bg-app-black text-app-white focus:outline-none sm:text-sm"
> >
<HeadlessListboxOption <HeadlessListboxOption
v-for="option in props.options" v-for="option in props.options"
@ -64,7 +64,7 @@ const selectedValue = useVModel(props, 'modelValue', emits)
:value="option.value" :value="option.value"
> >
<li <li
class="w-full relative cursor-pointer select-none py-8px p-16px text-xs sm:text-sm" class="w-full relative cursor-pointer select-none py-8px p-16px text-sm"
:class="[active ? 'bg-#ffffff1a' : 'text-white']" :class="[active ? 'bg-#ffffff1a' : 'text-white']"
> >
<span <span

View file

@ -51,7 +51,19 @@ watch([scrollY, top, y], (newValues, oldValues) => {
<div <div
app-container app-container
mt-32px mt-32px
relative
> >
<div
md:hidden
block
absolute
z-5
class="bg-gradient-to-r from-transparent to-app-black "
w-50px
h-35px
top-14
right-0
/>
<div <div
flex flex
w-full w-full
@ -81,6 +93,7 @@ watch([scrollY, top, y], (newValues, oldValues) => {
flex flex
items-center items-center
gap-16px gap-16px
relative
overflow-x-auto overflow-x-auto
pb-274px pb-274px
mb--250px mb--250px

View file

@ -18,6 +18,12 @@ watch(y, (newY, oldY) => {
w-full w-full
> >
<Navigation /> <Navigation />
<slot /> <div
max-w-1160px
w-full
mx-auto
>
<slot />
</div>
</div> </div>
</template> </template>

View file

@ -274,7 +274,7 @@ const transitionDone = ref(false)
:model-value="selectedTab" :model-value="selectedTab"
label="Choose category" label="Choose category"
:options="tabs.map(t => ({ label: t.label, value: t.value }))" :options="tabs.map(t => ({ label: t.label, value: t.value }))"
:border-opacity="30" :border-opacity="100"
w-full w-full
lg:hidden lg:hidden
block block
@ -299,13 +299,13 @@ const transitionDone = ref(false)
<div <div
border-t-2 border-t-2
class="border-app-white/30" class="border-app-white/30"
px-16px px-8px
py-24px py-8px
md:py-24px
> >
<div <div
app-container app-container
mb-170px mb-55px
lg="mb-55px"
> >
<ClientOnly> <ClientOnly>
<Transition <Transition
@ -333,7 +333,7 @@ const transitionDone = ref(false)
w-full w-full
flex flex
flex-col flex-col
gap-24px gap-8px
/> />
<Button <Button
v-if="selectedTab !== tabs[tabs.length - 1].value" v-if="selectedTab !== tabs[tabs.length - 1].value"
@ -351,10 +351,10 @@ const transitionDone = ref(false)
<div <div
flex flex
flex-col flex-col
gap-16px gap-10px
justify-center justify-center
text-center text-center
fixed md:fixed
bottom-0 bottom-0
w-full w-full
bg-app-bg-dark_grey bg-app-bg-dark_grey

View file

@ -49,7 +49,10 @@ useSeoMeta({
<ProjectTechnology :project="project" /> <ProjectTechnology :project="project" />
<ProjectPrivacy :project="project" /> <ProjectPrivacy :project="project" />
<ProjectSecurity :project="project" /> <ProjectSecurity :project="project" />
<ProjectHistory :project="project" /> <ProjectHistory
v-if="project.history"
:project="project"
/>
</div> </div>
</div> </div>
</div> </div>

View file

@ -10,7 +10,7 @@ import { collections } from './unocss.config.collections'
export default defineConfig({ export default defineConfig({
shortcuts: [ shortcuts: [
{ {
'app-container': 'px-12px sm:px-1.5rem max-w-1400px m-auto w-full', 'app-container': 'px-12px sm:px-1.5rem max-w-1140px 2xl:max-w-1400px m-auto w-full',
'custom-link': 'text-app-text-grey hover:underline underline-offset-4px text-18px font-400 leading-32px cursor-pointer', 'custom-link': 'text-app-text-grey hover:underline underline-offset-4px text-18px font-400 leading-32px cursor-pointer',
}, },
{ {
@ -41,6 +41,12 @@ export default defineConfig({
}), }),
], ],
theme: { theme: {
extend: {
screens: {
'2xl': '1600px',
},
},
colors: { colors: {
app: { app: {
white: '#fff', white: '#fff',