railspress-engine 0.1.2 → 1.2.0

data/app/assets/stylesheets/railspress/admin/forms.css

@@ -0,0 +1,459 @@
+/*
+ * RailsPress Admin - Forms
+ * Form layouts, inputs, selects, checkboxes
+ */
+
+/* Form Layout */
+.rp-form {
+  display: flex;
+  flex-direction: column;
+}
+
+.rp-form--narrow {
+  max-width: 560px;
+}
+
+.rp-form-layout {
+  display: grid;
+  grid-template-columns: 1fr 280px;
+  gap: var(--rp-space-xl);
+  align-items: start;
+}
+
+.rp-form-main {
+  display: flex;
+  flex-direction: column;
+  gap: var(--rp-space-lg);
+}
+
+.rp-form-sidebar {
+  display: flex;
+  flex-direction: column;
+  gap: var(--rp-space-md);
+}
+
+.rp-form-group {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.rp-form-row {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: var(--rp-space-md);
+}
+
+.rp-form-row--3 {
+  grid-template-columns: repeat(3, 1fr);
+}
+
+.rp-form-actions {
+  display: flex;
+  gap: var(--rp-space-sm);
+  padding-top: var(--rp-space-xl);
+  margin-top: var(--rp-space-xl);
+  border-top: 1px solid var(--rp-border-light);
+}
+
+.rp-form-errors {
+  background: var(--rp-danger-light);
+  border: 1px solid var(--rp-danger);
+  border-radius: var(--rp-radius);
+  padding: var(--rp-space-md);
+  color: var(--rp-danger);
+  font-size: 0.875rem;
+}
+
+.rp-form-errors ul {
+  margin: 0;
+  padding-left: var(--rp-space-lg);
+}
+
+/* Labels */
+.rp-label {
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--rp-text);
+}
+
+.rp-label--lg {
+  font-size: 1rem;
+}
+
+.rp-label--required::after {
+  content: ' *';
+  color: var(--rp-danger);
+}
+
+/* Inputs */
+.rp-input {
+  width: 100%;
+  padding: 10px 12px;
+  font-family: var(--rp-font-body);
+  font-size: 0.9375rem;
+  color: var(--rp-text);
+  background: var(--rp-bg-elevated);
+  border: 1px solid var(--rp-border);
+  border-radius: var(--rp-radius);
+  transition: border-color 0.15s, box-shadow 0.15s;
+}
+
+.rp-input:focus {
+  outline: none;
+  border-color: var(--rp-primary);
+  box-shadow: 0 0 0 3px var(--rp-primary-light);
+}
+
+.rp-input::placeholder {
+  color: var(--rp-text-light);
+}
+
+.rp-input--sm {
+  padding: 6px 10px;
+  font-size: 0.875rem;
+}
+
+.rp-input--lg {
+  padding: 14px 16px;
+  font-size: 1.125rem;
+}
+
+.rp-input--title {
+  font-family: var(--rp-font-display);
+  font-size: 1.5rem;
+  font-weight: 600;
+  padding: 12px 14px;
+  letter-spacing: -0.01em;
+}
+
+.rp-input--mono {
+  font-family: var(--rp-font-mono);
+  font-size: 0.875rem;
+}
+
+textarea.rp-input {
+  min-height: 100px;
+  resize: vertical;
+  line-height: 1.5;
+}
+
+/* Select */
+.rp-select {
+  width: 100%;
+  padding: 10px 12px;
+  padding-right: 36px;
+  font-family: var(--rp-font-body);
+  font-size: 0.9375rem;
+  color: var(--rp-text);
+  background: var(--rp-bg-elevated) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b6860' d='M6 8L1 3h10z'/%3E%3C/svg%3E") no-repeat right 12px center;
+  border: 1px solid var(--rp-border);
+  border-radius: var(--rp-radius);
+  appearance: none;
+  cursor: pointer;
+  transition: border-color 0.15s, box-shadow 0.15s;
+}
+
+.rp-select:focus {
+  outline: none;
+  border-color: var(--rp-primary);
+  box-shadow: 0 0 0 3px var(--rp-primary-light);
+}
+
+.rp-select--sm {
+  padding: 6px 10px;
+  padding-right: 32px;
+  font-size: 0.875rem;
+}
+
+/* Checkbox & Radio */
+.rp-checkbox,
+.rp-radio {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--rp-space-sm);
+  cursor: pointer;
+}
+
+.rp-checkbox input,
+.rp-radio input {
+  width: 18px;
+  height: 18px;
+  margin: 0;
+  flex-shrink: 0;
+  cursor: pointer;
+  accent-color: var(--rp-primary);
+}
+
+.rp-checkbox-label,
+.rp-radio-label {
+  font-size: 0.9375rem;
+  color: var(--rp-text);
+  line-height: 1.4;
+}
+
+.rp-checkbox-description,
+.rp-radio-description {
+  font-size: 0.8125rem;
+  color: var(--rp-text-muted);
+  margin-top: 2px;
+}
+
+.rp-checkbox-group,
+.rp-radio-group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--rp-space-sm);
+}
+
+.rp-checkbox-group--inline,
+.rp-radio-group--inline {
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: var(--rp-space-lg);
+}
+
+/* Fieldset */
+.rp-fieldset {
+  border: 1px solid var(--rp-border-light);
+  border-radius: var(--rp-radius);
+  padding: var(--rp-space-lg);
+  background: var(--rp-bg);
+}
+
+.rp-fieldset-legend {
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--rp-text);
+  padding: 0 var(--rp-space-sm);
+  margin-left: -var(--rp-space-sm);
+}
+
+/* Hint & Help */
+.rp-hint {
+  font-size: 0.8125rem;
+  color: var(--rp-text-muted);
+  margin-top: 4px;
+}
+
+.rp-input-wrapper {
+  position: relative;
+}
+
+.rp-input-prefix,
+.rp-input-suffix {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  color: var(--rp-text-muted);
+  font-size: 0.9375rem;
+  pointer-events: none;
+}
+
+.rp-input-prefix {
+  left: 12px;
+}
+
+.rp-input-suffix {
+  right: 12px;
+}
+
+.rp-input--has-prefix {
+  padding-left: 36px;
+}
+
+.rp-input--has-suffix {
+  padding-right: 36px;
+}
+
+/* Rich text placeholder */
+.rp-rich-text {
+  min-height: 670px;
+  border: 1px solid var(--rp-border);
+  border-radius: var(--rp-radius);
+  background: var(--rp-bg-elevated);
+  padding: var(--rp-space-md);
+}
+
+/* Sidebar sections */
+.rp-sidebar-section {
+  background: var(--rp-info-light);
+  border-radius: var(--rp-radius);
+  padding: var(--rp-space-md);
+  border: 1px solid #d8e8f0;
+}
+
+.rp-sidebar-section .rp-form-group {
+  margin-bottom: var(--rp-space-md);
+}
+
+.rp-sidebar-section .rp-form-group:last-child {
+  margin-bottom: 0;
+}
+
+.rp-sidebar-title {
+  font-size: 0.6875rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--rp-text-muted);
+  margin-bottom: var(--rp-space-md);
+}
+
+/* File input */
+.rp-file-input {
+  width: 100%;
+  padding: var(--rp-space-sm);
+  border: 1px dashed var(--rp-border);
+  border-radius: var(--rp-radius);
+  background: var(--rp-bg);
+  cursor: pointer;
+}
+
+.rp-file-input:hover {
+  border-color: var(--rp-primary);
+  background: var(--rp-primary-light);
+}
+
+/* Checkbox label variant */
+.rp-checkbox-label {
+  display: flex;
+  align-items: center;
+  gap: var(--rp-space-sm);
+  font-size: var(--rp-text-sm);
+  color: var(--rp-text-muted);
+  cursor: pointer;
+  margin-top: var(--rp-space-sm);
+}
+
+.rp-checkbox-label input[type="checkbox"] {
+  width: 16px;
+  height: 16px;
+  cursor: pointer;
+}
+
+/* Form hint */
+.rp-form-hint {
+  font-size: 0.75rem;
+  color: var(--rp-text-muted);
+  margin-top: 4px;
+}
+
+/* Gallery Preview (Edit Form) */
+.rp-gallery-preview {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: var(--rp-space-sm);
+  margin-bottom: var(--rp-space-md);
+}
+
+.rp-gallery-item {
+  position: relative;
+  background: var(--rp-bg-elevated);
+  border: 1px solid var(--rp-border);
+  border-radius: var(--rp-radius);
+  padding: var(--rp-space-xs);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--rp-space-xs);
+}
+
+.rp-gallery-thumb {
+  width: 100%;
+  height: auto;
+  border-radius: calc(var(--rp-radius) - 2px);
+  object-fit: cover;
+  aspect-ratio: 1;
+}
+
+.rp-gallery-file {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: var(--rp-space-sm);
+  text-align: center;
+}
+
+.rp-gallery-file-icon {
+  font-size: 1.5rem;
+  margin-bottom: var(--rp-space-xs);
+}
+
+.rp-gallery-file-name {
+  font-size: 0.6875rem;
+  color: var(--rp-text-muted);
+  word-break: break-all;
+}
+
+.rp-gallery-remove {
+  font-size: 0.6875rem;
+  color: var(--rp-danger);
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  cursor: pointer;
+}
+
+.rp-gallery-remove input[type="checkbox"] {
+  width: 14px;
+  height: 14px;
+}
+
+/* Single Attachment Preview */
+.rp-attachment-preview {
+  margin-bottom: var(--rp-space-md);
+  text-align: center;
+}
+
+.rp-attachment-thumb {
+  max-width: 100%;
+  height: auto;
+  border-radius: var(--rp-radius);
+  border: 1px solid var(--rp-border);
+}
+
+.rp-attachment-remove {
+  font-size: 0.75rem;
+  color: var(--rp-danger);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  margin-top: var(--rp-space-sm);
+  cursor: pointer;
+}
+
+/* Gallery Grid (Show Page) */
+.rp-gallery-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+  gap: var(--rp-space-md);
+}
+
+.rp-gallery-grid-item {
+  border-radius: var(--rp-radius);
+  overflow: hidden;
+}
+
+.rp-gallery-grid-image {
+  width: 100%;
+  height: auto;
+  display: block;
+  transition: transform 0.2s;
+}
+
+.rp-gallery-grid-item:hover .rp-gallery-grid-image {
+  transform: scale(1.02);
+}
+
+/* Attachment Display (Show Page) */
+.rp-attachment-display {
+  max-width: 400px;
+}
+
+.rp-attachment-image {
+  width: 100%;
+  height: auto;
+  border-radius: var(--rp-radius);
+}

