refactor(ui): better rendering with Inter font
This commit is contained in:
liyasthomas
@@ -13,7 +13,7 @@
|
||||
blank
|
||||
class="
|
||||
flex
|
||||
py-3
|
||||
py-2
|
||||
px-4
|
||||
transition
|
||||
relative
|
||||
@@ -23,7 +23,7 @@
|
||||
"
|
||||
>
|
||||
<i class="mr-4 material-icons">science</i>
|
||||
<span class="text-secondaryDark text-xs">
|
||||
<span class="text-secondaryDark">
|
||||
<span class="md:hidden"> Beta Layout </span>
|
||||
<span class="hidden md:inline">
|
||||
You're currently viewing an experimental beta layout
|
||||
@@ -34,7 +34,7 @@
|
||||
border-l border-divider
|
||||
flex
|
||||
font-semibold
|
||||
text-accent text-xs
|
||||
text-accent
|
||||
ml-4
|
||||
pl-4
|
||||
transition
|
||||
@@ -51,7 +51,7 @@
|
||||
to="https://hoppscotch.io"
|
||||
class="flex transition items-center justify-center group"
|
||||
>
|
||||
<span class="text-secondaryDark text-xs">
|
||||
<span class="text-secondaryDark">
|
||||
Switch back to the Hoppscotch website
|
||||
</span>
|
||||
</SmartLink>
|
||||
|
||||
@@ -1,6 +1,8 @@
|
||||
<template>
|
||||
<header class="flex flex-1 py-2 px-4 items-center justify-between">
|
||||
<div class="font-bold space-x-2 flex-shrink-0 inline-flex items-center">
|
||||
<div
|
||||
class="font-extrabold space-x-2 flex-shrink-0 inline-flex items-center"
|
||||
>
|
||||
<AppLogo class="h-6 mr-4" /> Hoppscotch
|
||||
</div>
|
||||
<div class="space-x-2 flex-shrink-0 inline-flex items-center">
|
||||
|
||||
@@ -20,30 +20,38 @@
|
||||
<ButtonSecondary icon="close" @click.native="close()" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-4">
|
||||
<div
|
||||
class="
|
||||
divide-y divide-dividerLight
|
||||
flex flex-col flex-1
|
||||
overflow-auto
|
||||
hide-scrollbar
|
||||
"
|
||||
>
|
||||
<div
|
||||
v-for="(shortcut, index) in shortcuts"
|
||||
:key="`shortcut-${index}`"
|
||||
class="flex items-center"
|
||||
v-for="(map, mapIndex) in mappings"
|
||||
:key="`map-${mapIndex}`"
|
||||
class="space-y-4 p-4"
|
||||
>
|
||||
<kbd
|
||||
v-for="(key, keyIndex) in shortcut.keys"
|
||||
:key="`shortcut-${index}-key-${keyIndex}`"
|
||||
class="
|
||||
border border-divider
|
||||
rounded
|
||||
font-bold
|
||||
m-1
|
||||
text-xs
|
||||
py-1
|
||||
px-2
|
||||
"
|
||||
<h5 class="font-bold text-secondaryDark text-base">
|
||||
{{ map.section }}
|
||||
</h5>
|
||||
<div
|
||||
v-for="(shortcut, shortcutIndex) in map.shortcuts"
|
||||
:key="`map-${mapIndex}-shortcut-${shortcutIndex}`"
|
||||
class="flex items-center"
|
||||
>
|
||||
{{ key }}
|
||||
</kbd>
|
||||
<span class="flex text-xs ml-4">
|
||||
{{ shortcut.label }}
|
||||
</span>
|
||||
<span class="flex flex-1 text-secondaryLight mr-4">
|
||||
{{ shortcut.label }}
|
||||
</span>
|
||||
<span
|
||||
v-for="(key, keyIndex) in shortcut.keys"
|
||||
:key="`map-${mapIndex}-shortcut-${shortcutIndex}-key-${keyIndex}`"
|
||||
class="bg-dividerLight rounded ml-1 py-1 px-2 inline-flex"
|
||||
>
|
||||
{{ key }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -59,50 +67,60 @@ export default {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
shortcuts: [
|
||||
mappings: [
|
||||
{
|
||||
keys: [this.getSpecialKey(), "G"],
|
||||
label: this.$t("send_request"),
|
||||
section: "General",
|
||||
shortcuts: [
|
||||
{
|
||||
keys: [this.getSpecialKey(), "G"],
|
||||
label: this.$t("send_request"),
|
||||
},
|
||||
{
|
||||
keys: [this.getSpecialKey(), "S"],
|
||||
label: this.$t("save_to_collections"),
|
||||
},
|
||||
{
|
||||
keys: [this.getSpecialKey(), "K"],
|
||||
label: this.$t("copy_request_link"),
|
||||
},
|
||||
{
|
||||
keys: [this.getSpecialKey(), "I"],
|
||||
label: this.$t("reset_request"),
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
keys: [this.getSpecialKey(), "S"],
|
||||
label: this.$t("save_to_collections"),
|
||||
},
|
||||
{
|
||||
keys: [this.getSpecialKey(), "K"],
|
||||
label: this.$t("copy_request_link"),
|
||||
},
|
||||
{
|
||||
keys: [this.getSpecialKey(), "I"],
|
||||
label: this.$t("reset_request"),
|
||||
},
|
||||
{
|
||||
keys: ["Alt", "▲"],
|
||||
label: this.$t("select_next_method"),
|
||||
},
|
||||
{
|
||||
keys: ["Alt", "▼"],
|
||||
label: this.$t("select_previous_method"),
|
||||
},
|
||||
{
|
||||
keys: ["Alt", "G"],
|
||||
label: this.$t("select_get_method"),
|
||||
},
|
||||
{
|
||||
keys: ["Alt", "H"],
|
||||
label: this.$t("select_head_method"),
|
||||
},
|
||||
{
|
||||
keys: ["Alt", "P"],
|
||||
label: this.$t("select_post_method"),
|
||||
},
|
||||
{
|
||||
keys: ["Alt", "U"],
|
||||
label: this.$t("select_put_method"),
|
||||
},
|
||||
{
|
||||
keys: ["Alt", "X"],
|
||||
label: this.$t("select_delete_method"),
|
||||
section: "Request",
|
||||
shortcuts: [
|
||||
{
|
||||
keys: ["Alt", "↑"],
|
||||
label: this.$t("select_next_method"),
|
||||
},
|
||||
{
|
||||
keys: ["Alt", "↓"],
|
||||
label: this.$t("select_previous_method"),
|
||||
},
|
||||
{
|
||||
keys: ["Alt", "G"],
|
||||
label: this.$t("select_get_method"),
|
||||
},
|
||||
{
|
||||
keys: ["Alt", "H"],
|
||||
label: this.$t("select_head_method"),
|
||||
},
|
||||
{
|
||||
keys: ["Alt", "P"],
|
||||
label: this.$t("select_post_method"),
|
||||
},
|
||||
{
|
||||
keys: ["Alt", "U"],
|
||||
label: this.$t("select_put_method"),
|
||||
},
|
||||
{
|
||||
keys: ["Alt", "X"],
|
||||
label: this.$t("select_delete_method"),
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
}
|
||||
|
||||
@@ -48,7 +48,6 @@ export default {
|
||||
|
||||
span {
|
||||
@apply mt-2;
|
||||
@apply text-xs;
|
||||
@apply font-semibold;
|
||||
}
|
||||
|
||||
|
||||
@@ -9,12 +9,12 @@
|
||||
leave-to-class="opacity-0"
|
||||
>
|
||||
<div
|
||||
v-show="show"
|
||||
v-if="show"
|
||||
class="inset-0 transition-opacity z-20 fixed"
|
||||
@keydown.esc="close()"
|
||||
>
|
||||
<div
|
||||
class="bg-black opacity-25 inset-0 absolute"
|
||||
class="bg-primaryDark opacity-75 inset-0 absolute"
|
||||
tabindex="0"
|
||||
@click="close()"
|
||||
></div>
|
||||
@@ -23,6 +23,7 @@
|
||||
<aside
|
||||
class="
|
||||
bg-primary
|
||||
flex flex-col
|
||||
h-full
|
||||
max-w-full
|
||||
shadow-xl
|
||||
|
||||
Reference in New Issue
Block a user