timestrap-django

 1<template>
 2<div class="container-fluid">
 3  <div class="row row-background">
 4    <div class="col-md-7">
 5      <h1 class="cards-title">
 6        <slot name="cards-title"/>
 7      </h1>
 8    </div>
 9    <div class="col-md-5 d-flex align-items-end justify-content-end">
10      <div class="form-control shadow-sm d-flex align-items-center">
11        <icon :icon="['fas', 'search']" class="fa-sm mr-2"/>
12        <input
13          id="task-search"
14          class="form-control-plaintext py-0 flex-grow-1"
15          v-on:input="$emit('search', $event.target.value)"
16          placeholder="Search"
17          type="text"/>
18      </div>
19    </div>
20  </div>
21
22  <div class="row p-3">
23    <template v-if="numberOfElements !== 0 && view_perm">
24      <slot name="cards-list"/>
25    </template>
26    <template v-else>
27      <div class="col-mb-4 col-lg-3 mb-4">
28        <div class="task card shadow-sm border-danger" style="height: 15rem;">
29          <div class="card-body">
30            <div class="card-title h5 font-weight-bold">
31              Nothing here
32            </div>
33            <div class="card-subtitle h6 text-muted mb-2">
34              Nothing matched your filter or has been added yet
35            </div>
36          </div>
37        </div>
38      </div>
39    </template>
40    <slot name="cards-new"/>
41  </div>
42
43  <slot name="cards-modal"/>
44</div>
45</template>
46
47
48<script>
49export default {
50  props: {
51    numberOfElements: {
52      type: Number,
53      default: 0,
54    },
55    view_perm: {
56      type: Object,
57      default: null,
58    }
59  },
60}
61</script>
62
63
64<style lang="scss" scoped>
65.row-background {
66  background-image: url('/static/imgs/background.jpg');
67  background-size: cover;
68  background-position: center center;
69  padding-top: 3rem;
70  padding-bottom: 3rem;
71  margin-bottom: 15px;
72}
73
74.cards-title {
75  margin-bottom: 0;
76  color: #fff;
77  text-shadow: 1px 1px 0 #000;
78  font-weight: bold;
79
80  .fa-sm {
81    filter: drop-shadow(1px 1px 0 #000);
82  }
83}
84
85.form-control {
86  border: none;
87  opacity: .75;
88  width: 200px;
89  transition: opacity 300ms, width 300ms;
90
91  &:focus-within {
92    opacity: 1;
93    width: 100%;
94  }
95}
96</style>