Ordered comments like alpha, move HcCommentForm, mobile responsive

- in the first instance, we will be importing posts/comments from the alpha, so to maintain consistency, we've ordered them alike. In the future, we could support user choice of order.
- Gives more space for HcCommentForm, user can see comments added to list, helps with mobile responsiveness

Co-authored-by: Tirokk <wolle.huss@pjannto.com>
Co-authored-by: Mike Aono <aonomike@gmail.com>

backend/src/resolvers/comments.js

@@ -10,7 +10,7 @@ export default {
       const session = context.driver.session()
       const transactionRes = await session.run(`
           MATCH (comment:Comment)-[:COMMENTS]->(post:Post {id: $postId})
-          RETURN comment {.id, .contentExcerpt, .createdAt}`, {
+          RETURN comment {.id, .contentExcerpt, .createdAt} ORDER BY comment.createdAt ASC`, {
         postId
       })
 

webapp/components/CommentForm/index.vue

@@ -1,45 +1,43 @@
 <template>
-  <ds-flex-item width="80%">
+  <ds-form
-    <ds-form
+    v-model="form"
-      v-model="form"
+    @submit="handleSubmit"
-      @submit="handleSubmit"
+  >
-    >
+    <template slot-scope="{ errors }">
-      <template slot-scope="{ errors }">
+      <ds-card>
-        <ds-card>
+        <no-ssr>
-          <no-ssr>
+          <hc-editor
-            <hc-editor
+            ref="editor"
-              ref="editor"
+            :users="users"
-              :users="users"
+            :value="form.content"
-              :value="form.content"
+            @input="updateEditorContent"
-              @input="updateEditorContent"
+          />
-            />
+        </no-ssr>
-          </no-ssr>
+        <ds-space />
-          <ds-space />
+        <ds-flex :gutter="{ base: 'small', md: 'small', sm: 'x-large', xs: 'x-large' }" >
-          <ds-flex>
+          <ds-flex-item :width="{ base: '0%', md: '50%', sm: '0%',  xs: '0%' }" />
-            <ds-flex-item width="50%" />
+          <ds-flex-item :width="{ base: '40%', md: '20%', sm: '30%', xs: '30%' }" >
-            <ds-flex-item width="20%">
+            <ds-button
-              <ds-button
+              :disabled="disabled"
-                :disabled="disabled"
+              ghost
-                ghost
+              @click.prevent="clear"
-                @click.prevent="clear"
+            >
-              >
+              {{ $t('actions.cancel') }}
-                {{ $t('actions.cancel') }}
+            </ds-button>
-              </ds-button>
+          </ds-flex-item>
-            </ds-flex-item>
+          <ds-flex-item :width="{ base: '40%', md: '20%', sm: '40%', xs: '40%' }" >
-            <ds-flex-item width="20%">
+            <ds-button
-              <ds-button
+              type="submit"
-                type="submit"
+              :disabled="disabled || errors"
-                :disabled="disabled || errors"
+              primary
-                primary
+            >
-              >
+              {{ $t('post.comment.submit') }}
-                {{ $t('post.comment.submit') }}
+            </ds-button>
-              </ds-button>
+          </ds-flex-item>
-            </ds-flex-item>
+        </ds-flex>
-          </ds-flex>
+      </ds-card>
-        </ds-card>
+    </template>
-      </template>
+  </ds-form>
-    </ds-form>
-  </ds-flex-item>
 </template>
 
 <script>

webapp/graphql/CommentQuery.js

@@ -2,8 +2,8 @@ import gql from 'graphql-tag'
 
 export default app => {
   return gql(`
-    query CommentByPost($postId: ID!) {
+  query CommentByPost($postId: ID!) {
-      CommentByPost(postId: $postId, orderBy: createdAt_desc) {
+      CommentByPost(postId: $postId) {
         id
         contentExcerpt
         createdAt

webapp/locales/de.json

@@ -116,7 +116,7 @@
       "name": "Aktiv werden"
     },
     "comment": {
-      "submit": "Kommentar Senden",
+      "submit": "Kommentiere",
       "submitted": "Kommentar Gesendet"
     }
   },

webapp/locales/en.json

@@ -116,7 +116,7 @@
       "name": "Take action"
     },
     "comment": {
-      "submit": "Submit Comment",
+      "submit": "Comment",
       "submitted": "Comment Submitted"
     }
   },

webapp/pages/post/_id/_slug/index.vue

@@ -96,23 +96,18 @@
       <ds-space margin="small" />
       <!-- Comments -->
       <ds-section slot="footer">
-        <ds-flex>
+        <h3 style="margin-top: -10px;">
-          <ds-flex-item width="20%">
+          <span>
-            <h3 style="margin-top: 0;">
+            <ds-icon name="comments" />
-              <span>
+            <ds-tag
-                <ds-icon name="comments" />
+              v-if="comments"
-                <ds-tag
+              style="margin-top: -4px; margin-left: -12px; position: absolute;"
-                  v-if="comments"
+              color="primary"
-                  style="margin-top: -4px; margin-left: -12px; position: absolute;"
+              size="small"
-                  color="primary"
+              round
-                  size="small"
+            >{{ comments.length }}</ds-tag>&nbsp; Comments
-                  round
+          </span>
-                >{{ comments.length }}</ds-tag>&nbsp; Comments
+        </h3>
-              </span>
-            </h3>
-          </ds-flex-item>
-          <hc-comment-form :post="post" @addComment="addComment" />
-        </ds-flex>
         <ds-space margin-bottom="large" />
         <div
           v-if="comments && comments.length"
@@ -129,6 +124,8 @@
           v-else
           icon="messages"
         />
+        <ds-space margin-bottom="large" />
+        <hc-comment-form :post="post" @addComment="addComment" />
       </ds-section>
     </ds-card>
   </transition>