@signalk/charts-plugin 3.6.2 → 3.8.0

package/public/logo.svg

@@ -13,8 +13,6 @@
     </clipPath>
   </defs>
 
-  <rect x="0" y="0" width="128" height="128" fill="#fff"/>
-
   <g clip-path="url(#card)">
     <rect width="128" height="128" fill="url(#sea)"/>
 

package/public/style.css

@@ -1,26 +1,112 @@
-#activeJobsTable {
+body {
+  padding: 0;
+  margin: 0;
+}
+
+html,
+body,
+#map {
+  height: 100%;
   width: 100%;
-  border-collapse: collapse;
-  font-family: Arial, sans-serif;
-  margin-top: 8px;
+  z-index: 1;
+  position: relative;
 }
 
-#activeJobsTable th,
-#progressTable td {
-  border: 1px solid #ddd;
-  padding: 6px 8px;
-  text-align: left;
-  vertical-align: middle;
+.map-status-control {
+  background: rgba(0, 0, 0, 0.75);
+  color: #fff;
+  padding: 6px 10px;
   font-size: 13px;
+  font-family: monospace;
+  border-radius: 6px;
+  pointer-events: none;
 }
 
-#activeJobsTable th {
-  background: #f4f4f4;
-  font-weight: 600;
+.modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.6);
+  z-index: 3000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.modal.hidden {
+  display: none;
+}
+
+.modal-content {
+  background: #fff;
+  color: #000;
+  width: 90%;
+  max-height: 100vh;
+  overflow-y: auto;
+  border-radius: 10px;
+  padding: 12px;
+  box-shadow: 0 0 20px #aaa;
+}
+
+.modal-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 10px;
+}
+
+/* Base size for all Leaflet buttons */
+.leaflet-bar a,
+.leaflet-bar a.leaflet-disabled {
+  width: 44px;
+  height: 44px;
+  line-height: 44px;
+  font-size: 16px;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  border-radius: 6px; /* optional, looks modern */
+}
+
+.leaflet-draw-toolbar a {
+  width: 44px;
+  height: 44px;
+  padding: 0;
+}
+
+.leaflet-draw-toolbar a::before {
+  margin: 0;
+}
+
+.leaflet-control-layers-toggle {
+  width: 44px !important;
+  height: 44px !important;
+  background-size: 20px 20px;
+}
+
+/* @media (pointer: coarse) {
+  .leaflet-bar a,
+  .leaflet-control-layers-toggle {
+    width: 44px !important;
+    height: 44px !important;
+    line-height: 44px;
+  }
+} */
+
+.job {
+  margin-bottom: 10px;
+  padding: 6px;
+  border: 1px solid #333;
+  border-radius: 6px;
+  height: 80%;
 }
 
 .progress-bar {
-  width: 160px;
+  width: 75%;
   height: 18px;
   background: #eee;
   border-radius: 6px;
@@ -57,24 +143,20 @@
   align-items: center;
 }
 
