Apply baseline grid overlay tweaks; Bump version;

Author: yuliyan

extension/manifest.json

@@ -1,9 +1,9 @@
 {
   "manifest_version": 2,
-  "name": "PixelParallel",
-  "version": "1.1.2",
+  "name": "PixelParallel by htmlBurger",
+  "version": "1.1.3",
 
-  "description": "Frontend development and QA tool for pixel perfect designs.",
+  "description": "PixelParallel by htmlBurger - Pixel perfect HTML vs Design tool for developers",
   "icons": {
     "16": "logo-16.png",
     "48": "logo-48.png",

package.json

@@ -1,7 +1,7 @@
 {
   "name": "pixel-parallel",
-  "version": "1.1.0",
-  "description": "Frontend development and QA tool for pixel perfect designs.",
+  "version": "1.1.3",
+  "description": "PixelParallel by htmlBurger - Pixel perfect HTML vs Design tool for developers.",
   "main": "dist/PixelParallel.js",
   "scripts": {
     "dev": "cross-env NODE_ENV=development webpack-dev-server --open --inline --hot",

src/components/OverlayGrids.vue

@@ -29,10 +29,12 @@ export default {
     },
     verticalGridStyles() {
       const opacity = this.config.verticalGrid.opacity;
-      const gutter = parseInt(this.config.verticalGrid.gutter) || 0;
+      const gutter = Math.max(3, parseInt(this.config.verticalGrid.gutter) || 0);
+      const gradientStop = 100 - (1 / gutter * 100);
 
       return {
         'opacity': opacity,
+        'background': `linear-gradient(to bottom, transparent, transparent ${gradientStop}%, blue ${gradientStop}%, blue)`,
         'background-size': `100% ${gutter}px`
       }
     }

src/components/Panel.vue

@@ -13,7 +13,7 @@
           <div class="panel-control">
             <ul>
               <li>
-                <a href="#" :class="{'active': !config.visible}" @click.prevent="config.visible = !config.visible"><i class="ico ico-eye-slash-small"></i></a>
+                <a href="#" :class="{'active': !config.visible}" @click.prevent="config.visible = !config.visible" title="Hide All Elements"><i class="ico ico-eye-slash-small"></i></a>
               </li>
 
               <li>
@@ -61,7 +61,7 @@
                 </div><!-- /.col col-2-of-5 -->
               </div><!-- /.row -->
 
-              <div class="row">
+              <div class="row row-head">
                 <div class="col col-1-of-4">
                   <number v-model="config.image.top" title="Top" />
                 </div><!-- /.col col-1-of-4 -->
@@ -107,19 +107,19 @@
             <div class="pane" v-if="config.currentPane === 'grid'">
               <div class="row row-head">
                 <div class="col col-1-of-3">
-                  <toggle v-model="config.horizontalGrid.enabled" title="Horizontal Grid" />
+                  <toggle v-model="config.horizontalGrid.enabled" title="Layout Grid" />
                 </div><!-- /.col col-1-of-3 -->
 
                 <div class="col col-1-of-3">
-                  <toggle v-model="config.verticalGrid.enabled" title="Vertical Grid" />
+                  <toggle v-model="config.verticalGrid.enabled" title="Baseline Grid" />
                 </div><!-- /.col col-1-of-3 -->
 
                 <div class="col col-1-of-3">
                   <toggle v-model="config.rulers.enabled" title="Rulers" :action="{text: '(reset)', handler: this.handleRulersReset}" />
                 </div><!-- /.col col-1-of-3 -->
               </div><!-- /.row -->
 
-              <div class="row">
+              <div class="row row-head">
                 <div class="col col-1-of-4">
                   <number v-model="config.horizontalGrid.width" title="Width" :min="0" />
                 </div><!-- /.col col-1-of-4 -->
@@ -139,7 +139,7 @@
 
               <div class="row">
                 <div class="col col-1-of-4">
-                  <number v-model="config.verticalGrid.gutter" title="Height" :min="0" />
+                  <number v-model="config.verticalGrid.gutter" title="Baseline" :min="1" />
                 </div><!-- /.col col-1-of-4 -->
 
                 <div class="col col-1-of-4">

src/styles/panel.js

@@ -35,7 +35,7 @@ export default `
   .row { padding: 10px 15px; }
   .row:after { content: ''; line-height: 0; display: table; clear: both; }
 
-  .row-head { border-bottom: 1px solid #ebebeb; padding-top: 18px; padding-bottom: 18px; margin-bottom: 10px; }
+  .row-head { border-bottom: 1px solid #ebebeb; padding-top: 10px; padding-bottom: 10px; margin-bottom: 10px; }
   .row-head-large-gutter { padding-top: 21px; padding-bottom: 21px; }
 
   .col { float: left; padding: 0 5px; display: table; width: 100%; }