@chainplatform/layout 0.2.1 → 0.2.4

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 (2) hide show
  1. package/package.json +1 -1
  2. package/src/Landing.js +70 -111
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@chainplatform/layout",
3
- "version": "0.2.1",
3
+ "version": "0.2.4",
4
4
  "description": "@chainplatform/layout",
5
5
  "main": "index.js",
6
6
  "devDependencies": {
package/src/Landing.js CHANGED
@@ -1,17 +1,11 @@
1
- import sdkStyles, { setSize } from "./styles";
1
+ import sdkStyles, { setSize } from './styles';
2
2
 
3
3
  export function getScreenLanding(layoutWidth, isDesktop) {
4
- const viewPadding = setSize(0);
5
4
  let menuViewWidth = setSize(0);
6
5
  let bannerViewWidth = setSize(0);
7
- let splitPadding = setSize(0);
8
- let sideBarWidth = setSize(0);
9
- let courseViewWidth = setSize(0);
10
- let newsViewWidth = setSize(0);
11
- let bannerOnScreen = 1;
6
+
12
7
  //Menu
13
8
  let imageMenuSize = setSize(45);
14
- let fontMenuSize = setSize(9.5);
15
9
  let menuTotalItem = 5;
16
10
  let menuSpace = 4 * setSize(5);
17
11
  // Course
@@ -19,25 +13,30 @@ export function getScreenLanding(layoutWidth, isDesktop) {
19
13
  let newsTotalItem = 2;
20
14
  let courseSpace = 0;
21
15
  let newsSpace = 0;
22
- // News
16
+
17
+ const basePadding = setSize(15);
18
+ let bannerOnScreen = 1;
23
19
  let newsItem = 1;
24
- let newsPadding = 0;
25
- // New Course
26
20
  let courseItem = 1;
27
- let coursePadding = 0;
28
- if (isDesktop) {
29
- courseSpace = setSize(30) + setSize(15);
30
- newsSpace = setSize(30) + setSize(15);
31
- } else {
32
- courseSpace = setSize(15);
33
- newsSpace = setSize(15);
34
- }
21
+ let webinarItem = 1;
22
+
35
23
  let drawerType = "back";
36
24
  if (layoutWidth > sdkStyles.base_desktop) {
37
25
  drawerType = "permanent";
26
+ courseItem = 2;
27
+ newsItem = 2;
28
+ webinarItem = 2;
29
+ }
30
+ if (layoutWidth > sdkStyles.split_desktop) {
31
+ bannerOnScreen = 2;
32
+ courseItem = 3;
33
+ newsItem = 3;
34
+ webinarItem = 3;
35
+ }
36
+ if (layoutWidth > sdkStyles.wide_split_desktop) {
37
+ courseItem = 4;
38
38
  }
39
39
  if (isDesktop && layoutWidth > sdkStyles.base_desktop) {
40
- sideBarWidth = setSize(0);
41
40
  // Menu
42
41
  imageMenuSize = setSize(55);
43
42
  fontMenuSize = setSize(12);
@@ -46,116 +45,76 @@ export function getScreenLanding(layoutWidth, isDesktop) {
46
45
  newsTotalItem = 3;
47
46
  courseSpace = setSize(60);
48
47
  newsSpace = setSize(60);
49
- // News
50
- newsItem = 2;
51
- newsPadding = setSize(15);
52
- // New Course
53
- courseItem = 3;
54
- coursePadding = setSize(30);
55
48
  }
56
- let viewWidth = setSize(345);
57
- let viewHeight = setSize(195);
58
- if (isDesktop) {
59
- if (layoutWidth >= sdkStyles.split_desktop) {
60
- bannerOnScreen = 2;
61
- splitPadding = setSize(15);
62
- // Menu
63
- menuTotalItem = 10;
64
- menuSpace = 9 * setSize(5);
65
- fontMenuSize = setSize(13);
66
- // Course
67
- courseTotalItem = 4;
68
- newsTotalItem = 4;
69
- courseSpace = setSize(75);
70
- newsSpace = setSize(75);
71
- // News
72
- newsItem = 3;
73
- newsPadding = setSize(30);
74
- // New Course
75
- courseItem = 4;
76
- coursePadding = setSize(45);
77
- }
78
- if (layoutWidth >= sdkStyles.wide_split_desktop) {
79
- // Course
80
- courseTotalItem = 5;
81
- courseSpace = setSize(75) + setSize(15);
82
- //
83
- courseItem = 5;
84
- coursePadding = setSize(60);
85
- }
86
- bannerViewWidth = layoutWidth - sideBarWidth - 2 * viewPadding - splitPadding;
87
- viewWidth = bannerViewWidth / bannerOnScreen;
88
- viewHeight = setSize(195) * (viewWidth / setSize(345));
49
+ if (layoutWidth >= sdkStyles.split_desktop) {
50
+ // Menu
51
+ menuTotalItem = 10;
52
+ menuSpace = 9 * setSize(5);
53
+ fontMenuSize = setSize(13);
54
+ // Course
55
+ courseTotalItem = 4;
56
+ newsTotalItem = 4;
57
+ courseSpace = setSize(75);
58
+ newsSpace = setSize(75);
89
59
  }
60
+ if (layoutWidth >= sdkStyles.wide_split_desktop) {
61
+ courseTotalItem = 5;
62
+ courseSpace = setSize(75) + setSize(15);
63
+ }
64
+ bannerViewWidth = layoutWidth - (2 * (bannerOnScreen + 1) * basePadding);
65
+
66
+ const viewWidth = bannerViewWidth / bannerOnScreen;
67
+ const viewHeight = setSize(195) * (viewWidth / setSize(345));
68
+
90
69
  // Menu
91
- menuViewWidth = layoutWidth - sideBarWidth - 2 * viewPadding - menuSpace;
70
+ menuViewWidth = layoutWidth - menuSpace;
92
71
  const menuWidth = menuViewWidth / menuTotalItem;
93
- // Course
94
- courseViewWidth = layoutWidth - sideBarWidth - 2 * viewPadding - courseSpace;
95
- const courseWidth = courseViewWidth / courseTotalItem;
96
- // News
97
- newsViewWidth = layoutWidth - sideBarWidth - 2 * viewPadding - newsSpace;
98
- const newsWidth = newsViewWidth / newsTotalItem;
99
- //
100
- let numberChart = 1;
101
- if (layoutWidth > 460 && layoutWidth <= sdkStyles.base_desktop) {
102
- numberChart = 2;
103
- }
104
- if (layoutWidth > sdkStyles.base_desktop && layoutWidth <= sdkStyles.split_desktop) {
105
- numberChart = 3;
106
- }
107
- if (layoutWidth > sdkStyles.split_desktop) {
108
- numberChart = 4;
109
- }
110
- const padding = (numberChart + 1) * setSize(15);
111
- let packageWidth = setSize(280);
112
72
 
113
- let numberwebinarChart = 1;
114
- let webinarPadding = setSize(0);
115
- if (layoutWidth - sideBarWidth - 2 * viewPadding >= 500) {
116
- numberwebinarChart = 2;
117
- webinarPadding = setSize(15);
118
- }
119
- if (layoutWidth >= sdkStyles.split_desktop) {
120
- numberwebinarChart = 3;
121
- webinarPadding = setSize(15);
122
- }
73
+ let packageWidth = setSize(280);
123
74
 
124
- let newsItemViewWidth = layoutWidth - sideBarWidth - 2 * viewPadding - newsPadding;
75
+ let newsItemViewWidth = layoutWidth - (2 * (newsItem + 1) * basePadding);
125
76
  const newsItemWidth = newsItemViewWidth / newsItem;
126
77
 
127
- let courseItemViewWidth = layoutWidth - sideBarWidth - 2 * viewPadding - coursePadding;
78
+ let courseItemViewWidth = layoutWidth - (2 * (courseItem + 1) * basePadding);
128
79
  const courseItemWidth = courseItemViewWidth / courseItem;
129
80
 
130
- let webinarViewWidth = layoutWidth - sideBarWidth - 2 * viewPadding - (numberwebinarChart - 1) * webinarPadding;
131
- const webinarWidth = webinarViewWidth / numberwebinarChart;
81
+ let webinarViewWidth = layoutWidth - (2 * (webinarItem + 1) * basePadding);
82
+ const webinarItemWidth = webinarViewWidth / webinarItem;
132
83
 
133
- const layout = layoutWidth - sideBarWidth - (sideBarWidth > 0 ? 2 : 2) * viewPadding;
84
+ const layout = layoutWidth;
134
85
 
135
86
  let view = {};
136
- view.courseItemWidth = courseItemWidth;
137
- view.courseItem = courseItem;
138
- view.coursePadding = coursePadding;
87
+
88
+ view.basePadding = basePadding;
89
+
139
90
  view.newsItemWidth = newsItemWidth;
140
91
  view.newsItem = newsItem;
141
- view.newsPadding = newsPadding;
142
- view.webinarWidth = webinarWidth;
143
- view.webinarPadding = webinarPadding;
144
- view.numberWebinar = numberwebinarChart;
145
- view.viewPadding = viewPadding;
146
- view.sideBarWidth = sideBarWidth;
92
+ view.newsPadding = basePadding;
93
+
94
+ view.courseItemWidth = courseItemWidth;
95
+ view.courseItem = courseItem;
96
+ view.coursePadding = basePadding;
97
+
98
+ view.packageWidth = packageWidth;
99
+ view.drawerType = drawerType;
147
100
  view.layout = layout;
101
+
148
102
  view.bannerOnScreen = bannerOnScreen;
149
- view.imageMenuSize = imageMenuSize;
150
- view.fontMenuSize = fontMenuSize;
151
103
  view.viewWidth = viewWidth;
152
104
  view.viewHeight = viewHeight;
105
+
106
+ view.bannerItem = bannerOnScreen;
107
+ view.bannerWidth = viewWidth;
108
+ view.bannerHeight = viewHeight;
109
+
110
+ view.imageMenuSize = imageMenuSize;
153
111
  view.menuWidth = menuWidth;
154
- view.courseWidth = courseWidth;
155
- view.newsWidth = newsWidth;
156
- view.splitPadding = splitPadding;
157
- view.packageWidth = packageWidth;
158
- view.packagePadding = padding;
159
- view.drawerType = drawerType;
112
+
113
+ view.webinarItemWidth = webinarItemWidth;
114
+ view.webinarItem = webinarItem;
115
+ view.webinarPadding = basePadding;
116
+
117
+ view.viewPadding = basePadding;
118
+
160
119
  return view;
161
120
  }