More features (details)

- Add credits for littlelink - Toast when adding new url - Show raw urls - Organize in a "grid" - Loading state - Show add button only if self - Empty state
hellomouse · Sep 15, 2023 · f754d62 · f754d62
1 parent 7c0743b
commit f754d62
Show file tree

Hide file tree

Showing 5 changed files with 96 additions and 20 deletions.
diff --git a/TODO.txt b/TODO.txt
@@ -37,8 +37,8 @@ better light mode
 ----
 link tree:
 - per user automatic, setup with your name + pfp
-- download all as txt
-- toast for adding a new url
+
+
 
 api:
 - remove links

diff --git a/assets/css/link/brands-extended.css b/assets/css/link/brands-extended.css
@@ -297,10 +297,6 @@
 .button.button-pixiv > img,
 .button.button-keybase > img {
     filter: invert(1);
-    padding: 0px 4px 2.5px 0px;
-    vertical-align: middle;
-    width: 25px;
-    height: 20px;
 }
 
 .button.button-bilibili:hover,

diff --git a/assets/css/link/brands.css b/assets/css/link/brands.css
@@ -36,7 +36,9 @@
   text-align: center;
   vertical-align: middle;
   font-size: 14px;
-  width: 100%;
+  width: 300px;
+  max-width: 100%;
+  box-sizing: border-box;
   line-height: 20px;
   padding: 14px 12px 12px 12px;
   letter-spacing: 0.1px;
@@ -65,9 +67,9 @@
 –––––––––––––––––––––––––––––––––––––––––––––––––– */
 
 .icon {
-  padding: 0px 8px 3.5px 0px;
+  padding: 0px 4px 2.5px 0px;
   vertical-align: middle;
-  width: 20px;
+  width: 25px;
   height: 20px;
 }
 

diff --git a/components/link/Link.vue b/components/link/Link.vue
@@ -5,7 +5,7 @@
 -->
 
 <template>
-    <div>
+    <div class="link">
         <!-- Amazon -->
         <a
             v-if="matchDomain(['amazon'], true)"
@@ -798,5 +798,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-
+.link {
+    max-width: 100%;
+    box-sizing: border-box;
+}
 </style>
diff --git a/pages/link/[...slug].vue b/pages/link/[...slug].vue
@@ -27,32 +27,81 @@ useSeoMeta({
                 [description] {{ $route.params.slug }} {{ $route.path }}
             </p>
 
-            <div style="max-width: 300px; margin: 0 auto">
+            <div v-if="loading" class="link-container">
+                <v-progress-circular
+                    style="margin-top: 180px"
+                    :width="4" :size="50" color="primary" indeterminate
+                />
+            </div>
+
+            <div v-if="!loading" class="link-container">
                 <v-text-field
+                    v-if="isSelf"
                     v-model="urlInput" label="Add URL" class="mb-4"
                     variant="solo-filled" rounded="0" density="compact"
                     maxlength="4096" @keydown.enter="addUrl"
                 />
 
+                <div v-if="loading">lol loading</div>
+
+                <h2
+                    v-if="links.length === 0" class="text-disabled"
+                    style="padding-top: 150px;"
+                >This user has no links yet</h2>
+
                 <link-link
                     v-for="link in links"
                     :key="link.id"
 
-                    class="mb-2"
+                    class="mb-2 mx-sm-1 d-inline-block"
 
                     :link-id="link.id"
                     :url="link.url"
                     :show-delete="false"
                 />
+
+                <!-- Dummy for spacing -->
+                <div v-if="links.length % 2 === 1" class="d-inline-block mx-sm-1 mb-2" style="width: 300px"></div>
             </div>
 
+            <small class="mt-8 d-block">
+                <span
+                    class="text-teal-lighten-3"
+                    style="cursor: pointer"
+                    @click="copyModal = true"
+                >Click here to get a plaintext copyable version</span> /
+                Credit for the majority of the button icons and styles goes to <a href="https://github.com/sethcottle/littlelink/tree/main">LittleLink</a> (MIT License)
+            </small>
+
             <v-snackbar
                 v-model="showErrorToast" color="error" rounded="0" theme="dark"
                 transition="scroll-y-reverse-transition"
             >
                 {{ toastErrorMsg }}
             </v-snackbar>
+            <v-snackbar
+                v-model="showSuccessToast" color="success"
+                rounded="0" theme="dark" timeout="2000"
+                transition="scroll-y-reverse-transition"
+            >
+                {{ toastSuccessMsg }}
+            </v-snackbar>
         </v-container>
+
+        <v-dialog
+            v-model="copyModal"
+            width="400"
+        >
+            <v-card>
+                <v-card-text>
+                    <code><pre class="copy-text-area">{{ copyText }}</pre></code>
+                </v-card-text>
+                <v-card-actions>
+                    <v-spacer />
+                    <v-btn color="primary" @click="copyModal = false">Close</v-btn>
+                </v-card-actions>
+            </v-card>
+        </v-dialog>
     </NuxtLayout>
 </template>
 
@@ -66,22 +115,32 @@ export default {
         return {
             urlInput: '',
             links: [],
+            copyModal: false,
+            loading: false,
 
             showErrorToast: false,
-            toastErrorMsg: ''
+            toastErrorMsg: '',
+            showSuccessToast: false,
+            toastSuccessMsg: ''
         };
     },
     computed: {
-        user() { return useAuthStore(this.$pinia).user; }
+        user() { return useAuthStore(this.$pinia).user; },
+        copyText() {
+            return this.links.map((link, i) => `${i + 1}: ${link.url}`).join('\n');
+        },
+        isSelf() {
+            return (this.$route.params.slug.at(-1) || '') === (this.user ? this.user.id : 'not_slug');
+        }
     },
     watch: {
         async '$route.params.slug'() {
             await this.onLoad();
         }
     },
     // Get boards on page first load
-    async created() {
-        await this.onLoad();
+    created() {
+        this.onLoad();
     },
     methods: {
         async onLoad() {
@@ -100,16 +159,17 @@ export default {
         },
         // Update links in list
         async fetchLinks() {
+            this.loading = true;
             try {
                 let links = await this.$fetchApi('/api/link', 'GET', {
                     user_id: this.$route.params.slug.at(-1)
                 });
                 links.links.sort((a, b) => a.url.localeCompare(b.url));
                 this.links = links.links;
             } catch (e) {
-                console.error(e);
                 [this.showErrorToast, this.toastErrorMsg] = [true, 'Failed to get links: ' + this.$apiErrorToString(e)];
             }
+            this.loading = false;
         },
         // Add new link
         async addUrl() {
@@ -123,8 +183,8 @@ export default {
                     this.links.sort((a, b) => a.url.localeCompare(b.url));
                 }
                 this.urlInput = '';
+                [this.showSuccessToast, this.toastSuccessMsg] = [true, 'Link Added!'];
             } catch (e) {
-                console.error(e);
                 [this.showErrorToast, this.toastErrorMsg] = [true, 'Failed to add link: ' + this.$apiErrorToString(e)];
             }
         }
@@ -133,6 +193,21 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "~/assets/variables.scss";
+.link-container {
+    width: 700px;
+    max-width: 100%;
+    min-height: 400px;
+    margin: 0 auto;
+}
 
+.copy-text-area {
+    overflow-x: auto;
+    max-height: 400px;
+    overflow-y: auto;
+
+    user-select: all;
+    font-size: 12px;
+    padding: 8px;
+    background: rgba(var(--v-theme-on-surface), var(--v-selected-opacity));
+}
 </style>