Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Landing screen fixes #1561

Merged
merged 3 commits into from
Oct 18, 2024
Merged

Landing screen fixes #1561

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
4170541
landing screen css changes and config updates
mithunhegde-egov Oct 18, 2024
9cd81fd
Merge branch 'develop' into landing-screen-fixes
mithunhegde-egov Oct 18, 2024
6265ed2
css version updated
mithunhegde-egov Oct 18, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion micro-ui/web/micro-ui-internals/packages/css/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 <jagan.kumar@egov.org.in>",
Expand Down
235 changes: 200 additions & 35 deletions micro-ui/web/micro-ui-internals/packages/css/src/pages/employee/sandbox.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Comment on lines +806 to +815
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 Nitpick (assertive)

Responsive design improvement looks good!

The media query for screens up to 768px wide improves the layout for smaller devices. The changes to .role-action-container and .role-card should stack elements vertically and ensure full width on mobile devices.

Consider adding a small margin between the stacked .role-card elements for better visual separation:

  .role-card {
      width: 100%;
      margin-bottom: 0.625rem; 
+     margin-top: 0.625rem;
  }
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
@media (max-width: 768px) {
.role-action-container {
flex-direction: column;
align-items: center;
}
.role-card {
width: 100%;
margin-bottom: 0.625rem;
}
@media (max-width: 768px) {
.role-action-container {
flex-direction: column;
align-items: center;
}
.role-card {
width: 100%;
margin-bottom: 0.625rem;
margin-top: 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;
Comment on lines +825 to +889
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 Nitpick (assertive)

Existing class modifications enhance visual hierarchy and consistency

The changes to classes like .role-landing-container, .role-landing-card, and .role-header improve the overall layout and visual hierarchy. The consistent use of colors (e.g., #0b4b66 for headers) and appropriate font sizes enhance readability.

Consider adding a line-height property to .role-header for better readability, especially on smaller screens:

.role-header {
  font-weight: 700 !important;
  font-size: 2rem !important;
+ line-height: 1.2;
  margin-bottom: 1.5rem;
  color: #0b4b66 !important;
}
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
.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-landing-container {
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;
line-height: 1.2;
margin-bottom: 1.5rem;
color: #0b4b66 !important;
}
.role-video {
max-width: 100%;
margin-bottom: 2rem;
}
.config-section {
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;
Comment on lines +806 to +1029
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Overall structure is good, but some consistency improvements can be made

The file maintains a consistent structure and follows good SCSS practices. However, there are a few areas where consistency can be improved:

  1. Use of !important: This should be minimized as it can lead to specificity issues. Consider refactoring the CSS to avoid using !important where possible.

  2. Consistent units: Some classes use pixels while others use rem for similar properties. Stick to rem units throughout for better scalability.

Consider the following improvements:

  1. Remove !important where possible and increase specificity if needed:
.role-header {
-  font-weight: 700 !important;
-  font-size: 2rem !important;
+  font-weight: 700;
+  font-size: 2rem;
  margin-bottom: 1.5rem;
-  color: #0b4b66 !important;
+  color: #0b4b66;
}
  1. Convert pixel values to rem for consistency:
.role-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
  min-width: 0;
  padding: 1.5rem;
  background-color: #f9f9f9;
  border-radius: 0.5rem;
  text-align: center;
-  box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1); /* 4px 8px to rem */
+  box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
}

These changes will improve the overall consistency and maintainability of the stylesheet.

Committable suggestion was skipped due to low confidence.

Comment on lines +939 to +1029
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 Nitpick (assertive)

New custom classes enhance landing page structure and styling

The addition of custom classes like .custom-landing-container, .custom-landing-card, .custom-section-header, etc., provides a well-structured and consistent approach to styling the landing page. The use of rem units and responsive design considerations is commendable.

For consistency, consider using rem units for all size-related properties. For example:

.custom-landing-header {
  font-weight: 700;
  font-size: 2rem;
-  margin-bottom: 1.25rem;
+  margin-bottom: 1.5rem;
  color: #0b4b66;
  text-align: center;
}
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
.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;
.custom-landing-container {
display: flex;
justify-content: center;
align-items: center;
padding: 2rem;
}
/* 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.5rem;
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;

}
Loading