Sessão 2 - 31/01

website/package.json

@@ -14,6 +14,7 @@
     "classnames": "^2.2.6",
     "customize-cra": "^1.0.0",
     "import": "0.0.6",
+    "jquery": "^3.6.0",
     "less-loader": "^6.2.0",
     "react": "^16.13.1",
     "react-app-rewired": "^2.1.6",

website/src/components/Listing/Item/index.js

@@ -5,15 +5,22 @@ import './index.less';
 
 export default ({ section, type, image, image_title, image_alt, title, content, link }) => {
   let layout = null;
-  if (type === 'YOUR-CUSTOM-TYPE-HERE') {
-    layout = (
-      <li className="listing__item__YOUR-CUSTOM-TYPE-HERE">
-        <div className={`listing__item__YOUR-CUSTOM-TYPE-HERE__content`}>
-          <h1>{title}</h1>
+  if (type === 'surya-namaskar-a') {
+    layout = (<>
+        <Col>
           <img src={`/images/${section}/${image}`}  alt={ image_alt } title={ image_title } />
           <div dangerouslySetInnerHTML={{ __html: content }}></div>
-        </div>
-      </li>
+          <h1>{title}</h1>
+        </Col>
+        { /*
+          <li className="listing_item" style={{ backgroundImage: `url(/images/${section}/${image})` }}>
+            <div className={`item__${type}`}>
+              <h1>{title}</h1>
+              <div dangerouslySetInnerHTML={{ __html: content }}></div>
+            </div>
+          </li>
+          */ }
+      </>
     );
   } else if(type === 'OTHER-CUSTOM-TYPE-HERE') {
     layout = (
@@ -23,9 +30,11 @@ export default ({ section, type, image, image_title, image_alt, title, content,
     );
   } else {
     layout = (
-      <li className="listing_item" style={{ backgroundImage: `url(/images/${section}/${image})` }}>
-        <div className={`item__${type}`}>
+      <li className="listing__item__YOUR-CUSTOM-TYPE-HERE">
+        teste
+        <div className={`listing__item__YOUR-CUSTOM-TYPE-HERE__content`}>
           <h1>{title}</h1>
+          <img src={`/images/${section}/${image}`}  alt={ image_alt } title={ image_title } />
           <div dangerouslySetInnerHTML={{ __html: content }}></div>
         </div>
       </li>

website/src/components/Listing/index.js

@@ -22,9 +22,9 @@ export default ({section, type, image, image_title, image_alt, title, content, i
       </div>   
     );
 
-    if (type === 'YOUR-CUSTOM-TYPE-HERE') {
+    if (type === 'surya-namaskar-a') {
       listLayout = (
-        <Row className={`listing__${type}`} justify="start">
+        <Row className={`listing__${type}`}>
           { children }
         </Row>
       );

website/src/components/Listing/index.less

@@ -28,9 +28,15 @@
         font-size: 1.2em;
     }
     
-    > div > ul {
-        list-style-type: none;
-        margin: 0;
-        padding: 0;
+    &__surya-namaskar#a {
+        padding: 100px;
+        background: blue;
+        @media only screen and (min-width: 600px) {
+            background: red;
+        }
+        img {
+            width: 100%;
+            height: auto;
+        }
     }
 }