@opencraft/frontend-plugin-sandbox 1.2.0-alpha.2 → 1.2.0-alpha.3

package/dist/components/CatalogBanner.js

@@ -1,12 +1,16 @@
 import React from 'react';
-import { Image, Row, Stack } from '@openedx/paragon';
+import { Image, Row, Col, Stack } from '@openedx/paragon';
 import bannerBg from '../assets/banner-bg.png';
 export const CatalogBanner = () => /*#__PURE__*/React.createElement(Row, {
   direction: "horizontal",
   className: "bg-primary"
+}, /*#__PURE__*/React.createElement(Col, {
+  xl: 7,
+  xs: 12,
+  className: "d-flex align-content-middle"
 }, /*#__PURE__*/React.createElement(Stack, {
   direction: "vertical",
-  className: "justify-content-center px-6",
+  className: "justify-content-center px-6 py-lg-6 py-5 my-lg-4",
   style: {
     maxWidth: '55rem'
   }
@@ -16,20 +20,20 @@ export const CatalogBanner = () => /*#__PURE__*/React.createElement(Row, {
   className: "text-brand-500"
 }, ' Open edX® '), "demo"), /*#__PURE__*/React.createElement("p", {
   className: "h4 text-light-100 "
-}, "OpenClass is a demo site by OpenCraft where you can explore the Open edX platform as a learner or course author.")), /*#__PURE__*/React.createElement(Stack, {
-  className: "justify-content-end",
-  style: {
-    backgroundImage: 'url(../assets/banner-bg.png)'
-  }
+}, "OpenClass is a demo site by OpenCraft where you can explore the Open edX platform as a learner or course author."))), /*#__PURE__*/React.createElement(Col, {
+  xl: 5,
+  xs: 12,
+  className: "d-flex align-content-middle"
+}, /*#__PURE__*/React.createElement(Stack, {
+  className: "justify-content-lg-end justify-content-center"
 }, /*#__PURE__*/React.createElement(Image, {
   src: bannerBg,
+  className: "mt-lg-6",
   style: {
     height: '100%',
     width: '100%',
-    maxHeight: '550px',
-    objectFit: 'contain',
-    objectPosition: 'right top'
+    objectFit: "contain"
   },
   alt: "illustration of a workspace with a computer screen displaying charts and graphs, accompanied by a desk lamp, coffee cup, and potted plant"
-})));
+}))));
 //# sourceMappingURL=CatalogBanner.js.map

package/dist/components/CatalogBanner.js.map

