Skip to content

Commit 7b9773f

Browse files
kbondkbond
committed
feature #1466 [Site] Add changelog page (smnandre)
This PR was squashed before being merged into the 2.x branch. Discussion ---------- [Site] Add changelog page (little step by little step.... ;) ) Commits ------- 8cbb38e [Site] Add changelog page
2 parents 1d157c9 + 8cbb38e commit 7b9773f

File tree

12 files changed

+921
-373
lines changed

12 files changed

+921
-373
lines changed

‎ux.symfony.com/assets/styles/app.scss

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -67,6 +67,7 @@
6767
// Components
6868
@import "components/Banner";
6969
@import "components/Browser";
70+
@import "components/Changelog";
7071
@import "components/DataList";
7172
@import "components/demo-container";
7273
@import "components/DemoCard";
@@ -90,6 +91,7 @@
9091
@import "utilities/background";
9192
@import "utilities/info-tooltips";
9293
@import "utilities/font";
94+
@import "utilities/rich-text";
9395
@import "utilities/shadow";
9496
@import "utilities/text";
9597

‎ux.symfony.com/assets/styles/components/_Changelog.scss

Lines changed: 174 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,174 @@
1+
.Changelog {
2+
max-width: 1000px;
3+
margin-inline: auto;
4+
display: flex;
5+
flex-direction: column;
6+
gap: 4rem;
7+
position: relative;
8+
--left-pane: 10rem;
9+
}
10+
.Changelog::before {
11+
content: '';
12+
position: absolute;
13+
top: 2.5rem;
14+
left: var(--left-pane);
15+
width: 2px;
16+
bottom: 2rem;
17+
background-color: var(--bs-secondary-bg);
18+
border-right: 1px solid var(--bs-secondary-bg);
19+
}
20+
21+
.ChangelogItem {
22+
display: grid;
23+
gap: 4rem;
24+
grid-template-columns: var(--left-pane) 1fr;
25+
}
26+
27+
.ChangelogItem summary {
28+
list-style: none;
29+
}
30+
.ChangelogItem summary::-webkit-details-marker {
31+
display: none;
32+
}
33+
34+
.ChangelogItem__Anchor {
35+
align-self: start;
36+
position: sticky;
37+
top: 2rem;
38+
display: flex;
39+
padding-block-start: 1rem;
40+
flex-direction: column;
41+
align-content: stretch;
42+
justify-content: center;
43+
text-align: center;
44+
}
45+
.ChangelogItem__Anchor::after {
46+
content: '';
47+
position: absolute;
48+
right: -.5rem;
49+
width: 1rem;
50+
height: 1rem;
51+
border-radius: 50%;
52+
background-color: var(--bs-body-color);
53+
}
54+
55+
.ChangelogItem__Version {
56+
font-size: 1.25rem;
57+
font-weight: 400;
58+
display: block;
59+
color: var(--bs-code-color);
60+
opacity: .90;
61+
transition: all 150ms ease-in-out;
62+
}
63+
.ChangelogItem__Version:hover {
64+
opacity: 1;
65+
}
66+
67+
.ChangelogItem__Date {
68+
font-size: 0.85rem;
69+
font-weight: 400;
70+
color: var(--bs-secondary);
71+
display: block;
72+
font-stretch: semi-condensed;
73+
}
74+
75+
.ChangelogItem__Content {
76+
padding: 1.5rem;
77+
border-radius: 0.5rem;
78+
background-color: #eef0f91a;
79+
border: 1px solid var(--bs-secondary-bg);
80+
}
81+
[data-bs-theme="dark"] .ChangelogItem__Content {
82+
background-color: #1c2024;
83+
}
84+
85+
.ChangelogItem__Head {
86+
display: flex;
87+
flex-direction: row;
88+
align-items: center;
89+
gap: 1rem;
90+
justify-content: space-between;
91+
}
92+
.ChangelogItem__Head svg {
93+
transition: 150ms ease-in-out;
94+
transform: rotate(0deg);
95+
opacity: .5;
96+
}
97+
.ChangelogItem [open] .ChangelogItem__Head svg {
98+
transform: rotate(180deg);
99+
opacity: .75;
100+
transition: all 150ms ease-in-out;
101+
}
102+
103+
.ChangelogItem__Title {
104+
font-size: 1.1rem;
105+
font-weight: 400;
106+
color: var(--bs-body-color);
107+
margin-block-end: 0;
108+
}
109+
.ChangelogItem [open] .ChangelogItem__Title {
110+
font-size: 1.25rem;
111+
}
112+
113+
.ChangelogItem__Text {
114+
margin-top: 1rem;
115+
padding-block-start: 1rem;
116+
border-block-start: 1px solid var(--bs-secondary-bg-subtle);
117+
}
118+
119+
.ChangelogItem__Text h2 {
120+
margin-bottom: 1rem;
121+
color: var(--bs-body-color);
122+
font-size: 1.2rem;
123+
}
124+
125+
.ChangelogItem__Text h3 {
126+
color: var(--bs-body-color);
127+
font-size: 1.15rem;
128+
font-family: var(--font-family-text);
129+
font-weight: 500;
130+
letter-spacing: 0;
131+
margin-block-start: 2rem;
132+
margin-block-end: .25rem;
133+
line-height: 1.4;
134+
}
135+
136+
.ChangelogItem__Text ul,
137+
.ChangelogItem__Text li {
138+
list-style: outside disc;
139+
line-height: 1.8;
140+
padding-left: 0.25rem;
141+
margin-inline-start: .5rem;
142+
}
143+
.ChangelogItem__Text a {
144+
color: #a3bfe8;
145+
}
146+
.ChangelogItem__Text a:hover {
147+
color: #2072ea;
148+
}
149+
.ChangelogItem__Text p:last-child {
150+
margin-bottom: 0;
151+
}
152+
153+
@media screen and (max-width: 980px) {
154+
.Changelog {
155+
--left-pane: 2rem;
156+
}
157+
.ChangelogItem {
158+
gap: 2rem;
159+
grid-template-columns: auto 1fr;
160+
}
161+
.ChangelogItem {
162+
grid-template-columns: auto 1fr;
163+
}
164+
.ChangelogItem__Anchor::after {
165+
right: 2rem;
166+
scale: 0.6;
167+
}
168+
.ChangelogItem::before {
169+
left: 2rem;
170+
}
171+
.Changelog::before {
172+
left: var(--left-pane);
173+
}
174+
}

‎ux.symfony.com/assets/styles/utilities/_rich-text.scss

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
.rich-text {
2+
h2, h3, h4, p {
3+
margin-bottom: 2rem;
4+
}
5+
6+
h3 {
7+
color: var(--bs-body-color);
8+
}
9+
10+
ul, ol {
11+
list-style-position: inside;
12+
margin-bottom: 2rem;
13+
}
14+
}

‎ux.symfony.com/composer.json

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@
2424
"symfony/flex": "^2.3.1",
2525
"symfony/form": "6.4.*",
2626
"symfony/framework-bundle": "6.4.*",
27+
"symfony/http-client": "6.4.*",
2728
"symfony/mercure-bundle": "^0.3.7",
2829
"symfony/monolog-bundle": "^3.8",
2930
"symfony/notifier": "6.4.*",
@@ -59,6 +60,7 @@
5960
"twig/html-extra": "^3.8",
6061
"twig/intl-extra": "^3.6",
6162
"twig/markdown-extra": "^3.6",
63+
"twig/string-extra": "^3.8",
6264
"twig/twig": "^2.12|^3.6.1"
6365
},
6466
"config": {

0 commit comments

Comments
 (0)