feat: [Request] QTimeline always one-sided quasarframework#2324

Author: rstoenescu

dev/components/components/timeline.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="layout-padding" style="max-width: 800px">
-    <q-timeline color="secondary" style="padding: 0 24px;">
+    <q-timeline responsive color="secondary" style="padding: 0 24px;">
       <q-timeline-entry heading>November, 2017</q-timeline-entry>
 
       <q-timeline-entry
@@ -79,7 +79,7 @@
       </q-timeline-entry>
     </q-timeline>
 
-    <q-timeline color="red" dark class="bg-black" style="padding: 24px; margin-top: 50px;">
+    <q-timeline responsive color="red" dark class="bg-black" style="padding: 24px; margin-top: 50px;">
       <q-timeline-entry
         title="Event Title"
         subtitle="February 22, 1986"

src/components/timeline/QTimeline.js

@@ -10,12 +10,16 @@ export default {
       type: String,
       default: 'primary'
     },
+    responsive: Boolean,
     dark: Boolean
   },
   render (h) {
     return h('ul', {
       staticClass: 'q-timeline',
-      'class': { 'q-timeline-dark': this.dark }
+      'class': {
+        'q-timeline-dark': this.dark,
+        'q-timeline-responsive': this.responsive
+      }
     }, this.$slots.default)
   }
 }

src/components/timeline/timeline.mat.styl

@@ -97,62 +97,64 @@
   margin 0
 
 @media (min-width $breakpoint-md-min) and (max-width $breakpoint-md-max)
-  .q-timeline-heading
-    display table-row
-    font-size 200%
-    > div
+  .q-timeline-responsive
+    .q-timeline-heading
+      display table-row
+      font-size 200%
+      > div
+        display table-cell
+    .q-timeline-heading-title
+      margin-left -50px
+    .q-timeline
+      display table
+    .q-timeline-entry
+      display table-row
+      padding 0
+    .q-timeline-subtitle, .q-timeline-dot, .q-timeline-content
       display table-cell
-  .q-timeline-heading-title
-    margin-left -50px
-  .q-timeline
-    display table
-  .q-timeline-entry
-    display table-row
-    padding 0
-  .q-timeline-subtitle, .q-timeline-dot, .q-timeline-content
-    display table-cell
-    vertical-align top
-  .q-timeline-subtitle
-    text-align right
-    width 35%
-  .q-timeline-dot
-    position relative
-  .q-timeline-content
-    padding-left 30px
-  .q-timeline-entry-with-icon .q-timeline-content
-    padding-top 8px
-  .q-timeline-subtitle
-    padding-right 30px
+      vertical-align top
+    .q-timeline-subtitle
+      text-align right
+      width 35%
+    .q-timeline-dot
+      position relative
+    .q-timeline-content
+      padding-left 30px
+    .q-timeline-entry-with-icon .q-timeline-content
+      padding-top 8px
+    .q-timeline-subtitle
+      padding-right 30px
 
 @media (min-width $breakpoint-lg-min)
-  .q-timeline-heading-title
-    text-align center
-    margin-left 0
-  .q-timeline-entry, .q-timeline-subtitle, .q-timeline-dot, .q-timeline-content
-    display block
-    margin 0
-    padding 0
-  .q-timeline-dot
-    position absolute
-    left 50%
-    margin-left -7.15px
-  .q-timeline-entry-with-icon .q-timeline-dot
-    left 50%
-    margin-left -15px
-  .q-timeline-subtitle, .q-timeline-content
-    width 50%
-  .q-timeline-entry-left .q-timeline-content,
-  .q-timeline-entry-right .q-timeline-subtitle
-    float left
-    padding-right 30px
-    text-align right
-  .q-timeline-entry-left .q-timeline-subtitle,
-  .q-timeline-entry-right .q-timeline-content
-    float right
-    text-align left
-    padding-left 30px
-  .q-timeline-entry-with-icon .q-timeline-content
-    padding-top 8px
-  .q-timeline-entry
-    padding-bottom 24px
-    overflow hidden
+  .q-timeline-responsive
+    .q-timeline-heading-title
+      text-align center
+      margin-left 0
+    .q-timeline-entry, .q-timeline-subtitle, .q-timeline-dot, .q-timeline-content
+      display block
+      margin 0
+      padding 0
+    .q-timeline-dot
+      position absolute
+      left 50%
+      margin-left -7.15px
+    .q-timeline-entry-with-icon .q-timeline-dot
+      left 50%
+      margin-left -15px
+    .q-timeline-subtitle, .q-timeline-content
+      width 50%
+    .q-timeline-entry-left .q-timeline-content,
+    .q-timeline-entry-right .q-timeline-subtitle
+      float left
+      padding-right 30px
+      text-align right
+    .q-timeline-entry-left .q-timeline-subtitle,
+    .q-timeline-entry-right .q-timeline-content
+      float right
+      text-align left
+      padding-left 30px
+    .q-timeline-entry-with-icon .q-timeline-content
+      padding-top 8px
+    .q-timeline-entry
+      padding-bottom 24px
+      overflow hidden