feature/ECASOGP-13047: fixed

GSA · Sep 11, 2024 · b8624dc · b8624dc
1 parent 6e9ca3f
commit b8624dc
Show file tree

Hide file tree

Showing 6 changed files with 48 additions and 31 deletions.
diff --git a/_includes/training-resources/results.html b/_includes/training-resources/results.html
@@ -1,4 +1,4 @@
-<div id="career-advancement-results-container" class="tablet:grid-col-7 desktop:grid-col-8 padding-right-4 padding-top-8">
+<div id="career-advancement-results-container" class="tablet:grid-col-7 desktop:grid-col-8 padding-right-4 padding-top-8 max-width-cptt-courses">
   <section class="margin-bottom-1">
     <div id="career-search-results-filter-remove-all-button-training" class="margin-y-1">
       <a href="javascript:void(0)" class="text-color" id="career-facet-remove-all-filters-button-training" style="display: none;"><strong>Clear All</strong></a>

diff --git a/assets/css/career-planning.css b/assets/css/career-planning.css
@@ -55,18 +55,27 @@
 }
 
 .responsive-float {
-  float: right;
+  display: inline-block;
+}
+
+.responsive-size {
+  width: 269px;
+  max-width: 100%;
 }
 
 /* tablet breakpoint */
-@media (min-width:800px) {
+@media (min-width:820px) {
   .responsive-two-column-grid {
       display: grid;
       grid-template-columns: 1fr 1fr;
   }
 
   .responsive-float {
-    display: inline-block;
+    float: right;
+  }
+
+  .responsive-size {
+    width:fit-content;
   }
 }
 
@@ -315,6 +324,7 @@ input#career-advancement-search-input-training-resources {
    .search {
         flex-direction: column;
    }
+
   .ui-dialog{
     width: 90% !important;
     margin-left: 20px;
@@ -591,6 +601,10 @@ div[data-card-filter] {
     padding-bottom: 1rem !important;
 }
 
+.max-width-cptt-courses {
+  max-width: 810px;
+}
+
 .bg-accent-warm.usa-accordion__button:hover {
     background-color: #fa9441 !important;
 }

diff --git a/assets/css/main-page-green.scss b/assets/css/main-page-green.scss
@@ -287,7 +287,7 @@ color:#005ea2;
   height: 22rem;
 }
 
-@media screen and (max-width: 768px) {
+@media screen and (max-width: 820px) {
   .cptt-div-height {
     height: 40rem;
   }

diff --git a/assets/js/training-courses.js b/assets/js/training-courses.js
@@ -29,6 +29,11 @@ $(document).ready(function () {
           display: $.fn.dataTable.Responsive.display.childRow
         }
       },
+      columnDefs: [
+        { responsivePriority: 1, targets: 7},
+        { responsivePriority: 10001, targets: 9},
+        { responsivePriority: 10002, targets: 10},
+      ],
       data: data,
       dom: 'Bfrt',
       buttons: [

diff --git a/career-planning-tool/index.html b/career-planning-tool/index.html
@@ -43,10 +43,10 @@
                     </div>
                     <div class="grid-col-12">
                         <div class="responsive-float">
-                            <div class="training-course__label text-bold label-color text-size">
+                            <div class="training-course__label text-bold label-color text-size float-right">
                                 <label>VIEW ALL TRAINING COURSES</label>
                             </div>
-                            <a href="{{ site.baseurl }}/training-resources/" class="career-download-button-1 usa-button usa-button--outline margin-bottom-1 button-border float-right" id="training-course-catalogue-button" title="Training Course Catalogue">
+                            <a href="{{ site.baseurl }}/training-resources/" class="career-download-button-1 usa-button usa-button--outline margin-bottom-1 responsive-size float-right button-border" id="training-course-catalogue-button" title="Training Course Catalogue">
                                 <span>TRAINING COURSE CATALOGUE</span>
                             </a>
                         </div>

diff --git a/training-resources/index.html b/training-resources/index.html
@@ -27,33 +27,31 @@
     <div>
         <!-- HTML elements for search -->
         <section class="career-search-results-header grid-row margin-top-7 tablet:margin-top-10">
-            <div class="search-container grid-col-5 flex-justify flex-wrap tablet:flex-no-wrap">
-                <form class="usa-search margin-right-2" role="search">
-                    <div class="margin-top-0 career-search__label text-bold label-color text-size">
-                        <label for="career-advancement-search-input-training-resources">SEARCH COURSES</label>
-                    </div>
-                    <div class="tablet:display-block display-flex flex-justify search margin-bottom-1">
-                        <input type="text" id="career-advancement-search-input-training-resources" class="usa-input margin-top-0 search-border radius-md margin-bottom-1 width" type="search" name="search">
-                        <button class="usa-button bg-search margin-bottom-1 width text-green" type="submit" id="cfo-search-button-tr" title="Search">
-                            <span>SEARCH</span>
-                        </button>
-                    </div>
-                </form>
-            </div>
-            <div class="grid-col-1">
-
-            </div>
-            <div class="grid-col-6">
-                <div div class="float-right">
-                    <label for="training-download-buttons" class="text-bold training-course_buttons__label label-color float-right margin-bottom-1 text-size" >EXPORT CONTENT FROM THIS PAGE</label>
-                    <div id="training-download-buttons" class="export-content-buttons tablet:display-block display-flex flex-justify">
-                        <button id="training-download-button-1" class="training-download-button-1 usa-button usa-button--outline margin-bottom-1 button-border" data-position="top" data-op="select-all">SELECT ALL COURSES</button>
-                        <button id="training-download-button-2" class="usa-button usa-button--outline margin-bottom-1 usa-tooltip button-border" data-position="top" data-op="download-selected-pdf" disabled aria-disabled="true" title="This feature will allow you to download a report of all selected information cards in PDF file format.">DOWNLOAD PDF</button>
-                        <button id="training-download-button-3" class="usa-button usa-button--outline margin-bottom-1 usa-tooltip button-border" data-position="top" data-op="download-selected-csv" disabled aria-disabled="true" title="This feature will allow you to download a report of all selected information cards in CSV file format.">DOWNLOAD CSV</button>
+            <div class="responsive-two-column-grid">
+                <div class="search-container flex-justify flex-wrap tablet:flex-no-wrap">
+                    <form class="usa-search margin-right-2" role="search">
+                        <div class="margin-top-0 career-search__label text-bold label-color text-size">
+                            <label for="career-advancement-search-input-training-resources">SEARCH COURSES</label>
+                        </div>
+                        <div class="tablet:display-block display-flex flex-justify search margin-bottom-1">
+                            <input type="text" id="career-advancement-search-input-training-resources" class="usa-input margin-top-0 search-border radius-md margin-bottom-1 width" type="search" name="search">
+                            <button class="usa-button bg-search margin-bottom-1 width text-green" type="submit" id="cfo-search-button-tr" title="Search">
+                                <span>SEARCH</span>
+                            </button>
+                        </div>
+                    </form>
+                </div>
+                <div>
+                    <div div class="float-right">
+                        <label for="training-download-buttons" class="text-bold training-course_buttons__label label-color float-right margin-bottom-1 text-size" >EXPORT CONTENT FROM THIS PAGE</label>
+                        <div id="training-download-buttons" class="export-content-buttons tablet:display-block display-flex flex-justify">
+                            <button id="training-download-button-1" class="training-download-button-1 usa-button usa-button--outline margin-bottom-1 button-border" data-position="top" data-op="select-all">SELECT ALL COURSES</button>
+                            <button id="training-download-button-2" class="usa-button usa-button--outline margin-bottom-1 usa-tooltip button-border" data-position="top" data-op="download-selected-pdf" disabled aria-disabled="true" title="This feature will allow you to download a report of all selected information cards in PDF file format.">DOWNLOAD PDF</button>
+                            <button id="training-download-button-3" class="usa-button usa-button--outline margin-bottom-1 usa-tooltip button-border" data-position="top" data-op="download-selected-csv" disabled aria-disabled="true" title="This feature will allow you to download a report of all selected information cards in CSV file format.">DOWNLOAD CSV</button>
+                        </div>
                     </div>
                 </div>
             </div>
-
         </section>
         <div class="usa-graphic-list__row grid-row grid-gap ogp-grid">
             {% include  training-resources/filter.html %}