header fix in mobile and front text fix

hasura · May 14, 2019 · d1b3e25 · d1b3e25
1 parent 48e8cb7
commit d1b3e25
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 8 deletions.
diff --git a/community/learn/graphql-tutorials/backend-services/homepage/src/components/Header.js b/community/learn/graphql-tutorials/backend-services/homepage/src/components/Header.js
@@ -9,16 +9,16 @@ class TopBanner extends React.Component {
       <div className={'headerWrapper blueBgColor'}>
         <nav className="navbar navbar-default navbarDefault">
           <div className="container">
-            <div className="navbar-header">
-              <button type="button" className="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
+            <div className="navbar-header navbarHeader">
+              <div className={'logoWrapper'}>
+                <a href="https://hasura.io/" target="_blank" rel="noopener noreferrer"><img className={'img-responsive'} src={logo} alt={'Hasura logo'} /></a>
+              </div>
+              <button type="button" className="navbar-toggle collapsed navbarToggle" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                 <span className="sr-only">Toggle navigation</span>
                 <span className="icon-bar"></span>
                 <span className="icon-bar"></span>
                 <span className="icon-bar"></span>
               </button>
-              <div className={'logoWrapper'}>
-                <a href="https://hasura.io/" target="_blank" rel="noopener noreferrer"><img className={'img-responsive'} src={logo} alt={'Hasura logo'} /></a>
-              </div>
             </div>
             <div id="navbar" className="navbar-collapse collapse">
               <ul className="nav navbar-nav navbar-right navBarWrapper">

diff --git a/community/learn/graphql-tutorials/backend-services/homepage/src/components/WillLearn.js b/community/learn/graphql-tutorials/backend-services/homepage/src/components/WillLearn.js
@@ -51,7 +51,7 @@ class WillLearn extends React.Component {
                 <div className={'flexList'}>
                   <div className={'willLearnList wd100 flexAlign'}>
                     <div className={'willLearnHeader'}>
-                      Frontend Tutorials (Mobile & Web)
+                      Frontend Tutorials <span> (Mobile & Web)</span>
                     </div>
                     {frontend}
                   </div>

diff --git a/community/learn/graphql-tutorials/backend-services/homepage/src/styles/styles.scss b/community/learn/graphql-tutorials/backend-services/homepage/src/styles/styles.scss
@@ -289,6 +289,16 @@ ul
     background-color: transparent;
     border: 0;
     margin-bottom: -1px;
+    .navbarHeader
+    {
+      flex: 1;
+      .navbarToggle
+      {
+        margin-top: 0 !important;
+        margin-bottom: 0 !important;
+      }
+    }
+
   }
   .logoWrapper
   {
@@ -304,7 +314,7 @@ ul
   {
     li
     {
-      padding: 20px;
+      padding: 10px 20px;
       a
       {
         font-family: 'Raleway';
@@ -809,6 +819,12 @@ ul
         display: flex;
         align-items: center;
         color: #2b0785;
+        span
+        {
+          font-size: 16px;
+          font-weight: 400;
+          margin-left: 6px;
+        }
       }
       .listWrapper
       {
@@ -979,6 +995,15 @@ ul
   .headerWrapper
   {
     padding-top: 15px;
+    .navbarDefault
+    {
+      .navbarHeader
+      {
+        display: flex;
+        align-items: center;
+        margin-bottom: 10px;
+      }
+    }
     .navBarWrapper
     {
       li
@@ -991,6 +1016,10 @@ ul
           background-color: #fff;
           position: relative;
           top: 10px;
+          .menuTitle
+          {
+            padding-bottom: 0;
+          }
           .dropdownMenuBgImg
           {
             display: none;
@@ -1012,7 +1041,7 @@ ul
     }
     .logoWrapper
     {
-      text-align: center;
+      text-align: left;
       padding-left: 15px;
       img
       {
@@ -1113,6 +1142,15 @@ ul
       .willLearnList
       {
         margin-top: 30px;
+        .willLearnHeader
+        {
+          font-size: 16px;
+          padding: 0 15px;
+          span
+          {
+            font-size: 12px;
+          }
+        }
       }
     }
   }