data/app/assets/stylesheets/railspress/admin/layout.css

@@ -0,0 +1,256 @@
+/*
+ * RailsPress Admin - Layout
+ * Main layout, sidebar, and navigation
+ */
+
+.rp-admin-layout {
+  display: flex;
+  min-height: 100vh;
+}
+
+/* Sidebar */
+.rp-sidebar {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: var(--rp-sidebar-width);
+  height: 100vh;
+  background: var(--rp-sidebar-bg);
+  z-index: 100;
+  transition: width 0.25s ease;
+  overflow-y: auto;
+  overflow-x: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+.rp-sidebar-content {
+  padding: var(--rp-space-lg) var(--rp-space-md);
+}
+
+.rp-sidebar-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: var(--rp-space-2xl);
+}
+
+.rp-logo {
+  font-family: var(--rp-font-display);
+  font-size: 1.375rem;
+  font-weight: 700;
+  color: var(--rp-sidebar-text-active);
+  letter-spacing: -0.01em;
+  margin-bottom: 0;
+}
+
+/* Sidebar Toggle Button */
+.rp-sidebar-toggle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  background: transparent;
+  border: none;
+  border-radius: var(--rp-radius);
+  color: var(--rp-sidebar-text-active);
+  opacity: 0.7;
+  cursor: pointer;
+  transition: all 0.15s ease;
+  flex-shrink: 0;
+}
+
+.rp-sidebar-toggle:hover {
+  background: var(--rp-sidebar-hover);
+  opacity: 1;
+}
+
+.rp-sidebar-toggle-icon {
+  width: 20px;
+  height: 20px;
+}
+
+.rp-sidebar-toggle-icon--expand {
+  display: none;
+}
+
+/* Navigation */
+.rp-nav {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.rp-nav-link {
+  display: flex;
+  align-items: center;
+  gap: var(--rp-space-md);
+  padding: 10px 12px;
+  color: var(--rp-sidebar-text);
+  text-decoration: none;
+  font-size: 0.9375rem;
+  font-weight: 500;
+  border-radius: var(--rp-radius);
+  transition: all 0.15s ease;
+}
+
+.rp-nav-link:hover {
+  background: var(--rp-sidebar-hover);
+  color: var(--rp-sidebar-text-active);
+}
+
+.rp-nav-link--active {
+  background: var(--rp-sidebar-hover);
+  color: var(--rp-sidebar-text-active);
+}
+
+.rp-nav-icon {
+  width: 18px;
+  height: 18px;
+  opacity: 0.7;
+  flex-shrink: 0;
+}
+
+.rp-nav-link:hover .rp-nav-icon,
+.rp-nav-link--active .rp-nav-icon {
+  opacity: 1;
+}
+
+.rp-nav-text {
+  white-space: nowrap;
+  overflow: hidden;
+  transition: opacity 0.2s ease;
+}
+
+.rp-nav-divider {
+  height: 1px;
+  background: var(--rp-sidebar-hover);
+  margin: var(--rp-space-md) 0;
+}
+
+/* Main Content Area */
+.rp-main {
+  flex: 1;
+  margin-left: var(--rp-sidebar-width);
+  padding: var(--rp-space-xl) var(--rp-space-2xl);
+  min-width: 0;
+  transition: margin-left 0.25s ease;
+}
+
+/* Collapsed Sidebar State */
+.rp-sidebar--collapsed {
+  width: var(--rp-sidebar-width-collapsed);
+}
+
+.rp-sidebar--collapsed .rp-sidebar-content {
+  padding: var(--rp-space-lg) var(--rp-space-sm);
+}
+
+.rp-sidebar--collapsed .rp-sidebar-header {
+  justify-content: center;
+}
+
+.rp-sidebar--collapsed .rp-logo {
+  display: none;
+}
+
+.rp-sidebar--collapsed .rp-sidebar-toggle {
+  width: 36px;
+  height: 36px;
+}
+
+.rp-sidebar--collapsed .rp-sidebar-toggle-icon {
+  width: 20px;
+  height: 20px;
+}
+
+.rp-sidebar--collapsed .rp-nav-link {
+  justify-content: center;
+  padding: 10px;
+}
+
+.rp-sidebar--collapsed .rp-nav-text {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+}
+
+.rp-sidebar--collapsed .rp-nav-icon {
+  width: 22px;
+  height: 22px;
+}
+
+.rp-sidebar--collapsed .rp-sidebar-toggle-icon--collapse {
+  display: none;
+}
+
+.rp-sidebar--collapsed .rp-sidebar-toggle-icon--expand {
+  display: block;
+}
+
+/* Main content adjustment when sidebar collapsed */
+.rp-admin-layout--sidebar-collapsed .rp-main {
+  margin-left: var(--rp-sidebar-width-collapsed);
+}
+
+/* Mobile Header */
+.rp-mobile-header {
+  display: none;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: var(--rp-header-height);
+  background: var(--rp-sidebar-bg);
+  z-index: 90;
+  padding: 0 var(--rp-space-md);
+  align-items: center;
+  justify-content: space-between;
+}
+
+.rp-hamburger {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 5px;
+  width: 44px;
+  height: 44px;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  padding: 10px;
+}
+
+.rp-hamburger span {
+  display: block;
+  width: 22px;
+  height: 2px;
+  background: var(--rp-sidebar-text-active);
+  border-radius: 1px;
+}
+
+.rp-mobile-logo {
+  font-family: var(--rp-font-display);
+  font-size: 1.125rem;
+  font-weight: 700;
+  color: var(--rp-sidebar-text-active);
+}
+
+.rp-overlay {
+  display: none;
+  position: fixed;
+  inset: 0;
+  background: rgba(26, 29, 33, 0.5);
+  z-index: 95;
+}
+
+.rp-overlay--visible {
+  display: block;
+}

data/app/assets/stylesheets/railspress/admin/lists.css

@@ -0,0 +1,24 @@
+/*
+ * RailsPress Admin - Lists
+ * List components
+ */
+
+.rp-list {
+  list-style: none;
+}
+
+.rp-list-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--rp-space-md);
+  border-bottom: 1px solid var(--rp-border-light);
+}
+
+.rp-list-item:hover {
+  background: var(--rp-bg);
+}
+
+.rp-list-item:last-child {
+  border-bottom: none;
+}