cardamon 0.0.1

Cardamon is a tool to help development teams measure the power consumption and carbon emissions of their software.
1
2
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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60

<template>
  <div class="layout">
    <div :class="{ blurred: widgetStore.sidebarVisible }" class="layout__main">
      <AppHeader :show-add-widget="showAddWidget" />
      <!-- <AppSidebar /> -->
      <div class="layout__content">
        <div class="layout__title">
          <slot name="title"></slot>
        </div>
        <div class="layout__filters">
          <slot name="filters"></slot>
        </div>
        <div class="layout__breadcrumbs">
          <slot name="breadcrumbs"></slot>
        </div>
        <div class="layout__dashboard">
          <slot name="dashboard"></slot>
        </div>
      </div>
    </div>
    <AddWidgetSidebar />
  </div>
</template>

<script setup lang="ts">
import { useWidgetStore } from '@/stores/widgets'
import AppHeader from '@/components/Common/Header/AppHeader.vue'
import AddWidgetSidebar from '@/components/Common/Sidebar/AppWidgetSidebar.vue'

const widgetStore = useWidgetStore()
</script>

<style scoped>
.layout {
  @apply h-full dark:bg-gray-900 overflow-auto;
}
.layout > * {
  @apply overflow-auto;
}

.layout__main {
  @apply flex flex-col pt-[81px] overflow-auto;
}

.layout__content {
  @apply m-4 h-full p-8 py-5 lg:min-h-[calc(100vh-122px)] overflow-auto;
}

.layout__title,
.layout__filters,
.layout__breadcrumbs,
.layout__dashboard {
  @apply mt-4 ml-2;
}

.blurred {
  filter: blur(5px);
  transition: filter 0.3s ease-in-out;
}
</style>