@@ -1 +1 @@
-{"version":3,"file":"CatalogBanner.js","names":["React","Image","Row","Stack","bannerBg","CatalogBanner","createElement","direction","className","style","maxWidth","backgroundImage","src","height","width","maxHeight","objectFit","objectPosition","alt"],"sources":["../../src/components/CatalogBanner.tsx"],"sourcesContent":["import React from 'react';\nimport { Image, Row, Stack } from '@openedx/paragon';\nimport bannerBg from '../assets/banner-bg.png';\n\nexport const CatalogBanner = () => (\n  <Row\n    direction=\"horizontal\"\n    className=\"bg-primary\"\n  >\n    <Stack\n      direction=\"vertical\"\n      className=\"justify-content-center px-6\"\n      style={{ maxWidth: '55rem' }}\n    >\n      <h1 className=\"display-2 text-light-100\">\n        You’re viewing a live\n        <span className=\"text-brand-500\">\n          {' Open edX® '}\n        </span>\n        demo\n      </h1>\n      <p className=\"h4 text-light-100 \">\n        OpenClass is a demo site by OpenCraft where you can explore the\n        Open edX platform as a learner or course author.\n      </p>\n    </Stack>\n    <Stack\n      className=\"justify-content-end\"\n      style={{\n        backgroundImage: 'url(../assets/banner-bg.png)',\n      }}\n    >\n      <Image\n        src={bannerBg}\n        style={{\n          height: '100%',\n          width: '100%',\n          maxHeight: '550px',\n          objectFit: 'contain',\n          objectPosition: 'right top',\n        }}\n        alt=\"illustration of a workspace with a computer screen displaying charts and graphs, accompanied by a desk lamp, coffee cup, and potted plant\"\n      />\n    </Stack>\n  </Row>\n);\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,KAAK,EAAEC,GAAG,EAAEC,KAAK,QAAQ,kBAAkB;AACpD,OAAOC,QAAQ,MAAM,yBAAyB;AAE9C,OAAO,MAAMC,aAAa,GAAGA,CAAA,kBAC3BL,KAAA,CAAAM,aAAA,CAACJ,GAAG;EACFK,SAAS,EAAC,YAAY;EACtBC,SAAS,EAAC;AAAY,gBAEtBR,KAAA,CAAAM,aAAA,CAACH,KAAK;EACJI,SAAS,EAAC,UAAU;EACpBC,SAAS,EAAC,6BAA6B;EACvCC,KAAK,EAAE;IAAEC,QAAQ,EAAE;EAAQ;AAAE,gBAE7BV,KAAA,CAAAM,aAAA;EAAIE,SAAS,EAAC;AAA0B,GAAC,4BAEvC,eAAAR,KAAA,CAAAM,aAAA;EAAME,SAAS,EAAC;AAAgB,GAC7B,aACG,CAAC,QAEL,CAAC,eACLR,KAAA,CAAAM,aAAA;EAAGE,SAAS,EAAC;AAAoB,GAAC,kHAG/B,CACE,CAAC,eACRR,KAAA,CAAAM,aAAA,CAACH,KAAK;EACJK,SAAS,EAAC,qBAAqB;EAC/BC,KAAK,EAAE;IACLE,eAAe,EAAE;EACnB;AAAE,gBAEFX,KAAA,CAAAM,aAAA,CAACL,KAAK;EACJW,GAAG,EAAER,QAAS;EACdK,KAAK,EAAE;IACLI,MAAM,EAAE,MAAM;IACdC,KAAK,EAAE,MAAM;IACbC,SAAS,EAAE,OAAO;IAClBC,SAAS,EAAE,SAAS;IACpBC,cAAc,EAAE;EAClB,CAAE;EACFC,GAAG,EAAC;AAA2I,CAChJ,CACI,CACJ,CACN","ignoreList":[]}
+{"version":3,"file":"CatalogBanner.js","names":["React","Image","Row","Col","Stack","bannerBg","CatalogBanner","createElement","direction","className","xl","xs","style","maxWidth","src","height","width","objectFit","alt"],"sources":["../../src/components/CatalogBanner.tsx"],"sourcesContent":["import React from 'react';\nimport { Image, Row, Col, Stack } from '@openedx/paragon';\nimport bannerBg from '../assets/banner-bg.png';\n\nexport const CatalogBanner = () => (\n  <Row\n    direction=\"horizontal\"\n    className=\"bg-primary\"\n  >\n    <Col xl={7} xs={12} className={\"d-flex align-content-middle\"}>\n        <Stack\n          direction=\"vertical\"\n          className=\"justify-content-center px-6 py-lg-6 py-5 my-lg-4\"\n          style={{ maxWidth: '55rem' }}\n        >\n          <h1 className=\"display-2 text-light-100\">\n            You’re viewing a live\n            <span className=\"text-brand-500\">\n              {' Open edX® '}\n            </span>\n            demo\n          </h1>\n          <p className=\"h4 text-light-100 \">\n            OpenClass is a demo site by OpenCraft where you can explore the\n            Open edX platform as a learner or course author.\n          </p>\n        </Stack>\n    </Col>\n    <Col xl={5} xs={12} className={\"d-flex align-content-middle\"}>\n        <Stack\n          className=\"justify-content-lg-end justify-content-center\"\n        >\n          <Image\n            src={bannerBg}\n            className=\"mt-lg-6\"\n            style={{\n              height: '100%',\n              width: '100%',\n              objectFit: \"contain\",\n            }}\n            alt=\"illustration of a workspace with a computer screen displaying charts and graphs, accompanied by a desk lamp, coffee cup, and potted plant\"\n          />\n        </Stack>\n      </Col>\n  </Row>\n);\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,KAAK,EAAEC,GAAG,EAAEC,GAAG,EAAEC,KAAK,QAAQ,kBAAkB;AACzD,OAAOC,QAAQ,MAAM,yBAAyB;AAE9C,OAAO,MAAMC,aAAa,GAAGA,CAAA,kBAC3BN,KAAA,CAAAO,aAAA,CAACL,GAAG;EACFM,SAAS,EAAC,YAAY;EACtBC,SAAS,EAAC;AAAY,gBAEtBT,KAAA,CAAAO,aAAA,CAACJ,GAAG;EAACO,EAAE,EAAE,CAAE;EAACC,EAAE,EAAE,EAAG;EAACF,SAAS,EAAE;AAA8B,gBACzDT,KAAA,CAAAO,aAAA,CAACH,KAAK;EACJI,SAAS,EAAC,UAAU;EACpBC,SAAS,EAAC,kDAAkD;EAC5DG,KAAK,EAAE;IAAEC,QAAQ,EAAE;EAAQ;AAAE,gBAE7Bb,KAAA,CAAAO,aAAA;EAAIE,SAAS,EAAC;AAA0B,GAAC,4BAEvC,eAAAT,KAAA,CAAAO,aAAA;EAAME,SAAS,EAAC;AAAgB,GAC7B,aACG,CAAC,QAEL,CAAC,eACLT,KAAA,CAAAO,aAAA;EAAGE,SAAS,EAAC;AAAoB,GAAC,kHAG/B,CACE,CACN,CAAC,eACNT,KAAA,CAAAO,aAAA,CAACJ,GAAG;EAACO,EAAE,EAAE,CAAE;EAACC,EAAE,EAAE,EAAG;EAACF,SAAS,EAAE;AAA8B,gBACzDT,KAAA,CAAAO,aAAA,CAACH,KAAK;EACJK,SAAS,EAAC;AAA+C,gBAEzDT,KAAA,CAAAO,aAAA,CAACN,KAAK;EACJa,GAAG,EAAET,QAAS;EACdI,SAAS,EAAC,SAAS;EACnBG,KAAK,EAAE;IACLG,MAAM,EAAE,MAAM;IACdC,KAAK,EAAE,MAAM;IACbC,SAAS,EAAE;EACb,CAAE;EACFC,GAAG,EAAC;AAA2I,CAChJ,CACI,CACJ,CACJ,CACN","ignoreList":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opencraft/frontend-plugin-sandbox",
-  "version": "1.2.0-alpha.2",
+  "version": "1.2.0-alpha.3",
   "description": "Plugin for custom headers and footers in OpenCraft's sandboxes",
   "repository": {
     "type": "git",

package/src/components/CatalogBanner.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Image, Row, Stack } from '@openedx/paragon';
+import { Image, Row, Col, Stack } from '@openedx/paragon';
 import bannerBg from '../assets/banner-bg.png';
 
 export const CatalogBanner = () => (
@@ -7,40 +7,40 @@ export const CatalogBanner = () => (
     direction="horizontal"
     className="bg-primary"
   >
-    <Stack
-      direction="vertical"
-      className="justify-content-center px-6"
-      style={{ maxWidth: '55rem' }}
-    >
-      <h1 className="display-2 text-light-100">
-        You’re viewing a live
-        <span className="text-brand-500">
-          {' Open edX® '}
-        </span>
-        demo
-      </h1>
-      <p className="h4 text-light-100 ">
-        OpenClass is a demo site by OpenCraft where you can explore the
-        Open edX platform as a learner or course author.
-      </p>
-    </Stack>
-    <Stack
-      className="justify-content-end"
-      style={{
-        backgroundImage: 'url(../assets/banner-bg.png)',
-      }}
-    >
-      <Image
-        src={bannerBg}
-        style={{
-          height: '100%',
-          width: '100%',
-          maxHeight: '550px',
-          objectFit: 'contain',
-          objectPosition: 'right top',
-        }}
-        alt="illustration of a workspace with a computer screen displaying charts and graphs, accompanied by a desk lamp, coffee cup, and potted plant"
-      />
-    </Stack>
+    <Col xl={7} xs={12} className={"d-flex align-content-middle"}>
+        <Stack
+          direction="vertical"
+          className="justify-content-center px-6 py-lg-6 py-5 my-lg-4"
+          style={{ maxWidth: '55rem' }}
+        >
+          <h1 className="display-2 text-light-100">
+            You’re viewing a live
+            <span className="text-brand-500">
+              {' Open edX® '}
+            </span>
+            demo
+          </h1>
+          <p className="h4 text-light-100 ">
+            OpenClass is a demo site by OpenCraft where you can explore the
+            Open edX platform as a learner or course author.
+          </p>
+        </Stack>
+    </Col>
+    <Col xl={5} xs={12} className={"d-flex align-content-middle"}>
+        <Stack
+          className="justify-content-lg-end justify-content-center"
+        >
+          <Image
+            src={bannerBg}
+            className="mt-lg-6"
+            style={{
+              height: '100%',
+              width: '100%',
+              objectFit: "contain",
+            }}
+            alt="illustration of a workspace with a computer screen displaying charts and graphs, accompanied by a desk lamp, coffee cup, and potted plant"
+          />
+        </Stack>
+      </Col>
   </Row>
 );