Merge pull request #8612 from uyuni-project/fix-product-table-alignment

Fixed alignment issue in Product table
uyuni-project · Apr 25, 2024 · b33a4cf · b33a4cf
2 parents 8caab78 + 4613df2
commit b33a4cf
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 23 deletions.
diff --git a/web/html/javascript/spacewalk-essentials.js b/web/html/javascript/spacewalk-essentials.js
@@ -20,16 +20,6 @@ function onDocumentReadyGeneral(){
   scrollTopBehavior();
 }
 
-function adaptFluidColLayout() {
-  jQuery('.col-class-calc-width').each(function() {
-    var totalWidth = jQuery(this).parent().width();
-    jQuery(this).siblings('.col').each(function() {
-      totalWidth = Math.floor(totalWidth - jQuery(this).outerWidth());
-    });
-    jQuery(this).css('width', totalWidth - 10);
-  });
-}
-
 /* Getting the screen size to create a fixed padding-bottom in the Section tag to make both columns the same size */
 // On window load and resize
 jQuery(window).on("load resize", alignContentDimensions);
@@ -69,7 +59,6 @@ function scrollTopBehavior() {
 // A container function for what should be fired
 // to set HTML tag dimensions
 function alignContentDimensions() {
-  adaptFluidColLayout();
   sstStyle();
   navbarToggleMobile();
 }

diff --git a/web/html/src/branding/css/base/setup-wizard.less b/web/html/src/branding/css/base/setup-wizard.less
@@ -246,6 +246,10 @@ ul.product-list {
       i {
         margin: 0 auto;
       }
+
+      &-description-width {
+        width: calc(100% - 29em);
+      }
     }
   }
   li.list-row-odd {

diff --git a/web/html/src/branding/css/base/setup-wizard.scss b/web/html/src/branding/css/base/setup-wizard.scss
@@ -246,6 +246,10 @@ ul.product-list {
       i {
         margin: 0 auto;
       }
+
+      &-description-width {
+        width: calc(100% - 29em);
+      }
     }
   }
   li.list-row-odd {

diff --git a/web/html/src/manager/admin/setup/products/products.tsx b/web/html/src/manager/admin/setup/products/products.tsx
@@ -84,10 +84,11 @@ const _CHANNEL_STATUS = {
 const _COLS = {
   selector: { width: 2, um: "em" },
   showSubList: { width: 2, um: "em" },
-  description: { width: "auto", um: "" },
-  arch: { width: 6, um: "em" },
+  description: { width: "", um: "" },
+  arch: { width: 5, um: "em" },
   channels: { width: 7, um: "em" },
-  mix: { width: 13, um: "em" },
+  recommended: { width: 9, um: "em" },
+  mix: { width: 4, um: "em" },
 };
 
 function loadMetadata() {
@@ -648,7 +649,7 @@ class CheckList extends React.Component<CheckListProps> {
               um={this.props.bypassProps.cols.showSubList.um}
             ></CustomDiv>
             <CustomDiv
-              className="col col-class-calc-width"
+              className="col col-description-width"
               width={this.props.bypassProps.cols.description.width}
               um={this.props.bypassProps.cols.description.um}
             >
@@ -669,6 +670,13 @@ class CheckList extends React.Component<CheckListProps> {
             >
               {t("Channels")}
             </CustomDiv>
+            <CustomDiv
+              className="col text-right"
+              width={this.props.bypassProps.cols.recommended.width}
+              um={this.props.bypassProps.cols.recommended.um}
+            >
+              {t("Recommended")}
+            </CustomDiv>
             <CustomDiv
               className="col text-right"
               width={this.props.bypassProps.cols.mix.width}
@@ -936,11 +944,7 @@ class CheckListItem extends React.Component<CheckListItemProps> {
       this.getNestedData(currentItem).some((i) => i.recommended)
     ) {
       recommendedTogglerContent = (
-        <Toggler
-          handler={this.handleWithRecommended.bind(this)}
-          value={this.state.withRecommended}
-          text={t("include recommended")}
-        />
+        <Toggler handler={this.handleWithRecommended.bind(this)} value={this.state.withRecommended} />
       );
     }
 
@@ -1026,7 +1030,7 @@ class CheckListItem extends React.Component<CheckListItemProps> {
             {showNestedDataIconContent}
           </CustomDiv>
           <CustomDiv
-            className="col col-class-calc-width"
+            className="col col-description-width"
             width={this.props.bypassProps.cols.description.width}
             um={this.props.bypassProps.cols.description.um}
           >
@@ -1056,11 +1060,17 @@ class CheckListItem extends React.Component<CheckListItemProps> {
             </button>
           </CustomDiv>
           <CustomDiv
-            className="col text-right"
+            className="col text-center"
+            width={this.props.bypassProps.cols.recommended.width}
+            um={this.props.bypassProps.cols.recommended.um}
+          >
+            {recommendedTogglerContent}
+          </CustomDiv>
+          <CustomDiv
+            className="col text-center"
             width={this.props.bypassProps.cols.mix.width}
             um={this.props.bypassProps.cols.mix.um}
           >
-            {recommendedTogglerContent}
             {resyncActionContent}
           </CustomDiv>
         </div>

diff --git a/web/spacewalk-web.changes.bisht-richa.fixed-alignment-issue-product-table b/web/spacewalk-web.changes.bisht-richa.fixed-alignment-issue-product-table
@@ -0,0 +1,2 @@
+- Fixed alignment issue in the Product table
+- Added a title to Recommended column in the Products page
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		- Fixed alignment issue in the Product table
		- Added a title to Recommended column in the Products page