Skip to content

Commit 2959f20

Browse files
gorkalauciricagorkalaucirica
authored
Merge pull request #50 from jagoPG/update/frontend-improvements
Update/frontend improvements
2 parents ff1cac8 + b58c65d commit 2959f20

File tree

11 files changed

+114
-16
lines changed

11 files changed

+114
-16
lines changed

‎CHANGELOG.md

+3
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,10 @@ This changelog references the relevant changes done between versions.
44

55
To get the diff for a specific change, go to https://github.com/LIN3S/PatternLibraryBuilder/commit/XXX where XXX is the change hash
66
To get the diff between two versions, go to https://github.com/LIN3S/PatternLibraryBuilder/compare/v0.1.0...v0.2.0
7+
* 0.2.1
8+
* Visual improvements added at typography and colors sections, and aside header.
79

10+
* Add optional argument `line-height` for applying this CSS rule to typographies.
811
* 0.2.0
912
* [BC break] Renderers. Changed configuration yml structure to adapt to new renderer (#12).
1013

‎src/LIN3S/PatternLibraryBuilder/Resources/assets/build/patternlibrary.css

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/LIN3S/PatternLibraryBuilder/Resources/assets/scss/components/_color-palette.scss

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
// This file is part of the Pattern Library Builder library.
2+
//
3+
// Copyright (c) 2017-present LIN3S <[email protected]>
4+
//
5+
// For the full copyright and license information, please view the LICENSE
6+
// file that was distributed with this source code.
7+
//
8+
// @author Andrés Montejo <[email protected]>
9+
// @author Jagoba P. G. <[email protected]>
10+
11+
.plb-color-palette {
12+
display: flex;
13+
flex-wrap: wrap;
14+
}
15+
16+
.plb-color-palette-item {
17+
border: 1px solid #eee;
18+
margin: 20px;
19+
min-width: 100px;
20+
padding: 8px;
21+
text-align: center;
22+
}
23+
24+
.plb-color-palette-item__color {
25+
height: 50px;
26+
margin: 0 auto 10px;
27+
width: 50px;
28+
}
29+
30+
.plb-color-palette-item__hex {
31+
font-size: .8em;
32+
}

‎src/LIN3S/PatternLibraryBuilder/Resources/assets/scss/index.scss

+1
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@
2121
@import 'atoms/form-label';
2222

2323
@import 'components/accordion-item';
24+
@import 'components/color-palette';
2425
@import 'components/form-group';
2526
@import 'components/link';
2627
@import 'components/preview';

‎src/LIN3S/PatternLibraryBuilder/Resources/assets/scss/layouts/_article.scss

+19
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,11 @@ $article-title-font-size: $font-size-36;
2222
$article-title-font-weight: $font-weight-bold;
2323
$article-title-line-height: $article-title-font-size;
2424
$article-title-text-color: $color-primary;
25+
$article-subtitle-font-family: $font-family-open-sans;
26+
$article-subtitle-font-size: $font-size-28;
27+
$article-subtitle-font-weight: $font-weight-bold;
28+
$article-subtitle-line-height: $article-title-font-size;
29+
$article-subtitle-text-color: $color-primary;
2530
$article-description-font-family: $font-family-open-sans;
2631
$article-description-font-size: $font-size-16;
2732
$article-description-font-weight: $font-weight-regular;
@@ -53,6 +58,16 @@ $article-twig-output-font-size: $font-size-12;
5358
text-transform: capitalize;
5459
}
5560

61+
.plb-article__subtitle {
62+
color: $article-subtitle-text-color;
63+
font-family: $article-subtitle-font-family;
64+
font-size: $article-subtitle-font-size;
65+
font-weight: $article-subtitle-font-weight;
66+
line-height: $article-subtitle-line-height;
67+
margin-bottom: 16px;
68+
text-transform: capitalize;
69+
}
70+
5671
.plb-article__description {
5772
color: $article-description-text-color;
5873
font-family: $article-description-font-family;
@@ -61,6 +76,10 @@ $article-twig-output-font-size: $font-size-12;
6176
line-height: $article-description-line-height;
6277
}
6378

