emojy: update web UI a bit

- cards on list
- add text name to stats
This commit is contained in:
Chris Sexton 2022-07-22 10:04:56 -04:00
parent cf19a2bc15
commit 22658949a8
4 changed files with 15 additions and 31 deletions

View File

@ -11,7 +11,6 @@
<!-- Load Vue followed by BootstrapVue -->
<script src="//unpkg.com/vue@^2/dist/vue.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@^2/dist/bootstrap-vue.min.js"></script>
<script src="https://unpkg.com/vue-router@^2"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<meta charset="UTF-8">
<title>Memes</title>
@ -32,7 +31,7 @@
<b-navbar-nav>
<b-nav-item href="/emojy/stats">Stats</b-nav-item>
<b-nav-item active href="/emojy/list">List</b-nav-item>
<b-nav-item href="/emojy/upload">Upload</b-nav-item>
<b-nav-item href="/emojy/new">Upload</b-nav-item>
</b-navbar-nav>
</b-navbar>
@ -44,22 +43,19 @@
{{ err }}
</div>
<ul>
<li v-for="(path, name) in fileList" key="name">
{{name}}:
<img :src="path" :alt="name" class="img-thumbnail" style="max-width: 64px; max-height: 64px"/>
</li>
</ul>
<div class="row row-cols-5">
<div class="card text-center" v-for="(path, name) in fileList" key="name">
<img :src="path" class="card-img-top mx-auto d-block" :alt="name" style="max-width: 100px">
<div class="card-body">
<h5 class="card-title">{{name}}</h5>
</div>
</div>
</div>
</div>
<script>
var router = new VueRouter({
mode: 'history',
routes: []
});
var app = new Vue({
el: '#app',
router,
data: function () {
return {
err: '',

View File

@ -11,7 +11,6 @@
<!-- Load Vue followed by BootstrapVue -->
<script src="//unpkg.com/vue@^2/dist/vue.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@^2/dist/bootstrap-vue.min.js"></script>
<script src="https://unpkg.com/vue-router@^2"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<meta charset="UTF-8">
<title>Memes</title>
@ -32,7 +31,7 @@
<b-navbar-nav>
<b-nav-item active href="/emojy/stats">Stats</b-nav-item>
<b-nav-item href="/emojy/list">List</b-nav-item>
<b-nav-item href="/emojy/upload">Upload</b-nav-item>
<b-nav-item href="/emojy/new">Upload</b-nav-item>
</b-navbar-nav>
</b-navbar>
@ -56,7 +55,7 @@
-
</span>
<img v-if="emojy.url" :src="emojy.url" :alt="emojy.name" class="img-thumbnail"
style="max-width: 64px; max-height: 64px"/>
style="max-width: 64px; max-height: 64px"/> {{emojy.name}}
<span v-else>{{emojy.emojy}}</span>
</li>
</ul>
@ -65,13 +64,8 @@
</div>
<script>
var router = new VueRouter({
mode: 'history',
routes: []
});
var app = new Vue({
el: '#app',
router,
data: function () {
return {
err: '',

View File

@ -11,8 +11,7 @@
<!-- Load Vue followed by BootstrapVue -->
<script src="//unpkg.com/vue@^2/dist/vue.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@^2/dist/bootstrap-vue.min.js"></script>
<script src="https://unpkg.com/vue-router@^2"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="//unpkg.com/axios/dist/axios.min.js"></script>
<meta charset="UTF-8">
<title>Memes</title>
</head>
@ -32,7 +31,7 @@
<b-navbar-nav>
<b-nav-item href="/emojy/stats">Stats</b-nav-item>
<b-nav-item href="/emojy/list">List</b-nav-item>
<b-nav-item active href="/emojy/upload">Upload</b-nav-item>
<b-nav-item active href="/emojy/new">Upload</b-nav-item>
</b-navbar-nav>
</b-navbar>
@ -56,13 +55,8 @@
</div>
<script>
var router = new VueRouter({
mode: 'history',
routes: []
});
var app = new Vue({
el: '#app',
router,
data: function () {
return {
err: '',
@ -118,7 +112,7 @@
})
.then(() => {
console.log('SUCCESS!!');
this.view = 'list';
window.location.href = '/emojy/list';
})
.catch(e => {
console.log('FAILURE!!' + e);

View File

@ -27,7 +27,7 @@ func (p *EmojyPlugin) registerWeb() {
r.HandleFunc("/file/{name}", p.handleEmojy)
r.HandleFunc("/stats", p.handlePage("stats.html"))
r.HandleFunc("/list", p.handlePage("list.html"))
r.HandleFunc("/upload", p.handlePage("upload.html"))
r.HandleFunc("/new", p.handlePage("upload.html"))
r.HandleFunc("/", p.handleIndex)
p.b.RegisterWebName(r, "/emojy", "Emojys")
}