refactor(ui): better rendering with Inter font

This commit is contained in:
liyasthomas
2021-07-26 01:33:32 +05:30
parent 397cab9032
commit 8debb65d89
86 changed files with 434 additions and 485 deletions

View File

@@ -6,7 +6,7 @@
</template>
<template #body>
<div class="flex flex-col px-2">
<label for="selectLabelAdd" class="font-semibold text-xs px-4 pb-4">
<label for="selectLabelAdd" class="font-semibold px-4 pb-4">
{{ $t("label") }}
</label>
<input

View File

@@ -8,10 +8,7 @@
</template>
<template #body>
<div class="flex flex-col px-2">
<label
for="selectLabelAddFolder"
class="font-semibold text-xs px-4 pb-4"
>
<label for="selectLabelAddFolder" class="font-semibold px-4 pb-4">
{{ $t("label") }}
</label>
<input

View File

@@ -22,12 +22,11 @@
border-b border-dividerLight
flex
font-medium
text-xs
w-full
py-3
py-2
px-4
focus:outline-none
select
appearance-none
"
@change="updateSelectedTeam(myTeams[$event.target.value])"
>

View File

@@ -8,7 +8,7 @@
</template>
<template #body>
<div class="flex flex-col px-2">
<label for="selectLabelEdit" class="font-semibold text-xs px-4 pb-4">{{
<label for="selectLabelEdit" class="font-semibold px-4 pb-4">{{
$t("label")
}}</label>
<input

View File

@@ -8,11 +8,9 @@
</template>
<template #body>
<div class="flex flex-col px-2">
<label
for="selectLabelEditFolder"
class="font-semibold text-xs px-4 pb-4"
>{{ $t("label") }}</label
>
<label for="selectLabelEditFolder" class="font-semibold px-4 pb-4">{{
$t("label")
}}</label>
<input
id="selectLabelEditFolder"
v-model="name"

View File

@@ -8,7 +8,7 @@
</template>
<template #body>
<div class="flex flex-col px-2">
<label for="selectLabelEditReq" class="font-semibold text-xs px-4 pb-4">
<label for="selectLabelEditReq" class="font-semibold px-4 pb-4">
{{ $t("label") }}
</label>
<input

View File

@@ -6,7 +6,7 @@
</template>
<template #body>
<div class="flex flex-col px-2">
<label for="selectLabelSaveReq" class="font-semibold text-xs px-4 pb-4">
<label for="selectLabelSaveReq" class="font-semibold px-4 pb-4">
{{ $t("request_name") }}
</label>
<input
@@ -15,9 +15,7 @@
class="input"
type="text"
/>
<label class="font-semibold text-xs px-4 pt-4 pb-4">
Select Location
</label>
<label class="font-semibold px-4 pt-4 pb-4"> Select Location </label>
<CollectionsGraphql
v-if="mode === 'graphql'"
:doc="false"

View File

@@ -6,7 +6,7 @@
</template>
<template #body>
<div class="flex flex-col px-2">
<label for="selectLabelGqlAdd" class="font-semibold text-xs px-4 pb-4">
<label for="selectLabelGqlAdd" class="font-semibold px-4 pb-4">
{{ $t("label") }}
</label>
<input

View File

@@ -8,10 +8,7 @@
</template>
<template #body>
<div class="flex flex-col px-2">
<label
for="selectLabelGqlAddFolder"
class="font-semibold text-xs px-4 pb-4"
>
<label for="selectLabelGqlAddFolder" class="font-semibold px-4 pb-4">
{{ $t("label") }}
</label>
<input

View File

@@ -10,15 +10,7 @@
@dragend="dragging = false"
>
<span
class="
cursor-pointer
flex
text-xs
w-10
justify-center
items-center
truncate
"
class="cursor-pointer flex w-10 justify-center items-center truncate"
@click="toggleShowChildren()"
>
<i class="material-icons" :class="{ 'text-green-400': isSelected }">
@@ -31,9 +23,8 @@
flex
font-semibold
flex-1
text-xs
min-w-0
py-3
py-2
pr-2
transition
group-hover:text-secondaryDark
@@ -97,7 +88,7 @@
/>
</tippy>
</div>
<div v-show="showChildren || isFiltered">
<div v-if="showChildren || isFiltered">
<CollectionsGraphqlFolder
v-for="(folder, index) in collection.folders"
:key="`folder-${index}`"
@@ -146,7 +137,7 @@
"
>
<i class="opacity-75 pb-2 material-icons">folder_open</i>
<span class="text-xs text-center">
<span class="text-center">
{{ $t("collection_empty") }}
</span>
</div>

View File

@@ -8,7 +8,7 @@
</template>
<template #body>
<div class="flex flex-col px-2">
<label for="selectLabelGqlEdit" class="font-semibold text-xs px-4 pb-4">
<label for="selectLabelGqlEdit" class="font-semibold px-4 pb-4">
{{ $t("label") }}
</label>
<input

View File

@@ -8,10 +8,7 @@
</template>
<template #body>
<div class="flex flex-col px-2">
<label
for="selectLabelGqlEditFolder"
class="font-semibold text-xs px-4 pb-4"
>
<label for="selectLabelGqlEditFolder" class="font-semibold px-4 pb-4">
{{ $t("label") }}
</label>
<input

View File

@@ -8,10 +8,7 @@
</template>
<template #body>
<div class="flex flex-col px-2">
<label
for="selectLabelGqlEditReq"
class="font-semibold text-xs px-4 pb-4"
>
<label for="selectLabelGqlEditReq" class="font-semibold px-4 pb-4">
{{ $t("label") }}
</label>
<input

View File

@@ -10,15 +10,7 @@
@dragend="dragging = false"
>
<span
class="
cursor-pointer
flex
text-xs
w-10
justify-center
items-center
truncate
"
class="cursor-pointer flex w-10 justify-center items-center truncate"
@click="toggleShowChildren()"
>
<i class="material-icons" :class="{ 'text-green-400': isSelected }">
@@ -31,9 +23,8 @@
flex
font-semibold
flex-1
text-xs
min-w-0
py-3
py-2
pr-2
transition
group-hover:text-secondaryDark
@@ -93,7 +84,7 @@
/>
</tippy>
</div>
<div v-show="showChildren || isFiltered">
<div v-if="showChildren || isFiltered">
<CollectionsGraphqlFolder
v-for="(subFolder, subFolderIndex) in folder.folders"
:key="`subFolder-${subFolderIndex}`"
@@ -145,7 +136,7 @@
"
>
<i class="opacity-75 pb-2 material-icons">folder_open</i>
<span class="text-xs text-center">
<span class="text-center">
{{ $t("folder_empty") }}
</span>
</div>

View File

@@ -14,7 +14,6 @@
flex
font-mono font-bold
mx-2
text-xs
w-12
justify-center
items-center
@@ -32,9 +31,8 @@
flex
font-semibold
flex-1
text-xs
min-w-0
py-3
py-2
pr-2
transition
group-hover:text-secondaryDark

View File

@@ -4,7 +4,7 @@
:class="{ 'rounded border border-divider': savingMode }"
>
<div
class="flex flex-col top-10 z-10 sticky"
class="flex flex-col top-8 z-10 sticky"
:class="{ 'bg-primary': !savingMode }"
>
<input
@@ -18,8 +18,7 @@
flex
font-semibold font-mono
flex-1
text-xs
py-3
py-2
px-4
focus:outline-none
"
@@ -63,7 +62,7 @@
class="flex flex-col text-secondaryLight p-4 items-center justify-center"
>
<i class="opacity-75 pb-2 material-icons">create_new_folder</i>
<span class="text-xs text-center">
<span class="text-center">
{{ $t("create_new_collection") }}
</span>
</div>
@@ -72,7 +71,7 @@
class="flex flex-col text-secondaryLight p-4 items-center justify-center"
>
<i class="opacity-75 pb-2 material-icons">manage_search</i>
<span class="text-xs text-center">
<span class="text-center">
{{ $t("nothing_found") }} "{{ filterText }}"
</span>
</div>

View File

@@ -5,7 +5,7 @@
>
<div
class="bg-primary rounded-t flex flex-col top-0 z-10 sticky"
:class="{ '!top-10': !saveRequest && !doc }"
:class="{ '!top-8': !saveRequest && !doc }"
>
<input
v-if="!saveRequest"
@@ -18,8 +18,7 @@
flex
font-semibold font-mono
flex-1
text-xs
py-3
py-2
px-4
focus:outline-none
"
@@ -98,7 +97,7 @@
class="flex flex-col text-secondaryLight p-4 items-center justify-center"
>
<i class="opacity-75 pb-2 material-icons">create_new_folder</i>
<span class="text-xs text-center">
<span class="text-center">
{{ $t("create_new_collection") }}
</span>
</div>
@@ -107,7 +106,7 @@
class="flex flex-col text-secondaryLight p-4 items-center justify-center"
>
<i class="opacity-75 pb-2 material-icons">manage_search</i>
<span class="text-xs text-center">
<span class="text-center">
{{ $t("nothing_found") }} "{{ filterText }}"
</span>
</div>

View File

@@ -10,15 +10,7 @@
@dragend="dragging = false"
>
<span
class="
cursor-pointer
flex
text-xs
w-10
justify-center
items-center
truncate
"
class="cursor-pointer flex w-10 justify-center items-center truncate"
@click="toggleShowChildren()"
>
<i class="material-icons" :class="{ 'text-green-400': isSelected }">
@@ -31,9 +23,8 @@
flex
font-semibold
flex-1
text-xs
min-w-0
py-3
py-2
pr-2
transition
group-hover:text-secondaryDark
@@ -114,7 +105,7 @@
/>
</tippy>
</div>
<div v-show="showChildren || isFiltered">
<div v-if="showChildren || isFiltered">
<CollectionsMyFolder
v-for="(folder, index) in collection.folders"
:key="`folder-${index}`"
@@ -169,7 +160,7 @@
"
>
<i class="opacity-75 pb-2 material-icons">folder_open</i>
<span class="text-xs text-center">
<span class="text-center">
{{ $t("collection_empty") }}
</span>
</div>

View File

@@ -10,15 +10,7 @@
@dragend="dragging = false"
>
<span
class="
cursor-pointer
flex
text-xs
w-10
justify-center
items-center
truncate
"
class="cursor-pointer flex w-10 justify-center items-center truncate"
@click="toggleShowChildren()"
>
<i class="material-icons" :class="{ 'text-green-400': isSelected }">
@@ -31,9 +23,8 @@
flex
font-semibold
flex-1
text-xs
min-w-0
py-3
py-2
pr-2
transition
group-hover:text-secondaryDark
@@ -98,7 +89,7 @@
/>
</tippy>
</div>
<div v-show="showChildren || isFiltered">
<div v-if="showChildren || isFiltered">
<CollectionsMyFolder
v-for="(subFolder, subFolderIndex) in folder.folders"
:key="`subFolder-${subFolderIndex}`"
@@ -154,7 +145,7 @@
"
>
<i class="opacity-75 pb-2 material-icons">folder_open</i>
<span class="text-xs text-center">
<span class="text-center">
{{ $t("folder_empty") }}
</span>
</div>

View File

@@ -14,7 +14,6 @@
flex
font-mono font-bold
mx-2
text-xs
w-12
justify-center
items-center
@@ -40,9 +39,8 @@
flex
font-semibold
flex-1
text-xs
min-w-0
py-3
py-2
pr-2
transition
group-hover:text-secondaryDark

View File

@@ -2,15 +2,7 @@
<div class="flex flex-col">
<div class="flex items-center group">
<span
class="
cursor-pointer
flex
text-xs
w-10
justify-center
items-center
truncate
"
class="cursor-pointer flex w-10 justify-center items-center truncate"
@click="toggleShowChildren()"
>
<i class="material-icons" :class="{ 'text-green-400': isSelected }">
@@ -23,9 +15,8 @@
flex
font-semibold
flex-1
text-xs
min-w-0
py-3
py-2
pr-2
transition
group-hover:text-secondaryDark
@@ -111,7 +102,7 @@
/>
</tippy>
</div>
<div v-show="showChildren || isFiltered">
<div v-if="showChildren || isFiltered">
<CollectionsTeamsFolder
v-for="(folder, index) in collection.children"
:key="`folder-${folder}`"
@@ -166,7 +157,7 @@
"
>
<i class="opacity-75 pb-2 material-icons">folder_open</i>
<span class="text-xs text-center">
<span class="text-center">
{{ $t("collection_empty") }}
</span>
</div>

View File

@@ -2,15 +2,7 @@
<div class="flex flex-col">
<div class="flex items-center group">
<span
class="
cursor-pointer
flex
text-xs
w-10
justify-center
items-center
truncate
"
class="cursor-pointer flex w-10 justify-center items-center truncate"
@click="toggleShowChildren()"
>
<i class="material-icons" :class="{ 'text-green-400': isSelected }">
@@ -23,9 +15,8 @@
flex
font-semibold
flex-1
text-xs
min-w-0
py-3
py-2
pr-2
transition
group-hover:text-secondaryDark
@@ -95,7 +86,7 @@
/>
</tippy>
</div>
<div v-show="showChildren || isFiltered">
<div v-if="showChildren || isFiltered">
<CollectionsTeamsFolder
v-for="(subFolder, subFolderIndex) in folder.children"
:key="`subFolder-${subFolderIndex}`"
@@ -149,7 +140,7 @@
"
>
<i class="opacity-75 pb-2 material-icons">folder_open</i>
<span class="text-xs text-center">
<span class="text-center">
{{ $t("folder_empty") }}
</span>
</div>

View File

@@ -7,7 +7,6 @@
flex
font-mono font-bold
mx-2
text-xs
w-12
justify-center
items-center
@@ -33,9 +32,8 @@
flex
font-semibold
flex-1
text-xs
min-w-0
py-3
py-2
pr-2
transition
group-hover:text-secondaryDark