Skip to content

Commit a454e6d

Browse files
wbrowarwbrowar
committed
Version 1.0.1
1 parent 4d8f648 commit a454e6d

File tree

11 files changed

+158
-166
lines changed

11 files changed

+158
-166
lines changed

‎.ddev/config.yaml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
name: craft-little-layout
22
type: php
33
docroot: _source/_craft/web
4-
php_version: "8.0"
4+
php_version: "7.3"
55
webserver_type: nginx-fpm
66
router_http_port: "80"
77
router_https_port: "443"

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
.assebly-cache
33

44
# CRAFT ENVIRONMENT
5+
_source/_craft/.env
56
_source/_craft/config/license.key
67
_source/_craft/storage/*
78
!_source/_craft/storage/.gitkeep

‎CHANGELOG.md‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,13 @@ All notable changes to this project will be documented in this file.
44

55
The format is based on [Keep a Changelog](http://keepachangelog.com/) and this project adheres to [Semantic Versioning](http://semver.org/).
66

7+
8+
## 1.0.1 - 2021-04-06
9+
### Fixed
10+
- Fixed an issue that broke PHP 7.2.5 support. ([#1](https://github.com/wbrowar/craft-little-layout/issues/1))
11+
- Fixed plugin assets loading in front-end Twig templates. ([#2](https://github.com/wbrowar/craft-little-layout/issues/2))
12+
13+
714
## 1.0.0 - 2021-03-20
815
### Added
916
- Initial release 🎉

‎_source/_craft/.env‎

Lines changed: 0 additions & 25 deletions
This file was deleted.

‎_source/_craft/config/project/project.yaml‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
dateModified: 1616260982
1+
dateModified: 1617762215
22
email:
33
fromEmail: email@example.com
44
fromName: 'Craft Plugin'
@@ -11,6 +11,7 @@ plugins:
1111
little-layout:
1212
edition: standard
1313
enabled: true
14+
licenseKey: $PLUGIN_LICENSE_KEY
1415
schemaVersion: 1.0.0
1516
system:
1617
edition: pro

‎_source/_craft/example.env‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,4 +22,5 @@ SECURITY_KEY="NotSecureDontUseInProduction"
2222
# PLUGIN VARIABLES
2323
# ------------------------------------------------------------------------------
2424

25-
PLUGIN_HMR=false
25+
PLUGIN_HMR=false
26+
PLUGIN_LICENSE_KEY=

‎_source/_craft/templates/index.twig‎

Lines changed: 130 additions & 126 deletions
Original file line numberDiff line numberDiff line change
@@ -1,142 +1,146 @@
1-
{#{% dd element.layout %}#}
1+
{% if element ?? false %}
2+
{#{% dd element.layout %}#}
23

3-
<h3>grid-column-start: x, grid-column-end: x, grid-row-start: y, grid-row-end: y</h3>
4-
<div style="display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px;">
5-
<div style="grid-column: 1 / 2; grid-row: 1 / 2; height: 30px; background-color: #6f777a;"></div>
6-
<div style="grid-column: 2 / 3; grid-row: 1 / 2; height: 30px; background-color: #6f777a;"></div>
7-
<div style="grid-column: 3 / 4; grid-row: 1 / 2; height: 30px; background-color: #6f777a;"></div>
8-
<div style="grid-column: 4 / 5; grid-row: 1 / 2; height: 30px; background-color: #6f777a;"></div>
9-
<div style="grid-column: 5 / 6; grid-row: 1 / 2; height: 30px; background-color: #6f777a;"></div>
10-
<div style="grid-column: 6 / 7; grid-row: 1 / 2; height: 30px; background-color: #6f777a;"></div>
4+
<h3>grid-column-start: x, grid-column-end: x, grid-row-start: y, grid-row-end: y</h3>
5+
<div style="display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px;">
6+
<div style="grid-column: 1 / 2; grid-row: 1 / 2; height: 30px; background-color: #6f777a;"></div>
7+
<div style="grid-column: 2 / 3; grid-row: 1 / 2; height: 30px; background-color: #6f777a;"></div>
8+
<div style="grid-column: 3 / 4; grid-row: 1 / 2; height: 30px; background-color: #6f777a;"></div>
9+
<div style="grid-column: 4 / 5; grid-row: 1 / 2; height: 30px; background-color: #6f777a;"></div>
10+
<div style="grid-column: 5 / 6; grid-row: 1 / 2; height: 30px; background-color: #6f777a;"></div>
11+
<div style="grid-column: 6 / 7; grid-row: 1 / 2; height: 30px; background-color: #6f777a;"></div>
1112

12-
<div style="grid-column: 1 / 2; grid-row: 2 / 3; height: 30px; background-color: #6f777a;"></div>
13-
<div style="grid-column: 2 / 3; grid-row: 2 / 3; height: 30px; background-color: #6f777a;"></div>
14-
<div style="grid-column: 3 / 4; grid-row: 2 / 3; height: 30px; background-color: #6f777a;"></div>
15-
<div style="grid-column: 4 / 5; grid-row: 2 / 3; height: 30px; background-color: #6f777a;"></div>
16-
<div style="grid-column: 5 / 6; grid-row: 2 / 3; height: 30px; background-color: #6f777a;"></div>
17-
<div style="grid-column: 6 / 7; grid-row: 2 / 3; height: 30px; background-color: #6f777a;"></div>
13+
<div style="grid-column: 1 / 2; grid-row: 2 / 3; height: 30px; background-color: #6f777a;"></div>
14+
<div style="grid-column: 2 / 3; grid-row: 2 / 3; height: 30px; background-color: #6f777a;"></div>
15+
<div style="grid-column: 3 / 4; grid-row: 2 / 3; height: 30px; background-color: #6f777a;"></div>
16+
<div style="grid-column: 4 / 5; grid-row: 2 / 3; height: 30px; background-color: #6f777a;"></div>
17+
<div style="grid-column: 5 / 6; grid-row: 2 / 3; height: 30px; background-color: #6f777a;"></div>
18+
<div style="grid-column: 6 / 7; grid-row: 2 / 3; height: 30px; background-color: #6f777a;"></div>
1819

19-
<div style="grid-column: 1 / 2; grid-row: 3 / 4; height: 30px; background-color: #6f777a;"></div>
20-
<div style="grid-column: 2 / 3; grid-row: 3 / 4; height: 30px; background-color: #6f777a;"></div>
21-
<div style="grid-column: 3 / 4; grid-row: 3 / 4; height: 30px; background-color: #6f777a;"></div>
22-
<div style="grid-column: 4 / 5; grid-row: 3 / 4; height: 30px; background-color: #6f777a;"></div>
23-
<div style="grid-column: 5 / 6; grid-row: 3 / 4; height: 30px; background-color: #6f777a;"></div>
24-
<div style="grid-column: 6 / 7; grid-row: 3 / 4; height: 30px; background-color: #6f777a;"></div>
25-
{% if not element.layout.empty %}
26-
<div style="grid-column-start: {{ element.layout.gridColumnStart }}; grid-column-end: {{ element.layout.gridColumnEnd }}; grid-row-start: {{ element.layout.gridRowStart }}; grid-row-end: {{ element.layout.gridRowEnd }}; background-color: rgba(14,114,159,0.6);"></div>
27-
{% endif %}
28-
</div>
20+
<div style="grid-column: 1 / 2; grid-row: 3 / 4; height: 30px; background-color: #6f777a;"></div>
21+
<div style="grid-column: 2 / 3; grid-row: 3 / 4; height: 30px; background-color: #6f777a;"></div>
22+
<div style="grid-column: 3 / 4; grid-row: 3 / 4; height: 30px; background-color: #6f777a;"></div>
23+
<div style="grid-column: 4 / 5; grid-row: 3 / 4; height: 30px; background-color: #6f777a;"></div>
24+
<div style="grid-column: 5 / 6; grid-row: 3 / 4; height: 30px; background-color: #6f777a;"></div>
25+
<div style="grid-column: 6 / 7; grid-row: 3 / 4; height: 30px; background-color: #6f777a;"></div>
26+
{% if not element.layout.empty %}
27+
<div style="grid-column-start: {{ element.layout.gridColumnStart }}; grid-column-end: {{ element.layout.gridColumnEnd }}; grid-row-start: {{ element.layout.gridRowStart }}; grid-row-end: {{ element.layout.gridRowEnd }}; background-color: rgba(14,114,159,0.6);"></div>
28+
{% endif %}
29+
</div>
2930

30-
<h3>grid-column: x / span x, grid-row: y / span y</h3>
31-
<div style="display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px;">
32-
<div style="grid-column: 1 / 2; grid-row: 1 / 2; height: 30px; background-color: #6f777a;"></div>
33-
<div style="grid-column: 2 / 3; grid-row: 1 / 2; height: 30px; background-color: #6f777a;"></div>
34-
<div style="grid-column: 3 / 4; grid-row: 1 / 2; height: 30px; background-color: #6f777a;"></div>
35-
<div style="grid-column: 4 / 5; grid-row: 1 / 2; height: 30px; background-color: #6f777a;"></div>
36-
<div style="grid-column: 5 / 6; grid-row: 1 / 2; height: 30px; background-color: #6f777a;"></div>
37-
<div style="grid-column: 6 / 7; grid-row: 1 / 2; height: 30px; background-color: #6f777a;"></div>
31+
<h3>grid-column: x / span x, grid-row: y / span y</h3>
32+
<div style="display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px;">
33+
<div style="grid-column: 1 / 2; grid-row: 1 / 2; height: 30px; background-color: #6f777a;"></div>
34+
<div style="grid-column: 2 / 3; grid-row: 1 / 2; height: 30px; background-color: #6f777a;"></div>
35+
<div style="grid-column: 3 / 4; grid-row: 1 / 2; height: 30px; background-color: #6f777a;"></div>
36+
<div style="grid-column: 4 / 5; grid-row: 1 / 2; height: 30px; background-color: #6f777a;"></div>
37+
<div style="grid-column: 5 / 6; grid-row: 1 / 2; height: 30px; background-color: #6f777a;"></div>
38+
<div style="grid-column: 6 / 7; grid-row: 1 / 2; height: 30px; background-color: #6f777a;"></div>
3839

39-
<div style="grid-column: 1 / 2; grid-row: 2 / 3; height: 30px; background-color: #6f777a;"></div>
40-
<div style="grid-column: 2 / 3; grid-row: 2 / 3; height: 30px; background-color: #6f777a;"></div>
41-
<div style="grid-column: 3 / 4; grid-row: 2 / 3; height: 30px; background-color: #6f777a;"></div>
42-
<div style="grid-column: 4 / 5; grid-row: 2 / 3; height: 30px; background-color: #6f777a;"></div>
43-
<div style="grid-column: 5 / 6; grid-row: 2 / 3; height: 30px; background-color: #6f777a;"></div>
44-
<div style="grid-column: 6 / 7; grid-row: 2 / 3; height: 30px; background-color: #6f777a;"></div>
40+
<div style="grid-column: 1 / 2; grid-row: 2 / 3; height: 30px; background-color: #6f777a;"></div>
41+
<div style="grid-column: 2 / 3; grid-row: 2 / 3; height: 30px; background-color: #6f777a;"></div>
42+
<div style="grid-column: 3 / 4; grid-row: 2 / 3; height: 30px; background-color: #6f777a;"></div>
43+
<div style="grid-column: 4 / 5; grid-row: 2 / 3; height: 30px; background-color: #6f777a;"></div>
44+
<div style="grid-column: 5 / 6; grid-row: 2 / 3; height: 30px; background-color: #6f777a;"></div>
45+
<div style="grid-column: 6 / 7; grid-row: 2 / 3; height: 30px; background-color: #6f777a;"></div>
4546

46-
<div style="grid-column: 1 / 2; grid-row: 3 / 4; height: 30px; background-color: #6f777a;"></div>
47-
<div style="grid-column: 2 / 3; grid-row: 3 / 4; height: 30px; background-color: #6f777a;"></div>
48-
<div style="grid-column: 3 / 4; grid-row: 3 / 4; height: 30px; background-color: #6f777a;"></div>
49-
<div style="grid-column: 4 / 5; grid-row: 3 / 4; height: 30px; background-color: #6f777a;"></div>
50-
<div style="grid-column: 5 / 6; grid-row: 3 / 4; height: 30px; background-color: #6f777a;"></div>
51-
<div style="grid-column: 6 / 7; grid-row: 3 / 4; height: 30px; background-color: #6f777a;"></div>
52-
{% if not element.layout.empty %}
53-
<div style="grid-column: {{ element.layout.gridColumnStart }} / span {{ element.layout.gridColumnSpan }}; grid-row: {{ element.layout.gridRowStart }} / span {{ element.layout.gridRowSpan }}; background-color: rgba(14,114,159,0.6);"></div>
54-
{% endif %}
55-
</div>
47+
<div style="grid-column: 1 / 2; grid-row: 3 / 4; height: 30px; background-color: #6f777a;"></div>
48+
<div style="grid-column: 2 / 3; grid-row: 3 / 4; height: 30px; background-color: #6f777a;"></div>
49+
<div style="grid-column: 3 / 4; grid-row: 3 / 4; height: 30px; background-color: #6f777a;"></div>
50+
<div style="grid-column: 4 / 5; grid-row: 3 / 4; height: 30px; background-color: #6f777a;"></div>
51+
<div style="grid-column: 5 / 6; grid-row: 3 / 4; height: 30px; background-color: #6f777a;"></div>
52+
<div style="grid-column: 6 / 7; grid-row: 3 / 4; height: 30px; background-color: #6f777a;"></div>
53+
{% if not element.layout.empty %}
54+
<div style="grid-column: {{ element.layout.gridColumnStart }} / span {{ element.layout.gridColumnSpan }}; grid-row: {{ element.layout.gridRowStart }} / span {{ element.layout.gridRowSpan }}; background-color: rgba(14,114,159,0.6);"></div>
55+
{% endif %}
56+
</div>
5657

57-
<hr>
58+
<hr>
5859

59-
<p><b>Value:</b> <code><pre style="white-space: pre-wrap;">{{ element.layout|json_encode }}</pre></code></p>
60-
<p><b>Empty:</b> {{ element.layout.empty|json_encode }}</p>
61-
{% if not element.layout.empty %}
62-
<p><b>Raw:</b> {{ element.layout.raw }}</p>
63-
<p><b>gridColumnStart:</b> {{ element.layout.gridColumnStart }}</p>
64-
<p><b>gridColumnEnd:</b> {{ element.layout.gridColumnEnd }}</p>
65-
<p><b>gridRowStart:</b> {{ element.layout.gridRowStart }}</p>
66-
<p><b>gridRowEnd:</b> {{ element.layout.gridRowEnd }}</p>
67-
<p><b>gridColumnSpan:</b> {{ element.layout.gridColumnSpan }}</p>
68-
<p><b>gridRowSpan:</b> {{ element.layout.gridRowSpan }}</p>
69-
<p><b>selectedRows:</b> {{ element.layout.selectedRows|json_encode }}</p>
70-
<p><b>selectedColumns:</b> {{ element.layout.selectedColumns|json_encode }}</p>
71-
<p><b>selectedCoordinates:</b> {{ element.layout.selectedCoordinates|json_encode }}</p>
60+
<p><b>Value:</b> <code><pre style="white-space: pre-wrap;">{{ element.layout|json_encode }}</pre></code></p>
61+
<p><b>Empty:</b> {{ element.layout.empty|json_encode }}</p>
62+
{% if not element.layout.empty %}
63+
<p><b>Raw:</b> {{ element.layout.raw }}</p>
64+
<p><b>gridColumnStart:</b> {{ element.layout.gridColumnStart }}</p>
65+
<p><b>gridColumnEnd:</b> {{ element.layout.gridColumnEnd }}</p>
66+
<p><b>gridRowStart:</b> {{ element.layout.gridRowStart }}</p>
67+
<p><b>gridRowEnd:</b> {{ element.layout.gridRowEnd }}</p>
68+
<p><b>gridColumnSpan:</b> {{ element.layout.gridColumnSpan }}</p>
69+
<p><b>gridRowSpan:</b> {{ element.layout.gridRowSpan }}</p>
70+
<p><b>selectedRows:</b> {{ element.layout.selectedRows|json_encode }}</p>
71+
<p><b>selectedColumns:</b> {{ element.layout.selectedColumns|json_encode }}</p>
72+
<p><b>selectedCoordinates:</b> {{ element.layout.selectedCoordinates|json_encode }}</p>
7273

73-
{% set result = gql('{
74-
entries(type: "products") {
75-
... on products_products_Entry {
76-
featuredProducts {
77-
__typename
78-
}
79-
layout {
80-
empty
81-
gridColumnStart
82-
gridColumnEnd
83-
gridRowStart
84-
gridRowEnd
85-
gridColumnSpan
86-
gridRowSpan
87-
selectedColumns
88-
selectedRows
89-
selectedCoordinates
74+
{% set result = gql('{
75+
entries(type: "products") {
76+
... on products_products_Entry {
77+
featuredProducts {
78+
__typename
79+
}
80+
layout {
81+
empty
82+
gridColumnStart
83+
gridColumnEnd
84+
gridRowStart
85+
gridRowEnd
86+
gridColumnSpan
87+
gridRowSpan
88+
selectedColumns
89+
selectedRows
90+
selectedCoordinates
91+
}
9092
}
9193
}
92-
}
93-
}') %}
94+
}') %}
9495

95-
<p><b>GQL Results:</b> {{ result.data.entries[0].layout|json_encode }}</p>
96-
{% endif %}
96+
<p><b>GQL Results:</b> {{ result.data.entries[0].layout|json_encode }}</p>
97+
{% endif %}
9798

98-
{% set columnStartClasses = {
99-
1: 'col-start-1',
100-
2: 'col-start-2',
101-
3: 'col-start-3',
102-
4: 'col-start-4',
103-
5: 'col-start-5',
104-
6: 'col-start-6',
105-
} %}
106-
{% set columnSpanClasses = {
107-
1: 'col-span-1',
108-
2: 'col-span-2',
109-
3: 'col-span-3',
110-
4: 'col-span-4',
111-
5: 'col-span-5',
112-
6: 'col-span-6',
113-
} %}
114-
{% set rowStartClasses = {
115-
1: 'row-start-1',
116-
2: 'row-start-2',
117-
3: 'row-start-3',
118-
4: 'row-start-4',
119-
5: 'row-start-5',
120-
6: 'row-start-6',
121-
} %}
122-
{% set rowSpanClasses = {
123-
1: 'row-span-1',
124-
2: 'row-span-2',
125-
3: 'row-span-3',
126-
4: 'row-span-4',
127-
5: 'row-span-5',
128-
6: 'row-span-6',
129-
} %}
99+
{% set columnStartClasses = {
100+
1: 'col-start-1',
101+
2: 'col-start-2',
102+
3: 'col-start-3',
103+
4: 'col-start-4',
104+
5: 'col-start-5',
105+
6: 'col-start-6',
106+
} %}
107+
{% set columnSpanClasses = {
108+
1: 'col-span-1',
109+
2: 'col-span-2',
110+
3: 'col-span-3',
111+
4: 'col-span-4',
112+
5: 'col-span-5',
113+
6: 'col-span-6',
114+
} %}
115+
{% set rowStartClasses = {
116+
1: 'row-start-1',
117+
2: 'row-start-2',
118+
3: 'row-start-3',
119+
4: 'row-start-4',
120+
5: 'row-start-5',
121+
6: 'row-start-6',
122+
} %}
123+
{% set rowSpanClasses = {
124+
1: 'row-span-1',
125+
2: 'row-span-2',
126+
3: 'row-span-3',
127+
4: 'row-span-4',
128+
5: 'row-span-5',
129+
6: 'row-span-6',
130+
} %}
130131

131-
{% set myAttributes = {
132-
class: [
133-
columnStartClasses[element.layout.gridColumnStart],
134-
columnSpanClasses[element.layout.gridColumnSpan],
135-
rowStartClasses[element.layout.gridRowStart],
136-
rowSpanClasses[element.layout.gridRowSpan],
137-
],
138-
} %}
132+
{% set myAttributes = {
133+
class: [
134+
columnStartClasses[element.layout.gridColumnStart],
135+
columnSpanClasses[element.layout.gridColumnSpan],
136+
rowStartClasses[element.layout.gridRowStart],
137+
rowSpanClasses[element.layout.gridRowSpan],
138+
],
139+
} %}
139140

140-
<div {{ attr(myAttributes) }}></div>
141+
<div {{ attr(myAttributes) }}></div>
141142

142-
{# Results look like this: <div class="col-start-1 col-span-3 row-start-1 row-span-2"></div> #}
143+
{# Results look like this: <div class="col-start-1 col-span-3 row-start-1 row-span-2"></div> #}
144+
{% else %}
145+
Testing 🏠 homepage!
146+
{% endif %}

‎composer.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
"name": "wbrowar/craft-little-layout",
33
"description": "A compact, visual way to lay out fields, elements, and Matrix blocks.",
44
"type": "craft-plugin",
5-
"version": "1.0.0",
5+
"version": "1.0.1",
66
"keywords": [
77
"craft",
88
"cms",

‎src/LittleLayout.php‎

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@
1313
use craft\events\RegisterGqlTypesEvent;
1414
use craft\helpers\Json;
1515
use craft\services\Gql;
16+
use craft\web\View;
1617
use wbrowar\littlelayout\fields\Layout as LayoutField;
1718

1819
use Craft;
@@ -82,13 +83,15 @@ function (RegisterComponentTypesEvent $event) {
8283
$event->types[] = LittleLayoutType::class;
8384
});
8485

85-
$assets = LittleLayout::$plugin->getPathsToAssetFiles('little-layout.ts');
86+
if (Craft::$app->getView()->getTemplateMode() === View::TEMPLATE_MODE_CP) {
87+
$assets = LittleLayout::$plugin->getPathsToAssetFiles('little-layout.ts');
8688

87-
if ($assets['css'] ?? false) {
88-
Craft::$app->getView()->registerCssFile($assets['css']);
89-
}
90-
if ($assets['js'] ?? false) {
91-
Craft::$app->getView()->registerJsFile($assets['js'], ['position' => Craft::$app->getView()::POS_BEGIN, 'type' => 'module']);
89+
if ($assets['css'] ?? false) {
90+
Craft::$app->getView()->registerCssFile($assets['css']);
91+
}
92+
if ($assets['js'] ?? false) {
93+
Craft::$app->getView()->registerJsFile($assets['js'], ['position' => Craft::$app->getView()::POS_BEGIN, 'type' => 'module']);
94+
}
9295
}
9396

9497
Craft::info(

0 commit comments

Comments
 (0)