From fc54ae526fd565d74bf7a15cb1bb46ecac5905e5 Mon Sep 17 00:00:00 2001
From: Justineo <justice360@gmail.com>
Date: Thu, 28 Oct 2021 15:30:35 +0800
Subject: [PATCH] feat: improve edit link on mobile devices

---
 components/OneEditLink.vue | 23 +++++++++++++++++++----
 plugins/l10n.js            |  6 ++++--
 2 files changed, 23 insertions(+), 6 deletions(-)

diff --git a/components/OneEditLink.vue b/components/OneEditLink.vue
index 18f9e3a..9383795 100644
--- a/components/OneEditLink.vue
+++ b/components/OneEditLink.vue
@@ -13,7 +13,8 @@
   rel="noopener"
 >
   <slot :label="t('editOnGitHub')">
-    {{ t("editOnGitHub") }}
+    <span class="full">{{ t('editOnGitHub') }}</span>
+    <span class="short">{{ t('edit') }}</span>
     <veui-icon
       class="icon"
       name="external-link"
@@ -52,9 +53,14 @@ export default {
 
 <style lang="stylus" scoped>
 .one-edit-link
+  display inline-flex
+  align-items center
   text-decoration none
   transition background 0.2s, color 0.2s, border-color 0.2s
 
+  .icon
+    margin-left 4px
+
   &-default
     display inline-flex
     align-items center
@@ -75,9 +81,6 @@ export default {
       color #000
       border-color #d3d9e6
 
-    .icon
-      margin-left 4px
-
   &-quiet
     color #282c33
 
@@ -87,4 +90,16 @@ export default {
 
     &:active
       color #000
+
+    &.full
+      display inline
+    &.short
+      display none
+
+@media (max-width 480px)
+  .one-edit-link-quiet
+    .full
+      display none
+    .short
+      display inline
 </style>
diff --git a/plugins/l10n.js b/plugins/l10n.js
index 54a1cb1..dfd1110 100644
--- a/plugins/l10n.js
+++ b/plugins/l10n.js
@@ -49,7 +49,8 @@ i18n.register(
 i18n.register(
   'zh-Hans',
   {
-    editOnGitHub: '在 GitHub 上编辑此页'
+    editOnGitHub: '在 GitHub 上编辑此页',
+    edit: '编辑'
   },
   {
     ns: 'oneeditlink'
@@ -59,7 +60,8 @@ i18n.register(
 i18n.register(
   'en-US',
   {
-    editOnGitHub: 'Edit this page on GitHub'
+    editOnGitHub: 'Edit this page on GitHub',
+    edit: 'Edit'
   },
   {
     ns: 'oneeditlink'