@chainplatform/layout 0.3.1 → 0.3.3

package/index.js

@@ -15,6 +15,7 @@ import sdkStyles, { setSize } from "./src/styles";
 import sdkColors from "./src/colors";
 import mobileCheck from "./src/DeviceDetect";
 import { getDoExamLayout } from "./src/Exam";
+import { getDefaultLayout } from "./src/DefaultLayout";
 
 export default sdkStyles;
 export {
@@ -31,6 +32,7 @@ export {
     getScreenWebinarSize,
     getScreenLanding,
     getDoExamLayout,
+    getDefaultLayout,
     sdkColors,
     setSize,
     mobileCheck

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@chainplatform/layout",
-  "version": "0.3.1",
+  "version": "0.3.3",
   "description": "@chainplatform/layout",
   "main": "index.js",
   "devDependencies": {

package/src/DefaultLayout.js

@@ -0,0 +1,23 @@
+import sdkStyles, { setSize } from "./styles";
+
+export function getDefaultLayout(layoutWidth, isDesktop) {
+    const basePadding = setSize(15);
+    let baseItem = 1;
+    if (layoutWidth > sdkStyles.base_mobile) {
+        baseItem = 2;
+    }
+    if (layoutWidth > sdkStyles.base_desktop) {
+        baseItem = 3;
+    }
+    if (layoutWidth > sdkStyles.split_desktop) {
+        baseItem = 4;
+    }
+    const baseWidth = layoutWidth - (2 * (baseItem + 1) * basePadding);
+    const viewWidth = baseWidth / baseItem;
+    let view = {};
+    view.basePadding = basePadding;
+    view.baseItem = baseItem;
+    view.baseWidth = viewWidth;
+    view.layout = layoutWidth;
+    return view;
+}

package/src/Exam.js

@@ -2,15 +2,19 @@ import sdkStyles, { setSize } from './styles';
 
 export function getDoExamLayout(layoutWidth) {
     let totalItem = 1;
-    let basePadding = setSize(15);
+    let subSize = 1;
+    let mainSize = 1;
+    const basePadding = setSize(15);
     let mainViewWidth = layoutWidth;
     let subViewWitdh = mainViewWidth;
     if (layoutWidth > sdkStyles.base_desktop) {
         totalItem = 2;
-        let width = layoutWidth - ((totalItem + 1)) * basePadding;
-        mainViewWidth = width * 0.7;
-        subViewWitdh = width - mainViewWidth;
+        subSize = 0.3;
+        mainSize = 0.7;
     }
+    const baseWidth = layoutWidth - (2 * (totalItem + 1) * basePadding);
+    mainViewWidth = baseWidth * mainSize;
+    subViewWitdh = baseWidth * subSize;
 
     return {
         totalItem,

package/src/styles.js

@@ -97,6 +97,7 @@ const sdkStyles = {
         borderColor: '#DADADA80'
     },
     auto: 'auto',
+    base_mobile: 375,
     base_desktop: 767,
     split_desktop: 991,
     wide_split_desktop: 1439,