appscms-tools-theme 2.2.8 → 2.2.9
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/_data/feature/en/theframe.json +10 -5
- data/_layouts/frame.html +4 -4
- data/assets/css/frame.css +46 -0
- data/assets/js/frame.js +5 -2
- data/assets/js/photo-effects.json +11 -0
- metadata +1 -1
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 1b523701948b5c98ba153ea9273e0ac3d4e4e869c69c7239d12950e006cfb044
|
|
4
|
+
data.tar.gz: b0b8321dcb0b19fbe5a96f2bcd467bc152528a6cd97717da8fe6323cc4d0890e
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 4dd9896964d15ae2bd312e44b1ef65d8a11d99017af1f5050dcffb3860f0d49e44fc33cda5c13f0e3e6e08b5f17640de380228c83937c28c609e131d82d2ce61
|
|
7
|
+
data.tar.gz: fe51f0f1792bb51e48424fc1a29d0b1a5773f7ea853dd4eabb28e586ea680f418d0db821bf4f0cfa41cb39973df302f9155af139ae78ce37a92f9060b40ff8c3
|
|
@@ -27,12 +27,12 @@
|
|
|
27
27
|
"https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.12/cropper.css",
|
|
28
28
|
"/assets/css/frame.css"
|
|
29
29
|
],
|
|
30
|
-
"mainPreviewImage": "https://cdn.photofunia.com/effects/
|
|
30
|
+
"mainPreviewImage": "https://cdn.photofunia.com/effects/balloon/icons/medium.jpg",
|
|
31
31
|
"imageSamples": [
|
|
32
|
-
"https://cdn.photofunia.com/effects/
|
|
33
|
-
"https://cdn.photofunia.com/effects/
|
|
34
|
-
"https://cdn.photofunia.com/effects/
|
|
35
|
-
"https://cdn.photofunia.com/effects/
|
|
32
|
+
"https://cdn.photofunia.com/effects/balloon/icons/medium.jpg",
|
|
33
|
+
"https://cdn.photofunia.com/effects/balloon/icons/medium.jpg",
|
|
34
|
+
"https://cdn.photofunia.com/effects/balloon/icons/medium.jpg",
|
|
35
|
+
"https://cdn.photofunia.com/effects/balloon/icons/medium.jpg"
|
|
36
36
|
],
|
|
37
37
|
"image": {
|
|
38
38
|
"src": "/assets/images/gallary.png",
|
|
@@ -46,6 +46,11 @@
|
|
|
46
46
|
{
|
|
47
47
|
"type": "image",
|
|
48
48
|
"label": "1."
|
|
49
|
+
},
|
|
50
|
+
{
|
|
51
|
+
"type": "text",
|
|
52
|
+
"id": "text-1",
|
|
53
|
+
"label": "text"
|
|
49
54
|
}
|
|
50
55
|
]
|
|
51
56
|
}
|
data/_layouts/frame.html
CHANGED
|
@@ -40,9 +40,9 @@ layout: feature
|
|
|
40
40
|
<div class="col-md-9">
|
|
41
41
|
<div class="row">
|
|
42
42
|
<div class="col-md-8">
|
|
43
|
-
<div
|
|
44
|
-
<div
|
|
45
|
-
<div
|
|
43
|
+
<div>
|
|
44
|
+
<div>
|
|
45
|
+
<div>
|
|
46
46
|
{%- assign frameh1 = fileData.H1 | replace: "$variable", page.value -%}
|
|
47
47
|
<h1 class="frame-h1">{%- for word in frameh1-%}
|
|
48
48
|
{%- if forloop.first == true -%}
|
|
@@ -67,7 +67,7 @@ layout: feature
|
|
|
67
67
|
<div class="preview-section">
|
|
68
68
|
<img src="{{fileData.mainPreviewImage}}" alt="">
|
|
69
69
|
</div>
|
|
70
|
-
<h3>Examples</h3>
|
|
70
|
+
<h3 id="example-h3">Examples</h3>
|
|
71
71
|
<div class="image-samples" onclick="openExamplesModal()">
|
|
72
72
|
{%- for item in fileData.imageSamples -%}
|
|
73
73
|
<img src="{{item}}" alt="sample">
|
data/assets/css/frame.css
CHANGED
|
@@ -471,3 +471,49 @@ input {
|
|
|
471
471
|
.categories-list .accordion > .card > .card-header {
|
|
472
472
|
height: auto;
|
|
473
473
|
}
|
|
474
|
+
.frame-h1 {
|
|
475
|
+
margin: 0;
|
|
476
|
+
font-size: 17pt;
|
|
477
|
+
line-height: 24pt;
|
|
478
|
+
font-weight: 600;
|
|
479
|
+
text-align: left;
|
|
480
|
+
color: #555;
|
|
481
|
+
}
|
|
482
|
+
.frame-h2 {
|
|
483
|
+
font-size: 15px;
|
|
484
|
+
line-height: 16px;
|
|
485
|
+
color: #656464;
|
|
486
|
+
max-width: 345px;
|
|
487
|
+
color: #555;
|
|
488
|
+
padding: 4px 0;
|
|
489
|
+
text-align: left;
|
|
490
|
+
}
|
|
491
|
+
.image-samples {
|
|
492
|
+
display: flex;
|
|
493
|
+
flex-wrap: wrap;
|
|
494
|
+
margin-top: 5px;
|
|
495
|
+
margin-bottom: 18px;
|
|
496
|
+
gap: 5px;
|
|
497
|
+
cursor: pointer;
|
|
498
|
+
}
|
|
499
|
+
.image-samples img {
|
|
500
|
+
cursor: pointer;
|
|
501
|
+
width: 52px;
|
|
502
|
+
height: 52px;
|
|
503
|
+
float: left;
|
|
504
|
+
background-color: #eee;
|
|
505
|
+
}
|
|
506
|
+
|
|
507
|
+
#example-h3 {
|
|
508
|
+
font-size: 0.98em;
|
|
509
|
+
padding: 3px 0 3px;
|
|
510
|
+
text-align: left;
|
|
511
|
+
color: #555;
|
|
512
|
+
margin: 0 0 8px;
|
|
513
|
+
font-weight: 600;
|
|
514
|
+
border-bottom: 1px solid #dadada;
|
|
515
|
+
}
|
|
516
|
+
.preview-section img {
|
|
517
|
+
width: 100%;
|
|
518
|
+
height: 100%;
|
|
519
|
+
}
|
data/assets/js/frame.js
CHANGED
|
@@ -121,12 +121,15 @@ const drawImage = () => {
|
|
|
121
121
|
if (textValue.length > 10 && item.fontSizeOption1) {
|
|
122
122
|
item.fontSize = item.fontSizeOption1
|
|
123
123
|
}
|
|
124
|
-
if (textValue.length >
|
|
124
|
+
if (textValue.length > 12 && item.fontSizeOption2) {
|
|
125
125
|
item.fontSize = item.fontSizeOption2
|
|
126
126
|
}
|
|
127
|
-
if (textValue.length >
|
|
127
|
+
if (textValue.length > 15 && item.fontSizeOption3) {
|
|
128
128
|
item.fontSize = item.fontSizeOption3
|
|
129
129
|
}
|
|
130
|
+
if (textValue.length > 20 && item.fontSizeOption4) {
|
|
131
|
+
item.fontSize = item.fontSizeOption4
|
|
132
|
+
}
|
|
130
133
|
ctx.font = `${item.fontSize}px ${item.font}`
|
|
131
134
|
if (item.shadowColor) {
|
|
132
135
|
ctx.shadowColor = `${item.shadowColor}`
|
|
@@ -16,6 +16,17 @@
|
|
|
16
16
|
"x": 100,
|
|
17
17
|
"y": 100,
|
|
18
18
|
"id": "file-1"
|
|
19
|
+
},
|
|
20
|
+
{
|
|
21
|
+
"type": "text",
|
|
22
|
+
"x": "200",
|
|
23
|
+
"y": "200",
|
|
24
|
+
"color": "red",
|
|
25
|
+
"fontFamily": "Calligraphy",
|
|
26
|
+
"fontPath": "/assets/fonts/Calligraphy.ttf",
|
|
27
|
+
"id": "text-1",
|
|
28
|
+
"fontSize": 50,
|
|
29
|
+
"fontSizeOption1": 10
|
|
19
30
|
}
|
|
20
31
|
]
|
|
21
32
|
}
|