diff options
author | niu tech <jerzyglowacki@gmail.com> | 2022-02-28 17:36:14 +0100 |
---|---|---|
committer | GitHub <noreply@github.com> | 2022-02-28 17:36:14 +0100 |
commit | 8a5d65608ef72bb89df273adfdf6b5f257f18f08 (patch) | |
tree | 97f3291e37d2c3fe004911b48db007f734171ec1 | |
parent | New Crowdin updates (#2427) (diff) | |
download | ferdium-app-8a5d65608ef72bb89df273adfdf6b5f257f18f08.tar.gz ferdium-app-8a5d65608ef72bb89df273adfdf6b5f257f18f08.tar.zst ferdium-app-8a5d65608ef72bb89df273adfdf6b5f257f18f08.zip |
Re-arrange split view panes when tab order changes (#2428)
-rw-r--r-- | src/components/services/content/ServiceView.js | 2 | ||||
-rw-r--r-- | src/styles/config.scss | 3 | ||||
-rw-r--r-- | src/styles/services.scss | 24 |
3 files changed, 9 insertions, 20 deletions
diff --git a/src/components/services/content/ServiceView.js b/src/components/services/content/ServiceView.js index 3ea36ae97..a9a013ced 100644 --- a/src/components/services/content/ServiceView.js +++ b/src/components/services/content/ServiceView.js | |||
@@ -96,7 +96,7 @@ class ServiceView extends Component { | |||
96 | } | 96 | } |
97 | 97 | ||
98 | return ( | 98 | return ( |
99 | <div className={webviewClasses} data-name={service.name}> | 99 | <div className={webviewClasses} data-name={service.name} style={{order: service.order}}> |
100 | {service.isActive && service.isEnabled && ( | 100 | {service.isActive && service.isEnabled && ( |
101 | <> | 101 | <> |
102 | {service.hasCrashed && ( | 102 | {service.hasCrashed && ( |
diff --git a/src/styles/config.scss b/src/styles/config.scss index 7aa2d674f..6316acbe3 100644 --- a/src/styles/config.scss +++ b/src/styles/config.scss | |||
@@ -1 +1,4 @@ | |||
1 | @import './colors.scss'; | 1 | @import './colors.scss'; |
2 | |||
3 | $split-columns-min: 1; | ||
4 | $split-columns-max: 5; | ||
diff --git a/src/styles/services.scss b/src/styles/services.scss index cedfcbdd1..d8f8b9327 100644 --- a/src/styles/services.scss +++ b/src/styles/services.scss | |||
@@ -25,28 +25,14 @@ | |||
25 | 25 | ||
26 | .services__webview { | 26 | .services__webview { |
27 | position: relative; | 27 | position: relative; |
28 | flex: 1 0 33.33%; | 28 | flex: 1 0 33.3333%; |
29 | } | 29 | } |
30 | } | 30 | } |
31 | 31 | ||
32 | &[data-columns="1"] .services .services__webview { | 32 | @for $i from $split-columns-min through $split-columns-max { |
33 | flex-basis: 100%; | 33 | &[data-columns="#{$i}"] .services .services__webview { |
34 | } | 34 | flex-basis: calc(100% / $i); |
35 | 35 | } | |
36 | &[data-columns="2"] .services .services__webview { | ||
37 | flex-basis: 50%; | ||
38 | } | ||
39 | |||
40 | &[data-columns="3"] .services .services__webview { | ||
41 | flex-basis: 33.33%; | ||
42 | } | ||
43 | |||
44 | &[data-columns="4"] .services .services__webview { | ||
45 | flex-basis: 25%; | ||
46 | } | ||
47 | |||
48 | &[data-columns="5"] .services .services__webview { | ||
49 | flex-basis: 20%; | ||
50 | } | 36 | } |
51 | } | 37 | } |
52 | 38 | ||