pure design

assets/event.less

@@ -1,11 +1,9 @@
-.event,
-.announcement {
+.event {
   width: 320px;
   max-width: 450px;
   flex-grow: 1;
   margin: .2em;
   background-color: #202020;
-  max-height: 400px;
   overflow: hidden;
 
   a:hover {
@@ -25,7 +23,8 @@
     font-size: 1.2em;
     max-height: 3em;
     overflow: hidden;
-    color: #fea;
+    color: white;
+    font-weight: bold;
   }
 
   .card-footer {

assets/style.less

@@ -139,6 +139,38 @@ html, body {
   max-width: 90%;
 }
 
+//TODO: refactoring
+.el-button.is-plain,
+.el-button.is-plain:focus,
+.el-button.is-plain {
+  border-color: #ff450075;
+  background-color: transparent;
+  color: orangered;
+
+  &:hover {
+    border-color: #ff450075;
+    background-color: transparent;    
+    color: orange;
+  }
+}
+
+// TODO: this should be a link
+
+.event .p-location {
+  transition: color .2s;
+  &:hover {
+    cursor: pointer;
+    color: orangered !important;
+  }
+}
+
+.el-button--text {
+  color: orangered !important;
+  &:hover {
+    color: orange !important;
+  }
+}
+
 .el-button--success.is-plain {
   color: #2c8600;
   border-color: #9de27b;

components/Announcement.vue

@@ -1,10 +1,10 @@
 <template lang="pug">
-  .card.announcement.announcement.mt-1.text-white(body-style='padding: 0px;')
+  .announcement.announcement.text-white(body-style='padding: 0px;')
     nuxt-link(:to='`/announcement/${announcement.id}`')
       .title <i class='el-icon-info'/> {{announcement.title}}
 
-    .card-body
-      .description(v-html='description')
+    //- .card-body
+    //-   .description(v-html='description')
 
 </template>
 <script>
@@ -24,9 +24,22 @@ export default {
 </script>
 <style lang='less'>
 .announcement {
-  .title i {
-    color: orangered;
+  padding: 2%;
+  background-color: #511;
+  margin: 1rem 0;
+  border-radius: 5px;
+  a:hover {
+    text-decoration: none;
   }
-  box-shadow: inset 0px 0px 10px 0px orangered;
+  .title {
+    font-size: 1.2em;
+    color: white;
+    transition: color .2s;
+    &:hover {
+      color: #fbd6b5;
+    }
+  }
+  border: 2px solid #ff4500ba;
+  // box-shadow: inset 0px 0px 10px 0px orangered;
 }
 </style>

components/Event.vue

@@ -10,17 +10,17 @@
       .p-name.p-summary.title {{event.title}}
 
     .card-body
-      div.d-flex.justify-content-between
-        //-  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}}
+      //- div.d-flex.justify-content-between
+      //-  when
+      time.d-block.dt-start.mt-0(:datetime='event.start_datetime|unixFormat("YYYY-MM-DD HH:mm")')  <i class='el-icon-date'/> {{event|when}}
+      //- place
+      .p-location.mt-1.text-warning(plain size='mini' round type='text' @click='addPlace') <i class='el-icon-location-outline'/> {{event.place.name}}
 
       //- description
-      .p-description.description.mt-3(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}}
+      el-button.ml-1(type='text' plain round size='mini' v-for='tag in event.tags' :key='tag' @click='addTag(tag)') {{tag}}
 </template>
 <script>
 import { mapState, mapActions } from 'vuex'

components/Home.vue

@@ -1,15 +1,16 @@
 <template lang="pug">
   section#home
+    Announcement(v-for='announcement in announcements' :key='`a_${announcement.id}`' :announcement='announcement')
+    #calbar.row.mt-2.mb-2
+      .col-xl-7.col-lg-7.col-sm-6.col-xs-12
 
-    #calbar.row.mt-1
-      .col-xl-7.col-lg-7.col-sm-6.col-xs-12.p-0
         client-only
           Calendar
       .col
         Search(past-filter recurrent-filter)
 
     #events
-      Announcement(v-for='announcement in announcements' :key='`a_${announcement.id}`' :announcement='announcement')
+      //- Announcement(v-for='announcement in announcements' :key='`a_${announcement.id}`' :announcement='announcement')
       Event(v-for='event in events' :key='event.id' :event='event')
 
 </template>
@@ -52,7 +53,7 @@ export default {
 <style lang='less'>
 #calbar {
   max-width: 1000px;
-  margin: 0 auto;
+  // margin: 0 auto;
 }
 #events {
   max-width: 1600px;

layouts/default.vue

@@ -32,6 +32,9 @@ export default {
 }
 </script>
 <style lang='less'>
+.el-backtop {
+  color: orangered;
+}
 #footer {
   a {
     font-size: 1.1em;

pages/announcement/_id.vue

@@ -39,6 +39,7 @@ export default {
 .announcement-page {
 
   .el-header {
+    height: auto !important;
     padding-top: 1em;
     border-bottom: 1px solid lightgray;
   }

pages/event/_id.vue

@@ -24,7 +24,7 @@
               el-icon(name='loading')
 
           pre.p-description(v-html='event.description')
-          el-button.p-category.ml-1.text-primary(plain round size='mini' v-for='tag in event.tags' :key='tag') {{tag}}
+          el-button.p-category.ml-1(type='text' plain round size='mini' v-for='tag in event.tags' :key='tag') {{tag}}
 
         //- info & actions
         el-col.menu(:sm='6' :xs='24')
@@ -310,7 +310,7 @@ export default {
   }
 
   .el-header {
-    height: 4em;
+    height: auto !important;
     position: sticky;
     padding-top: .4em;
     top: 0px;
@@ -362,7 +362,7 @@ export default {
 
   .title {
     display: table-cell;
-    padding-right: 3em;
+    padding-right: 70px;
     height: 2.1em;
     font-size: 1.6rem;
     color: #404246;
@@ -450,7 +450,7 @@ export default {
     }
 
     .title {
-      font-size: 1.1em;
+      // font-size: 1.1em;
       line-height: 1.4em;
       color: black;
     }