repos
/ timestrap-django master

timestrap-django

mirror archived upstream

Time tracking you can host anywhere, built on Django. Full export support in multiple formats and easily extensible.

djangodockerhandcodedpythonself-hostedtime-trackingtimetracker

948 B · 63 lines · vue Raw History
 1<template>
 2<div class="popover__container">
 3  <div
 4    class="focuser"
 5    v-if="show"
 6    @click="popoverHide()"/>
 7
 8  <button
 9    class="btn btn-light popover__button w-100 text-nowrap"
10    @click="popoverShow()">
11    <slot name="popover-button"/>
12  </button>
13
14  <div :class="['popover__content', 'bg-white', 'border', 'rounded', 'p-4', show ? 'd-block' : 'd-none']">
15    <slot name="popover-content"/>
16  </div>
17</div>
18</template>
19
20
21<script>
22export default {
23  data() {
24    return {
25      show: false,
26    }
27  },
28  methods: {
29    popoverShow() {
30      this.show = true;
31    },
32    popoverHide() {
33      this.show = false;
34    },
35  },
36};
37</script>
38
39
40<style lang="scss" scoped>
41.focuser {
42  position: fixed;
43  z-index: 1;
44  top: 0;
45  left: 0;
46  bottom: 0;
47  right: 0;
48}
49
50.popover__container {
51  position: relative;
52}
53
54.popover__content {
55  position: absolute;
56  z-index: 2;
57  width: 400px;
58  margin-top: 0.5rem;
59  right: 0;
60  left: auto;
61}
62</style>