Home.vue 2.88 KB
Newer Older
Khalid Ali's avatar
init  
Khalid Ali committed
1
2
<template>
  <div class="home">
Khalid Ali's avatar
Khalid Ali committed
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
    <div class="container">
      <div class="row">
        <div class="col-md-12 license">
          <div class="jumbotron jumboindex">
            <h1 class="text-center"><strong>SRCT</strong>&#8203;BOOKSHARE</h1>
            <h3 class="text-center">A place for Mason students to exchange textbooks.</h3>
          </div>
          <a href="https://creativecommons.org/licenses/by/4.0/" target="_blank"><img alt="Creative Commons License" style="border-width:0" src="https://i.creativecommons.org/l/by/4.0/80x15.png" title="'Mason Statue Desktop' by Daniel Bond is licensed under a Creative Commons Attribution 4.0 International License."/></a>
        </div>
      </div>
    </div>
    <legend/>
    <div class="row">
      <div class="col-sm-3 text-center">
        <svgicon icon="key" alt="key" class="svg-home"/>
        <h4>Log in with your Mason credentials</h4>
      </div>
      <div class="col-sm-3 text-center">
        <svgicon icon="gift" alt="gift" class="svg-home"/>
        <h4>Exchange your used textbooks with Mason students</h4>
      </div>
      <div class="col-sm-3 text-center">
        <svgicon icon="book" alt="book" class="svg-home"/>
        <h4>Search for textbooks by course and more</h4>
      </div>
      <div class="col-sm-3 text-center">
        <svgicon icon="eye" alt="eye" class="svg-home"/>
        <h4>Get updates when textbooks you want are posted</h4>
      </div>
    </div>
    <hr/>
    <div class="row">
      <div class="col-sm-5 col-sm-offset-1">
        <router-link to="/create_listing" class="btn btn-primary btn-lg btn-block">I <em>have</em> a book</router-link>
      </div>
      <div class="col-sm-5">
        <router-link to="/all_listing" class="btn btn-primary btn-lg btn-block">I <em>need</em> a book</router-link>
      </div>
    </div>
Khalid Ali's avatar
init  
Khalid Ali committed
42
43
44
45
  </div>
</template>

<script lang="ts">
Khalid Ali's avatar
Khalid Ali committed
46
47
48
49
import '@/components/icons/key';
import '@/components/icons/book';
import '@/components/icons/gift';
import '@/components/icons/eye';
Khalid Ali's avatar
init  
Khalid Ali committed
50
import { Component, Vue } from 'vue-property-decorator';
51
import API from '../api';
Khalid Ali's avatar
init  
Khalid Ali committed
52
53
54

@Component({
  components: {
Khalid Ali's avatar
Khalid Ali committed
55
//    NavigationBar,
Khalid Ali's avatar
init  
Khalid Ali committed
56
57
  },
})
58
59
60
61
62
63
64
65
66
export default class Home extends Vue {
  mounted() {
    // if (this.$route.query.ticket != null) {
    //   var token = JSON.stringify(this.$route.query.ticket).slice(1,-1);
    //   localStorage.setItem('token', token);
    //   API.defaults.headers.common['ticket'] = token;
    // }
  }
}
Khalid Ali's avatar
init  
Khalid Ali committed
67
</script>
Khalid Ali's avatar
Khalid Ali committed
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95

<style scoped>
.svg-home {
  width: 50px;
  height: 50px;
}

.jumboindex {
  background: url(../assets/mason-statue-desktop.jpg) no-repeat;
  background-size: cover;
  background-position: center;
  box-shadow: inset 0px 0px 20px #333;
  color: white;
  text-shadow: 2px 2px 4px #000;
}

legend {
  display: block;
  width: 100%;
  padding: 0;
  margin-bottom: 21px;
  font-size: 22.5px;
  line-height: inherit;
  color: #3c4042;
  border: 0;
  border-bottom: 1px solid #e5e5e5;
}
</style>