refactor style, fix #77 #76

assets/editor.less

@@ -0,0 +1,61 @@
+
+.editor {
+  position: relative;
+  overflow-y: auto;
+  padding-top: 1.7em;
+  scrollbar-width: thin;
+
+  &.with-border {
+    border: 1px solid #ddd;
+    border-radius: 5px;
+  }
+
+  .content {
+    padding: 0px 5px 0px 5px;
+    flex: 1;
+    scrollbar-width: thin;
+    overflow-y: auto;
+  }
+
+  .menububble {
+    position: absolute;
+    display: flex;
+    overflow: hidden;
+    opacity: 0;
+    z-index: 1;
+    background: #dddddd;
+    transform: translateX(-50%);
+    border-radius: 3px;
+    padding: 0.07rem;
+    transition: opacity 0.2s, visibility 0.2s, left .2s, bottom .2s;
+    visibility: hidden;
+
+    &.is-active {
+      opacity: 1;
+      visibility: visible;
+    }
+    input {
+      padding: 0;
+      margin: 1px;
+      display: block;
+      border: 0;
+      color: #444;
+      font-size: .8em;
+      border-radius: 3px;
+      line-height: 100%;
+      transition: width .2s;
+      padding-left: 5px;
+      flex-grow: 1;
+    }
+
+    .fa-icon {
+      width: auto;
+      font-size: 10px;
+      height: 1.4em; /* or any other relative font sizes */
+      /* You would have to include the following two lines to make this work in Safari */
+      // max-width: 100%;
+      max-height: 100%;
+    }
+
+  }
+}

assets/event.less

@@ -0,0 +1,57 @@
+.event,
+.announcement {
+  width: 320px;
+  max-width: 450px;
+  flex-grow: 1;
+  margin: .2em;
+  background-color: #202020;
+  max-height: 400px;
+  overflow: hidden;
+
+  a:hover {
+    text-decoration: none;
+    .title {
+      border-bottom: 1px solid #888;
+      color: white;
+    }
+  }
+
+  .title {
+    margin-left: 1rem;
+    margin-top: 1rem;
+    margin-right: 1rem;
+    border-bottom: 1px solid #333;
+    transition: border-color .5s;
+    font-size: 1.2em;
+    max-height: 3em;
+    overflow: hidden;
+    color: #fea;
+  }
+
+  .card-footer {
+    max-height: 4.5em;
+    overflow: hidden;
+    padding: .25rem 0.5rem;
+    line-height: 1.8rem;
+    min-height: 2.2rem;
+  }
+
+  .card-body {
+    overflow: hidden;
+  }
+
+  .description {
+    color: #999;
+    font-size: 0.8em;
+    overflow: hidden;
+    max-height: 100%;
+  }
+
+  .el-image { width: 100% }
+  img {
+    width: 100%;
+    max-height: 250px;
+    object-fit: cover;
+    object-position: top;
+  }
+}

assets/style.less

@@ -30,10 +30,6 @@ html, body {
   padding: 0 !important;
 }
 
-p {
-  margin-bottom: 0.5rem;
-}
-
 #__nuxt, #__layout {
   min-height: 100vh;
   display: flex;
@@ -181,3 +177,7 @@ p {
     // border-radius: 0px;
   // }
 // }
+
+
+@import './event.less';
+@import './editor.less';

components/Announcement.vue

@@ -1,5 +1,5 @@
 <template lang="pug">
-  .card.announcement.event.mt-1.text-white(body-style='padding: 0px;')
+  .card.announcement.announcement.mt-1.text-white(body-style='padding: 0px;')
     nuxt-link(:to='`/announcement/${announcement.id}`')
       .title <i class='el-icon-info'/> {{announcement.title}}
 
@@ -17,7 +17,7 @@ export default {
   computed: {
     ...mapState(['announcements']),
     description () {
-      return this.announcement.announcement.slice(0, 500)
+      return this.announcement.announcement.replace(/(<br>)+/g, '<br>')
     }
   }
 }

components/Editor.vue

@@ -38,7 +38,7 @@
 </template>
 <script>
 import _ from 'lodash'
-import { Editor, EditorContent, EditorMenuBar, EditorMenuBubble } from 'tiptap'
+import { Editor, EditorContent, EditorMenuBar, EditorMenuBubble, Extension } from 'tiptap'
 import {
   Blockquote,
   BulletList,
@@ -101,7 +101,21 @@ export default {
         new Bold(),
         new Italic(),
         new Strike(),
-        new Underline()
+        new Underline(),
+        new class extends Extension {
+          keys () {
+            return {
+              Enter (state, dispatch, view) {
+                const { schema, doc, tr } = view.state
+
+                const hard_break = schema.nodes.hard_break
+                const transaction = tr.replaceSelectionWith(hard_break.create()).scrollIntoView()
+                view.dispatch(transaction)
+                return true
+              }
+            }
+          }
+        }()
       ]
     })
   },

