Improvements to the mobile experience with the navbar. Now you are ab…

…le to toggle the navbar the same way you are able to do in Desktop. To open the header, a new icon will be in the top left corner. If the position of the icon is troublesome, it will be moved.
MemeLabs · Jul 16, 2023 · 930f33a · 930f33a
1 parent fdaf2f3
commit 930f33a
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 11 deletions.
diff --git a/src/components/Header.jsx b/src/components/Header.jsx
@@ -21,7 +21,7 @@ import { faComments } from '@fortawesome/free-solid-svg-icons';
 import '../css/Header';
 
 import type { State } from '../redux/types';
-import { toggleChat, showChat, CHAT_HOST_SERVICE, CHAT_HOST_STRIMS, CHAT_HOST_DGG } from '../actions';
+import { toggleChat, showChat, showHeader, CHAT_HOST_SERVICE, CHAT_HOST_STRIMS, CHAT_HOST_DGG } from '../actions';
 import { supportedChatServices } from '../util/supported-chats';
 import isVod from '../util/is-vod';
 import HeaderForm from './HeaderForm';
@@ -31,6 +31,7 @@ type OwnProps = {||};
 type Props = {|
   ...OwnProps,
   +chatClosed?: boolean,
+  +headerClosed?: boolean,
   +currentStreamService?: string | null,
   +history: BrowserHistory,
   classes: string,
@@ -40,12 +41,14 @@ type Props = {|
   +isStrimsChat: boolean,
   +rustlerCount: number[] | null,
   +showChat: () => {},
+  +showHeader: () => {},
   +showDggChat: boolean,
   +toggleChat: (host: mixed) => {}
 |};
 
 const Header = ({
   chatClosed,
+  headerClosed,
   currentStreamService,
   history,
   classes,
@@ -55,6 +58,7 @@ const Header = ({
   isStrimsChat,
   rustlerCount,
   showChat,
+  showHeader,
   showDggChat,
   toggleChat
 }: Props) => {
@@ -102,10 +106,17 @@ const Header = ({
     </div>
   );
 
+  let openHeader = !headerClosed ? null : (
+    <div title="Open Header" className='open-header-mobile-btn' onClick={showHeader}>
+       <span className='open-header-caret-mobile'>&#8250;</span>
+    </div>
+  );
+
   return (
     <>
     <Navbar expand='lg' variant='dark' className={classes}>
       {openChat}
+      {openHeader}
       <Navbar.Brand>
         <Link className='navbar-brand' to='/'>Strims</Link>
       </Navbar.Brand>
@@ -187,6 +198,7 @@ function mapStateToProps(state: State): $Shape<Props> {
     rustlerCount: state.streams[state.stream] ? [state.streams[state.stream].rustlers, state.streams[state.stream].viewers] : null,
     showDggChat: Boolean(idx(state, _ => _.self.profile.data.show_dgg_chat)),
     chatClosed: !state.ui.showChat,
+    headerClosed: !state.ui.showHeader,
   };
 }
 
@@ -196,6 +208,7 @@ export default compose(
     {
       toggleChat,
       showChat,
+      showHeader,
     }
   )
 )(Header);
diff --git a/src/components/RoutesWithChat.jsx b/src/components/RoutesWithChat.jsx
@@ -95,6 +95,7 @@ export default compose(
       chatSize: state.ui.chatSize,
       showLeftChat: idx(state, _ => _.self.profile.data.left_chat),
       chatClosed: !state.ui.showChat || !state.self.isLoggedIn,
+      headerClosed: !state.ui.showHeader,
     }),
     {
       setChatSize,

diff --git a/src/css/Header.scss b/src/css/Header.scss
@@ -8,15 +8,19 @@
   border-radius: 0px;
 }
 
-.open-chat-btn{
+.open-chat-btn,.open-header-mobile-btn{
   position: fixed;
   right: 25px;
   top: 65px;
   z-index: 1;
   cursor: pointer;
 }
 
-.close-header .open-chat-btn{
+.open-header-mobile-btn{
+  left: 25px;
+}
+
+.close-header .open-chat-btn,.close-header .open-header-mobile-btn{
   top: 10px;
 }
 
@@ -59,6 +63,9 @@
     min-height: unset;
     overflow:visible;
   }
+  .close-header.navbar{
+    overflow:hidden;
+  }
   @media (orientation:landscape){
     .nav-item {
       padding-left: 0.5rem;
@@ -71,7 +78,5 @@
       padding-right: 0.5rem;
     }
   }
-  #open-chat-btn{
-    display: none;
-  }
+
 }
diff --git a/src/css/Stream.scss b/src/css/Stream.scss
@@ -18,11 +18,6 @@
 }
 
 
-@include media-breakpoint-down(md) {
-  .open-header-btn,.close-header-btn{
-    display: none;
-  }
-}
 
 .open-header-caret,.close-header-caret{
   position: fixed;
@@ -42,6 +37,16 @@
   opacity:1;
 }
 
+.open-header-caret-mobile{
+  display: none;
+  position:fixed;
+  rotate: 90deg;
+  color: #D17134;
+  font-size: 32px;
+  line-height: 20px;
+  opacity: 0.4;
+}
+
 .open-header-caret{
   top: -15px;
   rotate: 90deg;
@@ -58,6 +63,14 @@
 }
 
 @include media-breakpoint-down(md) {
+  .open-header-caret-mobile{
+    display: block;
+  }
+
+  .close-header-caret{
+    top:35px;
+  }
+
   @media (orientation:portrait){
     .chat-embed {
       height: 100%;