attempt (and fail) to put message div before the textobx
This commit is contained in:
parent
94d3af7b7e
commit
9d1adfe748
2 changed files with 34 additions and 5 deletions
30
app/app.html
30
app/app.html
|
@ -25,11 +25,28 @@
|
|||
.cursor {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.chat-bar {
|
||||
position: fixed !important;
|
||||
left: 0 !important;
|
||||
bottom: 0 !important;
|
||||
width: 98% !important;
|
||||
margin-left: 1% !important;
|
||||
}
|
||||
|
||||
.as-console-wrapper {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.posts-container {
|
||||
overflow-y: auto;
|
||||
height: calc(90vh - 100px);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app">
|
||||
<div v-if="showApp">
|
||||
<div id="appContainer" v-if="showApp">
|
||||
<md-dialog id="create-category-dialog" :md-active.sync="dialog.show.createCategory">
|
||||
<md-dialog-title>Create category</md-dialog-title>
|
||||
|
||||
|
@ -96,7 +113,7 @@
|
|||
<md-button @click="refresh()" v-if="!selection.category.isChatContext">Refresh</md-button>
|
||||
</md-toolbar>
|
||||
|
||||
<div id="posts-container" v-if="selection.category.browsing">
|
||||
<div id="posts-container" class="posts-container" v-if="selection.category.browsing">
|
||||
<md-card v-for="post in selection.posts" v-bind:key="post._id" v-if="!selection.category.isChatContext">
|
||||
<md-card-header>
|
||||
<div class="md-title" v-html="post.title"></div>
|
||||
|
@ -115,13 +132,13 @@
|
|||
<a class="md-dense cursor md-title" v-on:click="viewProfile(post.author._id)"><span>{{ post.author.username }}</span></a>
|
||||
</md-card-header>
|
||||
|
||||
<md-card-content v-html="post.content"></md-card-content>
|
||||
<md-card-content>{{ post.content }}</md-card-content>
|
||||
</md-card>
|
||||
<br>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<md-speed-dial class="md-fixed md-bottom-right" md-direction="top" md-elevation="5" style="z-index: 4000;">
|
||||
<md-speed-dial class="md-fixed md-bottom-right" md-direction="top" md-elevation="5" style="z-index: 4000;" v-show="!selection.category.isChatContext">
|
||||
<md-speed-dial-target>
|
||||
<md-icon class="md-morph-initial">add</md-icon>
|
||||
<md-icon class="md-morph-final">edit</md-icon>
|
||||
|
@ -139,6 +156,11 @@
|
|||
</md-button>
|
||||
</md-speed-dial-content>
|
||||
</md-speed-dial>
|
||||
|
||||
<md-field md-inline class="chat-bar" v-show="selection.category.isChatContext">
|
||||
<label>Send message</label>
|
||||
<md-input v-model="message.typed" v-on:keyup.enter="sendCurrentMessage()"></md-input>
|
||||
</md-field>
|
||||
</div>
|
||||
<md-snackbar md-position="center" :md-duration="snackbarNotificationDuration" :md-active.sync="showSnackbarNotification" md-persistent>
|
||||
<span>{{ snackbarNotification }}</span>
|
||||
|
|
|
@ -171,6 +171,9 @@ const app = new Vue({
|
|||
gateway: new GatewayConnection(),
|
||||
messages: {
|
||||
'X': [ { username: 'NONEXISTENT_TEST_ACCOUNT', content: 'TEST MSG' } ]
|
||||
},
|
||||
message: {
|
||||
typed: ''
|
||||
}
|
||||
},
|
||||
mounted: async function() {
|
||||
|
@ -234,6 +237,10 @@ const app = new Vue({
|
|||
this.selection.category.title = 'Chat';
|
||||
this.selection.category._id = categoryId;
|
||||
},
|
||||
sendCurrentMessage: async function() {
|
||||
this.gateway.sendMessage(this.selection.category._id, this.message.typed);
|
||||
this.message.typed = '';
|
||||
},
|
||||
|
||||
// Category and post browsing
|
||||
browseCategories: async function() {
|
||||
|
|
Reference in a new issue