Merge pull request #172 from BuildFire/feat/search-engine-integration

Feat/search engine integration

Author: mas-iota

control/content/assets/css/bf_base.css

@@ -862,4 +862,13 @@ color: var(--c-info);
   min-width: 5rem;
 }
 
+#loader {
+  border: 6px solid #f3f3f3;
+  border-radius: 50%;
+  border-top: 4px solid var(--c-primary);
+  width: 30px;
+  height: 30px;
+  -webkit-animation: spin 1s linear infinite; 
+  animation: spin 1s linear infinite;
+}
 /* Social Item */

control/content/assets/css/dialogComponent.css

@@ -0,0 +1,79 @@
+.subPage.activeDialog {
+    background: #ffffffaa;
+    bottom: 0;
+    display: block;
+    height: 100vh;
+    position: fixed;
+    right: 0;
+    top: 0;
+    width: 100vw;
+    z-index: 999;
+}
+
+.subPage>.subPageContent {
+    display: none;
+    position: fixed;
+    top: 0px;
+    left: 0px;
+    background-color: white;
+}
+
+.subPage.activeFull>.subPageContent {
+    display: block;
+    height: 100%;
+    width: 100%;
+}
+
+.subPage.activeDialog>.subPageContent {
+    display: block;
+    width: 70%;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    overflow: auto;
+    max-height: 90vh;
+    box-shadow: grey 5px 5px 15px;
+    z-index: 1000;
+}
+
+.subPage.activeDialog.loaderDialog>.subPageContent {
+    width: 50%;
+}
+
+.subPage>.subPageContent>.spHeader {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    background: #eef0f0;
+    position: relative;
+    font-size: 15px;
+}
+
+.spHeader h4 {
+    font-size: 18px;
+    font-weight: bold;
+    margin: 0;
+}
+
+.spHeader span.close-modal {
+    color: #5f5f5f;
+    font-size: 20px;
+}
+
+.subPage>.subPageContent>.spFooter {
+    text-align: right;
+    border-top: 1px solid #ddd !important;
+}
+
+.spFooter button {
+    margin-left: 8px;
+}
+
+.required:after {
+    content: " *";
+    color: red;
+}
+
+#rssErrorMessage, #googleErrorMessage {
+    color: red;
+}

control/content/assets/css/style.css

@@ -1,3 +1,7 @@
+.main_view {
+  padding-right: 8px;
+}
+
 /* tooltip */
 .tooltip-container {
     display: flex;
@@ -125,7 +129,7 @@
 #carousel .item.clearfix .col-md-9 .btn::after {
   background-color: var(--c-primary) !important;
   left: unset;
-  right: 70%;
+  right: 72%;
 }
 
 .url-types p .icon-check{