Skip to content

Commit 017b61f

Browse files
corentinbettiolsgordeychuk
authored andcommitted
FIX #38: fix external svg (#108)
*svg files are now embedded in backgroung-image css in order to prevent CORS errors (cherry picked from commit a8300c3)
1 parent f58105d commit 017b61f

File tree

7 files changed

+87
-22
lines changed

7 files changed

+87
-22
lines changed

djangocms_bootstrap4/static/djangocms_bootstrap4/css/base.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.

djangocms_bootstrap4/static/djangocms_bootstrap4/js/bundle.base.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

djangocms_bootstrap4/static/djangocms_bootstrap4/js/bundle.grid.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

private/js/components/grid-layout.js

Lines changed: 6 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -29,15 +29,11 @@ export default class GridLayout {
2929
let sizes = ['size-xs', 'size-sm', 'size-md', 'size-lg', 'size-xl'];
3030
let wrapper = wrapper => `<div class="icon-thead">${wrapper}</div>`;
3131
let icons = (icon, title = '', staticPath = this.options.static) => `
32-
<span class="icon icon-${icon}" title="${title}">
33-
<svg role="presentation">
34-
<use xlink:href="${staticPath}djangocms_bootstrap4/sprites/icons.svg#${icon}"></use>
35-
</svg>
36-
</span>
37-
<span class="icon-title">${title}</span>`;
32+
<span class="icon icon-${icon}" title="${title}"></span>
33+
<span class="icon-title">${title}</span>`
3834
let tmp = '';
3935

40-
sizes.forEach(function(item, index) {
36+
sizes.forEach(function (item, index) {
4137
tmp = icons(item, this.options.sizes[index]);
4238

4339
container.eq(index).prepend(wrapper(tmp));
@@ -59,11 +55,7 @@ export default class GridLayout {
5955
<div class="field-box field-box-label">
6056
<a href="${link}" target="_blank" class="d-inline-block text-right">
6157
${text}
62-
<span class="icon icon-info icon-primary">
63-
<svg role="presentation">
64-
<use xlink:href="${staticPath}djangocms_bootstrap4/sprites/icons.svg#info"></use>
65-
</svg>
66-
</span>
58+
<span class="icon icon-info icon-primary"></span>
6759
</a>
6860
</div>
6961
`;
@@ -75,7 +67,7 @@ export default class GridLayout {
7567
'https://getbootstrap.com/docs/4.0/layout/grid/#offsetting-columns',
7668
];
7769

78-
container.toArray().forEach(function(item, index) {
70+
container.toArray().forEach(function (item, index) {
7971
$(item).prepend(template(this.options.rows[index], links[index]));
8072
}, this);
8173
}
@@ -91,7 +83,7 @@ export default class GridLayout {
9183
`;
9284
let button = $(template());
9385

94-
button.on('click', function(event) {
86+
button.on('click', function (event) {
9587
event.preventDefault();
9688
wrapper.find('input').val('');
9789
wrapper.find('input[type="checkbox"]').prop('checked', false);

private/js/components/templates.js

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,5 @@
11
export const iconTemplate = (icon, staticPath = '/static/', title = '') => `
2-
<span class="icon icon-${icon}" title="${title}">
3-
<svg role="presentation">
4-
<use xlink:href="${staticPath}djangocms_bootstrap4/sprites/icons.svg#${icon}"></use>
5-
</svg>
6-
</span>`;
2+
<span class="icon icon-${icon}" title="${title}"></span>`
73

84
export const previewTemplate = (classes = '', title = 'Preview') => `
95
<div class="djangocms-bootstrap4-preview ${classes}">

private/sass/components/_button-group.scss

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,7 @@
4646
}
4747

4848
// when using icons remove padding and improve sizing
49+
// add icons in css to prevent CORS bug - see issue #38
4950
.bootstrap4-button-group-icons {
5051
.icon {
5152
font-size: 21px;
@@ -72,4 +73,76 @@
7273
.icon-size-sm {
7374
transform: rotate(90deg);
7475
}
76+
77+
.icon-align-reset {
78+
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M16 2.667c-7.36 0-13.333 5.973-13.333 13.333s5.973 13.333 13.333 13.333 13.333-5.973 13.333-13.333-5.973-13.333-13.333-13.333zM5.333 16c0-5.893 4.773-10.667 10.667-10.667 2.467 0 4.733 0.84 6.533 2.253l-14.947 14.947c-1.413-1.8-2.253-4.067-2.253-6.533zM16 26.667c-2.467 0-4.733-0.84-6.533-2.253l14.947-14.947c1.413 1.8 2.253 4.067 2.253 6.533 0 5.893-4.773 10.667-10.667 10.667z"></path></svg>');
79+
}
80+
81+
.icon-flex-align-start {
82+
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1008 1024"><path d="M287.995 530h432.006v144.002h-432.006zM287.995 349.998h432.006v144.002h-432.006z"></path><path opacity="0.5" d="M-0.009 349.998v36.001h1008.013v-36.001h-1008.013zM251.994 349.998h504.006v36.001h-504.006v-36.001z"></path></svg>');
83+
}
84+
85+
.icon-flex-align-center {
86+
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path d="M292.572 530.286h438.858v146.286h-438.858zM292.572 347.428h438.858v146.286h-438.858z"></path><path opacity="0.5" d="M0 493.714v36.571h1024v-36.571h-1024zM256 493.714h512v36.571h-512v-36.571z"></path></svg>');
87+
}
88+
89+
.icon-flex-align-end {
90+
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path opacity="0.5" d="M22.222 0h1.778v32h-1.778v-32zM22.222 7.111v17.778h1.778v-17.778h-1.778z"></path><path d="M16.889 8.889h7.111v14.222h-7.111zM8 8.889h7.111v14.222h-7.111z"></path></svg>');
91+
}
92+
93+
.icon-flex-content-start {
94+
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path opacity="0.5" d="M8 0h1.778v32h-1.778v-32zM8 7.111v17.778h1.778v-17.778h-1.778z"></path><path d="M16.889 8.889h7.111v14.222h-7.111zM8 8.889h7.111v14.222h-7.111z"></path></svg>');
95+
}
96+
97+
.icon-flex-content-center {
98+
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 34 32"><path opacity="0.5" d="M16.002 0h1.778v32h-1.778v-32zM16.002 7.111v17.778h1.778v-17.778h-1.778z"></path><path d="M17.78 8.889h7.111v14.222h-7.111zM8.891 8.889h7.111v14.222h-7.111z"></path></svg>');
99+
}
100+
101+
.icon-flex-content-end {
102+
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path opacity="0.5" d="M22.222 0h1.778v32h-1.778v-32zM22.222 7.111v17.778h1.778v-17.778h-1.778z"></path><path d="M16.889 8.889h7.111v14.222h-7.111zM8 8.889h7.111v14.222h-7.111z"></path></svg>');
103+
}
104+
105+
.icon-flex-content-around {
106+
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 32"><path opacity="0.5" d="M23.143 0.571h1.714v30.857h-1.714zM0 0.571h1.714v30.857h-1.714zM46.286 0.571h1.714v30.857h-1.714z"></path><path d="M32.571 9.143h6.857v13.714h-6.857zM8.571 9.143h6.857v13.714h-6.857z"></path></svg>');
107+
}
108+
109+
.icon-flex-content-between {
110+
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 32"><path opacity="0.5" d="M0 0.571h1.714v30.857h-1.714v-30.857zM0 7.429v17.143h1.714v-17.143h-1.714zM46.286 0.571h1.714v30.857h-1.714v-30.857zM46.286 7.429v17.143h1.714v-17.143h-1.714z"></path><path d="M41.143 9.143h6.857v13.714h-6.857zM0 9.143h6.857v13.714h-6.857z"></path></svg>');
111+
}
112+
113+
.icon-flex-self-start {
114+
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path opacity="0.5" d="M0 9.143v1.143h32v-1.143h-32zM9.143 9.143h12.571v1.143h-12.571v-1.143z"></path><path d="M16 9.143h4.571v9.143h-4.571zM10.286 9.143h4.571v13.714h-4.571z"></path></svg>');
115+
}
116+
117+
.icon-flex-self-center {
118+
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path opacity="0.5" d="M0 15.429v1.143h32v-1.143h-32zM9.143 15.429h12.571v1.143h-12.571v-1.143z"></path><path d="M16 10.857h4.571v10.286h-4.571zM10.286 8.571h4.571v14.857h-4.571z"></path></svg>');
119+
}
120+
121+
.icon-flex-self-end {
122+
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path opacity="0.5" d="M0 21.714v1.143h32v-1.143h-32zM9.143 21.714h12.571v1.143h-12.571v-1.143z"></path><path d="M16 13.714h4.571v9.143h-4.571zM10.286 9.143h4.571v13.714h-4.571z"></path></svg>');
123+
}
124+
125+
.icon-size-xs {
126+
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 448"><path d="M256 344v-40c0-4.5-3.5-8-8-8h-24v-128c0-4.5-3.5-8-8-8h-80c-4.5 0-8 3.5-8 8v40c0 4.5 3.5 8 8 8h24v80h-24c-4.5 0-8 3.5-8 8v40c0 4.5 3.5 8 8 8h112c4.5 0 8-3.5 8-8zM224 120v-40c0-4.5-3.5-8-8-8h-48c-4.5 0-8 3.5-8 8v40c0 4.5 3.5 8 8 8h48c4.5 0 8-3.5 8-8zM384 224c0 106-86 192-192 192s-192-86-192-192 86-192 192-192 192 86 192 192z"></path></svg>');
127+
}
128+
129+
.icon-size-sm {
130+
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M272 0H48C21.5 0 0 21.5 0 48v416c0 26.5 21.5 48 48 48h224c26.5 0 48-21.5 48-48V48c0-26.5-21.5-48-48-48zM160 480c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32-32 32zm112-108c0 6.6-5.4 12-12 12H60c-6.6 0-12-5.4-12-12V60c0-6.6 5.4-12 12-12h200c6.6 0 12 5.4 12 12v312z"/></svg>');
131+
}
132+
133+
.icon-size-md {
134+
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M400 0H48C21.5 0 0 21.5 0 48v416c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V48c0-26.5-21.5-48-48-48zM224 480c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32-32 32zm176-108c0 6.6-5.4 12-12 12H60c-6.6 0-12-5.4-12-12V60c0-6.6 5.4-12 12-12h328c6.6 0 12 5.4 12 12v312z"/></svg>');
135+
}
136+
137+
.icon-size-lg {
138+
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path d="M512 64v256H128V64h384m16-64H112C85.5 0 64 21.5 64 48v288c0 26.5 21.5 48 48 48h416c26.5 0 48-21.5 48-48V48c0-26.5-21.5-48-48-48zm100 416H389.5c-3 0-5.5 2.1-5.9 5.1C381.2 436.3 368 448 352 448h-64c-16 0-29.2-11.7-31.6-26.9-.5-2.9-3-5.1-5.9-5.1H12c-6.6 0-12 5.4-12 12v36c0 26.5 21.5 48 48 48h544c26.5 0 48-21.5 48-48v-36c0-6.6-5.4-12-12-12z"/></svg>');
139+
}
140+
141+
.icon-size-xl {
142+
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M528 0H48C21.5 0 0 21.5 0 48v320c0 26.5 21.5 48 48 48h192l-16 48h-72c-13.3 0-24 10.7-24 24s10.7 24 24 24h272c13.3 0 24-10.7 24-24s-10.7-24-24-24h-72l-16-48h192c26.5 0 48-21.5 48-48V48c0-26.5-21.5-48-48-48zm-16 352H64V64h448v288z"/></svg>');
143+
}
144+
}
145+
146+
.icon-info {
147+
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 448" style="fill: DeepSkyBlue;"><path d="M256 344v-40c0-4.5-3.5-8-8-8h-24v-128c0-4.5-3.5-8-8-8h-80c-4.5 0-8 3.5-8 8v40c0 4.5 3.5 8 8 8h24v80h-24c-4.5 0-8 3.5-8 8v40c0 4.5 3.5 8 8 8h112c4.5 0 8-3.5 8-8zM224 120v-40c0-4.5-3.5-8-8-8h-48c-4.5 0-8 3.5-8 8v40c0 4.5 3.5 8 8 8h48c4.5 0 8-3.5 8-8zM384 224c0 106-86 192-192 192s-192-86-192-192 86-192 192-192 192 86 192 192z"></path></svg>');
75148
}

private/sass/components/_icons.scss

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,10 @@
1414
}
1515
}
1616

17+
.icon-info {
18+
width: 0.9em;
19+
}
20+
1721
$svg-colors: (
1822
"white": white,
1923
"black": black,

0 commit comments

Comments
 (0)