MMM-Trello Fix

MMM-Trello.css

@@ -1,11 +1,365 @@
-.checklist-wrapper {
+/* MMM-Trello Board View Styling */
+
+/* Import IBM Plex Sans Arabic font for better Arabic text rendering */
+@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@300;400;500;600;700&display=swap');
+
+/* Base styling for all MMM-Trello content */
+.MMM-Trello {
+    font-family: 'IBM Plex Sans Arabic', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+    direction: rtl;
+    text-align: right;
+    border: none !important;           /* Remove any default borders */
+    border-top: none !important;      /* Specifically remove top border */
+    border-bottom: none !important;   /* Remove bottom border too */
+    margin: 0;
+    padding: 0;
+}
+
+/* Horizontal board layout */
+.MMM-Trello .board-view {
+    display: flex;
+    flex-direction: row !important; /* Horizontal layout like real Trello */
+    gap: 15px;
+    max-width: 100%;
+    overflow-x: auto; /* Allow horizontal scrolling if needed */
+    overflow-y: hidden;
+    font-family: 'IBM Plex Sans Arabic', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+    direction: rtl;
+    text-align: right;
+    padding: 10px 0;
+    align-items: flex-start; /* Align lists to top */
+    width: 100%;
+    min-height: 200px;
+    border: none !important;           /* Remove any borders */
+    border-top: none !important;      /* Specifically remove top border */
+    border-bottom: none !important;   /* Remove bottom border */
+    margin: 0;
+}
+
+/* Force horizontal layout - override any conflicting styles */
+.module.MMM-Trello .board-view {
+    display: flex !important;
+    flex-direction: row !important;
+}
+
+.region.middle.center .module.MMM-Trello .board-view {
+    display: flex !important;
+    flex-direction: row !important;
+}
+
+/* Alternative vertical layout (can be toggled via config) */
+.MMM-Trello .board-view.vertical {
+    flex-direction: column !important;
+    gap: 20px;
+    overflow-x: hidden;
+    overflow-y: auto;
+    align-items: stretch;
+}
+
+/* Override any MagicMirror default module styling that might add borders */
+.module.MMM-Trello {
+    border: none !important;
+    border-top: none !important;
+    border-bottom: none !important;
+}
+
+.region .module.MMM-Trello {
+    border: none !important;
+    border-top: none !important;
+    border-bottom: none !important;
+}
+
+.region .module.MMM-Trello::before,
+.region .module.MMM-Trello::after {
+    display: none !important;
+}
+
+/* Trello List Styling */
+.MMM-Trello .trello-list {
+    background: rgba(255, 255, 255, 0.1);
+    border-radius: 8px;
+    padding: 12px;
+    margin-bottom: 15px;
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    min-width: 280px; /* Minimum width for readability */
+    max-width: 350px; /* Maximum width to prevent too wide lists */
+    flex-shrink: 0; /* Prevent shrinking in horizontal layout */
+    max-height: 70vh; /* Limit height to viewport */
+    overflow-y: auto; /* Allow scrolling within list if too many cards */
+}
+
+/* Vertical layout adjustments */
+.MMM-Trello .board-view.vertical .trello-list {
+    min-width: auto;
+    max-width: 100%;
+    max-height: none;
+    overflow-y: visible;
+}
+
+.MMM-Trello .list-header {
+    background: rgba(255, 255, 255, 0.15);
+    color: #ffffff;
+    font-weight: 600;
+    font-size: 16px;
+    padding: 8px 12px;
+    border-radius: 6px;
+    margin-bottom: 10px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-family: 'IBM Plex Sans Arabic', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+    direction: rtl;
+    text-align: right;
+}
+
+.MMM-Trello .list-header .list-icon {
+    font-size: 14px;
+    opacity: 0.8;
+}
+
+.MMM-Trello .list-header .card-count {
+    background: rgba(255, 255, 255, 0.2);
+    padding: 2px 8px;
+    border-radius: 12px;
+    font-size: 12px;
+    margin-left: auto;
+}
+
+/* Trello Card Styling */
+.MMM-Trello .trello-card {
+    background: rgba(255, 255, 255, 0.95);
+    color: #333;
+    border-radius: 6px;
+    padding: 10px 12px;
+    margin-bottom: 8px;
+    border: 1px solid rgba(0, 0, 0, 0.1);
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+    transition: all 0.2s ease;
+    font-family: 'IBM Plex Sans Arabic', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+    direction: rtl;
+    text-align: right;
+}
+
+.MMM-Trello .trello-card.completed {
+    background: rgba(200, 200, 200, 0.7);
+    opacity: 0.7;
+    border-color: rgba(0, 0, 0, 0.05);
+}
+
+.MMM-Trello .trello-card:hover {
+    transform: translateY(-1px);
+    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
+}
+
+.MMM-Trello .card-title {
+    font-weight: 500;
+    font-size: 14px;
+    line-height: 1.4;
+    margin-bottom: 6px;
+    color: #172b4d;
+    font-family: 'IBM Plex Sans Arabic', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+    direction: rtl;
+    text-align: right;
+}
+
+.MMM-Trello .card-title.completed {
+    text-decoration: line-through;
+    color: #5e6c84;
+}
+
+.MMM-Trello .card-description {
+    font-size: 12px;
+    color: #5e6c84;
+    line-height: 1.5;
+    margin-bottom: 8px;
+    max-height: 60px;
+    overflow: hidden;
+    font-family: 'IBM Plex Sans Arabic', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+    direction: rtl;
+    text-align: right;
+}
+
+.MMM-Trello .card-description.completed {
+    text-decoration: line-through;
+    opacity: 0.7;
+}
+
+.MMM-Trello .card-due-date {
+    background: #ff9500;
+    color: white;
+    font-size: 11px;
+    padding: 3px 6px;
+    border-radius: 3px;
+    display: inline-block;
+    margin-bottom: 6px;
+    font-family: 'IBM Plex Sans Arabic', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+    direction: rtl;
+}
+
+.MMM-Trello .card-due-date.overdue {
+    background: #eb5a46;
+}
+
+.MMM-Trello .card-due-date.completed {
+    background: #61bd4f;
+}
+
+/* Checklist Styling */
+.MMM-Trello .card-checklist {
+    margin-top: 8px;
+    border-top: 1px solid rgba(0, 0, 0, 0.1);
+    padding-top: 8px;
+}
+
+.MMM-Trello .checklist-title {
+    font-weight: 500;
+    font-size: 12px;
+    color: #172b4d;
+    margin-bottom: 6px;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    font-family: 'IBM Plex Sans Arabic', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+    direction: rtl;
+    text-align: right;
+}
+
+.MMM-Trello .checklist-item {
+    display: flex;
+    align-items: flex-start;
+    gap: 8px;
+    margin-bottom: 4px;
+    font-size: 12px;
+    line-height: 1.4;
+    text-align: right;
+    direction: rtl;
+    font-family: 'IBM Plex Sans Arabic', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+}
+
+.MMM-Trello .checklist-checkbox {
+    width: 16px;
+    height: 16px;
+    border: 2px solid #ddd;
+    border-radius: 3px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    margin-top: 1px;
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+
+.MMM-Trello .checklist-checkbox.completed {
+    background: #61bd4f;
+    border-color: #61bd4f;
+    color: white;
+}
+
+.MMM-Trello .checklist-checkbox.incomplete {
+    background: transparent;
+    border-color: #ddd;
+}
+
+.MMM-Trello .checklist-text {
+    color: #172b4d;
+    flex: 1;
+    font-family: 'IBM Plex Sans Arabic', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+    direction: rtl;
+    text-align: right;
+}
+
+.MMM-Trello .checklist-text.completed {
+    text-decoration: line-through;
+    color: #5e6c84;
+}
+
+/* Progress Bar for Checklists */
+.MMM-Trello .checklist-progress {
+    margin-bottom: 8px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
 
+.MMM-Trello .progress-bar {
+    flex: 1;
+    height: 6px;
+    background: #ddd;
+    border-radius: 3px;
+    overflow: hidden;
 }
 
-.checklist-item {
-    text-align: left;
+.MMM-Trello .progress-fill {
+    height: 100%;
+    background: #61bd4f;
+    transition: width 0.3s ease;
+}
+
+.MMM-Trello .progress-text {
+    font-size: 11px;
+    color: #5e6c84;
+    white-space: nowrap;
+}
+
+/* Legacy compatibility for existing single-list mode */
+.checklist-wrapper {
+    margin-top: 8px;
 }
 
 .is-completed {
     text-decoration: line-through;
 }
+
+/* Page indicator for rotation */
+.MMM-Trello .page-indicator {
+    background: rgba(255, 255, 255, 0.2);
+    color: #ffffff;
+    font-size: 12px;
+    padding: 4px 8px;
+    border-radius: 12px;
+    text-align: center;
+    margin-bottom: 10px;
+    font-family: 'IBM Plex Sans Arabic', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+    align-self: center;
+}
+
+/* No Cards Message */
+.MMM-Trello .no-cards {
+    text-align: center;
+    color: rgba(255, 255, 255, 0.6);
+    font-style: italic;
+    padding: 20px;
+}
+
+/* Loading spinner */
+.MMM-Trello .loading {
+    text-align: center;
+    color: rgba(255, 255, 255, 0.6);
+    padding: 20px;
+}
+
+.MMM-Trello .loading .fa-spin {
+    margin-right: 8px;
+}
+
+/* Responsive adjustments for smaller screens */
+@media (max-width: 600px) {
+    .MMM-Trello .board-view {
+        gap: 15px;
+    }
+
+    .MMM-Trello .trello-list {
+        padding: 10px;
+    }
+
+    .MMM-Trello .list-header {
+        font-size: 14px;
+        padding: 6px 10px;
+    }
+
+    .MMM-Trello .trello-card {
+        padding: 8px 10px;
+    }
+}