Fix is-expanded prop. Fixes #8.

nathanreyes · Nov 16, 2017 · d45fa06 · d45fa06
2 parents 87059b0 + 9260d58
commit d45fa06
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 6 deletions.
diff --git a/docs/components/home/examples/ExIntro.vue b/docs/components/home/examples/ExIntro.vue
@@ -1,16 +1,19 @@
 <template>
 <v-calendar
   :is-double-paned='isDoublePaned'
+  :is-expanded='isExpanded'
   :title-position='titlePosition'
   :title-transition='titleTransition'
-  :weeks-transition='weeksTransition'>
+  :weeks-transition='weeksTransition'
+  >
 </v-calendar>
 </template>
 
 <script>
 export default {
   props: {
     isDoublePaned: { type: Boolean, default: true },
+    isExpanded: { type: Boolean, default: false },
     titlePosition: { type: String, default: 'center' },
     titleTransition: { type: String, default: 'slide-h' },
     weeksTransition: { type: String, default: 'slide-h' },

diff --git a/docs/components/home/sections/SectionIntro.vue b/docs/components/home/sections/SectionIntro.vue
@@ -26,8 +26,13 @@
             </b-tab-item>
             <!--Intro Options-->
             <b-tab-item label='Options' icon='gear'>
-              <b-field>
-                <b-switch v-model='isDoublePaned'>Double Paned</b-switch>
+              <b-field grouped>
+                <b-field>
+                  <b-switch v-model='isDoublePaned'>Double Paned</b-switch>
+                </b-field>
+                <b-field>
+                  <b-switch v-model='isExpanded'>Is Expanded</b-switch>
+                </b-field>
               </b-field>
               <b-field label='Title Position'>
                 <p class='control'>
@@ -63,6 +68,7 @@
           <div class='example-container'>
             <ex-intro
               :is-double-paned='isDoublePaned'
+              :is-expanded='isExpanded'
               :title-position='titlePosition'
               :title-transition='titleTransition'
               :weeks-transition='weeksTransition'>
@@ -86,6 +92,7 @@ export default {
     return {
       exIntroCode: ExIntroCode,
       isDoublePaned: true,
+      isExpanded: false,
       titlePosition: 'center',
       titleTransition: 'slide-h',
       weeksTransition: 'slide-h',

diff --git a/src/components/Calendar.vue b/src/components/Calendar.vue
@@ -230,7 +230,7 @@ export default {
     min-width: $paneMinWidth * 2
     width: $paneWidth * 2
   &.is-expanded
-    display: flex
+    width: 100%
 
 .c-pane-divider
   width: 1px

diff --git a/src/components/CalendarPane.vue b/src/components/CalendarPane.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    :class='["c-pane", { "is-full-width": position === 0 }]'>
+    :class='["c-pane", { "is-single": position === 0 }]'>
     <!--Header-->
     <div class='c-header-wrapper'>
       <!--Header vertical divider-->
@@ -462,7 +462,7 @@ export default {
   flex-direction: column
   align-items: stretch
   overflow: hidden
-  &.is-full-width
+  &.is-single
     width: 100%
 
 .c-header-wrapper