domingo, 14 de febrero de 2016, 02:12:39 CET

package.json

@@ -41,6 +41,7 @@
     ]
   },
   "dependencies": {
+    "classnames": "2.2.3",
     "normalize.css": "^3.0.3",
     "react": "^0.14.7",
     "react-dom": "^0.14.7"

src/app.js

@@ -1,8 +1,7 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
 
-import './styles/style.scss'
-import './styles/3dgrid.scss'
+import './styles/index.scss'
 
 import Layout from './pages/layout'
 

src/components/ad/content.js

@@ -0,0 +1,21 @@
+import React from 'react'
+import OffertContent from '../offert/content'
+import OffertForm from '../offert/form'
+
+const ContentAd = ({text, offerts, url}) => (
+  <div className='singleAddContainer '>
+    <img src={url} alt={text} />
+    <h2 className='header'>Descripción del producto</h2>
+    <p className='description'>{text}</p>
+    <div className='divider'></div>
+    <div id='offerts'>
+      <div className='ui comments'>
+        {offerts.map((offert, key) => <OffertContent key={key} {...offert} />) }
+        <OffertForm />
+      </div>
+    </div>
+  </div>
+)
+
+export default ContentAd
+

src/components/ad/preview.js

@@ -0,0 +1,8 @@
+import React from 'react'
+
+const PreviewAd = ({text, offerts, url}) => (
+  <figure><img src={url} alt={text} /></figure>
+)
+
+export default PreviewAd
+

src/components/ads/index.js

@@ -1,24 +1,38 @@
 import React from 'react'
-import Ad from '../ad'
+import ReactDOM from 'react-dom'
+import PreviewAd from '../ad/preview'
+import ContentAd from '../ad/content'
 
-const Ads = ({grid}) => {
-  return (
+const Grid3D = window.grid3D
+
+export default class Ads extends React.Component {
+
+  static get propTypes () {
+    return {
+      grid: React.PropTypes.array
+    }
+  }
+
+  componentDidMount () {
+    this.grid3DComponent = new Grid3D(ReactDOM.findDOMNode(this))
+  }
+
+  render () {
+    const {grid} = this.props
+    return (
       <section className='grid3d vertical container' id='grid3d'>
          <div className='grid-wrap ui container'>
              <div className='grid'>
-    {
-      grid.map((ad) => {
-        return (
-            <figure>
-                <Ad {...ad}/>
-            </figure>
-        )
-      })
-    }
+              {grid.map((ad, key) => (<PreviewAd key={key} {...ad}/>))}
             </div>
         </div>
-    </section>
-  )
+        <div className='content'>
+          {grid.map((ad, key) => (<ContentAd key={key} {...ad}/>))}
+          <span className='loading'></span>
+          <span className='icon3d close-content'></span>
+        </div>
+      </section>
+    )
+  }
 }
 
-export default Ads

src/components/offert/content.js

@@ -0,0 +1,31 @@
+import React from 'react'
+import cx from 'classnames'
+
+const OffertContent = ({text, name, url, author}) => {
+  const offertClass = cx('comment', {
+    author: author
+  })
+
+  return (
+    <div className={offertClass}>
+        <span className='author'>{name}</span>
+        <div className='metadata'>
+            <span className='date'>Hoy a las 5:42PM</span>
+        </div>
+        <div className='imageComment'>
+            <img src='http://placehold.it/600x600' alt='lorem' className='ui fluid image' />
+        </div>
+        <div className='text'>{text}</div>
+    </div>
+  )
+}
+
+OffertContent.defaultProps = {
+  text: 'Este anuncio no tiene texto',
+  name: 'Anónimo',
+  url: 'http://placehold.it/200x200',
+  author: false
+}
+
+export default OffertContent
+

src/components/offert/form.js

@@ -0,0 +1,26 @@
+import React from 'react'
+
+const OffertForm = ({}) => (
+  <form className='ui reply form'>
+    <h2 className='header'>Ofertar</h2>
+      <div className='field'>
+        <input type='text' name='name' placeholder='Nombre' />
+      </div>
+      <div className='field'>
+          <textarea></textarea>
+          <div className='countCharacters'>
+              123
+          </div>
+      </div>
+      <input type='file' name='addPhoto' id='addPhoto' value='' />
+      <label htmlFor='addPhoto'>Arrastra una foto o haz click aquí</label>
+
+      <div className='ui blue labeled submit icon button'>
+        <i className='icon send'></i> Enviar
+      </div>
+  </form>
+)
+
+export default OffertForm
+
+

src/pages/layout.js

@@ -8,12 +8,12 @@ const Layout = () => {
     <div>
       <Header />
       <Ads grid={[
-        {url: 'http://placehold.it/200x200', text: 'text de la primera card', offerts: Math.floor(Math.random() * 99) + 1},
-        {url: 'http://placehold.it/200x200', text: 'text de la segunda card', offerts: Math.floor(Math.random() * 99) + 1},
-        {url: 'http://placehold.it/200x200', text: 'text de la tercera card', offerts: Math.floor(Math.random() * 99) + 1},
-        {url: 'http://placehold.it/200x200', text: 'text de la cuarta card', offerts: Math.floor(Math.random() * 99) + 1},
-        {url: 'http://placehold.it/200x200', text: 'text de la quinta card', offerts: Math.floor(Math.random() * 99) + 1},
-        {url: 'http://placehold.it/200x200', text: 'text de la sexta card', offerts: Math.floor(Math.random() * 99) + 1}
+        {url: 'http://placehold.it/200x200', text: 'text de la primera card', offerts: [{text: 'Oferta Uno', name: 'Nombre', author: true}, {}]},
+        {url: 'http://placehold.it/200x200', text: 'text de la segunda card', offerts: [{text: 'Oferta Uno'}]},
+        {url: 'http://placehold.it/200x200', text: 'text de la tercera card', offerts: [{text: 'Oferta Uno'}]},
+        {url: 'http://placehold.it/200x200', text: 'text de la cuarta card', offerts: [{text: 'Oferta Uno'}]},
+        {url: 'http://placehold.it/200x200', text: 'text de la quinta card', offerts: [{text: 'Oferta Uno'}]},
+        {url: 'http://placehold.it/200x200', text: 'text de la sexta card', offerts: [{text: 'Oferta Uno'}]}
       ]} />
     </div>
   )

src/styles/index.scss

@@ -0,0 +1,2 @@
+@import '3dgrid';
+@import 'style';

webpack.config.js

@@ -19,6 +19,10 @@ module.exports = getConfig({
             '<div id="root"></div>',
             '<script src="//oss.maxcdn.com/jquery/2.2.0/jquery.min.js"></script>',
             '<script src="//oss.maxcdn.com/semantic-ui/2.1.8/semantic.min.js"></script>',
+            '<script src="https://cdn.rawgit.com/anonymous/ab411aaa959cf07202b9/raw/3bfd81f07fb3be4304506837d4b5a83204ee2033/modernizr.js"></script>',
+            '<script src="https://cdn.rawgit.com/anonymous/466b36bb4457803338d4/raw/67915fa0a6265d707a7eaa986258eee7230ad753/classie.js"></script>',
+            '<script src="https://cdn.rawgit.com/anonymous/a18cbdb0a461368ada31/raw/4b0d530a3013ce8c7fb12c1ee8e1bff6fac86e27/helper.js"></script>',
+            '<script src="https://cdn.rawgit.com/anonymous/ab411aaa959cf07202b9/raw/3bfd81f07fb3be4304506837d4b5a83204ee2033/grid3d.js"></script>',
             '<script src="' + data.main + '"></script>',
           '</body>',
         '</html>'