Skip to content

Commit

Permalink
add table plugin to blocks, add frontend snippet with basic styling, …
Browse files Browse the repository at this point in the history
…add default blocks to site config
  • Loading branch information
Jack MB committed Nov 8, 2023
1 parent f893fa9 commit 2d008c9
Show file tree
Hide file tree
Showing 39 changed files with 1,210 additions and 22 deletions.
26 changes: 26 additions & 0 deletions assets/css/styles.css
Original file line number Diff line number Diff line change
Expand Up @@ -688,6 +688,20 @@ video {
line-height: 24px;
}

table th {
border-bottom-width: 1px;
--tw-border-opacity: 1;
border-color: rgb(0 128 96 / var(--tw-border-opacity));
padding: 0.5rem;
text-align: left;
}

table td {
border-bottom-width: 1px;
border-color: rgb(0 128 96 / 0.2);
padding: 0.5rem;
}

.mb-2 {
margin-bottom: 0.5rem;
}
Expand All @@ -704,6 +718,10 @@ video {
margin-right: 0.5rem;
}

.block {
display: block;
}

.inline-block {
display: inline-block;
}
Expand All @@ -712,6 +730,10 @@ video {
display: flex;
}

.table {
display: table;
}

.grid {
display: grid;
}
Expand All @@ -728,6 +750,10 @@ video {
max-width: 1120px;
}

.table-auto {
table-layout: auto;
}