components/Event.vue

@@ -1,24 +1,23 @@
 <template lang="pug">
-  .card.event.h-event.mt-1.text-white(body-style='padding: 0px;')
+  .card.event.h-event.mt-1.text-white
     nuxt-link(:to='`/event/${event.id}`')
       el-image(v-if='showImage && event.image_path'
         lazy :src='`/media/thumb/${event.image_path}`')
       .float-right
         i.text-danger.el-icon-refresh(v-if='event.parentId')
         .badge.text-info(v-if='settings.enable_resources && event.resources && event.resources.length') {{event.resources.length}}
+      //- title
       .p-name.p-summary.title {{event.title}}
 
     .card-body
+      div.d-flex.justify-content-between
         //-  when
-      div
-        i.el-icon-date
-        time.dt-start(:datetime='event.start_datetime|unixFormat("YYYY-MM-DD HH:mm")')  {{event|when}}
-
+        time.dt-start.mt-0(:datetime='event.start_datetime|unixFormat("YYYY-MM-DD HH:mm")')  <i class='el-icon-date'/> {{event|when}}
         //- place
         el-button.p-location.mt-1.bg-dark.text-warning.float-right(plain size='mini' round type='text' icon='el-icon-location-outline' @click='addPlace') {{event.place.name}}
 
       //- description
-      .description.p-description.mt-3(v-if='!event.image_path || !event.tags.length' v-html='description')
+      .p-description.description.mt-3(v-html='description')
 
     .card-footer(v-if='event.tags.length')
       el-button.ml-1.bg-dark(type='text' plain round size='mini' v-for='tag in event.tags' :key='tag' @click='addTag(tag)') {{tag}}
@@ -41,7 +40,7 @@ export default {
   computed: {
     ...mapState(['settings', 'filters']),
     description () {
-      return this.event.description.slice(0, 500)
+      return this.event.description.replace(/(<br>)+/g, '<br>')
     },
     show_footer () {
       return (this.event.tags.length || this.event.resources.length)
@@ -67,55 +66,3 @@ export default {
   }
 }
 </script>
-<style lang='less'>
-.event {
-  width: 320px;
-  max-width: 450px;
-  flex-grow: 1;
-  margin: .2em;
-  background-color: #202020;
-
-  a:hover {
-    text-decoration: none;
-    .title {
-      border-bottom: 1px solid #888;
-      color: white;
-    }
-  }
-
-  .title {
-    margin-left: 1rem;
-    margin-top: 1rem;
-    margin-right: 1rem;
-    border-bottom: 1px solid #333;
-    transition: border-color .5s;
-    font-size: 1.2em;
-    max-height: 3em;
-    overflow: hidden;
-    color: #fea;
-  }
-
-  .card-footer {
-    max-height: 4.5em;
-    overflow: hidden;
-    padding: .25rem 0.5rem;
-    line-height: 1.8rem;
-    min-height: 2.2rem;
-  }
-  .description {
-    color: #999;
-    font-size: 0.8em;
-    p {
-      margin: 0px;
-    }
-  }
-
-  .el-image { width: 100% }
-  img {
-    width: 100%;
-    max-height: 250px;
-    object-fit: cover;
-    object-position: top;
-  }
-}
-</style>

server/api/index.js

@@ -104,6 +104,7 @@ api.delete('/event/notification/:code', eventController.delNotification)
 
 api.get('/settings', settingsController.getAllRequest)
 api.post('/settings', isAdmin, settingsController.setRequest)
+api.get('/event/:event_id.:format?', cors, eventController.get)
 api.post('/settings/favicon', isAdmin, multer({ dest: path.resolve(config.upload_path, 'thumb/') }).single('favicon'), settingsController.setFavicon)
 
 // confirm event

server/helpers.js

@@ -40,7 +40,7 @@ domPurify.addHook('beforeSanitizeElements', node => {
 module.exports = {
   sanitizeHTML (html) {
     return domPurify.sanitize(html, {
-      ALLOWED_TAGS: ['p', 'h1', 'h2', 'h3', 'h4', 'h5',
+      ALLOWED_TAGS: ['p', 'h1', 'h2', 'h3', 'h4', 'h5', 'br',
         'h6', 'b', 'a', 'li', 'ul', 'ol', 'code', 'blockquote', 'u', 's', 'strong'],
       ALLOWED_ATTR: ['href']
     })