Add deleting; Change Style; Add random avatars;

4 years ago · 80a06a8e34
3 changed files with 69 additions and 13 deletions
--- a/css/app.css
+++ b/css/app.css
@ -3,12 +3,12 @@
				@@ -3,12 +3,12 @@
    src: url("../fonts/BebasNeue-Regular.ttf");
 }

-h1, h2, h3, h4, h5, h6, button:not(.btn-close)  {
+h1, h2, h3, h4, h5, h6, button:not(.btn-close) {
    font-family: BebasNeue, sans-serif;
 }

 #app {
-    margin-top: 2em;
+    margin-top: 1.5em;
 }

 #follow-button {
@ -21,8 +21,28 @@ h1, h2, h3, h4, h5, h6, button:not(.btn-close)  {
				@@ -21,8 +21,28 @@ h1, h2, h3, h4, h5, h6, button:not(.btn-close)  {
    color: white;
 }

+header {
+    border-bottom: 1px solid grey;
+    border-radius: 15px;
+    margin-bottom: 1em;
+}
+
 footer {
    position: fixed;
    bottom: 2em;
    right: 2em;
+}
+
+.avatar {
+    border-radius: 25px;
+    max-height: 2em;
+    margin-right: 0.2em;
+}
+
+.timestamp {
+    margin-top: 0.1em;
+}
+
+.delete-button {
+    margin-left: 0.5em;
 }
--- a/index.html
+++ b/index.html
@ -11,7 +11,7 @@
				@@ -11,7 +11,7 @@
 </head>
 <body>
 <div class="container" id="app">
-    <div class="row">
+    <header class="row">
        <div class="col-6">
            <h2>9FOLLOW</h2>
        </div>
@ -21,24 +21,30 @@
				@@ -21,24 +21,30 @@
                <i class="fas fa-user-plus"></i>
            </button>
        </div>
+    </header>

-        <div class="col-md-12">
-            <hr color="white"/>
-        </div>
-
+    <main class="row">
        <div class="col-md-12">
            <div class="alert alert-secondary" v-if="followedAccounts.length === 0">
                Pretty lonely here.<br/>
                Add some accounts to your list.
            </div>
            <ul class="list-group" v-else>
-                <li class="list-group-item" v-for="account in followedAccounts">
-                    <a href="javascript:" @click="visitAccount(account)">{{ account.name }}</a><br/>
-                    <small class="muted">{{ getDiffForView(account.lastVisited) }}</small>
+                <li class="list-group-item" v-for="account in followedAccounts" v-if="!account.deleted">
+                    <small class="muted float-right timestamp">
+                        {{ getDiffForView(account.lastVisited) }}
+                        <button class="btn btn-sm btn-danger delete-button" @click="unfollowAccount(account)">
+                            <i class="fas fa-user-minus"></i>
+                        </button>
+                    </small>
+                    <a href="javascript:" @click="visitAccount(account)" class="account-name">
+                        <img :src="getRandomAvatarFrom9GAG()" class="avatar">
+                        {{ account.name }}
+                    </a>
                </li>
            </ul>
        </div>
-    </div>
+    </main>

    <div class="modal fade" id="addModal" tabindex="-1" aria-labelledby="addModalLabel" aria-hidden="true">
        <div class="modal-dialog">
--- a/js/app.js
+++ b/js/app.js
@ -20,8 +20,10 @@ let app = new Vue({
				@@ -20,8 +20,10 @@ let app = new Vue({
                lastVisited: null
            });

-
-            this.showToast("You're now following " + this.getDisplayName(), 'darkgreen');
+            this.showToast(
+                "You're now following " + this.getDisplayName(),
+                'darkgreen'
+            );

            this.userNameToAdd = '';
            this.nameForList = '';
@ -61,6 +63,34 @@ let app = new Vue({
				@@ -61,6 +63,34 @@ let app = new Vue({
            this.followedAccounts = this.followedAccounts.sort(function (a, b) {
                return new Date(b.lastVisited) - new Date(a.lastVisited)
            });
+        },
+        getRandomAvatarFrom9GAG() {
+            let random = Math.floor(Math.random() * Math.floor(182));
+            return 'https://accounts-cdn.9gag.com/avatar/default_' + random + '_100_v0.jpg';
+        },
+        unfollowAccount(account) {
+            let app = this;
+
+            iziToast.show({
+                theme: 'dark',
+                color: '#303030',
+                message: 'Do you really want to unfollow ' + account.name + '?',
+                position: 'center',
+                buttons: [
+                    ['<button>Yes</button>', function (instance, toast) {
+                        account.deleted = true;
+                        app.updateStorage();
+                        instance.hide({
+                            transitionOut: 'fadeOutUp',
+                        }, toast, 'confirmUnfollow');
+                    }, true], // true to focus
+                    ['<button>Cancel</button>', function (instance, toast) {
+                        instance.hide({
+                            transitionOut: 'fadeOutUp',
+                        }, toast, 'buttonName');
+                    }]
+                ]
+            });
        }
    },
    mounted() {