fix(docs+quasar): Misc docs related fixes, change QDrawer default breakpoint to 1023 (md) (quasarframework#3230)

pdanpdan · rstoenescu · commit 6ca00085e4bd · 2019-02-13T11:59:23.000+02:00
* fix(docs+quasar): Misc docs related fixes, change QDrawer default breakpoint to 1023 (md) - hide q-gutter overflow in examples, add scroll for long ones - fix DocsAPI tab bar overflow - fix QInput like examples (gutter + column) - width and spacing - redo gutter pros and cons (text and examples) to use .overflow-auto or .row on container - make LayoutBuilder play nice with screen resolutions - remove my stypid .clearfix from core close quasarframework#3227 * Update LayoutBuilder.vue
diff --git a/docs/src/components/DocApi.vue b/docs/src/components/DocApi.vue
@@ -8,7 +8,7 @@ q-card.doc-api.q-my-lg(v-if="ready")
   q-separator
 
   div.bg-grey-2.text-grey-7.flex.no-wrap
-    q-tabs(v-model="currentTab", indicator-color="primary", align="left", dense)
+    q-tabs.col(v-model="currentTab", indicator-color="primary", align="left", dense)
       q-tab(
         v-for="tab in tabs"
         :key="`api-tab-${tab}`"
diff --git a/docs/src/components/DocExample.vue b/docs/src/components/DocExample.vue
@@ -47,7 +47,8 @@ q-card.doc-example.q-my-lg(:class="classes")
 
       q-separator.doc-example__separator
 
-  component.doc-example__content(:is="component", :class="componentClass")
+  .row
+    component.col.doc-example__content(:is="component", :class="componentClass")
 
   codepen(ref="codepen", :title="title", :parts="parts")
 </template>
diff --git a/docs/src/examples/Notify/Positioning.vue b/docs/src/examples/Notify/Positioning.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="q-pa-md q-gutter-sm column items-center">
+  <div class="q-pa-md q-gutter-y-sm column items-center">
     <div>
       <div class="row q-gutter-sm">
         <q-btn round size="sm" color="secondary" @click="showNotif('top-left')">
diff --git a/docs/src/examples/QBtnGroup/Group.vue b/docs/src/examples/QBtnGroup/Group.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="q-pa-md q-gutter-md column items-start">
+  <div class="q-pa-md q-gutter-y-md column items-start">
     <q-btn-group push>
       <q-btn push label="First" icon="timeline" />
       <q-btn push label="Second" icon="visibility" />
diff --git a/docs/src/examples/QInput/Borderless.vue b/docs/src/examples/QInput/Borderless.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="q-pa-md">
-    <div class="q-gutter-md column" style="width: 300px; max-width: 100%">
+    <div class="q-gutter-y-md column" style="width: 300px; max-width: 100%">
       <q-toolbar class="bg-primary text-white rounded-borders">
         <q-btn round dense flat icon="menu" class="q-mr-xs" />
         <q-avatar class="gt-xs">
diff --git a/docs/src/examples/QInput/Dark.vue b/docs/src/examples/QInput/Dark.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="q-pa-md bg-grey-10 text-white">
-    <div class="q-gutter-md column" style="max-width: 300px">
+    <div class="q-gutter-y-md column" style="max-width: 300px">
       <div>
         <q-toggle v-model="readonly" label="Readonly" dark />
         <q-toggle v-model="disable" label="Disable" dark />
diff --git a/docs/src/examples/QInput/DesignFilled.vue b/docs/src/examples/QInput/DesignFilled.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="q-pa-md">
-    <div class="q-gutter-md column" style="max-width: 300px">
+    <div class="q-gutter-y-md column" style="max-width: 300px">
       <q-toggle v-model="dense" label="Dense QInput" />
 
       <q-input filled v-model="text" :dense="dense" />
diff --git a/docs/src/examples/QInput/DesignOutlined.vue b/docs/src/examples/QInput/DesignOutlined.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="q-pa-md">
-    <div class="q-gutter-md column" style="max-width: 300px">
+    <div class="q-gutter-y-md column" style="max-width: 300px">
       <q-toggle v-model="dense" label="Dense QInput" />
 
       <q-input outlined v-model="text" :dense="dense" />
diff --git a/docs/src/examples/QInput/DesignStandard.vue b/docs/src/examples/QInput/DesignStandard.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="q-pa-md">
-    <div class="q-gutter-md column" style="max-width: 300px">
+    <div class="q-gutter-y-md column" style="max-width: 300px">
       <q-toggle v-model="dense" label="Dense QInput" />
 
       <q-input v-model="text" :dense="dense" />
diff --git a/docs/src/examples/QInput/DesignStandout.vue b/docs/src/examples/QInput/DesignStandout.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="q-pa-md">
-    <div class="q-gutter-md column" style="max-width: 300px">
+    <div class="q-gutter-y-md column" style="max-width: 300px">
       <q-toggle v-model="dense" label="Dense QInput" />
 
       <q-input standout v-model="text" :dense="dense" />
diff --git a/docs/src/examples/QInput/PrefixSuffix.vue b/docs/src/examples/QInput/PrefixSuffix.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="q-pa-md">
-    <div class="q-gutter-md column" style="max-width: 300px">
+    <div class="q-gutter-y-md column" style="max-width: 300px">
       <q-input filled v-model="email" type="email" suffix="@gmail.com">
         <template v-slot:before>
           <q-icon name="mail" />
diff --git a/docs/src/examples/QInput/Rounded.vue b/docs/src/examples/QInput/Rounded.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="q-pa-md">
-    <div class="q-gutter-md column" style="max-width: 300px">
+    <div class="q-gutter-y-md column" style="max-width: 300px">
       <q-input rounded filled v-model="text">
         <template v-slot:prepend>
           <q-icon name="event" />
diff --git a/docs/src/examples/QInput/StandoutToolbar.vue b/docs/src/examples/QInput/StandoutToolbar.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="q-pa-md">
-    <div class="q-gutter-md column" style="width: 300px; max-width: 100%">
+    <div class="q-gutter-y-md column" style="width: 300px; max-width: 100%">
       <q-toolbar class="bg-primary text-white rounded-borders">
         <q-btn round dense flat icon="menu" class="q-mr-xs" />
         <q-avatar class="gt-xs">
diff --git a/docs/src/examples/QToggle/CustomValues.vue b/docs/src/examples/QToggle/CustomValues.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="q-pa-md q-gutter-sm column">
+  <div class="q-pa-md q-gutter-y-sm column">
     <q-toggle
       :label="`Model is ${blueModel} (default behaviour)`"
       v-model="blueModel"
diff --git a/docs/src/examples/grid/ChildrenSizeCompare.vue b/docs/src/examples/grid/ChildrenSizeCompare.vue
@@ -1,56 +1,58 @@
 <template>
   <div class="q-px-xl q-py-md" style="max-width: 500px">
     <p>.q-gutter and unsized children</p>
-    <div class="bg-red-4 clearfix">
-      <div class="row q-gutter-lg">
-        <div :class="`bg-green-${n+1}`" v-for="n in 7" :key="n">
-          Child
+    <div class="row">
+      <div class="col bg-red-4">
+        <div class="row q-gutter-lg">
+          <div :class="`bg-green-${n+1}`" v-for="n in 7" :key="n">
+            Child
+          </div>
         </div>
       </div>
     </div>
 
     <q-separator class="q-my-md" />
 
     <p>.q-col-gutter and unsized children</p>
-    <div class="bg-red-4 clearfix q-mt-lg">
-      <div class="row q-col-gutter-lg">
-        <div class="semi-transparent" :class="`bg-green-${n+1}`" v-for="n in 7" :key="n">
-          Child
+    <div class="row">
+      <div class="col bg-red-4 q-mt-lg">
+        <div class="row q-col-gutter-lg">
+          <div class="semi-transparent" :class="`bg-green-${n+1}`" v-for="n in 7" :key="n">
+            Child
+          </div>
         </div>
       </div>
     </div>
 
     <q-separator class="q-my-md" />
 
-    <p>.q-gutter and .col-3 sized children - 4 .col-3 adds up to <strong>more than 100%</strong></p>
-    <div class="bg-red-4 clearfix">
-      <div class="row q-gutter-lg">
-        <div class="col-3" :class="`bg-green-${n+1}`" v-for="n in 7" :key="n">
-          Child
+    <p>.q-gutter and .col-6 sized children - 2 .col-2 adds up to <strong>more than 100%</strong></p>
+    <div class="row">
+      <div class="col bg-red-4">
+        <div class="row q-gutter-lg">
+          <div class="col-6" :class="`bg-green-${n+1}`" v-for="n in 5" :key="n">
+            Child
+          </div>
         </div>
       </div>
     </div>
 
     <q-separator class="q-my-md" />
 
-    <p>.q-col-gutter and .col-3 sized children - 4 .col-3 adds up to <strong>100%</strong></p>
-    <div class="bg-red-4 clearfix q-mt-lg">
-      <div class="row q-col-gutter-lg">
-        <div class="semi-transparent col-3" :class="`bg-green-${n+1}`" v-for="n in 7" :key="n">
-          Child
+    <p>.q-col-gutter and .col-6 sized children - 2 .col-6 adds up to <strong>100%</strong></p>
+    <div class="row">
+      <div class="col bg-red-4 q-mt-lg">
+        <div class="row q-col-gutter-lg">
+          <div class="semi-transparent col-6" :class="`bg-green-${n+1}`" v-for="n in 5" :key="n">
+            Child
+          </div>
         </div>
       </div>
     </div>
   </div>
 </template>
 
 <style lang="stylus">
-.clearfix
-  &:before, &:after
-    content ' '
-    display table
-  &:after
-    clear both
 .semi-transparent
   opacity .7
 </style>
diff --git a/docs/src/examples/grid/ChildrenStyling.vue b/docs/src/examples/grid/ChildrenStyling.vue
@@ -1,22 +1,26 @@
 <template>
   <div class="q-px-xl q-py-md" style="max-width: 500px">
     <p>.q-col-gutter with styling on children</p>
-    <div class="bg-red-4 clearfix q-mt-lg">
-      <div class="row q-col-gutter-lg">
-        <div class="semi-transparent col-3 q-pa-md" :class="`bg-green-${n+1}`" v-for="n in 7" :key="n">
-          Child
+    <div class="row">
+      <div class="col bg-red-4 q-mt-lg">
+        <div class="row q-col-gutter-lg">
+          <div class="semi-transparent col-6 q-pa-md text-center" :class="`bg-green-${n+1}`" v-for="n in 5" :key="n">
+            Child
+          </div>
         </div>
       </div>
     </div>
 
     <q-separator class="q-my-md" />
 
     <p>.q-col-gutter with styling on the element inside children</p>
-    <div class="bg-red-4 clearfix">
-      <div class="row q-col-gutter-lg">
-        <div class="col-3" v-for="n in 7" :key="n">
-          <div class="q-pa-md" :class="`bg-green-${n+1}`">
-            Child
+    <div class="row">
+      <div class="col bg-red-4">
+        <div class="row q-col-gutter-lg">
+          <div class="col-6" v-for="n in 5" :key="n">
+            <div class="q-pa-md text-center" :class="`bg-green-${n+1}`">
+              Child
+            </div>
           </div>
         </div>
       </div>
@@ -25,32 +29,30 @@
     <q-separator class="q-my-md" />
 
     <p>.q-col-gutter with direct QBtn children</p>
-    <div class="bg-red-4 clearfix q-mt-lg">
-      <div class="row q-col-gutter-lg">
-        <q-btn class="semi-transparent col-4" color="primary" label="Button" v-for="n in 7" :key="`md-${n}`" />
+    <div class="row">
+      <div class="col bg-red-4 q-mt-lg">
+        <div class="row q-col-gutter-lg">
+          <q-btn class="semi-transparent col-6" color="primary" label="Button" v-for="n in 5" :key="`md-${n}`" />
+        </div>
       </div>
     </div>
 
     <q-separator class="q-my-md" />
 
     <p>.q-col-gutter with QBtn inside children</p>
-    <div class="bg-red-4 clearfix">
-      <div class="row q-col-gutter-lg">
-        <div class="col-4" v-for="n in 7" :key="n">
-          <q-btn class="full-width" color="primary" label="Button" />
+    <div class="row">
+      <div class="col bg-red-4">
+        <div class="row q-col-gutter-lg">
+          <div class="col-6" v-for="n in 5" :key="n">
+            <q-btn class="full-width" color="primary" label="Button" />
+          </div>
         </div>
       </div>
     </div>
   </div>
 </template>
 
 <style lang="stylus">
-.clearfix
-  &:before, &:after
-    content ' '
-    display table
-  &:after
-    clear both
 .semi-transparent
   opacity .7
 </style>
diff --git a/docs/src/examples/grid/ParentStyling.vue b/docs/src/examples/grid/ParentStyling.vue
@@ -1,31 +1,37 @@
 <template>
   <div class="q-pa-md" style="max-width: 500px">
     <div class="row">
-      <div class="offset-1 col-5">
+      <div class="offset-1 col-3 column justify-between">
         <p>Styling on parent</p>
-        <div class="bg-yellow q-pa-sm">Yellow block</div>
-        <div class="row q-gutter-lg bg-red-4">
-          <div class="q-pa-md bg-green-3" v-for="n in 4" :key="n">Child</div>
+        <div>
+          <div class="bg-yellow q-pa-sm">Yellow block</div>
+          <div class="row q-gutter-lg bg-red-4">
+            <div class="q-pa-md bg-green-3" v-for="n in 4" :key="n">C</div>
+          </div>
+        </div>
+      </div>
+      <div class="offset-1 col-3 column justify-between">
+        <p>Styling on wrapper - .row</p>
+        <div>
+          <div class="bg-yellow q-pa-sm">Yellow block</div>
+          <div class="bg-red-4 row">
+            <div class="row q-gutter-lg">
+              <div class="q-pa-md bg-green-3" v-for="n in 4" :key="n">C</div>
+            </div>
+          </div>
         </div>
       </div>
-      <div class="offset-1 col-5">
-        <p>Styling on wrapper</p>
-        <div class="bg-yellow q-pa-sm">Yellow block</div>
-        <div class="bg-red-4 clearfix">
-          <div class="row q-gutter-lg">
-            <div class="q-pa-md bg-green-3" v-for="n in 4" :key="n">Child</div>
+      <div class="offset-1 col-3 column justify-between">
+        <p>Styling on wrapper - .overflow-auto</p>
+        <div>
+          <div class="bg-yellow q-pa-sm">Yellow block</div>
+          <div class="bg-red-4 overflow-auto">
+            <div class="row q-gutter-lg">
+              <div class="q-pa-md bg-green-3" v-for="n in 4" :key="n">C</div>
+            </div>
           </div>
         </div>
       </div>
     </div>
   </div>
 </template>
-
-<style lang="stylus">
-.clearfix
-  &:before, &:after
-    content ' '
-    display table
-  &:after
-    clear both
-</style>
diff --git a/docs/src/layouts/LayoutBuilder.vue b/docs/src/layouts/LayoutBuilder.vue
@@ -34,6 +34,8 @@
           header-nav
           flat
           bordered
+          alternative-labels
+          :contracted="isContracted"
           color="secondary"
           v-model="step"
           ref="stepper"
@@ -308,8 +310,14 @@
           <template v-slot:navigation>
             <q-stepper-navigation>
               <q-separator spaced />
-              <q-btn v-if="step !== 'play'" color="primary" class="q-mr-sm" @click="$refs.stepper.next()" label="Continue" />
-              <q-btn color="black" label="Export Layout" @click="exportDialog = true" />
+              <div class="row q-col-gutter-sm">
+                <div v-if="step !== 'play'" class="col-12 col-sm-auto">
+                  <q-btn class="full-width" color="primary" @click="$refs.stepper.next()" label="Continue" />
+                </div>
+                <div class="col-12 col-sm-auto">
+                  <q-btn class="full-width" color="black" label="Export Layout" @click="exportDialog = true" />
+                </div>
+              </div>
             </q-stepper-navigation>
           </template>
         </q-stepper>
@@ -337,6 +345,7 @@
       :overlay="cfg.leftOverlay"
       :elevated="cfg.leftSep === 'elevated'"
       :bordered="cfg.leftSep === 'bordered'"
+      :breakpoint="1023"
     >
       <q-scroll-area class="fit">
         <q-item-label header>Left Drawer</q-item-label>
@@ -356,6 +365,7 @@
       :overlay="cfg.rightOverlay"
       :elevated="cfg.rightSep === 'elevated'"
       :bordered="cfg.rightSep === 'bordered'"
+      :breakpoint="1023"
     >
       <q-scroll-area style="height: calc(100% - 204px); margin-top: 204px">
         <q-item-label header>Right Drawer</q-item-label>
@@ -463,6 +473,10 @@ export default {
   },
 
   computed: {
+    isContracted () {
+      return this.$q.screen.lt.sm || (this.$q.screen.md && this.play.left && this.play.right)
+    },
+
     bgTopL () {
       return this.topL === 'h' ? 'bg-primary' : 'bg-orange'
     },
diff --git a/docs/src/pages/layout/grid/gutter.md b/docs/src/pages/layout/grid/gutter.md
@@ -52,7 +52,9 @@ These classes are to be used when the direct children have `col-*` or `offset-*`
 Both set of classes have pros and cons.
 
 ::: warning
-Because both `q-gutter-*` and `q-col-gutter-*` classes apply a **negative top and left margins** to the parent you should not apply styling targeting background, margin or border related properties on the parent. Instead you need to wrap them in a container with `.clearfix` and apply the styling on the container.
+Because both `q-gutter-*` and `q-col-gutter-*` classes apply a **negative top and left margins** to the parent you should not apply styling targeting background, margin or border related properties on the parent.
+
+Instead you need to wrap them in a container, apply the styling on the container, and add `overflow-auto` or `row` class **on the container**
 :::
 
 <doc-example title="Parent styling" file="grid/ParentStyling" />
diff --git a/quasar/src/components/layout/QDrawer.js b/quasar/src/components/layout/QDrawer.js
diff --git a/quasar/src/css/core/visibility.styl b/quasar/src/css/core/visibility.styl
