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
Split 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>
<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">
<v-menu>
<template #activator="{ props }">
<div
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"
>
<MdiPlus />
</div>
<div class="prose-lg font-semibold">
{{ $t('title.newProj') }}
</div>
</template>
<v-list class="!py-0 flex flex-col bg-white rounded-lg shadow-md border-1 border-gray-300 mt-2 ml-2">
<div
class="grid grid-cols-12 cursor-pointer hover:bg-gray-200 flex items-center p-2"
@click="navigateTo('/projects/create')"
>
<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>
<div
class="grid grid-cols-12 cursor-pointer hover:bg-gray-200 flex items-center p-2"
@click="navigateTo('/projects/create-external')"
>
<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>
</v-list>
</v-menu>
</div>
<div class="group flex flex-col items-center gap-2">
<v-menu>
<template #activator="{ props }">
<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"
@click="props.onClick"
>
<MdiPlus />
</div>
<div class="prose-lg font-semibold">
{{ $t('title.newProj') }}
</div>
</template>
<v-list class="!py-0 flex flex-col bg-white rounded-lg shadow-md border-1 border-gray-300 mt-2 ml-2">
<div
class="grid grid-cols-12 cursor-pointer hover:bg-gray-200 flex items-center p-2"
@click="navigateTo('/projects/create')"
>
<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>
<div
class="grid grid-cols-12 cursor-pointer hover:bg-gray-200 flex items-center p-2"
@click="navigateTo('/projects/create-external')"
>
<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>
</v-list>
</v-menu>
</div>
<div v-for="(project, i) of projects" :key="project.id" class="group flex flex-col items-center gap-2">
<div
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)"
>
<div class="thumbnail" :style="{ backgroundColor: getColorByIndex(i) }" @click="openProject(project)">
{{ 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>
<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>
<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>
<style scoped>
.nc-project-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;
.thumbnail {
@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,
.nc-project-star-icon {
width: auto;
height: 1.5rem;
position: absolute;
opacity: 0;
transition: 0.3s opacity;
.menu-icon,
.star-icon {
@apply w-auto opacity-0 absolute h-[1.75rem] transition-opacity duration-300;
}
.nc-project-star-icon {
.star-icon {
@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;
}
.nc-project-thumbnail {
background-image: linear-gradient(#0002, #0002);
opacity: 0.5;
}
.nc-project-thumbnail:hover {
opacity: 1;
}
</style>

Write Preview
Loading…
Cancel
Save