From dfa259dada2e724c6488257b67e3d9833c565937 Mon Sep 17 00:00:00 2001
From: Birm <birm@rbirm.us>
Date: Thu, 31 Oct 2024 12:12:32 -0400
Subject: [PATCH 1/4] start with container

---
 components/toolbar/toolbar.css | 5 +++++
 components/toolbar/toolbar.js  | 5 ++++-
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/components/toolbar/toolbar.css b/components/toolbar/toolbar.css
index 4ab131a4..72fe2d21 100644
--- a/components/toolbar/toolbar.css
+++ b/components/toolbar/toolbar.css
@@ -62,6 +62,11 @@ ul.tools > li:not(.handler) > input[type="checkbox"] + label:hover {
 
 /* ------------- */
 
+.drop_down_container{
+  position: relative;
+  padding: 5px;
+}
+
 ul.drop_down {
   width: 2.4rem;
   font-size: 1.4rem;
diff --git a/components/toolbar/toolbar.js b/components/toolbar/toolbar.js
index 798778ea..7e5445e1 100644
--- a/components/toolbar/toolbar.js
+++ b/components/toolbar/toolbar.js
@@ -530,6 +530,8 @@ CaToolbar.prototype.__createDropDown = function(options) {
   li.appendChild(icon);
 
   // create drop_down
+  const _drop_container = document.createElement('div');
+  _drop_container.classList.add("drop_down_container")
   const _drop = document.createElement('ul');
   _drop.classList.add('drop_down');
 
@@ -541,7 +543,8 @@ CaToolbar.prototype.__createDropDown = function(options) {
     lists.push(radio);
     _drop.appendChild(radio);
   }
-  li.appendChild(_drop);
+  _drop_container.appendChild(_drop)
+  li.appendChild(_drop_container);
 
   function getStatus(e) {
     const args = {};

From f091906cb8c03c90d514213b598fc2e06b7f0a55 Mon Sep 17 00:00:00 2001
From: Birm <birm@rbirm.us>
Date: Thu, 31 Oct 2024 12:33:15 -0400
Subject: [PATCH 2/4] move it up

---
 components/toolbar/toolbar.css | 2 ++
 components/toolbar/toolbar.js  | 5 +----
 2 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/components/toolbar/toolbar.css b/components/toolbar/toolbar.css
index 72fe2d21..8711122d 100644
--- a/components/toolbar/toolbar.css
+++ b/components/toolbar/toolbar.css
@@ -73,6 +73,8 @@ ul.drop_down {
   padding: 0;
   margin: 0;
   display: none;
+  position:relative;
+  top:-4px;
 }
 
 ul.tools > li:hover ul.drop_down {
diff --git a/components/toolbar/toolbar.js b/components/toolbar/toolbar.js
index 7e5445e1..798778ea 100644
--- a/components/toolbar/toolbar.js
+++ b/components/toolbar/toolbar.js
@@ -530,8 +530,6 @@ CaToolbar.prototype.__createDropDown = function(options) {
   li.appendChild(icon);
 
   // create drop_down
-  const _drop_container = document.createElement('div');
-  _drop_container.classList.add("drop_down_container")
   const _drop = document.createElement('ul');
   _drop.classList.add('drop_down');
 
@@ -543,8 +541,7 @@ CaToolbar.prototype.__createDropDown = function(options) {
     lists.push(radio);
     _drop.appendChild(radio);
   }
-  _drop_container.appendChild(_drop)
-  li.appendChild(_drop_container);
+  li.appendChild(_drop);
 
   function getStatus(e) {
     const args = {};

From a55765bbb674d3355c8fa45e2c626d197378f888 Mon Sep 17 00:00:00 2001
From: Birm <birm@rbirm.us>
Date: Thu, 31 Oct 2024 13:50:30 -0400
Subject: [PATCH 3/4] mobile friendly, add camic logo

---
 components/sidemenu/sidemenu.js |  2 +-
 components/toolbar/toolbar.css  | 35 +++++++++++-----
 components/toolbar/toolbar.js   | 74 ++++++++++++++++++++++++++++-----
 css/style.css                   |  9 ++--
 4 files changed, 96 insertions(+), 24 deletions(-)

diff --git a/components/sidemenu/sidemenu.js b/components/sidemenu/sidemenu.js
index f025fd35..ef355886 100644
--- a/components/sidemenu/sidemenu.js
+++ b/components/sidemenu/sidemenu.js
@@ -98,7 +98,7 @@ SideMenu.prototype.__refresh = function() {
   if (this.setting.top) {
     this.elt.style.top = this.setting.top;
   } else {
-    this.elt.style.top = '0';
+    this.elt.style.top = '42px';
   }
 
   if (this.setting.position === 'right') {
diff --git a/components/toolbar/toolbar.css b/components/toolbar/toolbar.css
index 8711122d..7521512f 100644
--- a/components/toolbar/toolbar.css
+++ b/components/toolbar/toolbar.css
@@ -1,3 +1,5 @@
+
+
 ul.tools > li.handler {
   width: 1.2rem;
   height: 100%;
@@ -14,7 +16,7 @@ ul.tools {
   left: 0;
   padding: 0;
   margin: 0;
-  height: 2.4rem;
+  height: 36px;
   border-radius: 0 0.5rem 0.5rem 0;
   border: solid #365f9c 0.2rem;
   background-color: #365f9c;
@@ -23,7 +25,6 @@ ul.tools {
 ul.tools > li {
   cursor: pointer;
   height: 100%;
-  width: 2.4rem;
   float: left;
   margin-left: 0.2rem;
   list-style: none;
@@ -54,6 +55,7 @@ ul.tools > li:not(.handler) > input[type="checkbox"]:checked + label {
   background-color: #365f9c;
   color: #fff;
   /*box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.3);*/
+  padding: 0 2px 2px 2px;
 }
 
 ul.tools > li:not(.handler) > input[type="checkbox"] + label:hover {
@@ -62,13 +64,8 @@ ul.tools > li:not(.handler) > input[type="checkbox"] + label:hover {
 
 /* ------------- */
 
-.drop_down_container{
-  position: relative;
-  padding: 5px;
-}
-
 ul.drop_down {
-  width: 2.4rem;
+  z-index: 100;
   font-size: 1.4rem;
   padding: 0;
   margin: 0;
@@ -78,12 +75,30 @@ ul.drop_down {
 }
 
 ul.tools > li:hover ul.drop_down {
-  flex-direction: row; /* Consumes less space */
-  display: flex;
+  flex-direction: column; /* Consumes less space */
+  display: block;
   width: fit-content;
   width: -moz-fit-content;
 }
 
+.camic-logo{
+  min-width: 25px;
+  min-height: 25px;
+}
+
+.material-icons.md-36 { 
+  font-size: 36px;
+}
+
+@media (max-width: 750px) {
+  .material-icons.md-36 {
+    font-size: 24px;
+  }
+}
+
+
+
+
 ul.drop_down li {
   cursor: pointer;
   /* width: 2.4rem;
diff --git a/components/toolbar/toolbar.js b/components/toolbar/toolbar.js
index 798778ea..0c7fce5b 100644
--- a/components/toolbar/toolbar.js
+++ b/components/toolbar/toolbar.js
@@ -54,6 +54,42 @@
  *        changing status(check/radio/dropdown), return a object which has value and status.
  *
  */
+
+const camic_svg = `
+<svg
+   version="1.1"
+   id="svg1"
+   viewBox="0 0 392 392"
+   xmlns="http://www.w3.org/2000/svg">
+  <g id="layer1">
+    <path
+       style="fill:currentColor"
+       d="m 235.37858,200.06453 48.41567,-17.02896 C 246.56105,133.47258 219.56516,83.165139 201.98846,21.427389 l -19.03237,8.013628 z" />
+    <path
+       style="fill:currentColor"
+       d="m 156.28676,116.50371 c 0,0 14.69165,-11.68654 0,0 z" />
+    <path
+       style="fill:currentColor"
+       d="m 155.95286,116.83761 c 0,0 5.34242,-6.01022 0,0 z" />
+    <path
+       style="fill:currentColor;stroke-width:1.09145"
+       d="m 139.38922,122.8447 c 15.23488,-7.61623 35.55245,-11.52666 49.73998,-13.86767 l -5.41955,-17.127845 c -19.13718,3.23649 -39.75853,8.958985 -54.66219,16.637765 z" />
+    <path
+       style="fill:currentColor;stroke-width:1.09145"
+       d="m 122.16662,133.77573 c -23.015532,15.981 -35.642057,37.20602 -39.521215,57.6266 l -23.492631,-4.34071 c 8.128925,-25.58183 23.897012,-50.05419 51.164286,-68.27094 z" />
+    <path
+       style="fill:currentColor;stroke-width:1.09145"
+       d="m 79.122739,208.94401 c -1.547813,23.32001 -2.010619,45.68546 13.242816,64.59801 L 71.955844,284.72771 C 57.431731,260.5187 51.196077,234.95396 55.733377,204.52227 Z" />
+    <path
+       style="fill:currentColor;stroke-width:1.09145"
+       d="m 107.61472,290.35656 c 18.94063,20.51975 41.85149,37.02418 68.16374,42.40749 l -4.70291,18.87034 C 141.91129,341.51155 109.06814,329.00813 87.063288,303.43108 Z" />
+    <path
+       style="fill:currentColor;stroke-width:1.38034"
+       d="m 199.36286,333.54662 -1.94994,19.73107 132.52921,-0.93353 -4.77015,-29.85319 z" />
+  </g>
+</svg>
+`
+
 function CaToolbar(options) {
   this.name = 'CaToolbar';
   // DOM elts
@@ -80,7 +116,7 @@ function CaToolbar(options) {
     // may be it can be extension in future...
     mainTools: [
       {
-        icon: 'apps',
+        icon: 'camic',
         title: 'Applications',
         type: 'check',
         value: 'apps',
@@ -154,8 +190,16 @@ CaToolbar.prototype.__createBtn = function(options) {
   if (options.name) li.name = options.name;
   const btn = document.createElement('i');
   btn.classList.add('material-icons');
-  btn.classList.add('md-24');
-  btn.textContent = options.icon;
+  btn.classList.add('md-36');
+  if (options.icon =="camic"){
+    btn.innerHTML = camic_svg;
+    btn.classList.add("camic-logo");
+    btn.title = "camic";
+    btn.style.height = "36px"
+    btn.style.width = "36px"
+  } else {
+    btn.textContent = options.icon;
+  }
   if (options.title) {
     tippy(btn, {
       content: options.title,
@@ -211,8 +255,15 @@ CaToolbar.prototype.__createCheck = function(options) {
   // icon
   const icon = document.createElement('label');
   icon.classList.add('material-icons');
-  icon.classList.add('md-24');
-  icon.textContent = options.icon;
+  icon.classList.add('md-36');
+  if (options.icon == "camic"){
+    icon.innerHTML = camic_svg;
+    icon.title = "camic";
+    icon.style.height = "36px"
+    icon.style.width = "36px"
+  } else {
+    icon.textContent = options.icon;
+  }
   if (options.ariaLabel) icon.ariaLabel = options.ariaLabel;
   icon.htmlFor = id;
   if (options.title) {
@@ -275,7 +326,7 @@ CaToolbar.prototype.__createRadio = function(options) {
   const icon = document.createElement('label');
   if (options.icon) {
     icon.classList.add('material-icons');
-    icon.classList.add('md-24');
+    icon.classList.add('md-36');
     if (options.ariaLabel) icon.ariaLabel = options.ariaLabel;
     icon.textContent = options.icon;
   } else {
@@ -333,7 +384,7 @@ CaToolbar.prototype.__createMultiStateBtns = function(options) {
   const icon = document.createElement('label');
   icon.id = randomId(); // create a timestamp id
   icon.classList.add('material-icons');
-  icon.classList.add('md-24');
+  icon.classList.add('md-36');
   if (options.ariaLabel) icon.ariaLabel = options.ariaLabel;
   icon.classList.add(0);
   icon.dataset.state = 0;
@@ -387,7 +438,7 @@ CaToolbar.prototype.__createMultiDropDown = function(options) {
   // icon
   const icon = document.createElement('label');
   icon.classList.add('material-icons');
-  icon.classList.add('md-24');
+  icon.classList.add('md-36');
   if (options.ariaLabel) icon.ariaLabel = options.ariaLabel;
   icon.textContent = options.icon;
   icon.htmlFor = id;
@@ -515,8 +566,11 @@ CaToolbar.prototype.__createDropDown = function(options) {
   // icon
   const icon = document.createElement('label');
   icon.classList.add('material-icons');
-  icon.classList.add('md-24');
-  if (options.ariaLabel) icon.ariaLabel = options.ariaLabel;
+  icon.classList.add('md-36');
+  if (options.ariaLabel){
+    icon.ariaLabel = options.ariaLabel;
+    icon.title = options.ariaLabel;
+  } 
   icon.textContent = options.icon;
   icon.htmlFor = id;
   if (options.title) {
diff --git a/css/style.css b/css/style.css
index ab6f82fb..404ee65e 100644
--- a/css/style.css
+++ b/css/style.css
@@ -1,6 +1,7 @@
 /* css style */
 html {
   font-size: 10px;
+  min-width: 320px;
 }
 
 html,
@@ -10,6 +11,7 @@ body {
   font-family: sans-serif;
   height: 100%;
   width: 100%;
+
 }
 
 body {
@@ -18,6 +20,7 @@ body {
   background-size: 2rem 2rem;
   background-position: 0 0, 5rem 0, 5rem -5rem, 0px 5rem;
   background-color: rgba(220, 220, 220, 1);
+  min-width: 400px;
 }
 
 /* osd main viewer */
@@ -261,8 +264,8 @@ opacity: 0.3 !important;
   }
 
   ul.tools>li{
-    height: 2vw !important;
-    width: 2vw !important;
+    height: 3vw !important;
+    width: 3vw !important;
     min-height: 25px;
     min-width: 25px;
   }
@@ -278,7 +281,7 @@ opacity: 0.3 !important;
   }
 
   ul.tools{
-    height: 2vw !important;
+    height: 3vw !important;
   }
 
   .material-icons.md-24 {

From 245f4760966cd6a958373fbaeb4f5ef6bbe7b91d Mon Sep 17 00:00:00 2001
From: Birm <birm@rbirm.us>
Date: Thu, 31 Oct 2024 13:55:35 -0400
Subject: [PATCH 4/4] style fixes to toolbar code

---
 components/toolbar/toolbar.js | 30 +++++++++++++++---------------
 1 file changed, 15 insertions(+), 15 deletions(-)

diff --git a/components/toolbar/toolbar.js b/components/toolbar/toolbar.js
index 0c7fce5b..1495a896 100644
--- a/components/toolbar/toolbar.js
+++ b/components/toolbar/toolbar.js
@@ -55,7 +55,7 @@
  *
  */
 
-const camic_svg = `
+const camicSvg = `
 <svg
    version="1.1"
    id="svg1"
@@ -88,7 +88,7 @@ const camic_svg = `
        d="m 199.36286,333.54662 -1.94994,19.73107 132.52921,-0.93353 -4.77015,-29.85319 z" />
   </g>
 </svg>
-`
+`;
 
 function CaToolbar(options) {
   this.name = 'CaToolbar';
@@ -191,12 +191,12 @@ CaToolbar.prototype.__createBtn = function(options) {
   const btn = document.createElement('i');
   btn.classList.add('material-icons');
   btn.classList.add('md-36');
-  if (options.icon =="camic"){
-    btn.innerHTML = camic_svg;
-    btn.classList.add("camic-logo");
-    btn.title = "camic";
-    btn.style.height = "36px"
-    btn.style.width = "36px"
+  if (options.icon =='camic') {
+    btn.innerHTML = camicSvg;
+    btn.classList.add('camic-logo');
+    btn.title = 'camic';
+    btn.style.height = '36px';
+    btn.style.width = '36px';
   } else {
     btn.textContent = options.icon;
   }
@@ -256,11 +256,11 @@ CaToolbar.prototype.__createCheck = function(options) {
   const icon = document.createElement('label');
   icon.classList.add('material-icons');
   icon.classList.add('md-36');
-  if (options.icon == "camic"){
-    icon.innerHTML = camic_svg;
-    icon.title = "camic";
-    icon.style.height = "36px"
-    icon.style.width = "36px"
+  if (options.icon == 'camic') {
+    icon.innerHTML = camicSvg;
+    icon.title = 'camic';
+    icon.style.height = '36px';
+    icon.style.width = '36px';
   } else {
     icon.textContent = options.icon;
   }
@@ -567,10 +567,10 @@ CaToolbar.prototype.__createDropDown = function(options) {
   const icon = document.createElement('label');
   icon.classList.add('material-icons');
   icon.classList.add('md-36');
-  if (options.ariaLabel){
+  if (options.ariaLabel) {
     icon.ariaLabel = options.ariaLabel;
     icon.title = options.ariaLabel;
-  } 
+  }
   icon.textContent = options.icon;
   icon.htmlFor = id;
   if (options.title) {