From 41705413eabe5181d4e3dffc4dcc2a75f6324609 Mon Sep 17 00:00:00 2001 From: mithun-hegde-egov Date: Fri, 18 Oct 2024 13:35:25 +0530 Subject: [PATCH 1/2] landing screen css changes and config updates --- .../css/src/pages/employee/sandbox.scss | 235 +++++++++++++++--- .../employee/Landing/LandingComponent.js | 125 ++++++---- .../pages/employee/Landing/SandboxConfig.js | 59 +++-- .../employee/RoleLanding/RoleLandingConfig.js | 22 +- .../employee/RoleLanding/RoleLandingPage.js | 119 ++++----- 5 files changed, 402 insertions(+), 158 deletions(-) diff --git a/micro-ui/web/micro-ui-internals/packages/css/src/pages/employee/sandbox.scss b/micro-ui/web/micro-ui-internals/packages/css/src/pages/employee/sandbox.scss index 17f95649107..49ce70ee72e 100644 --- a/micro-ui/web/micro-ui-internals/packages/css/src/pages/employee/sandbox.scss +++ b/micro-ui/web/micro-ui-internals/packages/css/src/pages/employee/sandbox.scss @@ -803,63 +803,228 @@ digit-card-text.center { } -.role-main-container { - width: 100%; - max-width: 75rem; - margin: 0 auto; - padding: 1.25rem; +@media (max-width: 768px) { + .role-action-container { + flex-direction: column; + align-items: center; + } + + .role-card { + width: 100%; + margin-bottom: 0.625rem; + } } + +.faq-answer{ + .card-section-sub-text{ + margin-left: 0.5rem; + } +} + + .role-landing-container { - background-color: #f5f5f5; - padding: 1.25rem; - border-radius: 0.5rem; - box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.1); + display: flex; + justify-content: center; + align-items: center; + padding: 2rem; +} + +.role-landing-card { + max-width: 60rem; + width: 100%; + background-color: #fff; + padding: 2rem; + box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1); /* 4px 8px to rem */ + border-radius: 0.5rem; /* 8px to rem */ + display: flex; + flex-direction: column; + justify-content: flex-start; +} + +.header-video-section { + text-align: center; + margin-bottom: 2rem; +} + +.role-header { + font-weight: 700 !important; + font-size: 2rem !important; + margin-bottom: 1.5rem; + color: #0b4b66 !important; +} + +.role-video { + max-width: 100%; + margin-bottom: 2rem; } .config-section { - margin-bottom: 1.25rem; + margin-bottom: 1.5rem; +} + +.role-section-header { + font-size: 1.75rem !important; + font-weight: bold !important; + color: #0b4b66 !important; + margin-bottom: 1rem; +} + +.role-paragraph { + font-size: 1rem !important; + color: #363636 !important; + line-height: 1.6; + margin-bottom: 1rem; +} + +.role-list { + padding-left: 1.5rem; + margin-bottom: 1.5rem; +} + +.role-list-item { + font-size: 1rem; + color: #363636; + line-height: 1.6; + margin-bottom: 0.75rem; } .role-action-container { display: flex; - justify-content: space-evenly; + justify-content: space-between; + gap: 1.5rem; align-items: stretch; - margin-top: 1.25rem; - gap: 1.25rem; - flex-wrap: wrap; } .role-card { - flex: 1 1 45%; - background-color: #fff; - padding: 1.25rem; - border-radius: 0.5rem; - box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.1); + display: flex; + flex-direction: column; + justify-content: space-between; + flex: 1; + min-width: 0; + padding: 1.5rem; + background-color: #f9f9f9; + border-radius: 0.5rem; /* 8px to rem */ text-align: center; - min-width: 18.75rem; + box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1); /* 4px 8px to rem */ +} + +.icon-container { + display: flex; + justify-content: center; + align-items: center; + margin-bottom: 1rem; } .role-button { - margin-top: 0.625rem !important; - width: 100% !important; + width: 20rem !important; + margin-top: 1rem !important; + align-self: center !important; } -@media (max-width: 768px) { - .role-action-container { - flex-direction: column; - align-items: center; - } +.role-list { + padding-left: 1.5rem; + margin-bottom: 1.5rem; + list-style-type: disc; +} - .role-card { - width: 100%; - margin-bottom: 0.625rem; - } +.role-list-item { + font-size: 1rem; + color: #363636; + line-height: 1.6; + margin-bottom: 0.75rem; } +/* Custom container for the entire landing component */ +.custom-landing-container { + display: flex; + justify-content: center; + align-items: center; + padding: 2rem; +} -.faq-answer{ - .card-section-sub-text{ - margin-left: 0.5rem; - } +/* Custom card styling for the landing page */ +.custom-landing-card { + max-width: 60rem; /* 800px to rem */ + width: 100%; + background-color: #fff; + padding: 2rem; + box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1); /* 4px 8px to rem */ + border-radius: 0.5rem; /* 8px to rem */ + display: flex; + flex-direction: column; + justify-content: flex-start; +} + +/* Custom header styling */ +.custom-landing-header { + font-weight: 700; + font-size: 2rem; + margin-bottom: 1.25rem; + color: #0b4b66; + text-align: center; +} + +/* Custom video section */ +.custom-video-section { + text-align: center; + margin-bottom: 2rem; + padding: 1rem 0; +} + +/* Custom section container */ +.custom-section-container { + margin-bottom: 1.5rem; +} + +/* Custom section header */ +.custom-section-header { + font-size: 1.5rem; + font-weight: bold; + color: #0b4b66; + margin-bottom: 1rem; + text-align: left; +} + +/* Custom paragraph styling */ +.custom-section-paragraph { + font-size: 1rem; + color: #363636; + line-height: 1.6; + margin-bottom: 1rem; + text-align: justify; +} + +/* Custom list styling for steps */ +.custom-steps-list { + padding-left: 1.5rem; + margin-bottom: 1.5rem; + list-style-type: disc; +} + +/* Custom button container */ +.custom-continue-button-container { + display: flex; + justify-content: flex-end; /* Align the button to the right */ + margin-top: 2rem; +} + +/* Custom button styling */ +.custom-continue-button { + margin-top: 1rem; + align-self: flex-end; /* Ensure the button aligns to the right */ +} + +.custom-steps-list { + padding-left: 1.5rem; + margin-bottom: 1.5rem; + list-style-type: disc; +} + +/* Styling for each step item */ +.custom-step-item { + margin-bottom: 0.75rem; + font-size: 1rem; + color: #363636; + line-height: 1.6; } diff --git a/micro-ui/web/micro-ui-internals/packages/modules/core/src/pages/employee/Landing/LandingComponent.js b/micro-ui/web/micro-ui-internals/packages/modules/core/src/pages/employee/Landing/LandingComponent.js index fc6dfc88cd6..7ffca9da8ca 100644 --- a/micro-ui/web/micro-ui-internals/packages/modules/core/src/pages/employee/Landing/LandingComponent.js +++ b/micro-ui/web/micro-ui-internals/packages/modules/core/src/pages/employee/Landing/LandingComponent.js @@ -1,4 +1,4 @@ -import React from "react"; +import React, { Fragment } from "react"; import { Header, Card, CardText, CardHeader, Button } from "@egovernments/digit-ui-components"; // Importing the required DIGIT UI components import { useTranslation } from "react-i18next"; import { useHistory } from "react-router-dom"; @@ -12,58 +12,87 @@ const LandingComponent = ({ config }) => { const history = useHistory(); return ( - - {/* Main Heading */} -
- {t(heading)} -
- - +
+ + {/* Main Heading */} +
+ {t(heading)} +
- {/* Subsections */} - {subsections.map((section, index) => ( -
- {/* Subsection Title */} - {t(section.title)} + {/* Video Section */} +
+ +
+ + {/* Subsections */} + {subsections.map((section, index) => ( +
+ {/* Subsection Title */} + {t(section.title)} - {/* Section Content */} - {section.type === "paragraph" && - section.content.map((paragraph, paraIndex) => ( - -

{t(paragraph.text)}

- - ))} + {/* Render Content for "paragraph" type */} + {section.type === "paragraph" && section.content && ( + + {section.content.map((paragraph, paraIndex) => ( + +

{t(paragraph.text)}

+ + ))} + + )} - {/* Numbered Steps based on the `id` field */} - {section.type === "steps" && ( -
    - {section.content.map((step, stepIndex) => ( - -
  • - {step.id}. {t(step.text)} + {/* Render Content for "steps" type */} + {section.type === "steps" && section.content && ( +
      {/* Updated list with bullets */} + {section.content.map((step, stepIndex) => ( +
    • {/* Only bullets, no step.id */} + {t(step.text)}
      • - - ))} -
    - )} -
- ))} + ))} + + )} - {/* Continue Button */} -
-
- + {/* Render Content for "both" type */} + {section.type === "both" && section.content && ( + + {section.content.map((item, itemIndex) => { + if (item.type === "paragraph") { + return ( + +

{t(item.text)}

+ + ); + } else if (item.type === "step") { + return ( +
  • {/* Only bullets, no step.id */} + {t(item.text)} +
    • + ); + } else { + return null; + } + })} +     + )} +
    + ))} + + {/* Continue Button */} +
    +
    +     +
    ); }; diff --git a/micro-ui/web/micro-ui-internals/packages/modules/core/src/pages/employee/Landing/SandboxConfig.js b/micro-ui/web/micro-ui-internals/packages/modules/core/src/pages/employee/Landing/SandboxConfig.js index 9f4b6a44a26..cf1a0c695ac 100644 --- a/micro-ui/web/micro-ui-internals/packages/modules/core/src/pages/employee/Landing/SandboxConfig.js +++ b/micro-ui/web/micro-ui-internals/packages/modules/core/src/pages/employee/Landing/SandboxConfig.js @@ -1,54 +1,83 @@ export const sandboxConfig = { - heading: "SANDBOX_HEADING", // Localization key for the main heading + heading: "SANDBOX_HEADING", url: "https://www.youtube.com/watch?v=1ZLdetJwfeY", subsections: [ { - title: "SANDBOX_INTRODUCTION_TITLE", // Localization key for "Introduction" + title: "SANDBOX_INTRODUCTION_TITLE", type: "paragraph", content: [ { - text: "SANDBOX_INTRODUCTION_TEXT", // Localization key for the introduction text + text: "SANDBOX_INTRODUCTION_TEXT", }, ], }, { - title: "SANDBOX_PRODUCTS_TITLE", // Localization key for "Products" - type: "paragraph", + title: "SANDBOX_PRODUCTS_TITLE", + type: "both", content: [ { - text: "SANDBOX_PRODUCTS_TEXT", // Localization key for the first line in "Products" + type: "paragraph", + text: "SANDBOX_PRODUCTS_DESCRIPTION", }, { - text: "SANDBOX_COMPLAINTS_DESCRIPTION", // Localization key for "Complaints" description + type: "step", + id: 1, + text: "SANDBOX_PRODUCTS_STEP_1", }, { - text: "SANDBOX_CAMPAIGNS_DESCRIPTION", // Localization key for "Campaigns" description + type: "step", + id: 2, + text: "SANDBOX_PRODUCTS_STEP_2", + }, + { + type: "step", + id: 3, + text: "SANDBOX_PRODUCTS_STEP_3", + }, + { + type: "step", + id: 4, + text: "SANDBOX_PRODUCTS_STEP_4", }, ], }, { - title: "SANDBOX_USER_CAPABILITIES_TITLE", // Localization key for "User Capabilities" - type: "steps", + title: "SANDBOX_USER_CAPABILITIES_TITLE", + type: "both", content: [ { + type: "step", id: 1, - text: "USER_CAPABILITIES_STEP_1", // Localization key for the first user capability step + text: "SANDBOX_USER_CAPABILITIES_STEP_1", }, { + type: "step", id: 2, - text: "USER_CAPABILITIES_STEP_2", // Localization key for the second user capability step + text: "SANDBOX_USER_CAPABILITIES_STEP_2", }, { + type: "step", id: 3, - text: "USER_CAPABILITIES_STEP_3", // Localization key for the third user capability step + text: "SANDBOX_USER_CAPABILITIES_STEP_3", }, { + type: "step", id: 4, - text: "USER_CAPABILITIES_STEP_4", // Localization key for the fourth user capability step + text: "SANDBOX_USER_CAPABILITIES_STEP_4", }, { + type: "step", id: 5, - text: "USER_CAPABILITIES_STEP_5", // Localization key for the fifth user capability step + text: "SANDBOX_USER_CAPABILITIES_STEP_5", + }, + { + type: "step", + id: 6, + text: "SANDBOX_USER_CAPABILITIES_STEP_6", + }, + { + type: "paragraph", + text: "SANDBOX_CLICK_CONTINUE", }, ], }, diff --git a/micro-ui/web/micro-ui-internals/packages/modules/core/src/pages/employee/RoleLanding/RoleLandingConfig.js b/micro-ui/web/micro-ui-internals/packages/modules/core/src/pages/employee/RoleLanding/RoleLandingConfig.js index b175583d2f9..66f449baf75 100644 --- a/micro-ui/web/micro-ui-internals/packages/modules/core/src/pages/employee/RoleLanding/RoleLandingConfig.js +++ b/micro-ui/web/micro-ui-internals/packages/modules/core/src/pages/employee/RoleLanding/RoleLandingConfig.js @@ -21,12 +21,26 @@ export const externalConfig = [ type: "text", heading: "ROLE_LANDING_ROLE_SECTION_TWO", // localization key for "Another Role Section" paragraphs: [ - "ROLE_LANDING_ANOTHER_ROLE_PARAGRAPH_1", // localization key for the first paragraph - "ROLE_LANDING_ANOTHER_ROLE_PARAGRAPH_2" // localization key for the second paragraph + "ROLE_LANDING_ANOTHER_ROLE_PARAGRAPH_1", // localization key for the first paragraph // localization key for the second paragraph ], steps: [ { description: "ROLE_LANDING_ANOTHER_ROLE_STEP_1" }, // localization key for step 1 - { description: "ROLE_LANDING_ANOTHER_ROLE_STEP_2" } // localization key for step 2 + { description: "ROLE_LANDING_ANOTHER_ROLE_STEP_2" }, + { description: "ROLE_LANDING_ANOTHER_ROLE_STEP_3" }, + { description: "ROLE_LANDING_ANOTHER_ROLE_STEP_4" }, // localization key for step 2 + ] + }, + { + type: "text", + heading: "ROLE_LANDING_ROLE_SECTION_THREE", // localization key for "Another Role Section" + paragraphs: [ + "ROLE_LANDING_THREE_PARAGRAPH_1", // localization key for the first paragraph // localization key for the second paragraph + ], + steps: [ + { description: "ROLE_LANDING_THREE_ROLE_STEP_1" }, // localization key for step 1 + { description: "ROLE_LANDING_THREE_ROLE_STEP_2" }, + { description: "ROLE_LANDING_THREE_ROLE_STEP_3" }, + { description: "ROLE_LANDING_THREE_ROLE_STEP_4" }, // localization key for step 2 ] }, { @@ -35,7 +49,7 @@ export const externalConfig = [ heading: "ROLE_LANDING_CITIZEN", // localization key for "Citizen" description: "ROLE_LANDING_CITIZEN_DESCRIPTION", // localization key for the description buttonName: "ROLE_LANDING_CITIZEN_BUTTON", // localization key for the button label - action: "/citizen/login" + action: "/citizen" }, { type: "card", diff --git a/micro-ui/web/micro-ui-internals/packages/modules/core/src/pages/employee/RoleLanding/RoleLandingPage.js b/micro-ui/web/micro-ui-internals/packages/modules/core/src/pages/employee/RoleLanding/RoleLandingPage.js index ede15843b5c..60ee77a4648 100644 --- a/micro-ui/web/micro-ui-internals/packages/modules/core/src/pages/employee/RoleLanding/RoleLandingPage.js +++ b/micro-ui/web/micro-ui-internals/packages/modules/core/src/pages/employee/RoleLanding/RoleLandingPage.js @@ -1,70 +1,77 @@ import React from "react"; -import { Card, CardText, CardHeader, Button , Header} from "@egovernments/digit-ui-components"; +import { Card, CardText, CardHeader, Button, Header } from "@egovernments/digit-ui-components"; import { useTranslation } from "react-i18next"; import { useHistory } from "react-router-dom"; import { externalConfig } from "./RoleLandingConfig"; import YoutubeVideo from "../Landing/YoutubeVideo"; const RoleLandingComponent = () => { - const { t } = useTranslation(); - const history = useHistory(); + const { t } = useTranslation(); + const history = useHistory(); - const handleButtonClick = (action) => { - const url= '/'+window.contextPath+action - window.open(url, "_blank"); - }; + const handleButtonClick = (action) => { + const url = '/' + window.contextPath + action; + window.open(url, "_blank"); + }; - return ( - - {externalConfig.filter(config => config.type === "link") - .map((config, index)=>( -
    -
    {t("ROLE_BASED_LANDING_HEADER")}
    - -
    - )) - } - {externalConfig - .filter(config => config.type === "text") - .map((config, index) => ( -
    - {config.heading} - {config.paragraphs.map((paragraph, pIndex) => ( - {paragraph} - ))} -
      - {config.steps.map((stepObj, sIndex) => ( -
    • - {stepObj.description} -
      • - ))} -
    -
    + return ( +
    + + {externalConfig + .filter((config) => config.type === "link") + .map((config, index) => ( +
    +
    {t("ROLE_BASED_LANDING_HEADER")}
    + +
    + ))} + + {externalConfig + .filter((config) => config.type === "text") + .map((config, index) => ( +
    + {t(config.heading)} + {config.paragraphs.map((paragraph, pIndex) => ( + + {t(paragraph)} + + ))} + {/* Adding bullets to steps */} +
      + {config.steps.map((stepObj, sIndex) => ( +
    • + {t(stepObj.description)} {/* Display step description with a bullet */} +
      • ))} - -
      - {externalConfig - .filter(config => config.type === "card") - .map((config, index) => { - const IconComponent = config.icon; // Changed to IconComponent - return ( -
      - {IconComponent && } {/* Render icon */} - {/* Card-specific content */} - {t(config.heading)} -
      - ); - })} +
    -     - ); + ))} + +
    + {externalConfig + .filter((config) => config.type === "card") + .map((config, index) => { + const IconComponent = config.icon; + return ( +
    +
    + {IconComponent && } {/* Icon inside the container */} +
    + {t(config.heading)} +
    + ); + })} +
    + +
    + ); }; export default RoleLandingComponent; From 6265ed24a84e97c4ee3b20eddae85530ada79bbe Mon Sep 17 00:00:00 2001 From: mithun-hegde-egov Date: Fri, 18 Oct 2024 13:37:00 +0530 Subject: [PATCH 2/2] css version updated --- micro-ui/web/micro-ui-internals/packages/css/package.json | 2 +- micro-ui/web/public/index.html | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/micro-ui/web/micro-ui-internals/packages/css/package.json b/micro-ui/web/micro-ui-internals/packages/css/package.json index 8b56b8a3ac1..f2cefd94a94 100644 --- a/micro-ui/web/micro-ui-internals/packages/css/package.json +++ b/micro-ui/web/micro-ui-internals/packages/css/package.json @@ -1,6 +1,6 @@ { "name": "@egovernments/digit-ui-css", - "version": "1.8.2-beta.46", + "version": "1.8.2-beta.47", "license": "MIT", "main": "dist/index.css", "author": "Jagankumar ", diff --git a/micro-ui/web/public/index.html b/micro-ui/web/public/index.html index 802ffb6ed6b..38077c2e3d9 100644 --- a/micro-ui/web/public/index.html +++ b/micro-ui/web/public/index.html @@ -7,7 +7,7 @@ - +