From 4b22bda09c5656cea9ac91cc8ea61bca5a3413ba Mon Sep 17 00:00:00 2001 From: "Timothy Z." Date: Wed, 18 Dec 2024 17:07:19 +0200 Subject: [PATCH 1/4] feat: addon placeholder --- .../AddonPlaceholder/AddonPlaceholder.less | 122 ++++++++++++++++++ .../AddonPlaceholder/AddonPlaceholder.tsx | 33 +++++ src/routes/Addons/AddonPlaceholder/index.ts | 7 + src/routes/Addons/Addons.js | 17 ++- 4 files changed, 173 insertions(+), 6 deletions(-) create mode 100644 src/routes/Addons/AddonPlaceholder/AddonPlaceholder.less create mode 100644 src/routes/Addons/AddonPlaceholder/AddonPlaceholder.tsx create mode 100644 src/routes/Addons/AddonPlaceholder/index.ts diff --git a/src/routes/Addons/AddonPlaceholder/AddonPlaceholder.less b/src/routes/Addons/AddonPlaceholder/AddonPlaceholder.less new file mode 100644 index 000000000..1dac49285 --- /dev/null +++ b/src/routes/Addons/AddonPlaceholder/AddonPlaceholder.less @@ -0,0 +1,122 @@ +/* Copyright (C) 2017-2024 Smart code 203358507 */ + +@import (reference) '~stremio/common/screen-sizes.less'; + +@placeholder-opacity: 0.1; +@padding: 1.5rem; +@small-padding: 1rem; +@logo-size: 8rem; + +.placeholder-pill(@width: 100%, @height: 1.3rem) { + background-color: var(--primary-foreground-color); + border-radius: var(--border-radius); + opacity: @placeholder-opacity; + width: @width; + height: @height; +} + +.placeholder-logo(@size: @logo-size) { + width: @size; + height: @size; + border-radius: 50%; + background-color: var(--primary-foreground-color); + opacity: @placeholder-opacity; +} + +.addon-container { + display: flex; + flex-direction: row; + align-items: flex-start; + padding: @padding; + border-radius: var(--border-radius); + background-color: var(--overlay-color); + cursor: inherit; + + .content { + display: flex; + flex: 1; + + .logo-container { + flex: none; + .placeholder-logo(@logo-size); + } + + .info-container { + display: flex; + flex-direction: column; + gap: 0.5rem; + padding: @small-padding; + flex: 1; + + .placeholder-pill:nth-child(1) { + .placeholder-pill(40%); + } + .placeholder-pill:nth-child(2) { + .placeholder-pill(60%); + } + .placeholder-pill:nth-child(3) { + .placeholder-pill(80%); + } + } + } + + .buttons-container { + flex: none; + display: flex; + flex-direction: column; + gap: @small-padding; + width: 30%; + max-width: 18rem; + + .action-buttons-container { + display: flex; + flex-direction: row; + gap: @small-padding; + + .placeholder-pill:nth-child(1), .placeholder-pill:nth-child(2) { + .placeholder-pill(50%, 3.5rem); + } + } + + .placeholder-pill:last-child { + .placeholder-pill(100%, 3.5rem); + } + } +} + +@media screen and (max-width: @minimum) { + .addon-container { + flex-direction: column; + align-items: stretch; + padding: 1rem; + width: 100%; + gap: 1rem; + + .content { + flex-direction: row; + width: 100%; + + .logo-container { + .placeholder-logo(6rem); + margin: 0 auto; + } + + .info-container { + padding: 0.5rem; + width: 100%; + } + } + + .buttons-container { + flex-direction: column; + align-items: stretch; + width: 100%; + gap: 0.5rem; + max-width: none; + + .action-buttons-container { + display: none; + } + } + } +} diff --git a/src/routes/Addons/AddonPlaceholder/AddonPlaceholder.tsx b/src/routes/Addons/AddonPlaceholder/AddonPlaceholder.tsx new file mode 100644 index 000000000..d51f1336f --- /dev/null +++ b/src/routes/Addons/AddonPlaceholder/AddonPlaceholder.tsx @@ -0,0 +1,33 @@ +// Copyright (C) 2017-2024 Smart code 203358507 + +import React from 'react'; +import classnames from 'classnames'; +import styles from './AddonPlaceholder.less'; + +type Props = { + className?: string; +}; + +export const AddonPlaceholder = ({ className }: Props) => { + return ( +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ); +}; diff --git a/src/routes/Addons/AddonPlaceholder/index.ts b/src/routes/Addons/AddonPlaceholder/index.ts new file mode 100644 index 000000000..065f99010 --- /dev/null +++ b/src/routes/Addons/AddonPlaceholder/index.ts @@ -0,0 +1,7 @@ +// Copyright (C) 2017-2024 Smart code 203358507 + +import { AddonPlaceholder } from './AddonPlaceholder'; + +export { + AddonPlaceholder +}; diff --git a/src/routes/Addons/Addons.js b/src/routes/Addons/Addons.js index 0de34ad4a..1c410b819 100644 --- a/src/routes/Addons/Addons.js +++ b/src/routes/Addons/Addons.js @@ -12,6 +12,7 @@ const useRemoteAddons = require('./useRemoteAddons'); const useAddonDetailsTransportUrl = require('./useAddonDetailsTransportUrl'); const useSelectableInputs = require('./useSelectableInputs'); const styles = require('./styles'); +const { AddonPlaceholder } = require('./AddonPlaceholder'); const Addons = ({ urlParams, queryParams }) => { const { t } = useTranslation(); @@ -94,7 +95,7 @@ const Addons = ({ urlParams, queryParams }) => {
{
: remoteAddons.catalog.content.type === 'Loading' ? -
- Loading! +
+ {Array.from({ length: 6 }).map((_, index) => ( + + ))}
:
@@ -179,8 +182,10 @@ const Addons = ({ urlParams, queryParams }) => { }
: -
- No select +
+ {Array.from({ length: 6 }).map((_, index) => ( + + ))}
}
@@ -205,7 +210,7 @@ const Addons = ({ urlParams, queryParams }) => { title={t('ADD_ADDON')} buttons={addAddonModalButtons} onCloseRequest={closeAddAddonModal}> -
{ t('ADD_ADDON_DESCRIPTION') }
+
{t('ADD_ADDON_DESCRIPTION')}
Date: Wed, 18 Dec 2024 17:15:43 +0200 Subject: [PATCH 2/4] fix: copyright comment --- src/routes/Addons/AddonPlaceholder/AddonPlaceholder.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/routes/Addons/AddonPlaceholder/AddonPlaceholder.less b/src/routes/Addons/AddonPlaceholder/AddonPlaceholder.less index 1dac49285..be129c65f 100644 --- a/src/routes/Addons/AddonPlaceholder/AddonPlaceholder.less +++ b/src/routes/Addons/AddonPlaceholder/AddonPlaceholder.less @@ -1,4 +1,4 @@ -/* Copyright (C) 2017-2024 Smart code 203358507 */ +// Copyright (C) 2017-2024 Smart code 203358507 @import (reference) '~stremio/common/screen-sizes.less'; From f9fb161292b444ac7f87f31f57e489c125a9d973 Mon Sep 17 00:00:00 2001 From: "Timothy Z." Date: Wed, 18 Dec 2024 17:34:19 +0200 Subject: [PATCH 3/4] refactor: align mobile view size with real addon --- .../AddonPlaceholder/AddonPlaceholder.less | 28 ++++++++++++++++--- .../AddonPlaceholder/AddonPlaceholder.tsx | 1 + 2 files changed, 25 insertions(+), 4 deletions(-) diff --git a/src/routes/Addons/AddonPlaceholder/AddonPlaceholder.less b/src/routes/Addons/AddonPlaceholder/AddonPlaceholder.less index be129c65f..8cbc1f0f0 100644 --- a/src/routes/Addons/AddonPlaceholder/AddonPlaceholder.less +++ b/src/routes/Addons/AddonPlaceholder/AddonPlaceholder.less @@ -51,12 +51,18 @@ .placeholder-pill:nth-child(1) { .placeholder-pill(40%); } + .placeholder-pill:nth-child(2) { .placeholder-pill(60%); } + .placeholder-pill:nth-child(3) { .placeholder-pill(80%); } + + .placeholder-pill:nth-child(4) { + display: none; + } } } @@ -88,22 +94,36 @@ .addon-container { flex-direction: column; align-items: stretch; - padding: 1rem; width: 100%; - gap: 1rem; .content { flex-direction: row; width: 100%; .logo-container { - .placeholder-logo(6rem); margin: 0 auto; } .info-container { - padding: 0.5rem; + padding: 1rem; width: 100%; + + .placeholder-pill:nth-child(1) { + .placeholder-pill(60%); + } + + .placeholder-pill:nth-child(2) { + .placeholder-pill(40%); + } + + .placeholder-pill:nth-child(3) { + .placeholder-pill(80%, 0.8rem); + } + + .placeholder-pill:nth-child(4) { + display: block; + .placeholder-pill(20%, 0.8rem); + } } } diff --git a/src/routes/Addons/AddonPlaceholder/AddonPlaceholder.tsx b/src/routes/Addons/AddonPlaceholder/AddonPlaceholder.tsx index d51f1336f..c6927d275 100644 --- a/src/routes/Addons/AddonPlaceholder/AddonPlaceholder.tsx +++ b/src/routes/Addons/AddonPlaceholder/AddonPlaceholder.tsx @@ -19,6 +19,7 @@ export const AddonPlaceholder = ({ className }: Props) => {
+
From 8a7e07f833fd40822e1326084896aafcc038bb18 Mon Sep 17 00:00:00 2001 From: "Timothy Z." Date: Wed, 18 Dec 2024 17:36:17 +0200 Subject: [PATCH 4/4] refactor: add back the gap to the placeholder --- src/routes/Addons/AddonPlaceholder/AddonPlaceholder.less | 1 + 1 file changed, 1 insertion(+) diff --git a/src/routes/Addons/AddonPlaceholder/AddonPlaceholder.less b/src/routes/Addons/AddonPlaceholder/AddonPlaceholder.less index 8cbc1f0f0..34271d391 100644 --- a/src/routes/Addons/AddonPlaceholder/AddonPlaceholder.less +++ b/src/routes/Addons/AddonPlaceholder/AddonPlaceholder.less @@ -95,6 +95,7 @@ flex-direction: column; align-items: stretch; width: 100%; + gap: 1rem; .content { flex-direction: row;