Skip to content

Commit 5e25b4c

Browse files
smnandreKocal
smnandre
authored and
Kocal
committed
[Site] Support page
1 parent 571aba7 commit 5e25b4c

File tree

9 files changed

+234
-2
lines changed

9 files changed

+234
-2
lines changed

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -85,6 +85,7 @@
8585
@import "components/PackageHeader";
8686
@import "components/PackageBox";
8787
@import "components/Cookbook";
88+
@import "components/SupportBox";
8889
@import "components/Tabs";
8990
@import "components/Tag";
9091
@import "components/Terminal";

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,14 @@
55
.Banner {
66
background: #0A0A0A;
77
color: #fff;
8+
transition: transform 250ms linear;
89
}
910
.Banner + .App {
1011
position: relative;
1112
}
1213

1314
.Banner:has(+ .App .AppHeader.open) {
14-
display: none;
15+
transform: translateY(-100%);
1516
}
1617

1718
.BannerInner {

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

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
.SupportBox {
2+
--space-large: 1.5rem;
3+
--bg-color: var(--bs-body-bg);
4+
5+
border: 1px solid var(--bs-secondary-bg);
6+
border-radius: var(--border-radius);
7+
display: flex;
8+
flex-direction: column;
9+
gap: var(--space-large);
10+
padding: var(--space-large);
11+
position: relative;
12+
place-self: stretch;
13+
background: var(--bg-color);
14+
transition: transform 750ms ease-in-out;
15+
16+
&:hover {
17+
transition: transform 200ms ease-in-out;
18+
transform: translateY(-.25rem);
19+
}
20+
}
21+
22+
@media screen and (max-width: 800px) {
23+
.SupportBox {
24+
--space-large: 1rem;
25+
}
26+
}
27+
28+
.SupportBox_logo {
29+
--logo-size: 3rem;
30+
width: var(--logo-size);
31+
height: var(--logo-size);
32+
border-radius: 14%;
33+
display: flex;
34+
align-items: center;
35+
justify-content: center;
36+
flex-shrink: 0;
37+
38+
svg {
39+
width: 100%;
40+
height: auto;
41+
}
42+
43+
@media screen and (max-width: 740px) {
44+
--logo-size: 4rem;
45+
}
46+
}
47+
48+
.SupportBox_badge {
49+
position: absolute;
50+
top: var(--space-large, 1rem);
51+
right: var(--space-large, 1rem);
52+
.Badge {
53+
background: var(--bs-secondary-bg);
54+
border: 1px solid var(--bs-secondary-bg);
55+
}
56+
}
57+
58+
.SupportBox_content {
59+
display: flex;
60+
flex-direction: column;
61+
justify-content: center;
62+
flex: 1 1 auto;
63+
gap: 1rem;
64+
}
65+
66+
.SupportBox_title {
67+
font-weight: 500;
68+
font-size: 2rem;
69+
color: var(--bs-body-color);
70+
text-decoration: none;
71+
margin: 0;
72+
}
73+
74+
.SupportBox_link {
75+
&:after {
76+
content: '';
77+
position: absolute;
78+
inset: 0 0;
79+
z-index: 40;
80+
}
81+
}
82+
83+
.SupportBox_description {
84+
line-height: 1.5;
85+
margin-bottom: 0;
86+
}
87+
88+

‎ux.symfony.com/assets/styles/sections/_nav.scss‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -50,16 +50,19 @@
5050
transform: translateY(-20%);
5151
opacity: 0;
5252
z-index: -1;
53-
transition: transform 250ms ease-out;
53+
transition: transform 350ms ease-out;
5454
width: 100%;
5555
flex-direction: column;
5656
padding: 1rem;
5757
gap: 1rem;
58+
height: 0;
5859
}
5960
.AppHeader.open .AppNav_menu {
6061
transform: translateY(0);
62+
transition: transform 500ms ease-out, height 500ms ease-out;
6163
opacity: 1;
6264
z-index: 1;
65+
height: auto;
6366
}
6467
.AppNav_menu a {
6568
font-size: 1.5rem;
@@ -94,6 +97,11 @@
9497
opacity: 1;
9598
}
9699
}
100+
.AppNav_item--desktop {
101+
@media (min-width: 860px) {
102+
display: none;
103+
}
104+
}
97105

