| commit | author | age | ||
| 875958 | 1 | <!-- Todo Header --> |
| D | 2 | <template id="todo-header"> |
| 3 | <div class="todo-header"> | |
| 4 | <div class="overlay"></div> | |
| 5 | <time class="clearfix"> | |
| 6 | <span class="day">{{ date }}</span> | |
| 7 | <span class="dayofweek">{{ weekDay }}</span> | |
| 82de6c | 8 | <span class="dayofweek">{{ month }}, {{ year }}</span> |
| 875958 | 9 | </time> |
| D | 10 | </div> |
| 11 | </template> | |
| 12 | ||
| 13 | <script> | |
| 14 | // Array of Month | |
| 15 | const month = [ | |
| 16 | "January", | |
| 17 | "February", | |
| 18 | "Mach", | |
| 19 | "April", | |
| 20 | "May", | |
| 21 | "June", | |
| 22 | "July", | |
| 23 | "August", | |
| 24 | "September", | |
| 25 | "October", | |
| 26 | "November", | |
| 27 | "September" | |
| 28 | ]; | |
| 29 | const weekday = [ | |
| 30 | "Sunday", | |
| 31 | "Monday", | |
| 32 | "Tuesday", | |
| 33 | "Wednesday", | |
| 34 | "Thursday", | |
| 35 | "Friday", | |
| 36 | "Saturday" | |
| 37 | ]; | |
| 38 | ||
| 39 | export default { | |
| 40 | name: "Header", | |
| 41 | props: { | |
| 42 | name: String | |
| 43 | }, | |
| 44 | data: function() { | |
| 45 | return { | |
| 46 | date: "", | |
| 47 | weekDay: "", | |
| 48 | month: "", | |
| 49 | year: "" | |
| 50 | }; | |
| 51 | }, | |
| 52 | created: function() { | |
| 53 | const d = new Date(); | |
| 54 | this.date = d.getDate(); | |
| 55 | this.weekDay = weekday[d.getDay()]; | |
| 56 | this.month = month[d.getMonth()]; | |
| 57 | this.year = d.getFullYear(); | |
| 58 | } | |
| 59 | }; | |
| 60 | </script> | |
| 61 | ||
| 62 | <!-- Add "scoped" attribute to limit CSS to this component only --> | |
| 63 | <style scoped lang="scss"> | |
| 64 | // https://github.com/tatthien/vue-todo/blob/master/src/sass/style.scss | |
| 65 | @import "../scss/custom.scss"; | |
| 82de6c | 66 | |
| 875958 | 67 | .todo-header { |
| 82de6c | 68 | border-radius: 0px; |
| D | 69 | // border-radius: 6px 6px 0 0; |
| 875958 | 70 | background: url($header_image) no-repeat; |
| D | 71 | background-size: cover; |
| 72 | padding: 55px 20px; | |
| 73 | position: relative; | |
| 74 | .overlay { | |
| 75 | position: absolute; | |
| 76 | top: 0; | |
| 77 | left: 0; | |
| 78 | right: 0; | |
| 79 | bottom: 0; | |
| d3c92c | 80 | background: rgba(0, 0, 0, 0.2); /* fallback for old browsers */ |
| 82de6c | 81 | // border-radius: 6px 6px 0 0; |
| 875958 | 82 | } |
| D | 83 | time { |
| 84 | color: white; | |
| 85 | display: block; | |
| 86 | position: relative; | |
| 87 | .day { | |
| 88 | font-size: 4em; | |
| 89 | float: left; | |
| 90 | margin-right: 10px; | |
| 91 | } | |
| 92 | .dayofweek { | |
| 93 | display: block; | |
| 94 | margin-top: 13px; | |
| 95 | font-size: 1.4em; | |
| 96 | font-weight: 700; | |
| 26aabc | 97 | text-align: left; |
| 875958 | 98 | } |
| D | 99 | } |
| 100 | } | |
| 101 | </style> | |
