change breaksize for mobile layout

Author: njgould

dashboard.js

@@ -87,8 +87,8 @@ function onConnect() {
   // mqtt_client.send(message);
   // setStatus("Connected");
   $('#debug_logs').append("MQTT Client Connected!");
-  $('#login_icon').removeClass('text-red-500');
-  $('#login_icon').addClass('text-green-500');
+  $('.login_icon').removeClass('text-red-500');
+  $('.login_icon').addClass('text-green-500');
 }
 
 // called when the mqtt_client loses its connection
@@ -98,8 +98,8 @@ function onConnectionLost(responseObject) {
     console.log("onConnectionLost:"+responseObject.errorMessage);
   }
   $('#debug_logs').append("onConnectionLost:"+responseObject.errorMessage);
-  $('#login_icon').removeClass('text-green-500');
-  $('#login_icon').addClass('text-red-500');
+  $('.login_icon').removeClass('text-green-500');
+  $('.login_icon').addClass('text-red-500');
 }
 
 

index.html

@@ -19,10 +19,10 @@
 
 
       <nav class="bg-white border-b border-gray-200">
-        <div class="max-w-7xl mx-auto px-4 md:px-6 lg:px-8">
-          <div class="hidden md:flex justify-between h-16">
+        <div class="max-w-7xl mx-auto px-4 lg:px-6 lg:px-8">
+          <div class="hidden lg:flex justify-between h-16">
             <div class="flex">
-              <div class="hidden md:-my-px md:ml-6 md:flex md:space-x-8">
+              <div class="hidden lg:-my-px lg:ml-6 lg:flex lg:space-x-8">
                 <!-- Current: "border-blue-500 text-gray-900", Default: "border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700" -->
                 <a href="#" :class="{ 'active border-blue-500 text-gray-900': tab === 'map', 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700': tab !== 'map' }" x-on:click.prevent="tab = 'map'" class="border-blue-500 text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium" aria-current="page"> Map </a>
                 <a href="#" :class="{ 'active border-blue-500 text-gray-900': tab === 'temperature_chart', 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700': tab !== 'temperature_chart' }" x-on:click.prevent="tab = 'temperature_chart'" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium"> Temperture Chart </a>
@@ -31,15 +31,15 @@
                 <a href="#" :class="{ 'active border-blue-500 text-gray-900': tab === 'settings', 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700': tab !== 'settings' }" x-on:click.prevent="tab = 'settings'" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium"> Settings </a>
               </div>
             </div>
-            <div class="hidden md:ml-6 md:flex md:items-center">
+            <div class="hidden lg:ml-6 lg:flex lg:items-center">
 
 
               <!-- Profile dropdown -->
               <div x-data="{ isOpen: false }" @click.outside="isOpen = false" class="ml-3 relative">
                 <div>
                   <button type="button" @click="isOpen = !isOpen" class="max-w-xs bg-white flex items-center text-sm rounded-full" id="user-menu-button" aria-expanded="false" aria-haspopup="true">
                     <span class="sr-only">Open user menu</span>
-                    <i id = "login_icon" class="fa-solid fa-2x fa-user-pilot text-red-500"></i>
+                    <i class="login_icon fa-solid fa-2x fa-user-pilot text-red-500"></i>
                   </button>
                 </div>
 
@@ -53,7 +53,7 @@
                   x-transition:leave-end="transform opacity-0 scale-95"
                   class="z-20 origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg py-1 bg-white ring-1 ring-black ring-opacity-5 focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="user-menu-button" tabindex="-1">
 
-                  <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" role="menuitem" tabindex="-1" id="user-menu-item-2"> Sign out </a>
+                  <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" role="menuitem" tabindex="-1" id="user-menu-item-2"> Log out </a>
 
                 </div>
               </div>
@@ -69,14 +69,15 @@
 
 
 
-        <div class="-mr-2 flex items-center md:hidden absolute z-20 top-4 right-8">
+        <div class="-mr-2 flex items-center lg:hidden absolute z-20 top-4 right-8">
           <!-- Mobile menu button -->
           <button type="button" @click="mobileMenuOpen = !mobileMenuOpen" class="bg-white inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100" aria-controls="mobile-menu" aria-expanded="false">
             <span class="sr-only">Open main menu</span>
               <!-- Heroicon name: outline/menu -->
-            <svg  :class="{ 'hidden' : mobileMenuOpen , 'block' : !mobileMenuOpen}" class="h-6 w-6 hidden" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
+<!--             <svg  :class="{ 'hidden' : mobileMenuOpen , 'block' : !mobileMenuOpen}" class="h-6 w-6 hidden" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
               <path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16" />
-            </svg>
+            </svg> -->
+            <i :class="{ 'hidden' : mobileMenuOpen , 'block' : !mobileMenuOpen}" class="login_icon fa-solid fa-2x fa-user-pilot text-red-500"></i>
               <!-- Heroicon name: outline/x -->
             <svg  :class="{ 'block' : mobileMenuOpen , 'hidden' : !mobileMenuOpen}" class="h-6 w-6 hidden" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
               <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
