Skip to content

Commit e98497f

Browse files
tvdeyentvdeyen
committed
Add page definitions module
1 parent f0fc069 commit e98497f

18 files changed

Lines changed: 334 additions & 7 deletions

File tree

‎app/assets/builds/alchemy/admin.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎app/assets/builds/alchemy/admin.css.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎app/components/alchemy/admin/list_filter.rb‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,9 +21,9 @@ module Admin
2121
class ListFilter < ViewComponent::Base
2222
erb_template <<~ERB
2323
<alchemy-list-filter items-selector="<%= items_selector %>" name-attribute="<%= name_attribute %>">
24-
<input type="text" class="js_filter_field" />
24+
<input type="search" class="js_filter_field" />
2525
<alchemy-icon name="search"></alchemy-icon>
26-
<button type="button" class="js_filter_field_clear icon_button">
26+
<button type="reset" class="js_filter_field_clear icon_button">
2727
<alchemy-icon name="close" size="1x"></alchemy-icon>
2828
</button>
2929
</alchemy-list-filter>

‎app/controllers/alchemy/admin/page_definitions_controller.rb‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
module Alchemy
2+
module Admin
3+
class PageDefinitionsController < ResourcesController
4+
def index
5+
@page_definitions = PageDefinition.all
6+
end
7+
8+
private
9+
10+
def resource_handler
11+
@_resource_handler ||= ::Alchemy::Resource.new(controller_path, alchemy_module, PageDefinition)
12+
end
13+
end
14+
end
15+
end

‎app/javascript/alchemy_admin/components/list_filter.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -49,11 +49,11 @@ class ListFilter extends HTMLElement {
4949
}
5050

5151
get clearButton() {
52-
return this.querySelector('button[type="button"]')
52+
return this.querySelector('button[type="reset"]')
5353
}
5454

5555
get filterField() {
56-
return this.querySelector('input[type="text"]')
56+
return this.querySelector('input[type="search"]')
5757
}
5858

