btwedutech/hoppscotch
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 6 Wiki Activity

chore: improve ui consistency on table layout

Browse Source
This commit is contained in:
liyasthomas
2022-05-24 18:48:45 +05:30
parent cfa89a6ded
commit 346ac8bde9
2 changed files with 20 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
packages/hoppscotch-app/components/profile/Shortcode.vue
View File

@@ -2,24 +2,27 @@
<div
class="table-row-groups lg:flex block my-6 lg:my-0 w-full border lg:border-0 divide-y lg:divide-y-0 lg:divide-x divide-dividerLight border-dividerLight"
>
<div class="table-column lg:w-1/5" :data-label="t('shortcodes.short_code')">
<div
class="table-column font-mono text-tiny"
:data-label="t('shortcodes.short_code')"
>
{{ shortcode.id }}
</div>
<div
class="table-column lg:w-1/5"
class="table-column"
:class="requestLabelColor"
:data-label="t('shortcodes.method')"
>
{{ parseShortcodeRequest.method }}
</div>
<div class="table-column lg:w-3/5" :data-label="t('shortcodes.url')">
<div class="table-column" :data-label="t('shortcodes.url')">
<div class="max-w-50 lg:max-w-90 truncate">
{{ parseShortcodeRequest.endpoint }}
</div>
</div>
<div
ref="timeStampRef"
class="table-column lg:w-1/5"
class="table-column"
:data-label="t('shortcodes.created_on')"
>
<span v-tippy="{ theme: 'tooltip' }" :title="timeStamp">
@@ -27,7 +30,7 @@
</span>
</div>
<div
class="flex items-center justify-center lg:w-1/5 px-3"
class="flex flex-1 items-center justify-center px-3"
:data-label="t('shortcodes.actions')"
>
<SmartAnchor
@@ -36,8 +39,7 @@
:to="`https://hopp.sh/r/${shortcode.id}`"
blank
svg="external-link"
color="blue"
class="px-3"
class="px-3 text-accent hover:text-accent"
/>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
@@ -124,7 +126,7 @@ const copyShortcode = (codeID: string) => {
<style lang="scss">
.table-column {
@apply flex items-center justify-between px-3 py-3;
@apply flex flex-1 items-center justify-between px-3 py-3;
}
.table-row-groups {

16
packages/hoppscotch-app/pages/profile.vue
View File

@@ -220,20 +220,24 @@
<div
class="bg-primaryLight hidden lg:flex rounded-t w-full"
>
<div class="flex w-full">
<div class="w-1/5 p-3 font-semibold">
<div
class="flex w-full overflow-y-scroll lg:divide-x divide-primaryLight"
>
<div class="flex flex-1 p-3 font-semibold">
{{ t("shortcodes.short_code") }}
</div>
<div class="w-1/5 p-3 font-semibold">
<div class="flex flex-1 p-3 font-semibold">
{{ t("shortcodes.method") }}
</div>
<div class="w-3/5 p-3 font-semibold">
<div class="flex flex-1 p-3 font-semibold">
{{ t("shortcodes.url") }}
</div>
<div class="w-1/5 p-3 font-semibold">
<div class="flex flex-1 p-3 font-semibold">
{{ t("shortcodes.created_on") }}
</div>
<div class="w-1/5 p-3 font-semibold text-center">
<div
class="flex flex-1 p-3 font-semibold justify-center"
>
{{ t("shortcodes.actions") }}
</div>
</div>