@vixoniccom/news-internal 0.4.20-dev.3 → 0.4.20-dev.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (16) hide show
  1. package/CHANGELOG.md +17 -0
  2. package/build/index.html +1 -1
  3. package/build/main.js +1 -1
  4. package/build/test/downloads/custom-template/main.html +72 -61
  5. package/build.zip +0 -0
  6. package/configuration/newsGroup/newsInputs.ts +4 -0
  7. package/configuration.json +4 -0
  8. package/package.json +2 -2
  9. package/src/components/App.tsx +25 -42
  10. package/src/components/FormattedHtmlText/index.tsx +4 -3
  11. package/src/components/FormattedText/index.tsx +27 -22
  12. package/src/components/GalleryItem/index.tsx +1 -1
  13. package/src/components/ImageContainer/index.tsx +10 -8
  14. package/src/index.html +13 -10
  15. package/src/main.ts +1 -1
  16. package/src/test/downloads/custom-template/main.html +72 -61
package/build/test/downloads/custom-template/main.html CHANGED
@@ -1,62 +1,73 @@
1
- <!doctype html>
1
+ <!DOCTYPE html>
2
2
  <html lang="en">
3
- <head>
4
- <style type="text/css">
5
- @font-face {
6
- font-family: 'MainFont';
7
- src: url('./assets/main-font.ttf'); /* IE9 Compat Modes */
8
-
9
- }
10
- .news-item, .background {
11
- position: absolute;
12
- width: 800px;
13
- height: 500px;
14
- background-image: url('./assets/background.png');
15
- }
16
- .news-item__title {
17
- display: flex;
18
- position: absolute;
19
- top: 35px;
20
- left: 35px;
21
- width: 725px;
22
- height: 52px;
23
- align-items: center;
24
- font-size: 30px;
25
- font-family: 'MainFont';
26
- color: #112244;
27
- }
28
- .news-item__description {
29
- display: flex;
30
- position: absolute;
31
- top: 155px;
32
- left: 390px;
33
- width: 370px;
34
- height: 292px;
35
- font-size: 25px;
36
- font-family: 'MainFont';
37
- color: #224466;
38
- }
39
- .news-item__image, .news-item__image-loading, .news-item__image-error {
40
- border-radius: 10px;
41
- position: absolute;
42
- left: 32px;
43
- top: 135px;
44
- width: 335px;
45
- height: 335px;
46
- object-fit: cover;
47
- }
48
- </style>
49
- </head>
50
- <body>
51
- <div class="background"></div>
52
- <div class="news-item">
53
- <div class="news-item__title">Título</div>
54
- <div class="news-item__description">Descripción</div>
55
- <div>
56
- <img class="news-item__image">
57
- <img class="news-item__image-error" src="./assets/image-error.png">
58
- <img class="news-item__image-loading" src="./assets/image-loading.gif">
59
- </div>
60
- </div>
61
- </body>
62
- </html>
3
+ <head>
4
+ <title></title>
5
+ <style type="text/css">
6
+ @font-face {
7
+ font-family: 'MainFont', sans-serif;
8
+ src: url('./assets/main-font.ttf'); /* IE9 Compat Modes */
9
+ }
10
+ .news-item,
11
+ .background {
12
+ position: absolute;
13
+ width: 800px;
14
+ height: 500px;
15
+ background-image: url('./assets/background.png');
16
+ }
17
+ .news-item__title {
18
+ display: flex;
19
+ position: absolute;
20
+ top: 35px;
21
+ left: 35px;
22
+ width: 725px;
23
+ height: 52px;
24
+ align-items: center;
25
+ font-size: 30px;
26
+ font-family: 'MainFont', sans-serif;
27
+ color: #112244;
28
+ }
29
+ .news-item__description {
30
+ display: flex;
31
+ position: absolute;
32
+ top: 155px;
33
+ left: 390px;
34
+ width: 370px;
35
+ height: 292px;
36
+ font-size: 25px;
37
+ font-family: 'MainFont', sans-serif;
38
+ color: #224466;
39
+ }
40
+ .news-item__image,
41
+ .news-item__image-loading,
42
+ .news-item__image-error {
43
+ border-radius: 10px;
44
+ position: absolute;
45
+ left: 32px;
46
+ top: 135px;
47
+ width: 335px;
48
+ height: 335px;
49
+ object-fit: cover;
50
+ }
51
+ </style>
52
+ </head>
53
+ <body>
54
+ <div class="background"></div>
55
+ <div class="news-item">
56
+ <div class="news-item__title">Título</div>
57
+ <div class="news-item__description">Descripción</div>
58
+ <div>
59
+ <img
60
+ class="news-item__image"
61
+ alt="title" />
62
+ <img
63
+ class="news-item__image-error"
64
+ src="./assets/image-error.png"
65
+ alt="error" />
66
+ <img
67
+ class="news-item__image-loading"
68
+ src="./assets/image-loading.gif"
69
+ alt="loading" />
70
+ </div>
71
+ </div>
72
+ </body>
73
+ </html>
package/build.zip CHANGED
Binary file
package/configuration/newsGroup/newsInputs.ts CHANGED
@@ -43,6 +43,7 @@ export const newsInputs = [
43
43
  show: ShowValidations.shortDescriptionEnabled,
44
44
  range: new NumberRangeValue(1, 80),
45
45
  html: true,
46
+ pattern: '^(?!\\s*$).+',
46
47
  }),
