Skip to content

Commit 3a133bb

Browse files
jdcmsdjdcmsd
committed
Symfony app styles made closer to other SDK app styles
1 parent 40ddcf9 commit 3a133bb

5 files changed

Lines changed: 368 additions & 26 deletions

File tree

‎examples/dotcms-symfony/assets/styles/app.css‎

Lines changed: 317 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -65,3 +65,320 @@ nav ul ul li {
6565
header .grid {
6666
align-items: center;
6767
}
68+
69+
/* Banner Hero Component */
70+
.banner-hero {
71+
position: relative;
72+
width: 100%;
73+
height: 24rem; /* 384px - equivalent to h-96 in Tailwind */
74+
background-color: #e5e7eb; /* Light gray fallback */
75+
overflow: hidden;
76+
border-radius: 0.5rem;
77+
margin-bottom: 2rem;
78+
}
79+
80+
.banner-image {
81+
position: absolute;
82+
top: 0;
83+
left: 0;
84+
width: 100%;
85+
height: 100%;
86+
}
87+
88+
.banner-image img {
89+
width: 100%;
90+
height: 100%;
91+
object-fit: cover;
92+
}
93+
94+
.banner-overlay {
95+
position: absolute;
96+
top: 0;
97+
left: 0;
98+
width: 100%;
99+
height: 100%;
100+
display: flex;
101+
align-items: center;
102+
justify-content: center;
103+
background: rgba(0, 0, 0, 0.3); /* Semi-transparent dark overlay */
104+
}
105+
106+
.banner-content {
107+
text-align: center;
108+
color: white;
109+
padding: 2rem;
110+
max-width: 800px;
111+
}
112+
113+
.banner-title {
114+
font-size: 3.75rem; /* 60px - equivalent to text-6xl */
115+
font-weight: bold;
116+
margin-bottom: 1rem;
117+
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
118+
line-height: 1.1;
119+
}
120+
121+
.banner-caption {
122+
font-size: 1.25rem; /* 20px - equivalent to text-xl */
123+
margin-bottom: 2rem;
124+
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
125+
line-height: 1.4;
126+
}
127+
128+
.banner-button {
129+
display: inline-block;
130+
background-color: #8b5cf6; /* Purple-500 */
131+
color: white;
132+
padding: 1rem 2rem;
133+
font-size: 1.25rem; /* 20px - equivalent to text-xl */
134+
text-decoration: none;
135+
border-radius: 0.5rem;
136+
transition: background-color 0.3s ease;
137+
font-weight: 600;
138+
text-shadow: none;
139+
}
140+
141+
.banner-button:hover {
142+
background-color: #7c3aed; /* Purple-600 */
143+
text-decoration: none;
144+
color: white;
145+
}
146+
147+
/* Responsive adjustments */
148+
@media (max-width: 768px) {
149+
.banner-hero {
150+
height: 18rem; /* Smaller height on mobile */
151+
}
152+
153+
.banner-title {
154+
font-size: 2.5rem; /* 40px */
155+
}
156+
157+
.banner-caption {
158+
font-size: 1.125rem; /* 18px */
159+
}
160+
161+
.banner-button {
162+
font-size: 1rem;
163+
padding: 0.75rem 1.5rem;
164+
}
165+
166+
.banner-content {
167+
padding: 1rem;
168+
}
169+
}
170+
171+
/* Header Styles - Improved sizing and spacing to match Laravel proportions */
172+
.header-primary {
173+
padding: 1rem;
174+
border-bottom: 1px solid #e5e7eb; /* Light border for definition */
175+
}
176+
177+
.header-container {
178+
max-width: 1200px;
179+
margin: 0 auto;
180+
display: flex;
181+
align-items: center;
182+
justify-content: space-between;
183+
}
184+
185+
.header-logo h2 {
186+
font-size: 1.875rem; /* 30px - equivalent to text-3xl to match Laravel scale */
187+
font-weight: bold;
188+
margin: 0;
189+
}
190+
191+
.header-logo-link {
192+
text-decoration: none;
193+
color: inherit;
194+
}
195+
196+
.header-logo-link:hover {
197+
text-decoration: none;
198+
color: inherit;
199+
}
200+
201+
/* Header Navigation - Improved spacing and typography */
202+
.header-navigation {
203+
/* Remove any existing navigation styles that conflict */
204+
}
205+
206+
.nav-list {
207+
display: flex;
208+
list-style: none;
209+
padding: 0;
210+
margin: 0;
211+
gap: 1.5rem; /* Increased spacing between items to match Laravel proportions */
212+
}
213+
214+
.nav-item {
215+
position: relative;
216+
margin: 0;
217+
}
218+
219+
.nav-link {
220+
text-decoration: none;
221+
font-size: 1rem; /* Standard readable size */
222+
font-weight: 500;
223+
padding: 0.5rem 0;
224+
transition: opacity 0.2s ease;
225+
}
226+
227+
.nav-link:hover {
228+
text-decoration: none;
229+
opacity: 0.7;
230+
}
231+
232+
/* Dropdown Navigation - Keeping original styling approach */
233+
.nav-dropdown {
234+
display: none;
235+
position: absolute;
236+
top: 100%;
237+
left: 0;
238+
background-color: white;
239+
border: 1px solid #e5e7eb;
240+
border-radius: 0.375rem;
241+
padding: 0.5rem;
242+
list-style: none;
243+
min-width: 200px;
244+
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
245+
z-index: 100;
246+
margin: 0;
247+
flex-direction: column;
248+
}
249+
250+
.nav-item:hover .nav-dropdown {
251+
display: flex;
252+
}
253+
254+
.nav-dropdown-item {
255+
margin: 0;
256+
}
257+
258+
.nav-dropdown-link {
259+
text-decoration: none;
260+
font-size: 0.875rem;
261+
padding: 0.5rem 0.75rem;
262+
display: block;
263+
border-radius: 0.25rem;
264+
transition: background-color 0.2s ease;
265+
}
266+
267+
.nav-dropdown-link:hover {
268+
text-decoration: none;
269+
background-color: #f3f4f6;
270+
}
271+
272+
/* Override legacy nav styles that might conflict */
273+
nav > ul > li {
274+
position: relative;
275+
margin-right: 0; /* Reset old margin */
276+
}
277+
278+
nav ul ul {
279+
display: none; /* Will be overridden by .nav-dropdown styles */
280+
}
281+
282+
/* Responsive Header */
283+
@media (max-width: 768px) {
284+
.header-container {
285+
flex-direction: column;
286+
gap: 1rem;
287+
text-align: center;
288+
}
289+
290+
.nav-list {
291+
flex-wrap: wrap;
292+
justify-content: center;
293+
gap: 1rem; /* Slightly reduced gap on mobile */
294+
}
295+
296+
.header-logo h2 {
297+
font-size: 1.5rem; /* Proportionally smaller on mobile */
298+
}
299+
}
300+
301+
/* Activity Card Component - Typography to match Laravel proportions */
302+
.activity-card {
303+
background-color: white;
304+
border-radius: 0.5rem;
305+
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
306+
overflow: hidden;
307+
margin-bottom: 1.5rem;
308+
}
309+
310+
.activity-image-container {
311+
width: 100%;
312+
}
313+
314+
.activity-image {
315+
width: 100%;
316+
height: auto;
317+
display: block;
318+
}
319+
320+
.activity-content {
321+
padding: 0.5rem 0.5rem 0 0.5rem; /* px-6 py-4 equivalent */
322+
}
323+
324+
.activity-title {
325+
font-size: 1.25rem; /* 20px - equivalent to text-xl to match Laravel */
326+
font-weight: bold;
327+
color: #1f2937; /* Dark gray for strong contrast against white background */
328+
margin: 0 0 0.5rem 0;
329+
line-height: 1.2;
330+
/* Prevent line breaks and handle overflow */
331+
overflow: hidden;
332+
text-overflow: ellipsis;
333+
white-space: nowrap;
334+
max-width: 100%;
335+
}
336+
337+
.activity-description {
338+
font-size: 1rem; /* 16px - equivalent to text-base */
339+
line-height: 1.5;
340+
margin: 0;
341+
color: #4b5563; /* Gray-600 for subtle description text */
342+
/* Text clamping to prevent overflow like Laravel's line-clamp-3 */
343+
display: -webkit-box;
344+
-webkit-line-clamp: 3;
345+
-webkit-box-orient: vertical;
346+
overflow: hidden;
347+
}
348+
349+
.activity-actions {
350+
padding: 1rem 1.5rem 0.5rem 1.5rem; /* pt-4 pb-2 px-6 equivalent */
351+
}
352+
353+
.activity-link {
354+
display: inline-block;
355+
background-color: #6b7280; /* Neutral gray instead of purple to maintain Symfony identity */
356+
color: white;
357+
padding: 0.5rem 1rem;
358+
font-weight: bold;
359+
text-decoration: none;
360+
border-radius: 9999px; /* Fully rounded like Laravel */
361+
font-size: 0.875rem;
362+
transition: background-color 0.2s ease;
363+
}
364+
365+
.activity-link:hover {
366+
background-color: #4b5563; /* Darker gray on hover */
367+
color: white;
368+
text-decoration: none;
369+
}
370+
371+
/* Responsive adjustments for activity cards */
372+
@media (max-width: 768px) {
373+
.activity-title {
374+
font-size: 1.125rem; /* Slightly smaller on mobile */
375+
}
376+
377+
.activity-content {
378+
padding: 1rem;
379+
}
380+
381+
.activity-actions {
382+
padding: 0.75rem 1rem 0.5rem 1rem;
383+
}
384+
}

‎examples/dotcms-symfony/templates/dotcms/components/navigation.twig‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
{# Navigation component for DotCMS #}
2-
<nav class="container">
3-
<ul>
2+
<nav class="header-navigation">
3+
<ul class="nav-list">
44
{% if navigation is defined and navigation is not null %}
55
{% for item in navigation.children %}
6-
<li>
7-
<a href="{{ item.href }}" target="{{ item.target }}">{{ item.title|title }}</a>
6+
<li class="nav-item">
7+
<a href="{{ item.href }}" target="{{ item.target }}" class="nav-link">{{ item.title|title }}</a>
88
{% if item.children is defined and item.children is not empty %}
9-
<ul>
9+
<ul class="nav-dropdown">
1010
{% for child in item.children %}
11-
<li>
12-
<a href="{{ child.href }}" target="{{ child.target }}">{{ child.title|title }}</a>
11+
<li class="nav-dropdown-item">
12+
<a href="{{ child.href }}" target="{{ child.target }}" class="nav-dropdown-link">{{ child.title|title }}</a>
1313
</li>
1414
{% endfor %}
1515
</ul>

‎examples/dotcms-symfony/templates/dotcms/content-types/activity.twig‎

Lines changed: 16 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,24 @@
11
{% if content.image %}
22
{% set imageHtml %}
33
<img src="{{ dotcms_host }}/dA/{{ content.identifier }}/image"
4-
alt="{{ content.title|default('')|e('html_attr') }}">
4+
alt="{{ content.title|default('')|e('html_attr') }}"
5+
class="activity-image">
56
{% endset %}
67
{% endif %}
78

8-
<article>
9-
{{ imageHtml|default('')|raw }}
10-
<div>
11-
<h3>{{ content.title|default('') }}</h3>
12-
<p>{{ content.description|default('') }}</p>
13-
<a href="/activities/{{ content.urlTitle|default('#') }}">Link to detail →</a>
9+
<article class="activity-card">
10+
{% if content.image %}
11+
<div class="activity-image-container">
12+
{{ imageHtml|raw }}
13+
</div>
14+
{% endif %}
15+
<div class="activity-content">
16+
<h3 class="activity-title">{{ content.title|default('') }}</h3>
17+
<p class="activity-description">{{ content.description|default('') }}</p>
18+
</div>
19+
<div class="activity-actions">
20+
<a href="/activities/{{ content.urlTitle|default('#') }}" class="activity-link">
21+
Link to detail →
22+
</a>
1423
</div>
1524
</article>

0 commit comments

Comments
 (0)