mirror of
https://github.com/web3privacy/explorer-app.git
synced 2024-10-15 16:46:26 +02:00
Merge pull request #47 from web3privacy/pb/feedback-fixes
feat: feedback changes part 1
This commit is contained in:
MufCZ
GitHub
commit
a8d730f633
21 changed files with 115 additions and 39 deletions
|
|
@ -81,6 +81,8 @@ const projectItems: { label: string | string[], type: string, rating?: ProjectRa
|
|||
text-12px
|
||||
leading-16px
|
||||
lg:hidden
|
||||
md:opacuty-100
|
||||
opacity-70
|
||||
>
|
||||
{{ project.usecases?.join(', ') }}
|
||||
</p>
|
||||
|
|
@ -118,8 +120,11 @@ const projectItems: { label: string | string[], type: string, rating?: ProjectRa
|
|||
>
|
||||
<UnoIcon
|
||||
i-ic-baseline-language
|
||||
text="24px app-text-grey"
|
||||
text="24px app-text-grey hover:app-white"
|
||||
transition-all
|
||||
duration-250
|
||||
/>
|
||||
|
||||
</NuxtLink>
|
||||
<NuxtLink
|
||||
v-if="projectItem.label[1]"
|
||||
|
|
@ -130,8 +135,10 @@ const projectItems: { label: string | string[], type: string, rating?: ProjectRa
|
|||
>
|
||||
<UnoIcon
|
||||
i-mdi-github
|
||||
text="24px app-text-grey"
|
||||
text="24px app-text-grey hover:app-white"
|
||||
text-27px
|
||||
transition-all
|
||||
duration-250
|
||||
/>
|
||||
</NuxtLink>
|
||||
<NuxtLink
|
||||
|
|
@ -143,7 +150,9 @@ const projectItems: { label: string | string[], type: string, rating?: ProjectRa
|
|||
>
|
||||
<UnoIcon
|
||||
i-bi-twitter-x
|
||||
text="24px app-text-grey"
|
||||
text="24px app-text-grey hover:app-white"
|
||||
transition-all
|
||||
duration-250
|
||||
/>
|
||||
</NuxtLink>
|
||||
</div>
|
||||
|
|
@ -189,7 +198,10 @@ const projectItems: { label: string | string[], type: string, rating?: ProjectRa
|
|||
<UnoIcon
|
||||
|
||||
i-iconoir-internet
|
||||
text="24px"
|
||||
text="20px"
|
||||
md:opacity-100
|
||||
opacity-70
|
||||
hover:opacity="100"
|
||||
/>
|
||||
</NuxtLink>
|
||||
<div
|
||||
|
|
|
|||
|
|
@ -29,6 +29,9 @@ function onOptionSelected(value: string | number) {
|
|||
<HeadlessListboxButton
|
||||
: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"
|
||||
hover="bg-app-black text-app-white"
|
||||
transition="all"
|
||||
duration-250
|
||||
:class="{ 'text-app-danger!': isOptionSelected?.value === 'sunset' }"
|
||||
>
|
||||
<span class="block truncate mr-8px font">{{ isOptionSelected?.label }} <span
|
||||
|
|
|
|||
|
|
@ -13,6 +13,7 @@
|
|||
</div>
|
||||
<div
|
||||
p-24px
|
||||
pb-8px
|
||||
flex
|
||||
items-center
|
||||
>
|
||||
|
|
|
|||
|
|
@ -98,6 +98,8 @@ defineExpose({
|
|||
<ProjectCreateComponentsInput
|
||||
v-model="description"
|
||||
lg="w-1/2"
|
||||
textarea
|
||||
:textarea-rows="5"
|
||||
label="Description"
|
||||
text-area
|
||||
required
|
||||
|
|
|
|||
|
|
@ -58,6 +58,13 @@ defineExpose({
|
|||
flex-col
|
||||
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 user’s fund handled? (non-custody, multisig, pool,...)"
|
||||
/>
|
||||
<ProjectCreateComponentsToggle
|
||||
v-model="openSource"
|
||||
label="Open source"
|
||||
|
|
@ -69,13 +76,7 @@ defineExpose({
|
|||
hint="Are developers able to upgrade and change deployed contract?"
|
||||
/>
|
||||
</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 user’s fund handled? (non-custody, multisig, pool,...)"
|
||||
/>
|
||||
|
||||
<ProjectCreateComponentsCategoryDivider
|
||||
w-full
|
||||
title="ADDITIONAL INFO"
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@ defineProps<{
|
|||
justify-between
|
||||
gap-8px
|
||||
my-40px
|
||||
mb-24px
|
||||
lg="gap-32px"
|
||||
>
|
||||
<div
|
||||
|
|
|
|||
|
|
@ -97,6 +97,7 @@ function addOption() {
|
|||
</HeadlessComboboxLabel>
|
||||
<div class="relative font-700 mt-2 bg-app-black">
|
||||
<HeadlessComboboxButton
|
||||
|
||||
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="error ? 'border-app-danger/50' : 'border-white/30'"
|
||||
|
|
@ -146,7 +147,7 @@ function addOption() {
|
|||
>
|
||||
<HeadlessComboboxOptions
|
||||
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
|
||||
v-if="filteredOptions.length === 0 && query !== '' && props.canAddNew"
|
||||
|
|
|
|||
|
|
@ -11,8 +11,8 @@ defineProps<{
|
|||
flex
|
||||
justify-between
|
||||
gap-8px
|
||||
lg:gap-32px
|
||||
mt-36px
|
||||
lg:gap-24px
|
||||
mt-24px
|
||||
>
|
||||
<div
|
||||
flex
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ const { switcher } = storeToRefs(useData())
|
|||
|
||||
const groupCollapsed = ref(false)
|
||||
|
||||
const shownProjectsCount = ref(15)
|
||||
const shownProjectsCount = ref(10)
|
||||
|
||||
const shownProjects = computed(() => props.group.projects.slice(0, shownProjectsCount.value))
|
||||
</script>
|
||||
|
|
@ -41,7 +41,7 @@ const shownProjects = computed(() => props.group.projects.slice(0, shownProjects
|
|||
/>
|
||||
<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"
|
||||
@click="groupCollapsed = !groupCollapsed"
|
||||
/>
|
||||
|
|
@ -79,6 +79,8 @@ const shownProjects = computed(() => props.group.projects.slice(0, shownProjects
|
|||
text="12px lg:14px"
|
||||
leading="24px lg:32px"
|
||||
font-bold
|
||||
pt-16px
|
||||
pb-24px
|
||||
text-app-text-grey
|
||||
@click="shownProjectsCount += 15"
|
||||
>
|
||||
|
|
|
|||
|
|
@ -34,6 +34,8 @@ const cardTitles = ref< { label: string, sortKey: string, togglable?: boolean }[
|
|||
mb-16px
|
||||
>
|
||||
<div
|
||||
py-8px
|
||||
|
||||
flex
|
||||
items-center
|
||||
gap-4px
|
||||
|
|
@ -45,6 +47,8 @@ const cardTitles = ref< { label: string, sortKey: string, togglable?: boolean }[
|
|||
text="12px lg:14px"
|
||||
leading="16px lg:24px"
|
||||
whitespace-nowrap
|
||||
md:mt-0px
|
||||
mt-4px
|
||||
>
|
||||
Project name
|
||||
</p>
|
||||
|
|
@ -87,6 +91,9 @@ const cardTitles = ref< { label: string, sortKey: string, togglable?: boolean }[
|
|||
text="12px lg:14px "
|
||||
leading="16px lg:24px"
|
||||
whitespace-nowrap
|
||||
hover="text-app-white"
|
||||
transition-all
|
||||
duration-250
|
||||
>
|
||||
{{ title.label }}
|
||||
</p>
|
||||
|
|
|
|||
|
|
@ -45,7 +45,6 @@ const logo = props.project?.logos?.at(0)?.url
|
|||
relative
|
||||
>
|
||||
<NuxtImg
|
||||
border="1px app-text-grey"
|
||||
:src="logo ?? '/no-image-1-1.svg'"
|
||||
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
|
||||
lg:items-start
|
||||
justify-between
|
||||
gap-y="lg:12px 24px"
|
||||
gap-y="12px"
|
||||
text-app-text-grey
|
||||
w-full
|
||||
>
|
||||
|
|
@ -127,6 +126,8 @@ const logo = props.project?.logos?.at(0)?.url
|
|||
Usecases:
|
||||
</h2>
|
||||
<p
|
||||
mt-8px
|
||||
mb-16px
|
||||
text-app-white
|
||||
col-span-9
|
||||
>
|
||||
|
|
@ -142,6 +143,8 @@ const logo = props.project?.logos?.at(0)?.url
|
|||
order-3
|
||||
lg:order-2
|
||||
w-full
|
||||
md:ml-0px
|
||||
ml-18px
|
||||
>
|
||||
<div
|
||||
flex
|
||||
|
|
@ -205,11 +208,14 @@ const logo = props.project?.logos?.at(0)?.url
|
|||
flex-col
|
||||
lg:flex-row
|
||||
gap-y-4px
|
||||
items-center
|
||||
md:items-center
|
||||
items-start
|
||||
>
|
||||
<p
|
||||
text="12px lg:16px"
|
||||
leading="16px lg:24px"
|
||||
md:ml-0
|
||||
ml-10px
|
||||
>
|
||||
{{ rating.name }}:
|
||||
</p>
|
||||
|
|
@ -246,7 +252,7 @@ const logo = props.project?.logos?.at(0)?.url
|
|||
text="16px lg:24px app-white"
|
||||
leading="24px md:32px"
|
||||
max-h-="32px md:40px"
|
||||
max-w="84px"
|
||||
max-w="md:84px 64px"
|
||||
w-full
|
||||
h-full
|
||||
font-700
|
||||
|
|
|
|||
|
|
@ -74,8 +74,11 @@ defineProps<{
|
|||
>
|
||||
Assets used
|
||||
</h3>
|
||||
<p leading="20px lg:24px">
|
||||
{{ project.assets_used?.map((a) => a.toUpperCase()).join(', ') }}
|
||||
<p
|
||||
leading="20px lg:24px"
|
||||
:class=" project.assets_used ? '' : 'opacity-50'"
|
||||
>
|
||||
{{ project.assets_used ? project.assets_used?.map((a) => a.toUpperCase()).join(', ') : 'N/A' }}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
|
|
@ -86,7 +89,10 @@ defineProps<{
|
|||
>
|
||||
Native token
|
||||
</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' }}
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -98,8 +104,11 @@ defineProps<{
|
|||
>
|
||||
Project launch day
|
||||
</h3>
|
||||
<p leading="20px lg:24px">
|
||||
{{ project.product_launch_day || 'N/A'}}
|
||||
<p
|
||||
leading="20px lg:24px"
|
||||
:class=" project.product_launch_day ? '' : 'opacity-50'"
|
||||
>
|
||||
{{ project.product_launch_day || 'N/A' }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@ withDefaults(defineProps<{ items: ProjectRatingItem[], compact?: boolean }>(), {
|
|||
>
|
||||
<div
|
||||
:class="[item.isValid ? 'i-ic-sharp-thumb-up' : 'i-ic-sharp-thumb-down']"
|
||||
text-20px
|
||||
text-16px
|
||||
mt--4px
|
||||
/>
|
||||
{{ item.label }}
|
||||
|
|
|
|||
|
|
@ -16,6 +16,7 @@ defineProps<{
|
|||
py-12px
|
||||
px-16px
|
||||
bg-app-bg-audits-card
|
||||
hover="brightness-120%"
|
||||
>
|
||||
<div
|
||||
grid
|
||||
|
|
|
|||
|
|
@ -27,6 +27,8 @@ const isSearchFocused = ref(false)
|
|||
w-full
|
||||
h-40px
|
||||
hover:opacity-100
|
||||
md:max-w-470px
|
||||
|
||||
:class="isSearchFocused ? 'opacity-100' : 'opacity-25'"
|
||||
>
|
||||
<div
|
||||
|
|
|
|||
|
|
@ -54,7 +54,7 @@ const selectedValue = useVModel(props, 'modelValue', emits)
|
|||
leave-to-class="opacity-0"
|
||||
>
|
||||
<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
|
||||
v-for="option in props.options"
|
||||
|
|
@ -64,7 +64,7 @@ const selectedValue = useVModel(props, 'modelValue', emits)
|
|||
:value="option.value"
|
||||
>
|
||||
<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']"
|
||||
>
|
||||
<span
|
||||
|
|
|
|||
|
|
@ -51,7 +51,19 @@ watch([scrollY, top, y], (newValues, oldValues) => {
|
|||
<div
|
||||
app-container
|
||||
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
|
||||
flex
|
||||
w-full
|
||||
|
|
@ -81,6 +93,7 @@ watch([scrollY, top, y], (newValues, oldValues) => {
|
|||
flex
|
||||
items-center
|
||||
gap-16px
|
||||
relative
|
||||
overflow-x-auto
|
||||
pb-274px
|
||||
mb--250px
|
||||
|
|
|
|||
|
|
@ -18,6 +18,12 @@ watch(y, (newY, oldY) => {
|
|||
w-full
|
||||
>
|
||||
<Navigation />
|
||||
<slot />
|
||||
<div
|
||||
max-w-1160px
|
||||
w-full
|
||||
mx-auto
|
||||
>
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -274,7 +274,7 @@ const transitionDone = ref(false)
|
|||
:model-value="selectedTab"
|
||||
label="Choose category"
|
||||
:options="tabs.map(t => ({ label: t.label, value: t.value }))"
|
||||
:border-opacity="30"
|
||||
:border-opacity="100"
|
||||
w-full
|
||||
lg:hidden
|
||||
block
|
||||
|
|
@ -299,13 +299,13 @@ const transitionDone = ref(false)
|
|||
<div
|
||||
border-t-2
|
||||
class="border-app-white/30"
|
||||
px-16px
|
||||
py-24px
|
||||
px-8px
|
||||
py-8px
|
||||
md:py-24px
|
||||
>
|
||||
<div
|
||||
app-container
|
||||
mb-170px
|
||||
lg="mb-55px"
|
||||
mb-55px
|
||||
>
|
||||
<ClientOnly>
|
||||
<Transition
|
||||
|
|
@ -333,7 +333,7 @@ const transitionDone = ref(false)
|
|||
w-full
|
||||
flex
|
||||
flex-col
|
||||
gap-24px
|
||||
gap-8px
|
||||
/>
|
||||
<Button
|
||||
v-if="selectedTab !== tabs[tabs.length - 1].value"
|
||||
|
|
@ -351,10 +351,10 @@ const transitionDone = ref(false)
|
|||
<div
|
||||
flex
|
||||
flex-col
|
||||
gap-16px
|
||||
gap-10px
|
||||
justify-center
|
||||
text-center
|
||||
fixed
|
||||
md:fixed
|
||||
bottom-0
|
||||
w-full
|
||||
bg-app-bg-dark_grey
|
||||
|
|
|
|||
|
|
@ -49,7 +49,10 @@ useSeoMeta({
|
|||
<ProjectTechnology :project="project" />
|
||||
<ProjectPrivacy :project="project" />
|
||||
<ProjectSecurity :project="project" />
|
||||
<ProjectHistory :project="project" />
|
||||
<ProjectHistory
|
||||
v-if="project.history"
|
||||
:project="project"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ import { collections } from './unocss.config.collections'
|
|||
export default defineConfig({
|
||||
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',
|
||||
},
|
||||
{
|
||||
|
|
@ -41,6 +41,12 @@ export default defineConfig({
|
|||
}),
|
||||
],
|
||||
theme: {
|
||||
extend: {
|
||||
screens: {
|
||||
'2xl': '1600px',
|
||||
},
|
||||
|
||||
},
|
||||
colors: {
|
||||
app: {
|
||||
white: '#fff',
|
||||
|
|
|
|||
Loading…
Reference in a new issue