1nicerOli
/
9follow
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
Browse Source

Add deleting; Change Style; Add random avatars;

master
Nero Ignis 4 years ago
parent
c6675c0262
commit
80a06a8e34
3 changed files with 69 additions and 13 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 24
      css/app.css
  2. 24
      index.html
  3. 34
      js/app.js

24
css/app.css
Unescape View File

@ -3,12 +3,12 @@
src: url("../fonts/BebasNeue-Regular.ttf"); 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; font-family: BebasNeue, sans-serif;
} }
#app { #app {
margin-top: 2em; margin-top: 1.5em;
} }
#follow-button { #follow-button {
@ -21,8 +21,28 @@ h1, h2, h3, h4, h5, h6, button:not(.btn-close) {
color: white; color: white;
} }
header {
border-bottom: 1px solid grey;
border-radius: 15px;
margin-bottom: 1em;
}
footer { footer {
position: fixed; position: fixed;
bottom: 2em; bottom: 2em;
right: 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;
}

24
index.html
Unescape View File

@ -11,7 +11,7 @@
</head> </head>
<body> <body>
<div class="container" id="app"> <div class="container" id="app">
<div class="row"> <header class="row">
<div class="col-6"> <div class="col-6">
<h2>9FOLLOW</h2> <h2>9FOLLOW</h2>
</div> </div>
@ -21,24 +21,30 @@
<i class="fas fa-user-plus"></i> <i class="fas fa-user-plus"></i>
</button> </button>
</div> </div>
</header>
<div class="col-md-12"> <main class="row">
<hr color="white"/>
</div>
<div class="col-md-12"> <div class="col-md-12">
<div class="alert alert-secondary" v-if="followedAccounts.length === 0"> <div class="alert alert-secondary" v-if="followedAccounts.length === 0">
Pretty lonely here.<br/> Pretty lonely here.<br/>
Add some accounts to your list. Add some accounts to your list.
</div> </div>
<ul class="list-group" v-else> <ul class="list-group" v-else>
<li class="list-group-item" v-for="account in followedAccounts"> <li class="list-group-item" v-for="account in followedAccounts" v-if="!account.deleted">
<a href="javascript:" @click="visitAccount(account)">{{ account.name }}</a><br/> <small class="muted float-right timestamp">
<small class="muted">{{ getDiffForView(account.lastVisited) }}</small> {{ 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> </li>
</ul> </ul>
</div> </div>
</div> </main>
<div class="modal fade" id="addModal" tabindex="-1" aria-labelledby="addModalLabel" aria-hidden="true"> <div class="modal fade" id="addModal" tabindex="-1" aria-labelledby="addModalLabel" aria-hidden="true">
<div class="modal-dialog"> <div class="modal-dialog">

34
js/app.js
Unescape View File

@ -20,8 +20,10 @@ let app = new Vue({
lastVisited: null lastVisited: null
}); });
this.showToast(
this.showToast("You're now following " + this.getDisplayName(), 'darkgreen'); "You're now following " + this.getDisplayName(),
'darkgreen'
);
this.userNameToAdd = ''; this.userNameToAdd = '';
this.nameForList = ''; this.nameForList = '';
@ -61,6 +63,34 @@ let app = new Vue({
this.followedAccounts = this.followedAccounts.sort(function (a, b) { this.followedAccounts = this.followedAccounts.sort(function (a, b) {
return new Date(b.lastVisited) - new Date(a.lastVisited) 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() { mounted() {

Write Preview
Loading…
Cancel
Save