Search: Full redesign

Co-authored-by: Defenders08 <60748247+Defenders08@users.noreply.github.com>

Web/Presenters/templates/Search/Index.xml

@@ -17,20 +17,27 @@
     {/if}
 {/block}
 
-{block tabs}
-    <form style="margin-left: 12px;">
-        <input name="type" type="hidden" value="{$_GET['type'] ?? 'users'}" />
-        <input name="query" type="text" placeholder="{_"header_search"}" value="{$_GET['query'] ?? ''}" style="width: 90%" />
-        <input type="submit" class="button" value="{_"search_button"}" style="width: 7%" />
-    </form>
-    
-    <p style="margin-left: 15px;">
-        <b>{tr("results", $count)}</b>
-    </p>
-{/block}
-
 {* BEGIN ELEMENTS DESCRIPTION *}
 
+{block tabs}
+    <div {if $type === "users"}id="activetabs"{/if} class="tab">
+        <a {if $type === "users"}id="act_tab_a"{/if} href="/search?type=users">
+            {_users}
+        </a>
+    </div>
+    <div {if $type === "groups"}id="activetabs"{/if} class="tab">
+        <a {if $type === "groups"}id="act_tab_a"{/if} href="/search?type=groups">
+            {_groups}
+        </a>
+    </div>
+
+    <div class="header_search_inputbt">
+        <input name="type" type="hidden" value="{$type ?? 'users'}" />
+        <input type="" name="" class="header_search_input" placeholder="Начните вводить любое имя, название или слово">
+        <button class="button_search">{_search_button}</button>
+    </div>
+{/block}
+
 {block link|strip|stripHtml}
     {$x->getURL()}
 {/block}

Web/static/css/style.css

@@ -1598,3 +1598,76 @@ body.scrolled .toTop:hover {
     margin: 5px;
     border: 1px solid #C0CAD5;
 }
+
+.header_search {
+    background: #f7f7f7;
+    width: 607px;
+    padding: 10px;
+    border-bottom: 1px solid #e1e1e1;
+}
+
+.header_search_inputbt {
+    padding: 10px;
+    border-top: 1px solid #ebebeb;
+    display: flex;
+}
+
+.header_search_input {
+    border: 1px solid #C0CAD5;
+    padding: 3px;
+    padding-left: 19px;
+    font-size: 11px;
+    font-family: tahoma, verdana, arial, sans-serif;
+    width: 549px;
+    background: #fff url('/assets/packages/static/openvk/img/search_icon.png') no-repeat;
+    background-position-x: 4px;
+    background-position-y: 4px;
+}
+
+.button_search {
+    border-radius: 2px;
+    border: #595959;
+    font-size: 11px;
+    outline: none;
+    white-space: nowrap;
+    background: #595959;
+    background-position: 0px -16px;
+    color: #fff;
+    padding: 4px 8px 4px;
+    text-shadow: 0 1px 0 #686868;
+    cursor: pointer;
+    text-decoration: none;
+    margin-left: 10px;
+}
+
+.content_search {
+    width: 607px;
+}
+
+.content_search_list {
+    display: flex;
+    width: 100%;
+    padding: 10px;
+}
+
+.content_search_list:hover {
+    background: #f5f5f5;
+}
+
+.content_search_list_ava img{
+    width: 75px;
+}
+
+.content_search_list_ava{
+    width: 85px;
+}
+
+.content_search_list_name_h4 {
+    color: #2b587a;
+    font-weight: bold;
+}
+
+.content_search_list_span {
+    color: #7b7b7b;
+    margin-top: 5px;
+}

locales/en.strings

@@ -42,6 +42,8 @@
 "register_referer_meta_title" = "$1 invites you to $2!";
 "register_referer_meta_desc" = "Join $1 and many other users at $2!";
 
+"users" = "Users";
+
 /* Profile information */
 
 "select_language" = "Choose language";

locales/ru.strings

@@ -43,6 +43,8 @@
 "register_referer_meta_title" = "$1 приглашает вас в $2!";
 "register_referer_meta_desc" = "Присоединяйтесь к $1 и множеству других пользователей в $2!";
 
+"users" = "Пользователи";
+
 /* Profile information */
 
 "select_language" = "Выбрать язык";