@@ -86,7 +87,7 @@
 
 
         <!-- Mobile menu, show/hide based on mobileMenuOpen state. -->
-        <div :class="{ 'hidden' : !mobileMenuOpen}" class="md:hidden" id="mobile-menu">
+        <div :class="{ 'hidden' : !mobileMenuOpen}" class="lg:hidden" id="mobile-menu">
           <div class="pt-2 pb-3 space-y-1">
             <!-- Current: "bg-blue-50 border-blue-500 text-blue-700", Default: "border-transparent text-gray-600 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-800" -->
 
@@ -99,7 +100,7 @@
           <div class="pt-1 pb-3 border-t border-gray-200">
 
             <div class="mt-3 space-y-1">
-              <a href="#" class="block px-4 py-2 text-base font-medium text-gray-500 hover:text-gray-800 hover:bg-gray-100"> Sign out </a>
+              <a href="#" @click="mqtt_logout()" class="block px-4 py-2 text-base font-medium text-gray-500 hover:text-gray-800 hover:bg-gray-100"> Log out </a>
             </div>
           </div>
         </div>
@@ -113,14 +114,14 @@
         <header>
         </header>
 
-          <div class="mx-auto md:px-0 lg:px-8 h-screen md:h-[55rem] w-full md:max-w-7xl">
+          <div class="mx-auto lg:px-0 lg:px-8 h-screen lg:h-[55rem] w-full lg:max-w-7xl">
 
-            <div class="px-4 py-1 md:px-0 h-full">
+            <div class="px-4 py-1 lg:px-0 h-full">
 
-              <div x-show="tab === 'map'" class="md:border-4 md:border-gray-200 md:rounded-lg h-full">
+              <div x-show="tab === 'map'" class="lg:border-4 lg:border-gray-200 lg:rounded-lg h-full">
 
                 <!-- <div class="absolute z-20 inset-x-0 top-20 h-16 flex items-center justify-center"> -->
-                <div :class="{ 'hidden' : mobileMenuOpen}" class="absolute inset-x-0 top-4 md:top-20 h-16 flex items-center justify-center">
+                <div :class="{ 'hidden' : mobileMenuOpen}" class="absolute inset-x-0 top-4 lg:top-20 h-16 flex items-center justify-center">
                   <div class = "text-3xl flex flex-row bg-white gap-y-4 gap-x-10 px-8 pt-3 pb-1 rounded-md z-20">
 
 <!--                     <div x-data="{battery_voltage: ''}" class = "flex flex-col">
@@ -195,9 +196,10 @@ <h3 class="text-xs mb-2 uppercase"> Speed</h3>
 
 
                <div x-show="tab === 'debug'" class="h-full">
-                <h3>Message Logs</h3>
+                <div class = "pt-5 h-full">
+                  <p class = "text-2xl font-bold mb-4" >Message Logs</p>
                   <p id = "debug_logs"></p>  
-
+                </div> 
               </div>
 
 

tailwind-dist.css

@@ -895,6 +895,10 @@ select {
   margin-right: 0.5rem;
 }
 
+.mb-4 {
+  margin-bottom: 1rem;
+}
+
 .block {
   display: block;
 }
@@ -1395,6 +1399,10 @@ select {
   font-weight: 500;
 }
 
+.font-bold {
+  font-weight: 700;
+}
+
 .uppercase {
   text-transform: uppercase;
 }
@@ -1879,8 +1887,70 @@ select {
 }
 
 @media (min-width: 1024px) {
+  .lg\:top-20 {
+    top: 5rem;
+  }
+
+  .lg\:-my-px {
+    margin-top: -1px;
+    margin-bottom: -1px;
+  }
+
+  .lg\:ml-6 {
+    margin-left: 1.5rem;
+  }
+
+  .lg\:flex {
+    display: flex;
+  }
+
+  .lg\:hidden {
+    display: none;
+  }
+
+  .lg\:h-\[55rem\] {
+    height: 55rem;
+  }
+
+  .lg\:max-w-7xl {
+    max-width: 80rem;
+  }
+
+  .lg\:items-center {
+    align-items: center;
+  }
+
+  .lg\:space-x-8 > :not([hidden]) ~ :not([hidden]) {
+    --tw-space-x-reverse: 0;
+    margin-right: calc(2rem * var(--tw-space-x-reverse));
+    margin-left: calc(2rem * calc(1 - var(--tw-space-x-reverse)));
+  }
+
+  .lg\:rounded-lg {
+    border-radius: 0.5rem;
+  }
+
+  .lg\:border-4 {
+    border-width: 4px;
+  }
+
+  .lg\:border-gray-200 {
+    --tw-border-opacity: 1;
+    border-color: rgb(229 231 235 / var(--tw-border-opacity));
+  }
+
   .lg\:px-8 {
     padding-left: 2rem;
     padding-right: 2rem;
   }
+
+  .lg\:px-6 {
+    padding-left: 1.5rem;
+    padding-right: 1.5rem;
+  }
+
+  .lg\:px-0 {
+    padding-left: 0px;
+    padding-right: 0px;
+  }
 }