search

newsproutsmedia / chat

Chat site using socket.io
https://chatapp.newsproutsmedia.com
0 stars 0 forks source link

(feature) Dashboard: Detect mobile and serve up appropriate dash display #90

Closed newsproutsmedia closed 3 years ago

newsproutsmedia commented 3 years ago

For mobile, dashboard should be a full screen overlay. For desktop, it should push the chat window to the left and be added as an element within the "main" div. Make sure flex-grow is set to 0 on desktop.

newsproutsmedia commented 3 years ago

If desktop, remove the "dashboard" container from the DOM and add the following "nav" container to top of "page-chat" div:

<div id="page-chat">
    <nav class="nav">
        <div class="header-item logo"><h1><b>Chat</b>App!</h1></div>
            <!-- dashboard goes here -->
    </nav>

If mobile, maintain existing dashboard structure.

Also, add a listener to detect window resizing. If window is resized below desktop threshold, remove "nav" container and add "header" container to top of "main" div:

    <div id="main">
        <header class="header">
            <div class="header-item logo"><h1><b>Chat</b>App!</h1></div>
            <div class="header-center">&nbsp;</div>
            <div class="header-item menu"><a id="show-dash" class="site-menu"><i class="fas fa-th fa-lg"></i></a></div>
        </header>
        <chat>

Show/hide dashboard listeners will need to be assigned/removed on detection of screen size, after assignment to the DOM.