.grid-cols-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
Expand Down
4 changes: 3 additions & 1 deletion composer.json
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,9 @@
},
"require": {
"php": ">=8.0.0 <8.3.0",
"getkirby/cms": "^3.9"
"getkirby/cms": "^3.9",
"ragi96/table-field": "^1.1",
"jg/kirby-fields-block": "^1.2"
},
"config": {
"allow-plugins": {
Expand Down
81 changes: 80 additions & 1 deletion composer.lock

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion content/_drafts/support/page.txt
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ Cover: - file://9HFDeRjEIdIo1uvY

----

Text: [{"content":{"level":"h3","text":"Sed do eiusmod tempor"},"id":"3d4a97c3-fcc4-4949-bc96-ffea2c7ef5c4","isHidden":false,"type":"heading"},{"content":{"text":"<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>"},"id":"9e62fc72-d0d1-4132-ad35-594605320d56","isHidden":false,"type":"text"},{"content":{"level":"h3","text":"Duis aute irure dolor"},"id":"8c9cd737-58a3-42d3-ad47-6413d71dec92","isHidden":false,"type":"heading"},{"content":{"text":"<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>"},"id":"0953b19f-6426-48c2-a882-990a62092b5d","isHidden":false,"type":"text"}]
Text: [{"content":{"level":"h3","text":"Sed do eiusmod tempor"},"id":"3d4a97c3-fcc4-4949-bc96-ffea2c7ef5c4","isHidden":false,"type":"heading"},{"content":{"text":"<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>"},"id":"9e62fc72-d0d1-4132-ad35-594605320d56","isHidden":false,"type":"text"},{"content":{"level":"h3","text":"Duis aute irure dolor"},"id":"8c9cd737-58a3-42d3-ad47-6413d71dec92","isHidden":false,"type":"heading"},{"content":{"text":"<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>"},"id":"0953b19f-6426-48c2-a882-990a62092b5d","isHidden":false,"type":"text"},{"content":{"table":[["Name","Company","Info"],["Lorem","ipsum","dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."],["Lorem","ipsum","dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."],["Lorem","ipsum","dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."],["Lorem","ipsum","dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."]]},"id":"501634df-501e-44b3-ac4e-88eb08bd4022","isHidden":false,"type":"table"},{"content":{"location":"kirby","image":["file://9HFDeRjEIdIo1uvY"],"src":"","alt":"","caption":"","link":"","ratio":"","crop":"false"},"id":"4fac19fe-f7c9-49b6-ae97-eec150924873","isHidden":false,"type":"image"}]

----

Expand Down
10 changes: 10 additions & 0 deletions site/blueprints/blocks/table.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
name: Table
icon: menu
preview: fields # required
wysiwyg: true # recommended
fields:
table:
label: table
type: table
maxColumns: 5
minColumns: 2
26 changes: 26 additions & 0 deletions site/config/config.php
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
<?php

return [
'blocks' => [
'fieldsets' => [
'text' => [
'label' => 'Text',
'type' => 'group',
'fieldsets' => [
'text',
'heading',
'table',
'markdown',
]
],
'media' => [
'label' => 'Media',
'type' => 'group',
'fieldsets' => [
'image',
'video'
]
]
]
]
];
12 changes: 12 additions & 0 deletions site/plugins/kirby-fields-block/.gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
# OS files
.DS_Store

# npm modules
/node_modules

# Composer files
/vendor

# Lock Files
yarn.lock
package-lock.json
21 changes: 21 additions & 0 deletions site/plugins/kirby-fields-block/LICENSE.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
MIT License

Copyright (c) 2021 Jon Gacnik

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
74 changes: 74 additions & 0 deletions site/plugins/kirby-fields-block/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,74 @@
# Kirby Fields Block

Kirby [block preview](https://getkirby.com/docs/reference/plugins/extensions/blocks) plugin to directly render block fields, allowing for inline editing.

<img src="https://files.jongacnik.com/kirby-fields-preview-1.png" width="975" height="auto" />

## Usage

### Block definition

When creating a custom block in your blueprints, pass `preview: fields` to utilize this plugin

```yaml
blockname:
name: Block Name
preview: fields # required
wysiwyg: true # recommended
fields:
text:
label: Text
type: text
```
Setting `wysiwyg: true` prevents drawer from automatically opening when creating a new block.

### Disable block title

You can disable the block title bar by passing `label: false`

```yaml
blockname:
name: Block Name
preview: fields
wysiwyg: true
label: false # disables block title bar
fields:
text:
label: Text
type: text
```

<details>
<summary>Example</summary>
<img src="https://files.jongacnik.com/kirby-fields-preview-2.png" width="975" height="auto" />
</details>

### Collapse/Expand block

You can collapse or expand the block preview by double clicking the block title bar.

## Notes

- The block `icon` will appear in the title bar.
- Currently does not support blocks with tabs.

## Installation

```
composer require jg/kirby-fields-block
```
<details>
<summary>Other installation methods</summary>
### Download
Download and copy this repository to `/site/plugins/kirby-fields-block`.
### Git submodule
```
git submodule add https://github.com/jongacnik/kirby-fields-block.git site/plugins/kirby-fields-block
```
</details>
15 changes: 15 additions & 0 deletions site/plugins/kirby-fields-block/composer.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
{
"name": "jg/kirby-fields-block",
"description": "Kirby Fields Block",
"type": "kirby-plugin",
"license": "MIT",
"authors": [
{
"name": "Jon Gacnik",
"email": "[email protected]"
}
],
"require": {
"getkirby/composer-installer": "^1.1"
}
}
42 changes: 42 additions & 0 deletions site/plugins/kirby-fields-block/index.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@

.k-block-fields-preview {
margin: -0.75rem;
overflow: hidden;
border-radius: var(--rounded);
}
.k-block-fields-preview .k-block-title {
padding: 0.75rem;
background: #f7f7f7;
}
.k-block-fields-preview:not([data-hidden="true"]) .k-block-title {
border-bottom: 1px solid rgba(0,0,0,.1);
}
.k-block-fields-preview .k-fields-block-toggle {
margin-left: auto;
cursor: pointer;
}
.k-block-fields-preview[data-hidden="true"] .k-fields-block-toggle {
transform: scaleY(-1);
}
.k-block-fields-preview .k-form {
padding: 1.25rem 1.5rem 1.5rem 1.5rem;
}

/**
* Reset `.k-layout-column .k-empty` overrides
*/
.k-block-fields-preview .k-empty {
position: static !important;
opacity: 1 !important;
align-items: stretch !important;
justify-content: flex-start !important;
color: #777 !important;
border: 1px dashed #ccc !important;
border-radius: 1px !important;
}
.k-block-fields-preview .k-empty[data-layout="cards"] {
justify-content: center !important;
}
.k-block-fields-preview .k-empty[data-layout="list"] .k-icon {
border-right: 1px solid rgba(0,0,0,.05) !important;
}
Loading

0 comments on commit 2d008c9

Please sign in to comment.