-.btn {
+.leaflet-button {
   display: flex;
   justify-content: center;
   align-items: center;
-  width: 36px;
-  height: 36px;
+  width: 48px;
+  height: 48px;
   border: none;
   border-radius: 8px;
-  cursor: pointer;
-  background-color: #444;
-  transition:
-    transform 0.15s ease,
-    background-color 0.2s ease;
+  background-color: #fff;
   padding: 0;
   line-height: 0;
 }
 
-.btn:hover {
+.leaflet-button:hover {
   transform: scale(1.1);
 }
 
@@ -89,30 +171,262 @@
   stroke-linejoin: round;
 }
 
-.startstop-btn {
-  background-color: #27ae60;
+.hidden {
+  display: none;
+}
+
+/* ---------- Modern Fieldset Styling ---------- */
+fieldset {
+  /* max-width: 560px; */
+  padding: 1.5rem 1.75rem 1.75rem;
+  border: 1px solid #e5e7eb;
+  border-radius: 14px;
+  background: #ffffff;
+  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.06);
+  font-family:
+    system-ui,
+    -apple-system,
+    Segoe UI,
+    Roboto,
+    sans-serif;
+  margin-top: 0.5rem;
 }
 
-.startstop-btn.running {
-  background-color: #c0392b;
+legend {
+  padding: 0 0rem;
+  font-weight: 600;
+  font-size: 0.95rem;
+  color: #374151;
 }
 
-.delete-btn {
-  background-color: #e74c3c;
+/* Section headers */
+fieldset strong {
+  /* display: block; */
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+  padding: 0.3rem 0.3rem;
+  font-size: 0.9rem;
+  color: #6b7280;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
 }
 
-.delete-btn:hover {
-  background-color: #c0392b;
+/* Labels */
+fieldset label {
+  font-size: 0.9rem;
+  color: #374151;
+  margin-right: 0.75rem;
+  margin-bottom: 0.5rem;
 }
 
-.remove-btn {
-  background-color: #7f8c8d;
+/* Inputs & Selects */
+fieldset select,
+fieldset input[type='text'],
+fieldset input[type='number'] {
+  display: block;
+  width: 100%;
+  margin-top: 0.1rem;
+  margin-bottom: 0.1rem;
+  margin-left: 0.1rem;
+  margin-right: 0.1rem;
+  padding: 0.3rem 0.3rem;
+  border-radius: 8px;
+  border: 1px solid #d1d5db;
+  background: #f9fafb;
+  font-size: 0.9rem;
+  transition:
+    border 0.2s,
+    box-shadow 0.2s;
 }
 
-.remove-btn:hover {
-  background-color: #95a5a6;
+fieldset select:focus,
+fieldset input:focus {
+  outline: none;
+  border-color: #3b82f6;
+  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
+  background: #ffffff;
 }
 
-.hidden {
-  display: none;
+/* Radio group */
+fieldset input[type='checkbox'] {
+  margin-right: 0.35rem;
+  accent-color: #3b82f6;
+}
+
+/* Bounding box grid */
+fieldset div {
+  display: grid;
+  grid-template-columns: repeat(1, 1fr);
+  gap: 1.6rem;
+  margin-top: 0.4rem;
+}
+
+/* Button */
+
+.btn {
+  margin-top: 0.5rem;
+  padding: 0.65rem 1.2rem;
+  border-radius: 10px;
+  border: none;
+  color: #ffffff;
+  font-size: 0.9rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition:
+    transform 0.15s,
+    box-shadow 0.15s,
+    opacity 0.15s;
+}
+
+.btn--primary {
+  background: linear-gradient(135deg, #3b82f6, #2563eb);
+}
+
+.btn--primary:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.35);
+  opacity: 0.95;
+}
+
+.btn--primary:active {
+  transform: translateY(0);
+  box-shadow: 0 3px 8px rgba(37, 99, 235, 0.3);
+}
+
+.btn--primary:disabled {
+  background: #9ca3af; /* gray */
+  cursor: not-allowed;
+  opacity: 0.6;
+  box-shadow: none;
+  transform: none;
+}
+
+.btn--primary:disabled:hover {
+  transform: none;
+  box-shadow: none;
+  opacity: 0.6;
+}
+
+.btn--danger {
+  background: linear-gradient(135deg, #ef4444, #b91c1c);
+}
+
+.btn--danger:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 6px 16px rgba(185, 28, 28, 0.35);
+  opacity: 0.96;
+}
+
+.btn--danger:active {
+  transform: translateY(0);
+  box-shadow: 0 3px 8px rgba(185, 28, 28, 0.3);
+}
+
+.btn--danger:disabled {
+  background: #9ca3af; /* gray */
+  cursor: not-allowed;
+  opacity: 0.6;
+  box-shadow: none;
+  transform: none;
+}
+
+.btn--danger:disabled:hover {
+  transform: none;
+  box-shadow: none;
+  opacity: 0.6;
+}
+
+#jobsScroll {
+  max-height: 75vh; /* modal scroll */
+  overflow-y: auto;
+}
+
+#jobsGrid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  gap: 12px;
+  padding: 4px;
+}
+
+@media (min-width: 768px) {
+  #jobsGrid {
+    grid-template-columns: repeat(auto-fill, minmax(384px, 1fr));
+  }
+}
+
+.job-card-stats-actions {
+  display: flex;
+  justify-content: space-between; /* push stats left, actions right */
+  align-items: center; /* vertically center items */
+  gap: 1rem; /* spacing between elements */
+}
+
+.job-cards {
+  /* display: none; */
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch; /* smooth inertia on iOS */
+}
+
+.job-card {
+  border-radius: 10px;
+  margin: 8px;
+  padding: 12px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+}
+
+.job-card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.jobs-badge {
+  position: absolute;
+  top: -4px;
+  right: -4px;
+  background: red;
+  color: white;
+  border-radius: 50%;
+  min-width: 16px;
+  height: 16px;
+  font-size: 11px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 4px;
+  font-weight: bold;
+}
+
+.chart-name {
+  font-size: 0.8rem;
+  opacity: 0.7;
+}
+
+.job-card-actions {
+  display: flex;
+  gap: 8px;
+  margin-top: 8px;
+}
+
+.job-card-actions button {
+  flex: 1;
+}
+
+#help .modal-content {
+  font-family:
+    system-ui,
+    -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    Roboto,
+    Helvetica,
+    Arial,
+    sans-serif;
+}
+
+.modal-image {
+  display: block;
+  width: auto;
+  height: auto;
+  object-fit: contain;
 }