Fix nav panel layout bug in Firefox

Author: Nathan Reyes

CHANGELOG.md

@@ -1,3 +1,6 @@
+## 0.2.1
+* Fix layout bug with navigation panel in Firefox
+
 ## 0.2.0
 * Simplify header title layout
 * Add navigation panel popover with indicators

docs/components/home/examples/ExContentStyles.vue

@@ -1,8 +1,7 @@
 <template>
   <v-calendar
     :attributes='attributes'
-    is-double-paned
-    :min-page='minPage'>
+    is-double-paned>
   </v-calendar>
 </template>
 
@@ -17,10 +16,6 @@ export default {
       nextMonth,
       nextMonthYear } = getExampleMonthComps();
     return {
-      minPage: {
-        month: 4,
-        year: 2016,
-      },
       attributes: [
         {
           contentStyle: {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "v-calendar",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "A clean and extendable plugin for building simple attributed calendars in Vue.js.",
   "keywords": [
     "vue",

src/components/CalendarNav.vue

@@ -355,9 +355,10 @@ $cellTransition: all 0.1s ease-in-out
 
 .c-table-cell
   position: relative
-  display: flex
-  justify-content: center
-  align-items: center
+  // display: flex
+  // flex-direction: column
+  // justify-content: center
+  // align-items: center
   user-select: none
   cursor: pointer
   width: 100%
@@ -381,15 +382,20 @@ $cellTransition: all 0.1s ease-in-out
 .c-label
   position: absolute
   font-size: 0.9rem
-  transition: padding-bottom 0.1s ease-in-out
+  top: 6px
+  width: 100%
+  text-align: center
+  transition: top 0.1s ease-in-out
   &.has-indicators
-    padding-bottom: 10px
+    top: 2px
 
 .c-indicators
+  position: absolute
   display: flex
   justify-content: center
   align-items: center
-  margin-top: 14px
+  bottom: 5px
+  width: 100%
   transition: $cellTransition
   .c-indicator
     width: 5px