@quazardous/qdadm 1.19.3

package/src/styles/_markdown.scss

@@ -0,0 +1,88 @@
+/**
+ * Markdown Rendered Content
+ * Styles for displaying markdown-to-HTML content
+ */
+
+@use 'variables' as *;
+
+.markdown-rendered {
+  background: var(--p-surface-100);
+  padding: $space-md;
+  border-radius: $radius-sm;
+  max-height: 400px;
+  overflow-y: auto;
+  font-size: $font-size-sm;
+
+  // Headings
+  h1, h2, h3, h4 {
+    margin: $space-md 0 $space-sm 0;
+    font-weight: $font-weight-semibold;
+  }
+
+  h1 { font-size: $font-size-2xl; }
+  h2 { font-size: $font-size-xl; }
+  h3 { font-size: $font-size-lg; }
+
+  // Paragraphs
+  p {
+    margin: $space-sm 0;
+  }
+
+  // Lists
+  ul, ol {
+    margin: $space-sm 0;
+    padding-left: $space-lg;
+  }
+
+  // Links
+  a {
+    color: var(--p-primary-500);
+    text-decoration: underline;
+  }
+
+  // Inline code
+  code {
+    background: var(--p-surface-200);
+    padding: 0.1rem 0.3rem;
+    border-radius: $radius-sm;
+    font-family: $font-family-mono;
+    font-size: 0.85em;
+  }
+
+  // Code blocks
+  pre {
+    background: var(--p-surface-200);
+    padding: 0.75rem;
+    border-radius: $radius-sm;
+    overflow-x: auto;
+  }
+
+  // Blockquotes
+  blockquote {
+    border-left: 3px solid var(--p-surface-300);
+    margin: $space-sm 0;
+    padding-left: $space-md;
+    color: var(--p-surface-600);
+  }
+
+  // Figures (images with captions)
+  .md-figure {
+    margin: $space-md 0;
+    padding: 0;
+
+    img {
+      max-width: 100%;
+      height: auto;
+      border-radius: $radius-sm;
+      display: block;
+    }
+
+    figcaption {
+      margin-top: $space-sm;
+      font-size: $font-size-xs;
+      color: var(--p-surface-500);
+      font-style: italic;
+      line-height: $line-height-normal;
+    }
+  }
+}

package/src/styles/_responsive.scss

