13185-Change header and menu. WIP

pandora_console/general/header.php

@@ -140,7 +140,6 @@ echo sprintf('<div id="header_table" class="header_table_%s">', $menuTypeClass);
                 }
             }
 
-            $search_bar .= '<div id="result_order" class="result_order"></div>';
             $search_bar .= '<input id="keywords" name="keywords"';
             if (!isset($config['search_keywords'])) {
                 $search_bar .= "value='".__('Enter keywords to search')."'";
@@ -408,6 +407,27 @@ echo sprintf('<div id="header_table" class="header_table_%s">', $menuTypeClass);
         $modal_box .= '<a href="https://discord.com/invite/xVt2ruSxmr" target="_blank">'.__('Join discord community').'</a>';
         $modal_box .= '</div>';
 
+        // Move help modal (header) fix z-index.
+        $modal_box .= '
+            <script>
+                $(document).ready(function() {
+                    let helpModalIcon = $("#modal-help-content > img");
+                    let helpModal = $("#modal_help");
+                
+                    if (helpModalIcon.length > 0) {
+                    let distanceRight =
+                        $(window).width() - (helpModalIcon.offset().left + helpModalIcon.width());
+                
+                    helpModal.css("z-index", "3");
+                    helpModal.css("position", "fixed");
+                    helpModal.css("top", "16px");
+                    helpModal.css("right", `${Math.floor(distanceRight) + 34}px`);
+                    helpModal.appendTo(document.body);
+                    }
+                });
+            </script>
+        ';
+
         if ($config['activate_feedback'] === '1') {
             $modal_help = html_print_div(
                 [
@@ -893,6 +913,7 @@ echo sprintf('<div id="header_table" class="header_table_%s">', $menuTypeClass);
                 },
                 success: function (data) {
                     $('#result_order').html(data);
+                    resizeSearchHeader()
                 },
                 error: function (data) {
                     console.error("Fatal error in AJAX call to interpreter order", data)
@@ -1215,4 +1236,8 @@ echo sprintf('<div id="header_table" class="header_table_%s">', $menuTypeClass);
         });
     });
 /* ]]> */
+
+$(window).resize(function () { 
+    resizeSearchHeader()
+});
 </script>

pandora_console/include/javascript/pandora.js

@@ -2736,3 +2736,8 @@ function menuTabsShowHide() {
     }
   }
 }
+
+function resizeSearchHeader() {
+  $(".show_result_interpreter").width($("#keywords").outerWidth() - 14);
+  $(".show_result_interpreter").css("left", $("#keywords").position().left + 3);
+}

pandora_console/include/styles/order_interpreter.css

@@ -2,16 +2,18 @@ div.show_result_interpreter {
   background-color: #fff;
   color: #000;
   border: 1px solid #e2e2e2;
-  border-bottom-left-radius: 10px;
+  border-top: 0;
-  border-bottom-right-radius: 10px;
+  border-bottom-left-radius: 18px;
+  border-bottom-right-radius: 18px;
   padding-left: 10px;
   padding-top: 5px;
   padding-bottom: 5px;
   box-shadow: 0px 0px 15px -4px #dadada;
   position: absolute;
-  z-index: 1;
+  z-index: 3;
   width: 300px;
-  top: 45px;
+  top: 48px;
+  left: 50%;
 }
 
 .more_results {
@@ -21,22 +23,24 @@ div.show_result_interpreter {
 }
 
 .results-found {
-  background-image: url("../../images/input_zoom_gray.png");
+  background-image: url("../../images/details.svg");
-  background-position: center right 10px;
+  background-position: center left 20px;
   background-repeat: no-repeat;
   background-size: 17px;
-  background-color: #f2f6f7;
+  background-color: #f6f7fb;
   padding: 0px;
   margin: 0;
-  width: 300px;
+  width: 150px;
-  height: 30px;
+  height: 36px;
   margin-left: 2px;
-  padding-left: 15px;
+  padding-right: 15px;
-  padding-right: 40px;
+  padding-left: 45px;
   color: #777;
   font-size: 8.5pt;
-  border-top-left-radius: 10px;
+  border-top-left-radius: 18px;
-  border-top-right-radius: 10px;
+  border-top-right-radius: 18px;
+  border-bottom-left-radius: 0px;
+  border-bottom-right-radius: 0px;
   border-color: transparent;
 }
 

pandora_console/include/styles/pandora.css

@@ -2794,6 +2794,10 @@ div#pandora_logo_header {
 .header_left {
   display: flex;
   flex-direction: column;
+}
+
+#head,
+#header {
   text-wrap: nowrap;
 }
 
@@ -2809,6 +2813,12 @@ div#pandora_logo_header {
   padding: 0 100px;
 }
 
+@media screen and (max-width: 1300px) {
+  #header_searchbar {
+    padding: 0 30px;
+  }
+}
+
 #header_searchbar #keywords {
   width: 100%;
 }

pandora_console/index.php

@@ -1564,6 +1564,9 @@ while (ob_get_length() > 0) {
     ob_end_flush();
 }
 
+// Results search header.
+echo '<div id="result_order" class="result_order"></div>';
+
 db_print_database_debug();
 echo '</html>';