Merge pull request #56 from KSJaay/v0.6.3

v0.6.3 - Adds new compact mode
KSJaay · Nov 20, 2024 · 392ac24 · 392ac24
2 parents fef4ade + d991231
commit 392ac24
Show file tree

Hide file tree

Showing 27 changed files with 319 additions and 185 deletions.
diff --git a/app/components/home/monitor/layout/compact.jsx b/app/components/home/monitor/layout/compact.jsx
diff --git a/app/components/home/monitor/layout/compact.scss b/app/components/home/monitor/layout/compact.scss
diff --git a/app/components/home/monitor/layout/compact/index.jsx b/app/components/home/monitor/layout/compact/index.jsx
@@ -0,0 +1,43 @@
+import './styles.scss';
+
+// import dependencies
+import PropTypes from 'prop-types';
+import Monitor from '../../../../../pages/monitor';
+
+const MonitorCompact = ({ children, monitor_id }) => {
+  return (
+    <div className="home-monitor-compact">
+      <div
+        className="home-monitor-table"
+        style={{
+          backgroundColor: 'var(--accent-900)',
+          justifyContent: 'flex-start',
+          borderRadius: 'var(--radius-md)',
+        }}
+      >
+        <div className="home-monitor-table-container-compact">
+          <div className="home-monitor-table-header">Name</div>
+        </div>
+
+        <div className="home-monitor-compact-table-content">{children}</div>
+      </div>
+      <div className="home-monitor-compact-content">
+        {monitor_id && <Monitor monitor_id={monitor_id} />}
+
+        {!monitor_id && (
+          <div className="home-monitor-compact-content-empty">
+            Select a monitor
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+MonitorCompact.displayName = 'MonitorCompact';
+MonitorCompact.propTypes = {
+  children: PropTypes.node,
+  monitor_id: PropTypes.string,
+};
+
+export default MonitorCompact;
diff --git a/app/components/home/monitor/layout/compact/monitor.jsx b/app/components/home/monitor/layout/compact/monitor.jsx
@@ -0,0 +1,48 @@
+// import dependencies
+import PropTypes from 'prop-types';
+import { useNavigate } from 'react-router-dom';
+
+// import local files
+import { monitorPropType } from '../../../../../../shared/utils/propTypes';
+import classNames from 'classnames';
+
+const MonitorCompactItem = ({ monitor = {}, isActive, setActive }) => {
+  const navigate = useNavigate();
+
+  const { name, url } = monitor;
+
+  const classes = classNames('home-monitor-name-compact', {
+    'home-monitor-name-compact-active': isActive,
+  });
+
+  return (
+    <div
+      className="home-monitor-container-compact"
+      onClick={() => {
+        if (window.innerWidth <= 1024) {
+          return navigate(`/monitor/${monitor.monitorId}`);
+        }
+
+        setActive(monitor.monitorId);
+      }}
+      id={`monitor-${monitor.name}`}
+    >
+      <div className={classes}>
+        <div>{name}</div>
+        <div style={{ fontSize: '0.85rem', color: 'var(--accent-200)' }}>
+          {url}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+MonitorCompactItem.displayName = 'MonitorCompactItem';
+
+MonitorCompactItem.propTypes = {
+  monitor: monitorPropType.isRequired,
+  isActive: PropTypes.bool,
+  setActive: PropTypes.func,
+};
+
+export default MonitorCompactItem;
diff --git a/app/components/home/monitor/layout/compact/styles.scss b/app/components/home/monitor/layout/compact/styles.scss
@@ -0,0 +1,81 @@
+@use '../../../../../styles/pxToRem.scss' as *;
+@use '../../../../../styles/breakpoints.scss' as *;
+
+.home-monitor-compact {
+  display: grid;
+  grid-template-columns: 350px 1fr;
+  background-color: var(--accent-800);
+  overflow: hidden;
+}
+
+.home-monitor-compact-content {
+  display: flex;
+  justify-content: center;
+  overflow: auto;
+  overflow-x: hidden;
+  border-radius: var(--radius-md);
+  margin-bottom: 1rem;
+}
+
+.home-monitor-container-compact {
+  width: 100%;
+  background-color: var(--accent-900);
+  padding: pxToRem(4) pxToRem(8);
+  transition: var(--transition-base);
+
+  &:hover {
+    cursor: pointer;
+
+    .home-monitor-name-compact {
+      color: var(--primary-500);
+      background-color: var(--accent-800);
+    }
+  }
+}
+
+.home-monitor-name-compact {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  color: var(--font-color);
+  font-size: var(--font-lg);
+  padding: pxToRem(4) pxToRem(8);
+  border-radius: var(--radius-sm);
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  transition: var(--transition-base);
+
+  &-active {
+    color: var(--primary-500);
+    background-color: var(--accent-800);
+  }
+}
+
+.home-monitor-uptime-compact {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  color: var(--font-color);
+  font-size: var(--font-lg);
+}
+
+.home-monitor-compact-content-empty {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  font-size: var(--font-2xl);
+  color: var(--accent-200);
+}
+
+@include tablet {
+  .home-monitor-compact {
+    grid-template-columns: 1fr;
+  }
+
+  .home-monitor-compact-content {
+    display: none;
+  }
+}
diff --git a/app/components/home/monitor/layout/table.jsx b/app/components/home/monitor/layout/table.jsx
@@ -2,33 +2,11 @@ import './table.scss';
 
 // import dependencies
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
-
-const MonitorTable = ({ layout, children }) => {
-  const isCompact = layout === 'compact';
-
-  const classes = classNames({
-    'home-monitor-table-container-list': !isCompact,
-    'home-monitor-table-container-compact': isCompact,
-  });
-
-  if (isCompact) {
-    return (
-      <div className="home-monitor-table">
-        <div className={classes}>
-          <div className="home-monitor-table-header">Name</div>
-          <div className="home-monitor-table-header">Ping</div>
-          <div className="home-monitor-table-header">Uptime</div>
-        </div>
-
-        <div className="home-monitor-table-content">{children}</div>
-      </div>
-    );
-  }
 
+const MonitorTable = ({ children }) => {
   return (
     <div className="home-monitor-table">
-      <div className={classes}>
+      <div className="home-monitor-table-container-list">
         <div className="home-monitor-table-header">Name</div>
         <div className="home-monitor-table-header">Ping</div>
         <div className="home-monitor-table-header-uptime">Uptime</div>
@@ -42,7 +20,6 @@ const MonitorTable = ({ layout, children }) => {
 MonitorTable.displayName = 'MonitorTable';
 
 MonitorTable.propTypes = {
-  layout: PropTypes.oneOf(['compact', 'list']),
   children: PropTypes.node,
 };
 

diff --git a/app/components/home/monitor/layout/table.scss b/app/components/home/monitor/layout/table.scss
@@ -31,6 +31,7 @@
   border-radius: var(--radius-md) var(--radius-md) 0 0;
   transition: var(--transition-base);
   border-bottom: 1px solid var(--accent-700);
+  margin-bottom: 0.25rem;
 
   div {
     display: flex;
@@ -55,6 +56,11 @@
   }
 }
 
+.home-monitor-compact-table-content {
+  overflow: auto;
+  height: calc(100vh - 220px);
+}
+
 @include tablet {
   .home-monitor-table-container-list {
     grid-template-columns: 1fr 100px 100px;
@@ -77,4 +83,8 @@
   .home-monitor-table-header-uptime {
     display: none;
   }
+
+  .home-monitor-compact-table-content {
+    height: calc(100vh - 280px);
+  }
 }