5959
get items() {

‎app/stylesheets/alchemy/admin.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@
2929
@use "admin/nodes";
3030
@use "admin/notices";
3131
@use "admin/pagination";
32+
@use "admin/page_definitions";
3233
@use "admin/preview_window";
3334
@use "admin/resource_info";
3435
@use "admin/search";

‎app/stylesheets/alchemy/admin/base.scss‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@ html {
44
box-sizing: border-box;
55
height: 100%;
66
font-size: var(--font-size_medium);
7+
scroll-padding-top: calc(var(--top-menu-height) + var(--spacing-2));
8+
scroll-behavior: smooth;
79

810
&.turbo-progress-bar::before,
911
.turbo-progress-bar {

‎app/stylesheets/alchemy/admin/list_filter.scss‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ alchemy-list-filter {
99
transform: translateY(-50%);
1010
}
1111

12+
input[type="search"],
1213
.js_filter_field {
1314
width: 100%;
1415
padding-left: var(--spacing-7);
@@ -21,6 +22,7 @@ alchemy-list-filter {
2122
}
2223
}
2324

25+
button[type="reset"],
2426
.js_filter_field_clear {
2527
display: flex;
2628
visibility: hidden;

‎app/stylesheets/alchemy/admin/page_definitions.scss‎

Lines changed: 136 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,136 @@
1+
.page-definitions {
2+
align-items: self-start;
3+
position: relative;
4+
display: grid;
5+
grid-template-columns: 400px 1fr;
6+
gap: var(--spacing-2);
7+
grid-template-rows: auto;
8+
9+
h2 {
10+
display: flex;
11+
justify-content: space-between;
12+
align-items: center;
13+
margin-top: 0;
14+
15+
small {
16+
font-weight: normal;
17+
font-size: var(--font-size_medium);
18+
}
19+
}
20+
21+
aside {
22+
position: sticky;
23+
top: calc(var(--top-menu-height) + var(--spacing-2));
24+
background-color: white;
25+
border-radius: var(--border-radius_medium);
26+
padding: var(--spacing-4);
27+
margin-bottom: var(--spacing-2);
28+
29+
ol {
30+
display: flex;
31+
flex-direction: column;
32+
gap: var(--spacing-2);
33+
list-style-position: outside;
34+
margin-left: var(--spacing-1);
35+
}
36+
37+
li {
38+
padding: var(--spacing-1);
39+
font-weight: bold;
40+
}
41+
}
42+
43+
details {
44+
padding: var(--spacing-2);
45+
margin: var(--spacing-2) 0;
46+
background-color: var(--color-grey_very_light);
47+
border-radius: var(--border-radius_medium);
48+
49+
summary {
50+
display: flex;
51+
align-items: center;
52+
justify-content: start;
53+
padding: var(--spacing-1) 0;
54+
font-weight: bold;
55+
gap: var(--spacing-1);
56+
57+
header {
58+
display: flex;
59+
width: 100%;
60+
align-items: center;
61+
justify-content: space-between;
62+
gap: var(--spacing-1);
63+
64+
.labels {
65+
display: flex;
66+
align-items: center;
67+
justify-content: center;
68+
gap: var(--spacing-2);
69+
70+
.label {
71+
background-color: var(--color-grey_light);
72+
box-shadow: 0 0 2px 0px var(--border-color);
73+
border-radius: 12px;
74+
}
75+
}
76+
77+
.label {
78+
padding: var(--spacing-0) var(--spacing-2);
79+
background-color: hsla(0, 0%, 45%, 0.15);
80+
margin-left: auto;
81+
font-weight: normal;
82+
83+
&.usage:before {
84+
content: "x";
85+
}
86+
}
87+
}
88+
89+
&:before {
90+
content: "▸";
91+
display: flex;
92+
align-items: center;
93+
justify-content: center;
94+
width: var(--spacing-4);
95+
height: var(--spacing-4);
96+
}
97+
}
98+
99+
&[open] > summary:before {
100+
content: "▾";
101+
}
102+
103+
> div {
104+
padding: var(--spacing-1) 0 var(--spacing-1) var(--spacing-5);
105+
}
106+
107+
ol {
108+
list-style-type: none;
109+
padding-left: 0;
110+
111+
li {
112+
margin: var(--spacing-4) 0;
113+
114+
header {
115+
gap: var(--spacing-2);
116+
}
117+
}
118+
}
119+
120+
details {
121+
padding-left: var(--spacing-1);
122+
background-color: hsla(0, 0%, 45%, 0.05);
123+
}
124+
}
125+
126+
.page-definition {
127+
padding: var(--spacing-4);
128+
margin-bottom: var(--spacing-2);
129+
background-color: white;
130+
border-radius: var(--border-radius_medium);
131+
132+
p {
133+
margin: var(--spacing-4) 0;
134+
}
135+
}
136+
}

‎app/views/alchemy/admin/page_definitions/_element.html.erb‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
<% element = Alchemy::ElementDefinition.get(element_name) %>
2+
<% if element %>
3+
<details>
4+
<summary>
5+
<header>
6+
<%= Alchemy::Element.display_name_for(element.name) %>
7+
<span class="labels">
8+
<% if element.unique %>
9+
<sl-tooltip content="This element can only be used once per page">
10+
<small class="label">
11+
unique
12+
</small>
13+
</sl-tooltip>
14+
<% end %>
15+
<% if element.fixed %>
16+
<sl-tooltip content="This element has a fixed position one the page">
17+
<small class="label">
18+
fixed
19+
</small>
20+
</sl-tooltip>
21+
<% end %>
22+
</span>
23+
<small class="label usage">
24+
<%= Alchemy::Element.named(element.name).count %>
25+
</small>
26+
</header>
27+
</summary>
28+
<div>
29+
<% if element.deprecated %>
30+
<alchemy-message type="warning">
31+
<%== element.deprecation_notice %>
32+
</alchemy-message>
33+
<% end %>
34+
<% if element.has_hint? %>
35+
<p><%== element.hint %></p>
36+
<% end %>
37+
<% if element.ingredients.any? %>
38+
<ol>
39+
<%= render collection: element.ingredients, partial: "ingredient", locals: {element_name: element_name} %>
40+
</ol>
41+
<% end %>
42+
<%= render collection: element.nestable_elements, partial: "element", as: "element_name" %>
43+
</div>
44+
</details>
45+
<% end %>

0 commit comments

Comments
 (0)