Feed.vue 2.11 KB
Newer Older
1
<template>
2
  <BlockTemplate heading="Feed">
3
4
5
6
7
8
9
    <ul>
      <li v-for="(message, index) in messages" :key="index" @click="$router.push('/about')" @keypress.enter="$router.push('/about')" tabindex=0>
        <a href="/about">{{ message.course }}</a>
        <span class="msg-date">{{ message.date.toLocaleDateString('da-dk').replace(/\./g, '/') }}</span>
        <p>{{ message.text }}</p>
      </li>
    </ul>
10
  </BlockTemplate>
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
</template>

<script>
export default {
  name: 'Feed',
  data() {
    return {
      messages: [
        {
          course: 'Calculus Beta',
          date: new Date(),
          text: 'Suspendisse at eros vel ligula sollicitudin dignissim. Morbi ligula metus, rhoncus at ultrices eget, ultricies quis ex. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed sit amet odio orci. Donec a velit at urna facilisis commodo nec a justo. Nulla facilisi. Nulla maximus fermentum.',
        },
        {
          course: 'Databaser',
          date: new Date(),
          text: `It came to my attention that some students have been asking what the word "same" means in the expression "beverages of the same name".

It is natural that the expression "same" means "same", therefore the expression "beverages of the same name" denotes beverages of the same name.

Any assumption that the word "same" means "same or different" is wrong and cannot be taken as correct.`,
        }
      ]
    }
  }
}
</script>

<style scoped lang="scss">
Kent Nielsen's avatar
Kent Nielsen committed
40
41
42
43
  .block{
    min-width: 250px;
  }

44
  ul {
45
    padding: 20px;
46
47
48
  }

  li {
49
    border: solid 1px $theme-color;
50
    background-color: $lighter-green-theme-color;
51
52
53
    padding: 5px;

    &:hover, &:focus {
54
      background-color: $lightest-theme-color;
55
      cursor: pointer;
56
57

      p {
58
        @include multiline-ellipsis($line-height: 1.2em, $line-count: 3, $bg-color: $lightest-theme-color)
59
      }
60
61
62
63
64
65
66
67
68
69
70
71
72
    }
    
    &:not(:last-child) {
      margin-bottom: 20px;
    }
  }

  .msg-date {
    float: right;
  }

  p {
    margin: 0.4em 0 0 0;
73
    @include multiline-ellipsis($line-height: 1.2em, $line-count: 3, $bg-color: $lighter-green-theme-color)
74
75
  }
</style>