98106
.AppNav_actions .AppNav_item:hover {
99107
transform: scale(1.1);

‎ux.symfony.com/src/Controller/SitemapController.php‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,7 @@ private function getSitemapUrls(): iterable
4949
yield $this->generateAbsoluteUrl('app_icons');
5050
yield $this->generateAbsoluteUrl('app_demos');
5151
yield $this->generateAbsoluteUrl('app_changelog');
52+
yield $this->generateAbsoluteUrl('app_support');
5253

5354
// UX Packages
5455
foreach ($this->uxPackageRepository->findAll() as $package) {

‎ux.symfony.com/src/Controller/SupportController.php‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<?php
2+
3+
/*
4+
* This file is part of the Symfony package.
5+
*
6+
* (c) Fabien Potencier <[email protected]>
7+
*
8+
* For the full copyright and license information, please view the LICENSE
9+
* file that was distributed with this source code.
10+
*/
11+
12+
namespace App\Controller;
13+
14+
use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
15+
use Symfony\Component\HttpFoundation\Response;
16+
use Symfony\Component\Routing\Attribute\Route;
17+
18+
class SupportController extends AbstractController
19+
{
20+
#[Route('/support', name: 'app_support')]
21+
public function __invoke(): Response
22+
{
23+
return $this->render('support.html.twig');
24+
}
25+
}

‎ux.symfony.com/templates/_footer.html.twig‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111
<twig:Icon name="github"/>
1212
</a>
1313
<a href="{{ url('app_changelog') }}" style="font-size: 11px; text-transform: uppercase;" class="order-lg-0">Changelog</a>
14+
<a href="{{ url('app_support') }}" style="font-size: 11px; text-transform: uppercase;" class="order-lg-0">Support</a>
1415
<a href="https://symfony.com" rel="external noopener noreferrer"
1516
style="font-size: 1.5rem;"
1617
aria-label="Symfony website"

‎ux.symfony.com/templates/_header.html.twig‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,7 @@
4444
Cookbook
4545
</a>
4646
<a href="{{ path('app_demos') }}" class="AppNav_item">Demos</a>
47+
<a href="{{ path('app_support') }}" class="AppNav_item AppNav_item--desktop" rel="help">Support</a>
4748
</div>
4849

4950
</nav>

‎ux.symfony.com/templates/support.html.twig‎

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
{% extends 'base.html.twig' %}
2+
3+
{% set meta = {
4+
title: 'Support',
5+
description: 'Symfony UX support - Ask questions about Symfony UX and get answers: Slack channel, Github discussions...',
6+
canonical: url('app_support'),
7+
} %}
8+
9+
{% block content %}
10+
11+
<div class="hero">
12+
<div class="container-fluid container-xxl px-4 pt-4 px-md-5">
13+
<h1 class="text-center mt-5"><a href="{{ url('app_support') }}">Support</a></h1>
14+
<p class="text-center mt-2 mb-5">Ask questions about Symfony UX and find the answers you need.</p>
15+
</div>
16+
</div>
17+
18+
<section style="--padding:0;">
19+
<div class="container-fluid container px-4 pt-4 px-md-5" style="max-width: 1000px;">
20+
<div style="display: grid; gap: 3rem; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))">
21+
22+
<div class="SupportBox">
23+
<div class="SupportBox_logo">
24+
<twig:Icon name="github" />
25+
</div>
26+
<div class="SupportBox_badge">
27+
<span class="Badge Badge--new">
28+
<twig:ux:icon name="bi:stars" style="width: 1.25em; display: block;" />
29+
New!
30+
</span>
31+
</div>
32+
<div class="SupportBox_content">
33+
<h2 class="SupportBox_title">
34+
<a href="https://github.com/symfony/ux/discussions" class="SupportBox_link" rel="external me">Github Discussions</a>
35+
</h2>
36+
<p class="SupportBox_description">
37+
Engage in our GitHub Discussions to find answers and ask the community for help.
38+
</p>
39+
</div>
40+
</div>
41+
42+
<div class="SupportBox">
43+
<div class="SupportBox_logo">
44+
<twig:ux:icon name="logos:slack-icon" />
45+
</div>
46+
<div class="SupportBox_content">
47+
<h2 class="SupportBox_title">
48+
<a href="https://symfony.com/slack" class="SupportBox_link" rel="external noopener">Symfony Slack</a>
49+
</h2>
50+
<p class="SupportBox_description">
51+
Join the Symfony Slack <code>#UX</code> channel to seek help or offer your expertise.
52+
</p>
53+
</div>
54+
</div>
55+
56+
<div class="SupportBox">
57+
<div class="SupportBox_logo">
58+
<twig:ux:icon name="x-twitter" />
59+
</div>
60+
<div class="SupportBox_content">
61+
<h2 class="SupportBox_title">
62+
<a href="https://x.com/SymfonyUX" class="SupportBox_link" rel="external me"><s>Twitter</s> X</a>
63+
</h2>
64+
<p class="SupportBox_description">
65+
Follow the conversation on X for the latest tips and updates about <code>#SymfonyUX</code>.
66+
</p>
67+
</div>
68+
</div>
69+
70+
<div class="SupportBox">
71+
<div class="SupportBox_logo">
72+
<twig:ux:icon name="symfony" />
73+
</div>
74+
<div class="SupportBox_content">
75+
<h2 class="SupportBox_title">
76+
<a href="https://symfony.com/bundles#symfony-ux-bundles" class="SupportBox_link" rel="external noopener">Symfony Docs</a>
77+
</h2>
78+
<p class="SupportBox_description">
79+
Explore the official Symfony docs on <code>UX bundles</code> and components.
80+
</p>
81+
</div>
82+
</div>
83+
84+
{% if false %}
85+
<div class="SupportBox">
86+
<div class="SupportBox_logo">
87+
<twig:ux:icon name="logos:stackoverflow-icon" />
88+
</div>
89+
<div class="SupportBox_content">
90+
<h2 class="SupportBox_title">
91+
<a href="https://stackoverflow.com/questions/tagged/symfonyux" class="SupportBox_link">Stack Overflow</a>
92+
</h2>
93+
<p class="SupportBox_description">Lorem ipsum dolor sit amet, consectetur adipiscing elit.<code>#ux</code> Nullam auctor, nunc nec</p>
94+
</div>
95+
</div>
96+
{% endif %}
97+
98+
</div>
99+
</div>
100+
</section>
101+
102+
{% endblock %}
103+
104+
{% block aside %}
105+
{{ include('_aside.html.twig') }}
106+
{% endblock %}

0 commit comments

Comments
 (0)