From f55e22d5fe3f9121b7ed81d0c3f8c6a094dff45c Mon Sep 17 00:00:00 2001
From: Konstantin Chernenko <kb.chernenko@gmail.com>
Date: Wed, 24 May 2023 17:08:18 +0200
Subject: update mobile view and some bugs (#2836)

* Fix dark theme bugs: mobile TOC is visible on 1px and has white background, menu icon is black

* Refactoring css styles for header controls

* Change header responsive layout

* Change header responsive layout

* Fix scrollable columns for any header size

* Remove main content mobile spacing

* Change style for platform filters and labels

* Fix: add burger icon into dist

* Fix: long code token in mobile view

* Fix: color in filter selector

* Fix: long token in keyValue for desktop

* Fix: add spacing for iPad Mini

* Fix: dropdown for multiple versions

* update platform brand colors

* Fix: sample spacing, blockquote, playground initialize

* Safari fix outline for platform tags

* Fix non-js main content for better SEO

* Fix outline for safari browser

* Add consistent vertical spacing for header. It should normalize subpixel artifacts and centred content.

* Update manual for custom logo

* Add comment for playground

* Hide copy button for non-js user

* fix; use google fonts

* feat; change style for platform in platform-tags

* Revert Inter as defult font

* Add breaks for CONSTANTS

* incorrect non-js script position

* less specific selector for article links
---
 .../src/main/components/assets/searchIcon.svg      |  6 ++--
 .../src/main/components/search/search.scss         | 36 ++++++++++++++--------
 2 files changed, 26 insertions(+), 16 deletions(-)

(limited to 'plugins/base/frontend/src/main/components')

diff --git a/plugins/base/frontend/src/main/components/assets/searchIcon.svg b/plugins/base/frontend/src/main/components/assets/searchIcon.svg
index 159f2578..3fa1f24f 100644
--- a/plugins/base/frontend/src/main/components/assets/searchIcon.svg
+++ b/plugins/base/frontend/src/main/components/assets/searchIcon.svg
@@ -1,3 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-    <path d="M19.64 18.36l-6.24-6.24a7.52 7.52 0 1 0-1.28 1.28l6.24 6.24zM7.5 13.4a5.9 5.9 0 1 1 5.9-5.9 5.91 5.91 0 0 1-5.9 5.9z"/>
-</svg>
\ No newline at end of file
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M23.8469 14.8611C22.6607 12.4913 20.2362 10.9961 17.5861 11C14.5427 10.9989 11.8476 12.965 10.9197 15.8634C9.99166 18.7619 11.0436 21.9277 13.5217 23.6944C15.9998 25.4611 19.3356 25.4233 21.7731 23.601L27.8791 29.707L29.2931 28.293L23.1861 22.187C24.7773 20.0677 25.0332 17.2309 23.8469 14.8611ZM22.5861 18C22.5861 20.7614 20.3475 23 17.5861 23C16.26 23 14.9882 22.4732 14.0506 21.5355C13.1129 20.5979 12.5861 19.3261 12.5861 18C12.5861 15.2386 14.8247 13 17.5861 13C20.3475 13 22.5861 15.2386 22.5861 18Z" fill="white"/>
+</svg>
diff --git a/plugins/base/frontend/src/main/components/search/search.scss b/plugins/base/frontend/src/main/components/search/search.scss
index 780ea6b3..ebb102d3 100644
--- a/plugins/base/frontend/src/main/components/search/search.scss
+++ b/plugins/base/frontend/src/main/components/search/search.scss
@@ -1,24 +1,34 @@
 $font-color: hsla(0, 0%, 100%, 0.8);
 $secondary-font-color: hsla(0, 0%, 100%, 0.6);
 
-.search {
-  button {
-    margin-top: 10px;
-
-    cursor: pointer;
+#pages-search {
+  cursor: pointer;
+  border: none;
+  border-radius: 50%;
+  background: transparent;
+  fill: #fff;
+  fill: var(--dark-mode-and-search-icon-color);
+
+  &:focus {
+    outline: none;
+  }
 
-    border: none;
-    background: var(--color-dark);
-    fill: #fff;
-    fill: var(--dark-mode-and-search-icon-color);
+  &:hover {
+    background: var(--white-10);
+  }
+}
 
-    &:focus {
-      outline: none;
-    }
+.search {
+  &, [data-test="ring-select"], [data-test="ring-tooltip"], [data-test="ring-select_focus"], #pages-search {
+    display: inline-block;
+    padding: 0;
+    margin: 0;
+    font-size: 0;
+    line-height: 0;
   }
 }
 
-.search-hotkey-popup{
+.search-hotkey-popup {
   background-color: var(--background-color) !important;
   padding: 4px;
 }
-- 
cgit