diff --git a/package-lock.json b/package-lock.json index 88ec712a068..53e5993d735 100644 --- a/package-lock.json +++ b/package-lock.json @@ -85,6 +85,7 @@ "@babel/preset-env": "^7.20.2", "@rollup/plugin-inject": "^5.0.3", "@tailwindcss/container-queries": "^0.1.0", + "@tailwindcss/line-clamp": "^0.4.2", "@tailwindcss/typography": "^0.5.9", "@vitejs/plugin-vue2": "^2.2.0", "autoprefixer": "^10.4.0", @@ -4053,6 +4054,15 @@ "tailwindcss": ">=3.2.0" } }, + "node_modules/@tailwindcss/line-clamp": { + "version": "0.4.2", + "resolved": "https://registry.npmjs.org/@tailwindcss/line-clamp/-/line-clamp-0.4.2.tgz", + "integrity": "sha512-HFzAQuqYCjyy/SX9sLGB1lroPzmcnWv1FHkIpmypte10hptf4oPUfucryMKovZh2u0uiS9U5Ty3GghWfEJGwVw==", + "dev": true, + "peerDependencies": { + "tailwindcss": ">=2.0.0 || >=3.0.0 || >=3.0.0-alpha.1" + } + }, "node_modules/@tailwindcss/typography": { "version": "0.5.9", "resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.5.9.tgz", diff --git a/package.json b/package.json index 8cec9155431..5ba57538251 100644 --- a/package.json +++ b/package.json @@ -90,6 +90,7 @@ "@babel/preset-env": "^7.20.2", "@rollup/plugin-inject": "^5.0.3", "@tailwindcss/container-queries": "^0.1.0", + "@tailwindcss/line-clamp": "^0.4.2", "@tailwindcss/typography": "^0.5.9", "@vitejs/plugin-vue2": "^2.2.0", "autoprefixer": "^10.4.0", diff --git a/resources/css/components/column-picker.css b/resources/css/components/column-picker.css index 7f1061743d8..e7828b6d122 100644 --- a/resources/css/components/column-picker.css +++ b/resources/css/components/column-picker.css @@ -3,17 +3,10 @@ } .column-picker-item { - @apply bg-white text-sm outline-none flex items-center rounded select-none; - padding: 4px 8px; - margin: -1px 0; + @apply text-sm outline-none flex items-center select-none h-full; &.sortable { - cursor: grab; - - label { - cursor: grab; - } - + @apply rounded bg-white border; &:hover { @apply bg-gray-200; } diff --git a/resources/css/components/popover.css b/resources/css/components/popover.css index d17c12772f0..9fb3c471052 100644 --- a/resources/css/components/popover.css +++ b/resources/css/components/popover.css @@ -34,11 +34,27 @@ position: relative; } +/* When open */ +.popover-open { + .popover { + pointer-events: auto; + visibility: visible; + } + + .popover-content { + transform: scale(1); + opacity: 1; + } + + .rotating-dots { + transform: rotate(90deg); + } +} + /* Supporting elements */ .rotating-dots { @apply relative cursor-pointer; transition: .12s ease-out; - /* top: 1px; */ } .rotating-dots-button { @@ -54,20 +70,3 @@ @apply focus-outline; } } - -/* When open */ -.popover-open { - .popover { - pointer-events: auto; - visibility: visible; - } - - .popover-content { - transform: scale(1); - opacity: 1; - } - - .rotating-dots { - transform: rotate(90deg); - } -} diff --git a/resources/css/elements/tables.css b/resources/css/elements/tables.css index 721e009095b..a625df7aa78 100644 --- a/resources/css/elements/tables.css +++ b/resources/css/elements/tables.css @@ -44,49 +44,49 @@ } th { - @apply font-medium px-4 py-2; + @apply font-medium px-4 py-3 whitespace-nowrap; &:first-child { @apply rounded-tl-lg; } &:last-child { @apply rounded-tr-lg; } &:hover { @apply text-gray-900; } } + th.handle-column { + @apply p-0 w-4; + } .type-column { text-align: right; } - .actions-column { - @apply p-0 pr-4 text-right; - width: 24px; - } } tbody { outline: none; tr { - @apply border-b text-sm; + @apply border-b border-gray-400 text-sm; &.row-selected { @apply bg-gray-200; } &:first-child { - td:first-child { - @apply rounded-tl; + td:first-child, th:first-child { + @apply rounded-tl-md; } - td:last-child { - @apply rounded-tr; + td:last-child, th:last-child { + @apply rounded-tr-md; } } &:last-child { @apply border-none; - td:first-child { - @apply rounded-bl; + + td:first-child, th:first-child { + @apply rounded-bl-md; } - td:last-child { - @apply rounded-br; + td:last-child, th:last-child { + @apply rounded-br-md; } } @@ -99,25 +99,19 @@ } td { - @apply py-2 px-4 break-words; + @apply py-2 px-4 break-words ; + } + + td.table-drag-handle { + @apply w-1 border-r h-full py-2 px-0; } } - .type-column { + + .type-column { text-align: right; } - .actions-column { - @apply p-0 text-right; - width: 24px; - .rotating-dots-button { - margin-right: 18px; - } - } } - .checkbox-column { - @apply w-4 pr-0 relative z-10; - padding-left: 20px; - } .sortable-column { @apply cursor-pointer select-none; @@ -148,11 +142,67 @@ } } -@screen md { +/* Sticky Meta Columns */ +.data-table { + thead th.checkbox-column { + @apply p-0 pr-2 z-10 sticky -left-px; + background-image: linear-gradient(to right, theme(colors.gray.100) 70%, theme(colors.gray.100 / 0%) 100%); + width: 45px; + min-width: 45px; + } + + thead th.actions-column { + @apply p-0 pl-2 text-right sticky z-1 -right-px; + background-image: linear-gradient(to left, theme(colors.gray.100) 70%, theme(colors.gray.100 / 0%) 100%); + width: 45px; + min-width: 45px; + } + + tbody th.checkbox-column { + @apply z-1 px-3 sticky -left-px; + background-image: linear-gradient(to right, rgba(255,255,255,1) 70%, rgba(255,255,255,0) 100%); + } + + tbody th.actions-column { + @apply p-0 pl-4 text-right sticky -right-px z-1; + background-image: linear-gradient(to left, rgba(255,255,255,1) 70%, rgba(255,255,255,0) 100%); + min-width: 45px; + width: 45px; + } + + tbody tr.row-selected .checkbox-column { + background-image: linear-gradient(to left, theme(colors.gray.200) 70%, theme(colors.gray.200 / 0%) 100%); + } + + tbody tr.row-selected .actions-column { + background-image: linear-gradient(to right, theme(colors.gray.200) 70%, theme(colors.gray.200 / 0%) 100%); + } + + tbody tr:hover .checkbox-column { + background-image: linear-gradient(to right, theme(colors.gray.100) 70%, theme(colors.gray.100 / 0%) 100%); + } + + tbody tr:hover .actions-column { + background-image: linear-gradient(to left, theme(colors.gray.100) 70%, theme(colors.gray.100 / 0%) 100%); + } +} + +/* .data-table[data-size="sm"] { + thead th.checkbox-column, + thead th.actions-column, + tbody th.checkbox-column, + tbody th.actions-column { + position: static !important; + background: none !important; + } +} */ + + +/* @screen md { .data-table { @apply w-full table; } -} +} */ .data-list-header ~ .data-table { thead th { @@ -259,3 +309,50 @@ table.control { padding-left: 30px; } } + + +/* Index Fields + ========================================================================== */ + +.bard-index-field, +.code-index-field, +.markdown-index-field, +.text-index-field, +.textarea-index-field { + @apply line-clamp-2 text-xs; +} + +.title-index-field { + @apply line-clamp-2; + min-width: 10vw; +} + +.relationship-index-field { + min-width: 10vw; + .relationship-index-field-item { + @apply rounded bg-gray-100 border px-1 flex items-center text-2xs; + a { + @apply line-clamp-1; + } + } +} + +.date-index-field { + @apply whitespace-nowrap text-gray-800; +} + +.slug-index-field { + @apply line-clamp-2 font-mono text-2xs; +} + +.status-index-field { + @apply inline-block text-xs bg-gray-300 text-gray-800 shrink rounded-full px-2 py-0.5 text-center justify-center; + + &.status-published:not(.status-private) { + @apply text-lime-900 bg-lime-200 ; + } + + &.status-scheduled { + @apply text-amber-900 bg-amber-200; + } +} diff --git a/resources/js/components/DropdownList.vue b/resources/js/components/DropdownList.vue index 576061d93f6..6fd4b0e2786 100644 --- a/resources/js/components/DropdownList.vue +++ b/resources/js/components/DropdownList.vue @@ -1,5 +1,5 @@