@edu-tosel/design 1.0.364 → 1.0.366

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 (7) hide show
  1. package/layout/template/home/NewsPaper.js +2 -1
  2. package/layout/template/home/Service.js +1 -0
  3. package/layout/template/home/Session.d.ts +3 -1
  4. package/layout/template/home/Session.js +28 -17
  5. package/layout/template/home/layout/Carousel.js +2 -2
  6. package/package.json +1 -1
  7. package/version.txt +1 -1
package/layout/template/home/NewsPaper.js CHANGED
@@ -57,6 +57,7 @@ export default function NewsPaper({ banners, browse, option, }) {
57
57
  const deckTitlePositioning = {
58
58
  displays: "flex flex-row ml:justify-center ml:items-center",
59
59
  sizes: "w-full",
60
+ spacings: "mb-6",
60
61
  };
61
62
  const deckTitle = {
62
63
  displays: "flex items-center gap-x-4 xl:pl-5 md:pl-[76px] pl-5",
@@ -114,7 +115,7 @@ function Banner({ onClick, image, option }) {
114
115
  //adjust the card size
115
116
  const card = {
116
117
  graphics: "shadow-main",
117
- sizes: "w-65 h-40 xxxs:w-76 xxxs:h-47.5 md:w-120 md:h-75 rounded-xl md:rounded-2xl",
118
+ sizes: "w-52 h-28 xxxs:w-60 xxxs:h-36 md:w-88 md:h-56 rounded-xl md:rounded-2xl",
118
119
  backgrounds: background,
119
120
  hover: "hover:shadow-main-hover hover:scale-[1.03]",
120
121
  position: "xl:translate-x-[calc(50vw-665px)] md:translate-x-[56px]",
package/layout/template/home/Service.js CHANGED
@@ -56,6 +56,7 @@ export default function Service({ banners }) {
56
56
  const deckTitlePositioning = {
57
57
  displays: "flex flex-row ml:justify-center ml:itmes-center",
58
58
  sizes: "w-full",
59
+ spacings: "mb-6",
59
60
  };
60
61
  const deckTitle = {
61
62
  displays: "xl:pl-5 md:pl-[76px] pl-5",
package/layout/template/home/Session.d.ts CHANGED
@@ -3,7 +3,9 @@ export default function Session({ sessions, }: {
3
3
  label: string;
4
4
  title: string;
5
5
  content: string;
6
- background: string;
6
+ background?: string;
7
+ backgroundImage?: string;
8
+ textColor?: string;
7
9
  onClick: () => void;
8
10
  }[];
9
11
  }): import("react/jsx-runtime").JSX.Element;
package/layout/template/home/Session.js CHANGED
@@ -4,7 +4,7 @@ export default function Session({ sessions, }) {
4
4
  const container = {
5
5
  displays: "flex flex-col md:flex-row justify-center items-stretch",
6
6
  sizes: "w-full max-w-7xl mx-auto",
7
- spacings: "px-5 md:px-0 mt-4 md:mt-8 mb-6 md:mb-8 gap-4 md:gap-6",
7
+ spacings: "px-5 md:px-0 mt-4 md:mt-8 mb-6 md:mb-8 gap-2 md:gap-4",
8
8
  };
9
9
  const card = {
10
10
  displays: "flex flex-col relative group cursor-pointer",
@@ -19,20 +19,31 @@ export default function Session({ sessions, }) {
19
19
  sizes: "w-full",
20
20
  spacings: "mb-4",
21
21
  };
22
- const labelStyle = {
23
- fonts: "text-base md:text-lg font-bold text-black",
24
- };
25
- const iconStyle = {
26
- displays: "flex justify-center items-center",
27
- sizes: "w-6 h-6",
28
- fonts: "text-black",
29
- };
30
- const titleStyle = {
31
- fonts: "text-xl md:text-2xl lg:text-3xl font-bold text-black",
32
- spacings: "mb-3",
33
- };
34
- const contentStyle = {
35
- fonts: "text-sm md:text-base text-black leading-relaxed",
36
- };
37
- return (_jsx("div", { className: cn(container), children: sessions.map((session, index) => (_jsxs("div", { onClick: session.onClick, className: cn(card, session.background), children: [_jsxs("div", { className: cn(header), children: [_jsx("div", { className: cn(labelStyle), children: session.label }), _jsx("div", { className: cn(iconStyle), children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "w-5 h-5", children: _jsx("path", { d: "M7 17L17 7M7 7h10v10" }) }) })] }), _jsx("div", { className: cn(titleStyle), children: session.title }), _jsx("div", { className: cn(contentStyle), children: session.content })] }, index))) }));
22
+ return (_jsx("div", { className: cn(container), children: sessions.map((session, index) => {
23
+ const textColor = session.textColor || "text-black";
24
+ const labelStyle = {
25
+ fonts: `text-base md:text-lg font-bold ${textColor}`,
26
+ };
27
+ const iconStyle = {
28
+ displays: "flex justify-center items-center",
29
+ sizes: "w-6 h-6",
30
+ fonts: textColor,
31
+ };
32
+ const titleStyle = {
33
+ fonts: `text-xl md:text-2xl lg:text-3xl font-bold ${textColor}`,
34
+ spacings: "mb-3",
35
+ };
36
+ const contentStyle = {
37
+ fonts: `text-sm md:text-base ${textColor} leading-relaxed`,
38
+ };
39
+ const cardStyle = session.backgroundImage
40
+ ? {
41
+ backgroundImage: `url(${session.backgroundImage})`,
42
+ backgroundSize: 'cover',
43
+ backgroundPosition: 'center',
44
+ backgroundRepeat: 'no-repeat',
45
+ }
46
+ : {};
47
+ return (_jsxs("div", { onClick: session.onClick, className: cn(card, session.background || ""), style: cardStyle, children: [_jsxs("div", { className: cn(header), children: [_jsx("div", { className: cn(labelStyle), children: session.label }), _jsx("div", { className: cn(iconStyle), children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "w-5 h-5", children: _jsx("path", { d: "M7 17L17 7M7 7h10v10" }) }) })] }), _jsx("div", { className: cn(titleStyle), children: session.title }), _jsx("div", { className: cn(contentStyle), children: session.content })] }, index));
48
+ }) }));
38
49
  }
package/layout/template/home/layout/Carousel.js CHANGED
@@ -75,7 +75,7 @@ export default function Carousel({ contents, option, }) {
75
75
  };
76
76
  const container = {
77
77
  displays: "relative flex justify-center items-center",
78
- sizes: "w-full h-fit md:h-80 ml:h-100",
78
+ sizes: "w-full h-fit md:h-60 ml:h-80",
79
79
  textstyle: "break-keep",
80
80
  background: contents[index].option?.background,
81
81
  animations: "duration-300",
@@ -111,7 +111,7 @@ export default function Carousel({ contents, option, }) {
111
111
  };
112
112
  const buttonBoxPosition = {
113
113
  display: "absolute flex justify-center items-center md:justify-start",
114
- sizes: "w-full h-fit left-0 bottom-0 z-10",
114
+ sizes: "w-full h-fit left-0 bottom-[-30px] z-10",
115
115
  spacings: "ml-0 md:ml-[calc(70px)] xm:ml-7.5",
116
116
  };
117
117
  const buttonBox = {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@edu-tosel/design",
3
- "version": "1.0.364",
3
+ "version": "1.0.366",
4
4
  "description": "UI components for International TOSEL Committee",
5
5
  "keywords": [
6
6
  "jsx",
package/version.txt CHANGED
@@ -1 +1 @@
1
- 1.0.364
1
+ 1.0.366