Updated Iframe

eea · Oct 11, 2020 · a804b74 · a804b74
1 parent b542a72
commit a804b74
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 19 deletions.
diff --git a/src/components/manage/Blocks/Iframe/Edit.jsx b/src/components/manage/Blocks/Iframe/Edit.jsx
@@ -21,10 +21,26 @@ const getSchema = (props) => {
       title: 'Mobile url',
       type: 'text',
     },
+    iframeId: {
+      title: 'Id',
+      type: 'text',
+    },
     title: {
       title: 'Title',
       type: 'text',
     },
+    titleClassName: {
+      title: 'Title classname',
+      type: 'text',
+    },
+    description: {
+      title: 'Description',
+      widget: 'textarea',
+    },
+    descriptionClassName: {
+      title: 'Description classname',
+      type: 'text',
+    },
     width: {
       title: 'Width',
       type: 'text',

diff --git a/src/components/manage/Blocks/Iframe/View.jsx b/src/components/manage/Blocks/Iframe/View.jsx
@@ -4,6 +4,7 @@ import { compose } from 'redux';
 import { connect } from 'react-redux';
 import Iframe from 'react-iframe';
 import qs from 'query-string';
+import cx from 'classnames';
 import './style.css';
 
 const useWindowSize = () => {
@@ -20,7 +21,6 @@ const useWindowSize = () => {
 };
 
 const View = ({ content, ...props }) => {
-  let showIframe = true;
   const [discodataQuery, setDiscodataQuery] = useState({});
   const [requiredQueries, setRequiredQueries] = useState([]);
   const [flags, setFlags] = useState({});
@@ -35,7 +35,11 @@ const View = ({ content, ...props }) => {
     desktopUrl = '',
     tabletUrl = '',
     mobileUrl = '',
+    iframeId = null,
     title = '',
+    titleClassName = '',
+    description = '',
+    descriptionClassName = '',
     width = '100%',
     height = 'auto',
   } = data;
@@ -174,20 +178,28 @@ const View = ({ content, ...props }) => {
       {!flagsState &&
       requiredQueries.length ===
         requiredQueries.filter((query) => discodataQuery[query]).length ? (
-        <Iframe
-          title={title}
-          url={applyQueryParameters(getUrlByWidth(), {
-            ...discodataQuery,
-            ...getPresetQueries(),
-          })}
-          width={width}
-          height={height}
-          className="embeded-iframe"
-          display="initial"
-          position="relative"
-          overflow={overflow ? 'visible' : 'hidden'}
-          scrolling={false}
-        />
+        <div id={iframeId}>
+          {title ? <h2 className={cx(titleClassName)}>{title}</h2> : ''}
+          {description ? (
+            <p className={cx(descriptionClassName)}>{description}</p>
+          ) : (
+            ''
+          )}
+          <Iframe
+            title={title}
+            url={applyQueryParameters(getUrlByWidth(), {
+              ...discodataQuery,
+              ...getPresetQueries(),
+            })}
+            width={width}
+            height={height}
+            className="embeded-iframe"
+            display="initial"
+            position="relative"
+            overflow={overflow ? 'visible' : 'hidden'}
+            scrolling={false}
+          />
+        </div>
       ) : (
         ''
       )}

diff --git a/theme/site/globals/site.overrides b/theme/site/globals/site.overrides
@@ -1158,8 +1158,8 @@ a {
     z-index: 3;
     color: white;
     font-size: 14px;
-    background: #1172c4;
-    border-color: #1172c4;
+    background: #4296B2;
+    border-color: #4296B2;
     border-style: solid;
     border-width: 2px;
     border-radius: 22px;
@@ -1171,7 +1171,7 @@ a {
     &:hover {
       color: white;
       opacity: 0.9;
-      background: #1172c4;
+      background: #4296B2;
       border-color: white;
       transition: all 0.2s linear;
     }
@@ -1314,6 +1314,9 @@ body.has-sidebar {
       }
       &.grey-menu {
         background-color: #EDEDED !important;
+        // &.item {
+        //   align-items: stretch !important;
+        // }
         .item {
           color: #000 !important;
           &:before {
@@ -1343,7 +1346,7 @@ body.has-sidebar {
         margin-left: auto !important;
         margin-right: auto !important;
         font-size: 18px;
-        align-items: center;
+        align-items: flex-end;
         &:before {
           display: none;
         }