@the-grid/ed - npm Package Compare versions

Comparing version 0.10.2 to 0.10.3

CHANGES.md

 ## dev
 
+## 0.10.3 - 2016-04-18
+
+* Styling covers like cards (#177)
+
 ## 0.10.2 - 2016-04-17
@@ -4,0 +8,0 @@

demo/demo.js

@@ -67,3 +67,4 @@ /* eslint no-console: 0 */
       const file = input.files[i]
-      names.push(file.name)
+      const name = file.name.substr(0, file.name.indexOf('.'))
+      names.push(name)
     }
@@ -70,0 +71,0 @@

package.json

@@ -5,3 +5,3 @@ {
   "license": "MIT",
-  "version": "0.10.2",
+  "version": "0.10.3",
   "description": "the grid api with prosemirror",
@@ -8,0 +8,0 @@ "main": "dist/ed.js",

README.md

@@ -189,3 +189,11 @@ `npm start`
 
-Travis will publish tags to [npm](https://www.npmjs.com/package/@the-grid/ed)
+`npm version patch` - style tweaks, hot bug fixes
+
+`npm version minor` - adding features, backwards-compatible changes
+
+`npm version major` - removing features, non-backwards-compatible changes
+
+These shortcuts will run tests, tag, change package version, and push changes and tags to GH.
+
+Travis will then publish new tags to [npm](https://www.npmjs.com/package/@the-grid/ed)
 and build the demo to publish to [gh-pages](https://the-grid.github.io/ed/).

src/components/app.js

@@ -85,3 +85,3 @@ require('./app.css')
     , el(HrLabel
-      , { label: 'Above goes on your home page. Below gets its own page.' }
+      , { label: 'Anything below this line will become an article page. Anything above will be featured on the home page.' }
       )
@@ -88,0 +88,0 @@ )

src/components/attribution-editor.js

@@ -44,8 +44,12 @@ // Copy style to head
           , style:
-            { maxWidth: 800
-            , margin: '0px auto'
-            , padding: '2em 3em 0'
+            { width: '90%'
+            , margin: '-48px auto 36px'
+            , padding: '1.5em 3em 0'
             , background: '#fff'
+            , border: '1px solid #ddd'
+            , opacity: '.96'
+            , transition: '.1s all ease-out'
+            , zIndex: '2'
             , position: 'relative'
-            , border: '1px solid #ddd'
+            , borderRadius: 2
             }
@@ -58,4 +62,3 @@ }
             , style:
-              { maxWidth: 800
-              , margin: '2em -3em 0'
+              { margin: '2em -3em 0'
               , position: 'relative'
@@ -96,4 +99,4 @@ , top: 1
         { width: '100%'
-        , height: (height ? Math.min(height, 400) : 400)
-        , backgroundColor: '#ddd'
+        , zIndex: '1'
+        , position: 'relative'
         }
@@ -185,3 +188,3 @@ }
   , { className: `AttributionEditor-${key}`
-    , label
+    , placeholder: `Enter ${key}`
     , defaultValue: value
@@ -188,0 +191,0 @@ , key: key

src/components/fold-media.js

@@ -0,1 +1,3 @@
+require('./fold-media.css')
+
 import React, {createElement as el} from 'react'
@@ -27,2 +29,3 @@ import ReactDOM from 'react-dom'
         { margin: '0 auto'
+        , position: 'relative'
         }
@@ -47,4 +50,4 @@ }
         , style:
-          { maxWidth: 800
-          , margin: '0 auto -1em'
+          { maxWidth: 768
+          , margin: '0 auto 0'
           , padding: '0 0.5em'
@@ -55,3 +58,3 @@ , fontSize: '200%'
       , el(TextareaAutosize
-        , { placeholder: 'Text or link to start post...'
+        , { placeholder: 'Type something or paste a link to start post...'
           , onKeyDown: this.shareKeyDown.bind(this)
@@ -75,3 +78,3 @@ , onChange: this.onTextChange.bind(this)
           }
-        , 'Add a link'
+        , 'Paste a Link'
         )
@@ -92,3 +95,3 @@ , el('span'
           }
-        , 'Add a photo'
+        , 'Upload a Photo'
         )
@@ -109,3 +112,3 @@ , el('span'
           }
-        , 'Add more'
+        , 'Write a Post'
         )
@@ -112,0 +115,0 @@ )

src/components/hr-label.js

@@ -31,2 +31,3 @@ import {createElement as el} from 'react'
           , background: '#fff'
+          , fontStyle: 'italic'
           }
@@ -33,0 +34,0 @@ }

src/components/image.js

@@ -22,4 +22,5 @@ /*
   }
-  const style = {backgroundImage: `url(${src})`}
-  return el('div', {className: 'Image', style})
+  return el('div', {className: 'Image'}
+    , el('img', {src: src})
+  )
 }
@@ -26,0 +27,0 @@ Image.contextTypes = {

src/components/placeholder.js

@@ -48,2 +48,3 @@ import React, {createElement as el} from 'react'
       , margin: '0px 16px'
+      , overflow: 'hidden'
       }
@@ -50,0 +51,0 @@ }

src/components/textarea-autosize.js

@@ -12,5 +12,5 @@ require('./textarea-autosize.css')
 const areaStyle =
-  { fontFamily: 'inherit'
-  , fontSize: 18
-  , lineHeight: 1.5
+  { fontFamily: sans
+  //, fontSize: 18
+  //, lineHeight: 1.5
   , minHeight: '1.5rem'
@@ -23,7 +23,7 @@ , display: 'block'
   , border: 0
-  , borderBottom: '1px solid #08e'
+  , borderBottom: '1px dotted rgba(0, 136, 238, .2)'
   , borderRadius: 0
   , outline: 'none'
   , overflow: 'hidden'
-  , margin: '1em 0 2em 0'
+  , margin: '1.5rem 0 .75rem 0'
   }
@@ -58,3 +58,3 @@
     return el('div'
-    , { className: 'TextareaAutosize'
+    , { className: `TextareaAutosize ${this.props.className}`
       , style: containerStyle
@@ -61,0 +61,0 @@ }

src/components/title.js

@@ -0,1 +1,3 @@
+require('./title.css')
+
 import React, {createElement as el} from 'react'
@@ -17,3 +19,3 @@ import TextareaAutosize from './textarea-autosize'
       , padding: '1em'
-      , maxWidth: 800
+      , maxWidth: 768
       , margin: 'auto'
@@ -20,0 +22,0 @@ }

test/components/image.js

@@ -5,3 +5,10 @@ import {expect} from 'chai'
 
+function expectImage (image, src) {
+  expect(image.type).to.equal('div')
+  expect(image.props.className).to.equal('Image')
+  expect(image.props.children.type).to.equal('img')
+  expect(image.props.children.props.src).to.equal(src)
+}
 
+
 describe('Image', function () {
@@ -12,9 +19,3 @@ describe('without imageflo', function () {
       const image = Image(props)
-
-      expect(image.type).to.equal('div')
-      expect(image.props).to.deep.equal(
-        { className: 'Image'
-        , style: {backgroundImage: 'url(http://a.com/b.jpg)'}
-        }
-      )
+      expectImage(image, 'http://a.com/b.jpg')
     })
@@ -32,5 +33,5 @@ })
 
-    const url72 = 'url(https://iflo.grid/graph/abc/12ecaddb783ca3f911391be0a6f9d718/passthrough.jpg?input=http%3A%2F%2Fa.com%2Fb.jpg&width=72)'
-    const url360 = 'url(https://iflo.grid/graph/abc/6c68237fa1da785b80706af7f52dfb8b/passthrough.jpg?input=http%3A%2F%2Fa.com%2Fb.jpg&width=360)'
-    const url720 = 'url(https://iflo.grid/graph/abc/cc04e4bf16f02fbd1ec883fe6112b1c0/passthrough.jpg?input=http%3A%2F%2Fa.com%2Fb.jpg&width=720)'
+    const url72 = 'https://iflo.grid/graph/abc/12ecaddb783ca3f911391be0a6f9d718/passthrough.jpg?input=http%3A%2F%2Fa.com%2Fb.jpg&width=72'
+    const url360 = 'https://iflo.grid/graph/abc/6c68237fa1da785b80706af7f52dfb8b/passthrough.jpg?input=http%3A%2F%2Fa.com%2Fb.jpg&width=360'
+    const url720 = 'https://iflo.grid/graph/abc/cc04e4bf16f02fbd1ec883fe6112b1c0/passthrough.jpg?input=http%3A%2F%2Fa.com%2Fb.jpg&width=720'
 
@@ -42,9 +43,3 @@ it('without dimensions gives expected output', function () {
       const image = Image(props, context)
-
-      expect(image.type).to.equal('div')
-      expect(image.props).to.deep.equal(
-        { className: 'Image'
-        , style: {backgroundImage: url360}
-        }
-      )
+      expectImage(image, url360)
     })
@@ -59,9 +54,3 @@
       const image = Image(props, context)
-
-      expect(image.type).to.equal('div')
-      expect(image.props).to.deep.equal(
-        { className: 'Image'
-        , style: {backgroundImage: url720}
-        }
-      )
+      expectImage(image, url720)
     })
@@ -76,9 +65,3 @@
       const image = Image(props, context)
-
-      expect(image.type).to.equal('div')
-      expect(image.props).to.deep.equal(
-        { className: 'Image'
-        , style: {backgroundImage: url360}
-        }
-      )
+      expectImage(image, url360)
     })
@@ -93,9 +76,3 @@
       const image = Image(props, context)
-
-      expect(image.type).to.equal('div')
-      expect(image.props).to.deep.equal(
-        { className: 'Image'
-        , style: {backgroundImage: url72}
-        }
-      )
+      expectImage(image, url72)
     })
@@ -110,11 +87,5 @@
       const image = Image(props, context)
-
-      expect(image.type).to.equal('div')
-      expect(image.props).to.deep.equal(
-        { className: 'Image'
-        , style: {backgroundImage: url360}
-        }
-      )
+      expectImage(image, url360)
     })
   })
 })

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

6329600

increased by0.17%

Number of package files

87

increased by2.35%

Lines of code

8137

increased by0.39%

Number of lines in readme file

198

increased by4.21%

No dependency changes