Skip to content

Commit 39bb57b

Browse files
tvdeyentvdeyen
committed
Add content definitions module
1 parent 17ca3e5 commit 39bb57b

File tree

17 files changed

+297
-7
lines changed

17 files changed

+297
-7
lines changed

‎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/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 DefinitionsController < ResourcesController
4+
def index
5+
@page_layouts = PageLayout.all
6+
end
7+
8+
private
9+
10+
def resource_handler
11+
@_resource_handler ||= ::Alchemy::Resource.new(controller_path, alchemy_module, PageLayout)
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
@@ -7,6 +7,7 @@
77
@use "admin/base";
88
@use "admin/buttons";
99
@use "admin/clipboard";
10+
@use "admin/content-definitions";
1011
@use "admin/dashboard";
1112
@use "admin/dialogs";
1213
@use "admin/elements";

‎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/content-definitions.scss‎

Lines changed: 125 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,125 @@
1+
.content-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+
small {
65+
padding: var(--spacing-0) var(--spacing-2);
66+
background-color: hsla(0, 0%, 45%, 0.15);
67+
border-radius: var(--border-radius_medium);
68+
margin-left: auto;
69+
font-weight: normal;
70+
71+
&:before {
72+
content: "x";
73+
}
74+
}
75+
}
76+
77+
&:before {
78+
content: "▸";
79+
display: flex;
80+
align-items: center;
81+
justify-content: center;
82+
width: var(--spacing-4);
83+
height: var(--spacing-4);
84+
}
85+
}
86+
87+
&[open] > summary:before {
88+
content: "▾";
89+
}
90+
91+
> div {
92+
padding: var(--spacing-1) var(--spacing-1) var(--spacing-1)
93+
var(--spacing-5);
94+
}
95+
96+
ol {
97+
list-style-type: none;
98+
padding-left: 0;
99+
100+
li {
101+
margin: var(--spacing-4) 0;
102+
103+
header {
104+
gap: var(--spacing-2);
105+
}
106+
}
107+
}
108+
109+
details {
110+
padding-left: var(--spacing-1);
111+
background-color: hsla(0, 0%, 45%, 0.05);
112+
}
113+
}
114+
115+
.page-layout {
116+
padding: var(--spacing-4);
117+
margin-bottom: var(--spacing-2);
118+
background-color: white;
119+
border-radius: var(--border-radius_medium);
120+
121+
p {
122+
margin: var(--spacing-4) 0;
123+
}
124+
}
125+
}

‎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/views/alchemy/admin/definitions/_element.html.erb‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
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+
<small>
8+
<%= Alchemy::Element.named(element[:name]).count %>
9+
</small>
10+
</header>
11+
</summary>
12+
<div>
13+
<% if element[:deprecated] %>
14+
<alchemy-message type="warning"><%== element[:deprecated] %></alchemy-message>
15+
<% end %>
16+
<% if element[:hint] %>
17+
<p><%== element[:hint] %></p>
18+
<% end %>
19+
<% if element[:ingredients] %>
20+
<ol>
21+
<%= render collection: element[:ingredients], partial: "ingredient", locals: {element_name: element_name} %>
22+
</ol>
23+
<% end %>
24+
<%= render collection: element[:nestable_elements], partial: "element", as: "element_name" %>
25+
</div>
26+
</details>
27+
<% end %>

0 commit comments

Comments
 (0)