quasar/dev/components/css/timeline.vue at v0.13 · hipertracker/quasar · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<template>
  <div>
    <div class="layout-padding">
      <div class="timeline">
        <div class="timeline-label">
          <h4 class="bg-white text-italic">
            Friday
          </h4>
        </div>
        <div v-for="n in 2" class="timeline-item">
          <div class="timeline-badge">
            <img v-if="n % 2 === 0" src="~assets/linux-avatar.png">
            <i v-else>alarm</i>
          </div>
          <div class="timeline-title">
            Mountain Trip
          </div>
          <div class="timeline-date text-italic">
            <div>17:01</div>
            <div>June 16th, 2016</div>
          </div>
          <div class="card">
            <img src="~assets/mountains.jpg">
            <div class="card-content">
              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
              incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
              exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            </div>
          </div>
        </div>
        <div class="timeline-label">
          <h4 class="bg-white text-italic">
            Saturday
          </h4>
        </div>
        <div v-for="n in 5" class="timeline-item">
          <div class="timeline-badge">
            <img v-if="n % 2 === 0" src="~assets/boy-avatar.png">
            <i v-else>alarm</i>
          </div>
          <div class="timeline-date text-italic">
            <div>17:01</div>
            <div>June 16th, 2016</div>
          </div>
          <div class="card">
            <div class="card-title">
              Card Title
            </div>
            <div class="card-content">
              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
              incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
              exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            </div>
          </div>
        </div>
        <div class="timeline-label">
          <h4 class="bg-white text-italic">
            Sunday
          </h4>
        </div>
        <div v-for="n in 4" class="timeline-item">
          <div class="timeline-badge">
            <img v-if="n % 2 === 0" src="~assets/guy-avatar.png">
            <i v-else>alarm</i>
          </div>
          <div class="timeline-date text-italic">
            <div>17:01</div>
            <div>June 16th, 2016</div>
          </div>
          <div class="card">
            <div class="card-title">
              Card Title
            </div>
            <div class="card-content">
              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
              incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
              exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>