Search button mobile (#59)

* refactor: change viewbox of search icon * feat: search icon on sidebar - import icons - add anilink and icons component - add initial styles * refactor: remove home link of search page * refactor: update search icon * style: update sizes ans margins of search page * feat(sidebar): search icon - add search link - add search icon - add mobile styles of search icon - update styles of both buttons * chore: update to version 1.2.2
dulcetti · Jun 2, 2020 · 0d1f131 · 0d1f131
1 parent 30fc116
commit 0d1f131
Show file tree

Hide file tree

Showing 6 changed files with 62 additions and 30 deletions.
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "bruno-dulcetti-site",
   "description": "Bruno Dulcetti - web standards, css, xhtml e tecnologia em geral.",
-  "version": "1.2.1",
+  "version": "1.2.2",
   "author": "Bruno Dulcetti <brunodulcetti@gmail.com>",
   "scripts": {
     "build": "yarn clean && gatsby build",

diff --git a/src/components/search/styles.js b/src/components/search/styles.js
@@ -23,13 +23,14 @@ export const SearchWrapper = styled.section`
   }
 
   .ais-Stats {
+    font-size: 0.9rem;
+    margin-bottom: 30px;
+
     ${media.lessThan('large')`
-      margin-bottom: 30px;
       text-align: center;
     `}
 
     ${media.greaterThan('large')`
-      margin-bottom: 50px;
       text-align: right;
     `}
   }
@@ -54,9 +55,9 @@ export const SearchWrapper = styled.section`
     width: 100%;
 
     ${media.lessThan('large')`
-      border-radius: 15px;
-      font-size: 1.25rem;
-      padding-left: 1.25rem;
+      border-radius: 10px;
+      font-size: 1.15rem;
+      padding-left: 1rem;
     `}
 
     ${media.greaterThan('large')`

diff --git a/src/components/sidebar/index.js b/src/components/sidebar/index.js
@@ -5,6 +5,7 @@ import Img from 'gatsby-image';
 import * as S from './styles';
 import { themes } from '../../styles/themes';
 import Navigation from '../navigation';
+import Icons from '../icons';
 
 export default function Sidebar() {
   const [isOpen, setOpen] = useState(false);
@@ -46,7 +47,14 @@ export default function Sidebar() {
       <Navigation isOpen={isOpen} />
 
       <S.Text>© {new Date().getFullYear()}, Todos os fodasses reservados.</S.Text>
-      <S.ToggleOpenClose onClick={toggleMenu} className={isOpen && 'active'}></S.ToggleOpenClose>
+      <S.SidebarIcons>
+        <S.SearchLink to="/busca/">
+          <S.SearchLinkWrap>
+            <Icons name="search" />
+          </S.SearchLinkWrap>
+        </S.SearchLink>
+        <S.ToggleOpenClose onClick={toggleMenu} className={isOpen && 'active'}></S.ToggleOpenClose>
+      </S.SidebarIcons>
     </S.Sidebar>
   );
 }
diff --git a/src/components/sidebar/styles.js b/src/components/sidebar/styles.js
@@ -27,7 +27,7 @@ export const Sidebar = styled.aside`
     display: flex;
     height: 55px;
     justify-content: space-between;
-    padding: 0 15px;
+    padding-left: 15px;
     width: 100%;
   `}
 `;
@@ -74,24 +74,59 @@ export const Text = styled.p`
   `}
 `;
 
-export const ToggleOpenClose = styled.button`
+export const SidebarIcons = styled.div`
+  ${media.lessThan('large')`
+    display: inline-flex;
+    height: 100%;
+  `}
+
   ${media.greaterThan('large')`
-    display:none;
+    display: none;
   `}
+`;
 
+export const SearchLink = styled(AniLink)`
+  ${media.lessThan('large')`
+    align-items: center;
+    border-left: 1px solid ${themes.palette.general.borders};
+    border-right: 1px solid ${themes.palette.general.borders};
+    display: inline-flex;
+    height: inherit;
+    padding: 0 15px;
+  `}
+`;
+
+export const SearchLinkWrap = styled.span`
+  ${media.lessThan('large')`
+    display: block;
+    height: 28px;
+    vertical-align: middle;
+    width: 28px;
+
+    > svg {
+      height: inherit;
+      width: inherit;
+    }
+  `}
+`;
+
+export const ToggleOpenClose = styled.button`
   ${media.lessThan('large')`
     border: 0;
-    height: 32px;
+    display: inline-block;
+    height: inherit;
+    padding: 0 15px;
     position: relative;
-    width: 32px;
+    vertical-align: middle;
+    width: 56px;
     z-index: 3;
 
     &:not(.active) {
-      background: url('/assets/images/icons/menu.svg') no-repeat;
+      background: url('/assets/images/icons/menu.svg') no-repeat center;
     }
 
     &.active {
-      background: url('/assets/images/icons/close.svg') no-repeat;
+      background: url('/assets/images/icons/close.svg') no-repeat center;
     }
   `}
 `;
diff --git a/src/components/svgs/index.js b/src/components/svgs/index.js
@@ -179,10 +179,10 @@ export default function Svgs() {
         }
         ,
         {
-          <symbol id="search" viewBox="0 0 32 32">
+          <symbol id="search" viewBox="0 0 33 33">
             <path
-              fill="#666"
-              d="M445,386.7l-84.8-85.9c13.8-24.1,21-50.9,21-77.9c0-87.6-71.2-158.9-158.6-158.9C135.2,64,64,135.3,64,222.9  c0,87.6,71.2,158.9,158.6,158.9c27.9,0,55.5-7.7,80.1-22.4l84.4,85.6c1.9,1.9,4.6,3.1,7.3,3.1c2.7,0,5.4-1.1,7.3-3.1l43.3-43.8  C449,397.1,449,390.7,445,386.7z M222.6,125.9c53.4,0,96.8,43.5,96.8,97c0,53.5-43.4,97-96.8,97c-53.4,0-96.8-43.5-96.8-97  C125.8,169.4,169.2,125.9,222.6,125.9z"
+              fill="#666666"
+              d="m32.596298,27.69481l-7.129433,-7.221914c1.160214,-2.026172 1.765544,-4.279342 1.765544,-6.549326c0,-7.364839 -5.986034,-13.35928 -13.334058,-13.35928c-7.348025,0 -13.334058,5.994441 -13.334058,13.35928c0,7.364839 5.986034,13.35928 13.334058,13.35928c2.345651,0 4.66608,-0.647366 6.734288,-1.883247l7.095804,7.196692c0.15974,0.15974 0.386738,0.260628 0.613737,0.260628c0.226998,0 0.453997,-0.092481 0.613737,-0.260628l3.640383,-3.68242c0.336294,-0.344701 0.336294,-0.882772 0,-1.219066zm-18.697948,-21.926371c4.489525,0 8.138315,3.657198 8.138315,8.15513c0,4.497933 -3.64879,8.15513 -8.138315,8.15513c-4.489525,0 -8.138315,-3.657198 -8.138315,-8.15513c0,-4.497933 3.64879,-8.15513 8.138315,-8.15513z"
             />
           </symbol>
         }

diff --git a/src/pages/busca.js b/src/pages/busca.js
@@ -13,19 +13,7 @@ export default function SearchPage() {
       <S.PagesWrap>
         <S.PageTitle>Busca</S.PageTitle>
         <S.PageText>
-          Encontre o que você procura nesse formulário. Digite o(s) termo(s) que você deseja e
-          aguarde os resultados aparecerem
-        </S.PageText>
-        <S.PageText className="text-right">
-          <S.BackLinkSearch
-            className="link-animated"
-            cover
-            direction="left"
-            bg={themes.palette.general.bgTransition}
-            duration={0.6}
-            to="/">
-            Voltar para a Listagem de Posts &raquo;
-          </S.BackLinkSearch>
+          Digite o(s) termo(s) que você deseja e aguarde os resultados aparecerem
         </S.PageText>
         <Search />
       </S.PagesWrap>