@chainplatform/layout 0.2.0 → 0.2.3

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 -118
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@chainplatform/layout",
3
- "version": "0.2.0",
3
+ "version": "0.2.3",
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 '@chainplatform/layout';
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,123 +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));
89
- }
90
- // Menu
91
- menuViewWidth = layoutWidth - sideBarWidth - 2 * viewPadding - menuSpace;
92
- 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;
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);
106
59
  }
107
- if (layoutWidth > sdkStyles.split_desktop) {
108
- numberChart = 4;
60
+ if (layoutWidth >= sdkStyles.wide_split_desktop) {
61
+ courseTotalItem = 5;
62
+ courseSpace = setSize(75) + setSize(15);
109
63
  }
110
- const padding = (numberChart + 1) * setSize(15);
64
+ bannerViewWidth = layoutWidth - (2 * (bannerOnScreen + 1) * basePadding);
111
65
 
112
- let packageWidth = (layoutWidth - padding - sideBarWidth) / numberChart;
113
- if (packageWidth < setSize(280)) {
114
- packageWidth = setSize(280);
115
- }
116
- if (packageWidth > setSize(375)) {
117
- packageWidth = setSize(375);
118
- }
66
+ const viewWidth = bannerViewWidth / bannerOnScreen;
67
+ const viewHeight = setSize(195) * (viewWidth / setSize(345));
119
68
 
120
- let numberwebinarChart = 1;
121
- let webinarPadding = setSize(0);
122
- if (layoutWidth - sideBarWidth - 2 * viewPadding >= 500) {
123
- numberwebinarChart = 2;
124
- webinarPadding = setSize(15);
125
- }
126
- if (layoutWidth >= sdkStyles.split_desktop) {
127
- numberwebinarChart = 3;
128
- webinarPadding = setSize(15);
129
- }
69
+ // Menu
70
+ menuViewWidth = layoutWidth - menuSpace;
71
+ const menuWidth = menuViewWidth / menuTotalItem;
130
72
 
131
- let newsItemViewWidth = layoutWidth - sideBarWidth - 2 * viewPadding - newsPadding;
73
+ let packageWidth = setSize(280);
74
+
75
+ let newsItemViewWidth = layoutWidth - (2 * (newsItem + 1) * basePadding);
132
76
  const newsItemWidth = newsItemViewWidth / newsItem;
133
77
 
134
- let courseItemViewWidth = layoutWidth - sideBarWidth - 2 * viewPadding - coursePadding;
78
+ let courseItemViewWidth = layoutWidth - (2 * (courseItem + 1) * basePadding);
135
79
  const courseItemWidth = courseItemViewWidth / courseItem;
136
80
 
137
- let webinarViewWidth = layoutWidth - sideBarWidth - 2 * viewPadding - (numberwebinarChart - 1) * webinarPadding;
138
- const webinarWidth = webinarViewWidth / numberwebinarChart;
81
+ let webinarViewWidth = layoutWidth - (2 * (webinarItem + 1) * basePadding);
82
+ const webinarItemWidth = webinarViewWidth / webinarItem;
139
83
 
140
- const layout = layoutWidth - sideBarWidth - (sideBarWidth > 0 ? 2 : 2) * viewPadding;
84
+ const layout = layoutWidth;
141
85
 
142
86
  let view = {};
143
- view.courseItemWidth = courseItemWidth;
144
- view.courseItem = courseItem;
145
- view.coursePadding = coursePadding;
87
+
88
+ view.basePadding = basePadding;
89
+
146
90
  view.newsItemWidth = newsItemWidth;
147
91
  view.newsItem = newsItem;
148
- view.newsPadding = newsPadding;
149
- view.webinarWidth = webinarWidth;
150
- view.webinarPadding = webinarPadding;
151
- view.numberWebinar = numberwebinarChart;
152
- view.viewPadding = viewPadding;
153
- 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;
154
100
  view.layout = layout;
101
+
155
102
  view.bannerOnScreen = bannerOnScreen;
156
- view.imageMenuSize = imageMenuSize;
157
- view.fontMenuSize = fontMenuSize;
158
103
  view.viewWidth = viewWidth;
159
104
  view.viewHeight = viewHeight;
105
+
106
+ view.bannerItem = bannerOnScreen;
107
+ view.bannerWidth = viewWidth;
108
+ view.bannerHeight = viewHeight;
109
+
110
+ view.imageMenuSize = imageMenuSize;
160
111
  view.menuWidth = menuWidth;
161
- view.courseWidth = courseWidth;
162
- view.newsWidth = newsWidth;
163
- view.splitPadding = splitPadding;
164
- view.packageWidth = packageWidth;
165
- view.packagePadding = padding;
166
- view.drawerType = drawerType;
112
+
113
+ view.webinarItemWidth = webinarItemWidth;
114
+ view.webinarItem = webinarItem;
115
+ view.webinarPadding = basePadding;
116
+
117
+ view.viewPadding = basePadding;
118
+
167
119
  return view;
168
120
  }