47
48
 
48
49
  new TextArea({
@@ -52,6 +53,7 @@ export const newsInputs = [
52
53
  show: ShowValidations.mediumDescriptionEnabled,
53
54
  range: new NumberRangeValue(1, 180),
54
55
  html: true,
56
+ pattern: '^(?!\\s*$).+',
55
57
  }),
56
58
 
57
59
  new TextArea({
@@ -61,6 +63,7 @@ export const newsInputs = [
61
63
  show: ShowValidations.largeDescriptionEnabled,
62
64
  range: new NumberRangeValue(1, 350),
63
65
  html: true,
66
+ pattern: '^(?!\\s*$).+',
64
67
  }),
65
68
 
66
69
  new TextArea({
@@ -70,6 +73,7 @@ export const newsInputs = [
70
73
  show: ShowValidations.extraLargeDescriptionEnabled,
71
74
  range: new NumberRangeValue(1, 500),
72
75
  html: true,
76
+ pattern: '^(?!\\s*$).+',
73
77
  }),
74
78
 
75
79
  new SelectAssetKna({
package/configuration.json CHANGED
@@ -48,6 +48,7 @@
48
48
  "show": "{{descriptionEnabled}} === true && ({{newsSizeSelect}} === 'short')",
49
49
  "type": "text-area",
50
50
  "required": true,
51
+ "pattern": "^(?!\\s*$).+",
51
52
  "range": "[1:80]",
52
53
  "html": true
53
54
  },
@@ -57,6 +58,7 @@
57
58
  "show": "{{descriptionEnabled}} === true && ({{newsSizeSelect}} === 'medium')",
58
59
  "type": "text-area",
59
60
  "required": true,
61
+ "pattern": "^(?!\\s*$).+",
60
62
  "range": "[1:180]",
61
63
  "html": true
62
64
  },
@@ -66,6 +68,7 @@
66
68
  "show": "{{descriptionEnabled}} === true && ({{newsSizeSelect}} === 'large')",
67
69
  "type": "text-area",
68
70
  "required": true,
71
+ "pattern": "^(?!\\s*$).+",
69
72
  "range": "[1:350]",
70
73
  "html": true
71
74
  },
@@ -75,6 +78,7 @@
75
78
  "show": "{{descriptionEnabled}} === true && ({{newsSizeSelect}} === 'extra-large')",
76
79
  "type": "text-area",
77
80
  "required": true,
81
+ "pattern": "^(?!\\s*$).+",
78
82
  "range": "[1:500]",
79
83
  "html": true
80
84
  },
package/package.json CHANGED
@@ -8,7 +8,7 @@
8
8
  "author": {
9
9
  "name": ""
10
10
  },
11
- "version": "0.4.20-dev.3",
11
+ "version": "0.4.20-dev.5",
12
12
  "scripts": {
13
13
  "prepublish": "vixonic-module-packager --mode=build",
14
14
  "watch": "vixonic-module-packager --mode=watch",
@@ -25,7 +25,7 @@
25
25
  "react": "^18.3.1",
26
26
  "react-dom": "^18.3.1",
27
27
  "react-qr-code": "^2.0.18",
28
- "react-quill": "^1.3.5",
28
+ "react-quill": "^2.0.0",
29
29
  "react-transition-group": "^4.4.5",
30
30
  "uuid": "^9.0.0"
31
31
  },
package/src/components/App.tsx CHANGED
@@ -1,4 +1,4 @@
1
- import React from 'react'
1
+ import React, { useState, useEffect } from 'react'
2
2
  import { v4 as uuid } from 'uuid'
3
3
  import { NewsContainer } from './NewsContainer'
4
4
  import { FontLoader } from './FontLoader'
@@ -6,43 +6,12 @@ import dayjs from 'dayjs'
6
6
 
7
7
  export type Props = {
8
8
  data?: VixonicData
9
- start: boolean
10
9
  }
11
10
 
12
- type State = {
13
- currentIndex: number
14
- news: NewsItem[]
15
- }
16
-
17
- export class App extends React.Component<Props, State> {
18
- state: State = { currentIndex: 0, news: [] }
19
-
20
- constructor(props: Props) {
21
- super(props)
22
- this.state = { currentIndex: 0, news: this.parseNews(props.data) }
23
- this.updateCssVariables(props)
24
- }
25
-
26
- componentWillReceiveProps(nextProps: Props) {
27
- const currentNews = this?.props?.data?.parameters?.news
28
- const nextNews = nextProps?.data?.parameters?.news
29
- if ((JSON.stringify(currentNews) !== JSON.stringify(nextNews)) || (JSON.stringify(this.props.data) !== JSON.stringify(nextProps.data))) {
30
- this.setState({ news: this.parseNews(nextProps.data) })
31
- }
32
- this.updateCssVariables(nextProps)
33
- }
11
+ export const App: React.FunctionComponent<Props> = ({ data }) => {
12
+ const [news, setNews] = useState<NewsItem[]>([])
34
13
 
35
- updateCssVariables(props: Props) {
36
- if (!props.data) return
37
- const { animationSpeed, animationType, template } = props.data.parameters
38
- const speed = 1750 / (animationSpeed || 1)
39
- document?.documentElement?.style?.setProperty('--speed', `${speed}ms`)
40
- document?.documentElement?.style?.setProperty('--enterDelay', `${animationType === 'crossFade' ? 0 : speed}ms`)
41
- // If gallery make a cross fade with delay to prevent background.
42
- document?.documentElement?.style?.setProperty('--exitDelay', `${(animationType === 'crossFade' && template === 'gallery') ? speed : 0}ms`)
43
- }
44
-
45
- parseNews(data?: VixonicData): NewsItem[] {
14
+ const parseNews = (data?: VixonicData): NewsItem[] => {
46
15
  if (!data) return []
47
16
  const { news } = data.parameters
48
17
  const parsedNews = news?.map((n) => {
@@ -61,10 +30,24 @@ export class App extends React.Component<Props, State> {
61
30
  return parsedNews || []
62
31
  }
63
32
 
64
- render() {
65
- const { data } = this.props
66
- if (!data) return null
67
- return <div style={{
33
+ const updateCssVariables = (data?: VixonicData) => {
34
+ if (!data) return
35
+ const { animationSpeed, animationType, template } = data.parameters
36
+ const speed = 1750 / (animationSpeed ?? 1)
37
+ document?.documentElement?.style?.setProperty('--speed', `${speed}ms`)
38
+ document?.documentElement?.style?.setProperty('--enterDelay', `${animationType === 'crossFade' ? 0 : speed}ms`)
39
+ document?.documentElement?.style?.setProperty('--exitDelay', `${(animationType === 'crossFade' && template === 'gallery') ? speed : 0}ms`)
40
+ }
41
+
42
+ useEffect(() => {
43
+ setNews(parseNews(data))
44
+ updateCssVariables(data)
45
+ }, [data])
46
+
47
+ if (!data) return null
48
+
49
+ return (
50
+ <div style={{
68
51
  position: 'absolute',
69
52
  top: 0,
70
53
  left: 0,
@@ -73,8 +56,8 @@ export class App extends React.Component<Props, State> {
73
56
  overflow: 'hidden',
74
57
  backgroundSize: '100% 100%',
75
58
  }}>
76
- <NewsContainer data={data} items={this.state.news} />
59
+ <NewsContainer data={data} items={news} />
77
60
  <FontLoader downloadPath={data.downloadsPath} parameters={data.parameters} />
78
- </div >
79
- }
61
+ </div>
62
+ )
80
63
  }
package/src/components/FormattedHtmlText/index.tsx CHANGED
@@ -43,10 +43,11 @@ export const FormattedText: React.FunctionComponent<Props> = (props) => {
43
43
  const alignment = format?.alignment
44
44
  const fontColor = format?.fontColor
45
45
  const fontSize = format?.fontSize
46
- const containerStyle = Object.assign({
46
+ const containerStyle = {
47
47
  display: 'inline-flex',
48
- justifyContent: getHorizontalAlignment(alignment?.horizontal || defaults.alignment)
49
- }, props.style)
48
+ justifyContent: getHorizontalAlignment(alignment?.horizontal || defaults.alignment),
49
+ ...props.style
50
+ }
50
51
 
51
52
  return <div style={containerStyle}>
52
53
  <div style={{
package/src/components/FormattedText/index.tsx CHANGED
@@ -3,11 +3,11 @@ import React from 'react'
3
3
  const alignments = {
4
4
  center: 'center',
5
5
  left: 'flex-start',
6
- right: 'flex-end'
6
+ right: 'flex-end',
7
7
  }
8
8
 
9
9
  type Aligment = {
10
- horizontal: keyof typeof alignments,
10
+ horizontal: keyof typeof alignments
11
11
  vertical: keyof typeof alignments
12
12
  }
13
13
 
@@ -20,22 +20,24 @@ interface Props {
20
20
  unit?: string
21
21
  paddingBottom?: string
22
22
  paddingTop?: string
23
- multiline?: boolean
24
23
  }
25
24
 
26
- export const FormattedText: React.FunctionComponent<Props> = ({ text, format, maxChar, lineHeight, style, unit, paddingBottom, paddingTop, multiline }) => {
25
+ export const FormattedText: React.FunctionComponent<Props> = (props) => {
26
+ const { text, format, maxChar, lineHeight, style, unit, paddingBottom, paddingTop } = props
27
+
27
28
  const trimText = (text: any, maxChar: any) => {
28
29
  const isValid = maxChar && maxChar >= 3
29
- if (isValid && (text && text.length > maxChar) || false) {
30
+ if (isValid && text && text.length > maxChar) {
30
31
  const returnText = text.substring(0, maxChar - 3)
32
+ returnText.substr(-1, 3)
31
33
  return `${returnText.trim()}...`
32
34
  }
33
35
  return text
34
36
  }
35
37
 
36
38
  const checkNested = (obj: any, path: string): boolean => {
37
- return path.split('.').every(segment => {
38
- if (obj && obj.hasOwnProperty(segment)) {
39
+ return path.split('.').every((segment) => {
40
+ if (obj?.hasOwnProperty(segment)) {
39
41
  obj = obj[segment]
40
42
  return true
41
43
  }
@@ -52,24 +54,27 @@ export const FormattedText: React.FunctionComponent<Props> = ({ text, format, ma
52
54
  }
53
55
 
54
56
  const renderText = maxChar ? trimText(text, maxChar) : text
55
- const containerStyle = Object.assign({
57
+ const containerStyle = {
56
58
  display: 'inline-flex',
57
- justifyContent: getHorizontalAlignment(format.alignment)
58
- }, style)
59
+ justifyContent: getHorizontalAlignment(format.alignment),
60
+ ...style,
61
+ }
59
62
 
60
63
  return (
61
64
  <div style={containerStyle}>
62
- <span style={{
63
- color: format?.fontColor || '#ffffff',
64
- fontFamily: checkNested(format, 'font.filename') ? `'${format?.font?.filename?.replace('.', '-')}'` : '',
65
- fontSize: `${format?.fontSize || 72}${unit}`,
66
- textAlign: checkNested(format, 'alignment.horizontal') ? format?.alignment?.horizontal : 'left',
67
- lineHeight: lineHeight,
68
- paddingBottom: paddingBottom,
69
- paddingTop: paddingTop,
70
- display: 'inline-flex',
71
- whiteSpace: multiline ? 'pre-wrap' : 'nowrap'
72
- }}>{renderText}</span>
65
+ <span
66
+ style={{
67
+ color: format?.fontColor,
68
+ fontFamily: checkNested(format, 'font.filename') ? `'${format?.font?.filename?.replace('.', '-')}'` : '',
69
+ fontSize: `${format?.fontSize}${unit}`,
70
+ textAlign: checkNested(format, 'alignment.horizontal') ? format?.alignment?.horizontal : 'left',
71
+ lineHeight: lineHeight,
72
+ paddingBottom: paddingBottom,
73
+ paddingTop: paddingTop,
74
+ display: 'inline-flex',
75
+ }}>
76
+ {renderText}
77
+ </span>
73
78
  </div>
74
79
  )
75
80
  }
@@ -78,5 +83,5 @@ FormattedText.defaultProps = {
78
83
  format: {},
79
84
  lineHeight: 1,
80
85
  unit: 'vh',
81
- maxChar: undefined
86
+ maxChar: undefined,
82
87
  }
package/src/components/GalleryItem/index.tsx CHANGED
@@ -35,7 +35,7 @@ const hexToRgbA = (hex: string, opacity?: number) => {
35
35
  c = hex.substring(1).split('')
36
36
  if (c.length === 3) c = [c[0], c[0], c[1], c[1], c[2], c[2]]
37
37
  c = '0x' + c.join('')
38
- return 'rgba(' + [(c >> 16) & 255, (c >> 8) & 255, c & 255].join(',') + ',' + (opacity || 1) + ')'
38
+ return 'rgba(' + [(c >> 16) & 255, (c >> 8) & 255, c & 255].join(',') + ',' + (opacity ?? 1) + ')'
39
39
  }
40
40
  throw new Error('Bad Hex')
41
41
  }
package/src/components/ImageContainer/index.tsx CHANGED
@@ -21,23 +21,25 @@ const imageModes = {
21
21
  export const ImageContainer: React.FunctionComponent<Props> = (props) => {
22
22
  const { src, style, parameters } = props
23
23
  const { imagePosition, imageMode, imageStyle, imageEnabled, imageSize } = parameters
24
- if (imageEnabled === false) return null
24
+ if (!imageEnabled) return null
25
25
 
26
26
  const getSize = (): string => {
27
27
  const { imageSize, imageCustomSize, template } = props.parameters
28
28
  if (template === 'gallery') return '100%'
29
- if (imageSize === 'custom') {
30
- return `${imageCustomSize}%`
31
- } else {
32
- return imageSize === 'large' ? '100%' : imageSize === 'medium' ? '70%' : '50%'
29
+
30
+ switch (imageSize) {
31
+ case 'custom': return `${imageCustomSize}%`
32
+ case 'large': return '100%'
33
+ case 'medium': return '70%'
34
+ default: return '50%'
33
35
  }
34
36
  }
35
37
 
36
38
  const getImagePadding = (): string => {
37
39
  const { template, imageSeparation, imagePosition } = props.parameters
38
40
  if (template === 'gallery') return ''
39
- const padding = `${(imageSeparation !== undefined && imageSeparation) || 10}px`
40
- const imagePos = imagePosition || 'left'
41
+ const padding = `${imageSeparation ?? 10}px`
42
+ const imagePos = imagePosition ?? 'left'
41
43
  const getPadding = (position: string) => imagePos === position ? padding : '0px'
42
44
  return `${getPadding('bottom')} ${getPadding('left')} ${getPadding('top')} ${getPadding('right')}`
43
45
  }
@@ -47,7 +49,7 @@ export const ImageContainer: React.FunctionComponent<Props> = (props) => {
47
49
  const size: string = getSize()
48
50
 
49
51
  const shouldBeSquare = imageStyle !== undefined && imageStyle !== 'normal'
50
- const preserveAspectRatio = imageMode && imageModes[imageMode] || imageModes.contain
52
+ const preserveAspectRatio = imageMode && imageModes?.[imageMode] || imageModes?.contain
51
53
  const radius = (imageStyle === 'rounded' || imageStyle === 'circle') ? imageRadius[imageStyle] : '0'
52
54
 
53
55
  const commonImageProps = {
package/src/index.html CHANGED
@@ -1,11 +1,14 @@
1
1
  <!DOCTYPE html>
2
- <html style="position: absolute; height:100%; width: 100%; overflow: hidden;">
3
- <head>
4
- <title></title>
5
- <meta charset="utf-8">
6
- </head>
7
- <body style="margin:0; overflow: hidden;">
8
- <div id="root" style="position: absolute; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden;">
9
- </div>
10
- </body>
11
- </html>
2
+ <html
3
+ lang="en"
4
+ style="position: absolute; height: 100%; width: 100%; overflow: hidden">
5
+ <head>
6
+ <title></title>
7
+ <meta charset="utf-8" />
8
+ </head>
9
+ <body style="margin: 0; overflow: hidden">
10
+ <div
11
+ id="root"
12
+ style="position: absolute; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden"></div>
13
+ </body>
14
+ </html>
package/src/main.ts CHANGED
@@ -24,5 +24,5 @@ ipcRenderer.on('finish', (_event: any) => {
24
24
  })
25
25
 
26
26
  function render(data: VixonicData) {
27
- ReactDOM.render(React.createElement<Props>(App, { data, start }), document.getElementById('root'))
27
+ ReactDOM.render(React.createElement<Props>(App, { data }), document.getElementById('root'))
28
28
  }
package/src/test/downloads/custom-template/main.html CHANGED
@@ -1,62 +1,73 @@
1
- <!doctype html>
1
+ <!DOCTYPE html>
2
2
  <html lang="en">
3
- <head>
4
- <style type="text/css">
5
- @font-face {
6
- font-family: 'MainFont';
7
- src: url('./assets/main-font.ttf'); /* IE9 Compat Modes */
8
-
9
- }
10
- .news-item, .background {
11
- position: absolute;
12
- width: 800px;
13
- height: 500px;
14
- background-image: url('./assets/background.png');
15
- }
16
- .news-item__title {
17
- display: flex;
18
- position: absolute;
19
- top: 35px;
20
- left: 35px;
21
- width: 725px;
22
- height: 52px;
23
- align-items: center;
24
- font-size: 30px;
25
- font-family: 'MainFont';
26
- color: #112244;
27
- }
28
- .news-item__description {
29
- display: flex;
30
- position: absolute;
31
- top: 155px;
32
- left: 390px;
33
- width: 370px;
34
- height: 292px;
35
- font-size: 25px;
36
- font-family: 'MainFont';
37
- color: #224466;
38
- }
39
- .news-item__image, .news-item__image-loading, .news-item__image-error {
40
- border-radius: 10px;
41
- position: absolute;
42
- left: 32px;
43
- top: 135px;
44
- width: 335px;
45
- height: 335px;
46
- object-fit: cover;
47
- }
48
- </style>
49
- </head>
50
- <body>
51
- <div class="background"></div>
52
- <div class="news-item">
53
- <div class="news-item__title">Título</div>
54
- <div class="news-item__description">Descripción</div>
55
- <div>
56
- <img class="news-item__image">
57
- <img class="news-item__image-error" src="./assets/image-error.png">
58
- <img class="news-item__image-loading" src="./assets/image-loading.gif">
59
- </div>
60
- </div>
61
- </body>
62
- </html>
3
+ <head>
4
+ <title></title>
5
+ <style type="text/css">
6
+ @font-face {
7
+ font-family: 'MainFont', sans-serif;
8
+ src: url('./assets/main-font.ttf'); /* IE9 Compat Modes */
9
+ }
10
+ .news-item,
11
+ .background {
12
+ position: absolute;
13
+ width: 800px;
14
+ height: 500px;
15
+ background-image: url('./assets/background.png');
16
+ }
17
+ .news-item__title {
18
+ display: flex;
19
+ position: absolute;
20
+ top: 35px;
21
+ left: 35px;
22
+ width: 725px;
23
+ height: 52px;
24
+ align-items: center;
25
+ font-size: 30px;
26
+ font-family: 'MainFont', sans-serif;
27
+ color: #112244;
28
+ }
29
+ .news-item__description {
30
+ display: flex;
31
+ position: absolute;
32
+ top: 155px;
33
+ left: 390px;
34
+ width: 370px;
35
+ height: 292px;
36
+ font-size: 25px;
37
+ font-family: 'MainFont', sans-serif;
38
+ color: #224466;
39
+ }
40
+ .news-item__image,
41
+ .news-item__image-loading,
42
+ .news-item__image-error {
43
+ border-radius: 10px;
44
+ position: absolute;
45
+ left: 32px;
46
+ top: 135px;
47
+ width: 335px;
48
+ height: 335px;
49
+ object-fit: cover;
50
+ }
51
+ </style>
52
+ </head>
53
+ <body>
54
+ <div class="background"></div>
55
+ <div class="news-item">
56
+ <div class="news-item__title">Título</div>
57
+ <div class="news-item__description">Descripción</div>
58
+ <div>
59
+ <img
60
+ class="news-item__image"
61
+ alt="title" />
62
+ <img
63
+ class="news-item__image-error"
64
+ src="./assets/image-error.png"
65
+ alt="error" />
66
+ <img
67
+ class="news-item__image-loading"
68
+ src="./assets/image-loading.gif"
69
+ alt="loading" />
70
+ </div>
71
+ </div>
72
+ </body>
73
+ </html>