@@ -0,0 +1,255 @@
+/**
+ * qdadm - Responsive Layout Styles
+ *
+ * Global responsive rules for layout components.
+ * These complement the scoped styles in Vue components.
+ */
+
+@use 'variables' as *;
+
+// ============================================
+// CSS Variables for responsive behavior
+// ============================================
+
+:root {
+  // Sidebar (uses SCSS variables from _variables.scss)
+  --qdadm-sidebar-width: #{$sidebar-width};
+  --qdadm-sidebar-collapsed-width: #{$sidebar-width-collapsed};
+  --qdadm-sidebar-transition: #{$transition-slow};
+
+  // Content padding
+  --qdadm-content-padding: #{$space-lg};
+  --qdadm-content-padding-mobile: #{$space-md};
+}
+
+// ============================================
+// App Layout Responsive
+// ============================================
+
+.app-layout {
+  // Tablet: reduce sidebar width
+  @include tablet-lg {
+    --qdadm-sidebar-width: 12rem;
+  }
+
+  // Mobile: sidebar becomes fullscreen overlay
+  @include tablet {
+    --qdadm-sidebar-width: 100vw;
+  }
+}
+
+// Sidebar responsive behavior
+.sidebar {
+  transition: transform var(--qdadm-sidebar-transition),
+              width var(--qdadm-sidebar-transition);
+
+  @include tablet {
+    transform: translateX(-100%);
+    position: fixed;
+    z-index: 1000;
+    box-shadow: none;
+    width: 100vw !important;
+    height: 100dvh;
+    max-height: 100dvh;
+    overflow-y: auto;
+
+    &.sidebar--open {
+      transform: translateX(0);
+      box-shadow: none;
+    }
+  }
+}
+
+// Main content responsive
+.main-content {
+  transition: margin-left var(--qdadm-sidebar-transition);
+
+  @include tablet {
+    margin-left: 0 !important;
+  }
+}
+
+// Mobile overlay when sidebar open
+.sidebar-overlay {
+  display: none;
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 99;
+  opacity: 0;
+  transition: opacity 0.25s;
+
+  @include tablet {
+    display: block;
+    pointer-events: none;
+
+    &.sidebar-overlay--visible {
+      opacity: 1;
+      pointer-events: auto;
+    }
+  }
+}
+
+// Hamburger menu button (hidden on desktop)
+.hamburger-btn {
+  display: none !important;
+
+  @include tablet {
+    display: flex !important;
+  }
+}
+
+// ============================================
+// Page Content Responsive
+// ============================================
+
+.page-content {
+  @include tablet {
+    padding: var(--qdadm-content-padding-mobile);
+  }
+}
+
+// Page header responsive
+.page-header {
+  @include tablet {
+    flex-direction: column;
+    gap: 1rem;
+    align-items: flex-start !important;
+  }
+
+  .page-header-actions {
+    @include tablet {
+      width: 100%;
+      justify-content: flex-start;
+    }
+  }
+}
+
+// ============================================
+// DataTable Responsive
+// ============================================
+
+.p-datatable {
+  @include tablet {
+    // Horizontal scroll for table
+    .p-datatable-wrapper {
+      overflow-x: auto;
+      -webkit-overflow-scrolling: touch;
+    }
+
+    // Minimum width to prevent squishing
+    .p-datatable-table {
+      min-width: 600px;
+    }
+  }
+
+  @include mobile {
+    .p-datatable-table {
+      min-width: 500px;
+    }
+  }
+}
+
+// ============================================
+// Filter Bar Responsive
+// ============================================
+
+.filter-bar {
+  @include tablet {
+    flex-wrap: wrap;
+    gap: 0.75rem;
+  }
+}
+
+.filter-bar-left {
+  @include tablet {
+    flex-wrap: wrap;
+    gap: 0.5rem;
+    width: 100%;
+  }
+}
+
+// ============================================
+// Card Responsive
+// ============================================
+
+.card {
+  @include tablet {
+    border-radius: 0;
+    border: none;
+    background: transparent;
+    padding: 0;
+  }
+}
+
+// ============================================
+// Form Layout Responsive
+// ============================================
+
+.form-grid {
+  @include tablet {
+    grid-template-columns: 1fr !important;
+  }
+}
+
+.form-actions {
+  @include mobile {
+    flex-direction: column;
+    gap: 0.5rem;
+
+    .form-actions-left {
+      width: 100%;
+      flex-direction: column;
+    }
+
+    .p-button {
+      width: 100%;
+      white-space: nowrap;
+    }
+  }
+}
+
+// ============================================
+// Cards Grid Responsive
+// ============================================
+
+.cards-grid {
+  @include tablet {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  @include mobile {
+    grid-template-columns: 1fr;
+  }
+}
+
+// ============================================
+// Utility Classes
+// ============================================
+
+.hide-mobile {
+  @include tablet {
+    display: none !important;
+  }
+}
+
+.hide-desktop {
+  display: none !important;
+  @include tablet {
+    display: block !important;
+  }
+}
+
+.hide-mobile-inline {
+  @include tablet {
+    display: none !important;
+  }
+}
+
+.show-mobile-inline {
+  display: none !important;
+  @include tablet {
+    display: inline !important;
+  }
+}
+

package/src/styles/_show-pages.scss

@@ -0,0 +1,186 @@
+/**
+ * Show/Detail Page Styles
+ * Common styles for entity detail views (EventShow, NexusShow, etc.)
+ */
+
+@use 'variables' as *;
+
+// Header with back button
+.header-left {
+  display: flex;
+  align-items: center;
+  gap: $space-md;
+}
+
+// Content layout grid
+.content-grid {
+  display: grid;
+  gap: $space-lg;
+}
+
+// Meta grid for key-value displays
+.meta-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: $space-lg;
+
+  @include tablet {
+    grid-template-columns: 1fr;
+  }
+}
+
+// Summary/description text blocks
+.summary-text,
+.intent-text {
+  line-height: $line-height-normal;
+}
+
+// Tags container
+.tags-wrap {
+  display: flex;
+  gap: $space-sm;
+  flex-wrap: wrap;
+}
+
+// URL action buttons
+.url-actions {
+  display: flex;
+  gap: $space-sm;
+  align-items: center;
+}
+
+// Content boxes for text display
+.content-box {
+  background: var(--p-surface-100);
+  padding: $space-md;
+  border-radius: $radius-sm;
+  white-space: pre-wrap;
+  word-break: break-word;
+
+  &--scrollable {
+    max-height: 300px;
+    overflow-y: auto;
+  }
+
+  &--tall {
+    max-height: 400px;
+  }
+}
+
+// Status and tags row
+.status-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+}
+
+.tags-row {
+  display: flex;
+  gap: $space-sm;
+}
+
+// =============================================================================
+// ShowField Component
+// =============================================================================
+
+.show-field {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+
+  &--horizontal {
+    flex-direction: row;
+    align-items: flex-start;
+    gap: 1rem;
+  }
+
+  &__label {
+    font-weight: 600;
+    color: var(--p-text-muted-color, #6c757d);
+    font-size: 0.875rem;
+
+    .show-field--horizontal & {
+      padding-top: 0.125rem;
+    }
+  }
+
+  &__value {
+    color: var(--p-text-color, #1e293b);
+    line-height: 1.5;
+  }
+}
+
+// =============================================================================
+// ShowDisplay Component
+// =============================================================================
+
+.show-display {
+  display: inline;
+
+  &--badge {
+    display: inline-flex;
+    align-items: center;
+  }
+
+  &--empty {
+    color: var(--p-text-muted-color, #6c757d);
+  }
+
+  &--email,
+  &--url,
+  &--reference {
+    color: var(--p-primary-color, #3b82f6);
+    text-decoration: none;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+
+  &--password {
+    font-family: monospace;
+    letter-spacing: 0.1em;
+  }
+
+  &--number,
+  &--currency {
+    font-variant-numeric: tabular-nums;
+  }
+
+  &--boolean {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+
+    &.text-success {
+      color: var(--p-green-500, #22c55e);
+    }
+
+    &.text-danger {
+      color: var(--p-red-500, #ef4444);
+    }
+
+    &.text-muted {
+      color: var(--p-text-muted-color, #6c757d);
+    }
+  }
+
+  &--textarea {
+    white-space: pre-wrap;
+    line-height: 1.6;
+  }
+
+  &--image img {
+    border-radius: 4px;
+    object-fit: cover;
+  }
+
+  &--json {
+    background: var(--p-surface-100, #f1f5f9);
+    padding: 0.75rem;
+    border-radius: 4px;
+    font-size: 0.875rem;
+    overflow-x: auto;
+    margin: 0;
+  }
+}