github
/
nocodb
mirror of https://github.com/nocodb/nocodb
1
0
Fork 0
Code Issues Releases Wiki Activity
Browse Source

feat(gui-v2): update grid styles 

Signed-off-by: Braks <78412429+bcakmakoglu@users.noreply.github.com>
pull/2716/head
Braks 2 years ago committed by Pranav C
parent
e3f1938721
commit
120050072f
1 changed files with 41 additions and 59 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 100
      packages/nc-gui-v2/pages/projects/index/index.vue

100
packages/nc-gui-v2/pages/projects/index/index.vue
Unescape View File

@ -33,53 +33,47 @@ const formatTitle = (title: string) =>
<template> <template>
<div class="grid grid-cols-2 md:grid-cols-4 3xl:grid-cols-6 gap-6 md:gap-12"> <div class="grid grid-cols-2 md:grid-cols-4 3xl:grid-cols-6 gap-6 md:gap-12">
<div class="col-span-2 md:col-span-1"> <div class="group flex flex-col items-center gap-2">
<div class="group flex flex-col items-center gap-2"> <v-menu>
<v-menu> <template #activator="{ props }">
<template #activator="{ props }"> <div
<div class="thumbnail !bg-gradient-to-br from-primary to-gray-500 !opacity-25 hover:(!opacity-100 shadow-lg to-primary/50) bg-gray-400"
class="cursor-pointer w-full md:w-1/2 min-w-[150px] shadow-md nc-project-thumbnail opacity-50 hover:(opacity-100 shadow-lg) bg-gray-400 uppercase flex items-center justify-center transition-color ease duration-300" @click="props.onClick"
@click="props.onClick" >
> <MdiPlus />
<MdiPlus /> </div>
</div> <div class="prose-lg font-semibold">
<div class="prose-lg font-semibold"> {{ $t('title.newProj') }}
{{ $t('title.newProj') }} </div>
</div> </template>
</template> <v-list class="!py-0 flex flex-col bg-white rounded-lg shadow-md border-1 border-gray-300 mt-2 ml-2">
<v-list class="!py-0 flex flex-col bg-white rounded-lg shadow-md border-1 border-gray-300 mt-2 ml-2"> <div
<div class="grid grid-cols-12 cursor-pointer hover:bg-gray-200 flex items-center p-2"
class="grid grid-cols-12 cursor-pointer hover:bg-gray-200 flex items-center p-2" @click="navigateTo('/projects/create')"
@click="navigateTo('/projects/create')" >
> <MdiPlus class="col-span-2 mr-1 mt-[1px] text-primary text-lg" />
<MdiPlus class="col-span-2 mr-1 mt-[1px] text-primary text-lg" /> <div class="col-span-10 text-sm xl:text-md">{{ $t('activity.createProject') }}</div>
<div class="col-span-10 text-sm xl:text-md">{{ $t('activity.createProject') }}</div> </div>
</div> <div
<div class="grid grid-cols-12 cursor-pointer hover:bg-gray-200 flex items-center p-2"
class="grid grid-cols-12 cursor-pointer hover:bg-gray-200 flex items-center p-2" @click="navigateTo('/projects/create-external')"
@click="navigateTo('/projects/create-external')" >
> <MdiDatabaseOutline class="col-span-2 mr-1 mt-[1px] text-green-500 text-lg" />
<MdiDatabaseOutline class="col-span-2 mr-1 mt-[1px] text-green-500 text-lg" /> <div class="col-span-10 text-sm xl:text-md" v-html="$t('activity.createProjectExtended.extDB')" />
<div class="col-span-10 text-sm xl:text-md" v-html="$t('activity.createProjectExtended.extDB')" /> </div>
</div> </v-list>
</v-list> </v-menu>
</v-menu>
</div>
</div> </div>
<div v-for="(project, i) of projects" :key="project.id" class="group flex flex-col items-center gap-2"> <div v-for="(project, i) of projects" :key="project.id" class="group flex flex-col items-center gap-2">
<div <div class="thumbnail" :style="{ backgroundColor: getColorByIndex(i) }" @click="openProject(project)">
class="nc-project-thumbnail w-full md:w-1/2 min-w-[150px] shadow-md cursor-pointer uppercase flex items-center justify-center transition-color ease duration-300 hover:shadow-lg"
:style="{ backgroundColor: getColorByIndex(i) }"
@click="openProject(project)"
>
{{ formatTitle(project.title) }} {{ formatTitle(project.title) }}
<MdiStarOutline class="nc-project-star-icon group-hover:opacity-100" @click.stop /> <MdiStarOutline class="star-icon group-hover:opacity-100" @click.stop />
<v-menu> <v-menu>
<template #activator="{ props }"> <template #activator="{ props }">
<MdiMenuDown class="nc-project-option-menu-icon group-hover:opacity-100" @click.stop="props.onClick" /> <MdiMenuDown class="menu-icon group-hover:opacity-100" @click.stop="props.onClick" />
</template> </template>
<v-list class="!py-0 flex flex-col bg-white rounded-lg shadow-md border-1 border-gray-300"> <v-list class="!py-0 flex flex-col bg-white rounded-lg shadow-md border-1 border-gray-300">
@ -99,33 +93,21 @@ const formatTitle = (title: string) =>
</template> </template>
<style scoped> <style scoped>
.nc-project-thumbnail { .thumbnail {
@apply font-bold text-white text-[75px] h-[150px] w-full md:w-1/2 min-w-[150px] shadow-md cursor-pointer uppercase flex items-center justify-center transition-color ease duration-300 hover:shadow-lg; @apply relative rounded-md opacity-75 font-bold text-white text-[75px] h-[150px] w-full max-w-[150px] md:w-1/2 min-w-[150px] shadow-md cursor-pointer uppercase flex items-center justify-center transition-color ease-in duration-300 hover:(shadow-lg opacity-100);
background-image: linear-gradient(#0002, #0002);
} }
.nc-project-option-menu-icon, .menu-icon,
.nc-project-star-icon { .star-icon {
width: auto; @apply w-auto opacity-0 absolute h-[1.75rem] transition-opacity duration-300;
height: 1.5rem;
position: absolute;
opacity: 0;
transition: 0.3s opacity;
} }
.nc-project-star-icon { .star-icon {
@apply top-1 right-1 transform hover:(scale-120 text-yellow-300/75) transition-all duration-100 ease; @apply top-1 right-1 transform hover:(scale-120 text-yellow-300/75) transition-all duration-100 ease;
} }
.nc-project-option-menu-icon { .menu-icon {
@apply bottom-1 right-1 transform hover:(scale-150 text-gray-200) transition-all duration-100 ease; @apply bottom-1 right-1 transform hover:(scale-150 text-gray-200) transition-all duration-100 ease;
} }
.nc-project-thumbnail {
background-image: linear-gradient(#0002, #0002);
opacity: 0.5;
}
.nc-project-thumbnail:hover {
opacity: 1;
}
</style> </style>

Write Preview
Loading…
Cancel
Save