Merge pull request #4 from start-again/dev

Version 2.0.0

.prettierrc

@@ -1,5 +1,9 @@
 {
+  "useTabs": false,
   "semi": false,
+  "singleQuote": true,
+  "trailingComma": "es5",
+  "bracketSpacing": true,
   "arrowParens": "always",
-  "singleQuote": true
+  "endOfLine": "lf"
 }

README.md

@@ -8,7 +8,7 @@
   <h3 align="center">An other minimalist pomodoro application</h3>
 
   <p align="center">
-  <img alt="Version" src="https://img.shields.io/badge/version-1.0.0-blue.svg?style=flat-square" />
+  <img alt="Version" src="https://img.shields.io/badge/version-2.0.0-blue.svg?style=flat-square" />
   <a href="https://github.com/start-again/pmdr/stargazers"><img alt="Version" src="https://img.shields.io/github/stars/start-again/pmdr?style=flat-square" /></a>
   <a href="https://github.com/start-again/pmdr/issues"><img alt="Version" src="https://img.shields.io/github/issues/start-again/pmdr?style=flat-square" /></a>  
   <a href="http://firsttimersonly.com"><img src="https://img.shields.io/badge/first--timers-friendly-blue.svg?style=flat-square" alt="First-timers Friendly"></a>

assets/css/global.css

@@ -1,23 +0,0 @@
-:root {
-  --ggs: 1.2;
-}
-
-.gg {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-  height: 26px;
-  width: 26px;
-}
-
-a {
-  color: inherit;
-  text-decoration: none;
-}
-
-button {
-  padding: 0;
-  background-color: transparent;
-  border: none
-}

components/InfoCard.vue

@@ -0,0 +1,61 @@
+<template>
+  <div class="infoCard">
+    <div class="icon">
+      <slot name="icon"></slot>
+    </div>
+    <p class="title">
+      <slot name="title"></slot>
+    </p>
+    <p class="description">
+      <slot name="description"></slot>
+    </p>
+  </div>
+</template>
+
+<style scoped>
+.infoCard {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  padding: 1rem;
+
+  background-color: #ffffff;
+  text-align: center;
+  border-radius: 10px;
+}
+
+.infoCard:first-child {
+  margin-left: 1rem;
+}
+
+.infoCard:last-child {
+  margin-right: 1rem;
+}
+
+.icon {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  margin-bottom: 0.4rem;
+
+  height: 2.6rem;
+  width: 2.6rem;
+
+  color: #293c9b;
+  background-color: #22cfee44;
+  border-radius: 1.3rem;
+}
+
+.title {
+  font-size: 12px;
+  font-weight: 500;
+  opacity: 0.6;
+}
+
+.description {
+  font-size: 18px;
+  font-weight: 600;
+}
+</style>

components/InfoCards.vue

@@ -0,0 +1,45 @@
+<template>
+  <div class="infoCards">
+    <InfoCard>
+      <template v-slot:icon>
+        <TrendingUpIcon />
+      </template>
+      <template v-slot:title>Cycle Stage</template>
+      <template v-slot:description>
+        {{ $store.state.round }} of {{ $store.state.roundSeries }}
+      </template>
+    </InfoCard>
+    <InfoCard>
+      <template v-slot:icon>
+        <ClockIcon />
+      </template>
+      <template v-slot:title>Next Cycle</template>
+      <template v-slot:description>
+        {{ $store.state.currentSession.id === 'work' ? 'Break' : 'Work' }}
+      </template>
+    </InfoCard>
+  </div>
+</template>
+
+<script>
+import { TrendingUpIcon, ClockIcon } from 'vue-feather-icons'
+import InfoCard from '@/components/InfoCard'
+
+export default {
+  components: { TrendingUpIcon, ClockIcon, InfoCard },
+}
+</script>
+
+<style scoped>
+.infoCards {
+  position: fixed;
+  right: 0;
+  bottom: 1rem;
+  left: 0;
+
+  display: grid;
+
+  gap: 1rem;
+  grid-template-columns: repeat(2, auto);
+}
+</style>

components/NavBar/Top.vue

@@ -0,0 +1,51 @@
+<template>
+  <div class="top-navbar">
+    <button @click="reset">
+      <RotateCwIcon />
+    </button>
+    <button @click="skip">
+      Skip
+    </button>
+  </div>
+</template>
+
+<script>
+import { RotateCwIcon } from 'vue-feather-icons'
+
+export default {
+  components: {
+    RotateCwIcon,
+  },
+
+  methods: {
+    reset() {
+      this.$store.commit('timer/reset')
+    },
+    skip() {
+      this.$store.commit('timer/skip')
+    },
+  },
+}
+</script>
+
+<style scoped>
+.top-navbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+
+  padding: 1rem 1.5rem 0rem;
+}
+
+button {
+  padding: 0;
+
+  background-color: transparent;
+  font-size: 1.3rem;
+  border: none;
+}
+
+button:focus {
+  outline: none;
+}
+</style>