79+
.plb-article__description--typography {
80+
margin-left: 16px;
81+
}
82+
6483
code[class*="language-"],
6584
pre[class*="language-"] {
6685
font-size: $article-twig-output-font-size;

‎src/LIN3S/PatternLibraryBuilder/Resources/assets/scss/layouts/_aside.scss

+2-1
Original file line numberDiff line numberDiff line change
@@ -29,10 +29,11 @@ $aside-header-text-color: $color-white;
2929
font-weight: $aside-header-font-weight;
3030
line-height: $aside-header-line-height;
3131
padding: 30px;
32+
text-align: center;
3233

3334
.plb-logo {
3435
height: auto;
35-
margin-bottom: 10px;
36+
margin: 0 auto 10px;
3637
max-width: 170px;
3738
width: 100%;
3839
}

‎src/LIN3S/PatternLibraryBuilder/Resources/templates/layouts/aside.html.twig

+1-1
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,7 @@
7070
{% block logo %}
7171
{% if theme.logo %}
7272
<div class="plb-logo">
73-
{% include theme.logo %}
73+
<a href="{{ path('lin3s_pattern_library_builder_home') }}">{% include theme.logo %}</a>
7474
</div>
7575
{% endif %}
7676
{% endblock %}

‎src/LIN3S/PatternLibraryBuilder/Resources/templates/renderers/colors.html.twig

+6-3
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
1-
<div>
1+
<div class="plb-color-palette">
22
{% for color in colors %}
3-
<div style="width: 50px; height: 50px; background-color: {{ color.color }}; border: 1px solid #eee"></div>
4-
<span>{{ color.name|default(color.color) }}</span>
3+
<div class="plb-color-palette-item">
4+
<div class="plb-color-palette-item__color" style="background-color: {{- color.color -}};"></div>
5+
<div>{{- color.name | default(color.color) -}}</div>
6+
<div class="plb-color-palette-item__hex">{{- color.color -}}</div>
7+
</div>
58
{% endfor %}
69
</div>

‎src/LIN3S/PatternLibraryBuilder/Resources/templates/renderers/typography.html.twig

+10-6
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,14 @@
11
{% for typography in typographies %}
2-
<span>{{ typography.font_family }}</span><br>
2+
<h2 class="plb-article__subtitle">{{- typography.font_family -}}</h2>
33

4-
{% for font in typography.fonts %}
5-
<span style="font-family: {{ typography.font_family }}; font-weight: {{ font.weight }}; font-size: {{ font.size }}">
6-
{{ typography.sample_text }}
7-
</span><br>
8-
{% endfor %}
4+
<div class="plb-article__description plb-article__description--typography">
5+
{% for font in typography.fonts %}
6+
{% set line_height = font['line-height'] is defined and font['line-height'] is not empty ? 'line-height: ' ~ font['line-height']|default : '' %}
7+
<code style="font-family: 'Courier New'; font-style: italic; font-size: .8em;">{{- font.name|default -}}</code>
8+
<p style="font-family: {{ typography.font_family }}; font-weight: {{ font.weight }}; font-size: {{ font.size }}; {{- line_height -}}">
9+
{{- typography.sample_text -}}
10+
</p>
11+
{% endfor %}
12+
</div>
913
<br>
1014
{% endfor %}

‎tests/Application/src/App/Resources/PatternLibrary/style-guide/colors.yml

+15-3
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,19 @@ renderer:
55
colors:
66
-
77
color: '#ff6600'
8-
name: 'Title'
8+
name: 'Blaze Orange'
99
-
10-
color: '#white'
11-
name: 'Title'
10+
color: '#fff'
11+
name: 'White'
12+
-
13+
color: '#de3b3b'
14+
name: 'Punch'
15+
-
16+
color: '#3bdcde'
17+
name: 'Turquoise'
18+
-
19+
color: '#583bde'
20+
name: 'Purple Heart'
21+
-
22+
color: '#3bde3d'
23+
name: 'Malachite'

‎tests/Application/src/App/Resources/PatternLibrary/style-guide/typography.yml

+24-1
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,16 @@ renderer:
55
typographies:
66
-
77
font_family: 'Roboto'
8-
sample_text: 'Lorem ipsum'
8+
sample_text: 'The quick brown fox jumps over the lazy dog'
99
fonts:
10+
-
11+
size: 32px
12+
weight: 600
13+
line-height: 38px
1014
-
1115
size: 18px
1216
weight: 400
17+
line-height: 28px
1318
-
1419
size: 14px
1520
weight: 400
@@ -19,4 +24,22 @@ renderer:
1924
-
2025
size: 11px
2126
weight: 400
27+
-
28+
font_family: 'Open Sans'
29+
sample_text: 'The quick brown fox jumps over the lazy dog'
30+
fonts:
31+
-
32+
name: '.title'
33+
size: 32px
34+
weight: 600
35+
line-height: 38px
36+
-
37+
name: '.subtitle'
38+
size: 18px
39+
weight: 400
40+
line-height: 28px
41+
-
42+
name: '.paragraph'
43+
size: 11px
44+
weight: 400
2245

0 commit comments

Comments
 (0)