A2-62 - Responsive CSS Update - Cluster Description

CCAFS · Feb 27, 2024 · 137a5bb · 137a5bb
1 parent 971b5df
commit 137a5bb
Show file tree

Hide file tree

Showing 7 changed files with 192 additions and 122 deletions.
diff --git a/marlo-web/src/main/webapp/WEB-INF/crp/views/projects/deliverableList.ftl b/marlo-web/src/main/webapp/WEB-INF/crp/views/projects/deliverableList.ftl
@@ -185,7 +185,7 @@
                   <label for="checkbox">Responsible person</label>
                 </div>
               </div>
-            <div class="currentDeliverables">
+            <div class="currentDeliverables table-responsive">
               [@deliverableList.deliverablesList deliverables=(currentDeliverableList)![] canValidate=true canEdit=candit  isReportingActive=reportingActive namespace="/clusters" defaultAction="${(crpSession)!}/deliverable" projectID=projectID/]
             </div>
               [#--  
@@ -223,7 +223,7 @@
                   <label for="checkbox">Responsible person</label>
                 </div>
               </div>            
-            <div class="previousDeliverables">
+            <div class="previousDeliverables table-responsive">
               [@deliverableList.deliverablesList deliverables=(project.getPreviousDeliverables(actualPhase) + previousSharedDeliverableList)![] canValidate=true canEdit=candit isReportingActive=reportingActive namespace="/projects" defaultAction="${(crpSession)!}/deliverable" currentTable=false projectID=projectID/]
             </div>
           </div>
@@ -235,4 +235,4 @@
 </section>
 
 
-[#include "/WEB-INF/global/pages/footer.ftl"]
+[#include "/WEB-INF/global/pages/footer.ftl"]
diff --git a/marlo-web/src/main/webapp/WEB-INF/crp/views/projects/projectContributionsCrpList.ftl b/marlo-web/src/main/webapp/WEB-INF/crp/views/projects/projectContributionsCrpList.ftl
@@ -82,7 +82,7 @@
         [#include "/WEB-INF/crp/views/projects/messages-projects.ftl" /]
 
           <h3 class="headTitle">[@s.text name="projectContributionsCrpList.title" /]</h3>
-          <div id="projectContributionsCrpList" class="borderBox">
+          <div id="projectContributionsCrpList" class="borderBox table-responsive">
             [#-- Your project contributes to the flagships --]
             <div class="form-group">
               <p>
@@ -310,4 +310,4 @@
   [#else]
     [#return false]
   [/#if]
-[/#function]
+[/#function]
diff --git a/marlo-web/src/main/webapp/WEB-INF/crp/views/projects/projectInnovationList.ftl b/marlo-web/src/main/webapp/WEB-INF/crp/views/projects/projectInnovationList.ftl
@@ -38,7 +38,7 @@
 
         [#-- Innovations List --]
         <h3 class="headTitle">[@s.text name="projectInnovations" /]</h3>
-        <div class="simpleBox">
+        <div class="simpleBox table-responsive">
           [@innovationsTableMacro list=(projectInnovations)![] /]
         </div>
 
@@ -57,7 +57,7 @@
         [#-- Previous Innovations List --]
         <br />
         <h3 class="headTitle">Previous [@s.text name="projectInnovations" /]</h3>
-        <div class="simpleBox">
+        <div class="simpleBox table-responsive">
           [@innovationsTableMacro list=(projectOldInnovations)![] currentTable=false/]
         </div>
 

diff --git a/marlo-web/src/main/webapp/WEB-INF/crp/views/projects/projectStudies.ftl b/marlo-web/src/main/webapp/WEB-INF/crp/views/projects/projectStudies.ftl
@@ -68,7 +68,7 @@
 
           [#-- Studies list --]
           <h3 class="headTitle">[@s.text name="projectStudies.studiesTitle" /] <br /><small>[@s.text name="projectStudies.studiesSubTitle" /]</small></h3>
-          <div id="caseStudiesBlock" class="simpleBox">
+          <div id="caseStudiesBlock" class="simpleBox table-responsive">
             [@tableList list=(projectStudies)![]  /]
           </div>
           [#-- Add a new --]
@@ -85,7 +85,7 @@
 
           [#-- OLD Studies list --]
           <h3 class="headTitle">[@s.text name="projectStudies.studiesTitleOldFormat" /]</h3>
-          <div id="caseStudiesBlock" class="simpleBox">
+          <div id="caseStudiesBlock" class="simpleBox table-responsive">
             [@tableList list=(projectOldStudies)![] previousTable=true /]
           </div>
 
@@ -237,4 +237,4 @@
     </tbody> 
   </table>
   <div class="clearfix"></div>
-[/#macro] 
+[/#macro] 
diff --git a/marlo-web/src/main/webapp/WEB-INF/crp/views/projects/projectsList.ftl b/marlo-web/src/main/webapp/WEB-INF/crp/views/projects/projectsList.ftl
@@ -6,12 +6,12 @@
   "https://cdn.datatables.net/buttons/1.3.1/js/dataTables.buttons.min.js",
   "//cdn.datatables.net/buttons/1.3.1/js/buttons.html5.min.js",
   "//cdn.datatables.net/buttons/1.3.1/js/buttons.print.min.js",
-  "${baseUrlMedia}/js/projects/projectsList.js?20230302"
+  "${baseUrlMedia}/js/projects/projectsList.js?20240226"
   ]
 /]
 [#assign customCSS = [
   "${baseUrlCdn}/global/css/customDataTable.css",
-  "${baseUrlMedia}/css/projects/projectsList.css?20230724"]
+  "${baseUrlMedia}/css/projects/projectsList.css?20240226"]
 /]
 
 [#if !action.isAiccra()]
@@ -115,4 +115,4 @@
 [@customForm.confirmJustification action="deleteProject.do" namespace="/${currentSection}" title="Remove Project" /]
 
 
-[#include "/WEB-INF/global/pages/footer.ftl"]
+[#include "/WEB-INF/global/pages/footer.ftl"]
diff --git a/marlo-web/src/main/webapp/crp/js/home/dashboard.js b/marlo-web/src/main/webapp/crp/js/home/dashboard.js
@@ -78,6 +78,19 @@ function contentDialog(id){
 
 }
 
+
+function updateImg() {
+  let name = $(this).attr("id");
+  $('.itemimg'+name).show();
+  $('.itemgif'+name).hide();
+}
+
+function updateGif() {
+  let name = $(this).attr("id");
+  $('.itemimg'+name).hide();
+  $('.itemgif'+name).show();
+}
+
 function locateContentDialog(id){
 
   switch (id) {
@@ -134,19 +147,6 @@ function locateContentDialog(id){
 
 }
 
-
-function updateImg() {
-  let name = $(this).attr("id");
-  $('.itemimg'+name).show();
-  $('.itemgif'+name).hide();
-}
-
-function updateGif() {
-  let name = $(this).attr("id");
-  $('.itemimg'+name).hide();
-  $('.itemgif'+name).show();
-}
-
 function moveScrollRight() {
   const element = document.querySelector(".scroll-x-containerTimeline");
   element.scrollLeft += 200;
@@ -459,13 +459,41 @@ $('table.projectsList').dataTable({
 var iconSearch = $("<div></div>").addClass("iconSearch");
 var divDataTables_filter = $('.dataTables_filter').parent();
 iconSearch.append('<img src="' + baseUrl + '/global/images/search_outline.png" alt="Imagen"  style="width: 24px; margin: auto;" >');
-iconSearch.prependTo(divDataTables_filter)
+iconSearch.prependTo(divDataTables_filter);
+
+
 var divDataTables_length =$('.dataTables_length').parent();
 divDataTables_length.css("position", "absolute");
 divDataTables_length.css("bottom", "8px");
 divDataTables_length.css("margin-left", "43%");
 divDataTables_length.css("z-index", "1");
 
+var windowWidth = $(window).width();
+
+
+if (windowWidth < 768) {
+
+	divDataTables_filter.css({
+		"width": "100%",	
+	});
+
+	divDataTables_length.css({
+		"left": "30vw",
+		"bottom": "0",
+		"margin-top": "4rem",
+		"margin-left": "0"
+	});
+}
+
+if (windowWidth < 440) {
+	divDataTables_length.css({
+		"left": "18vw",
+		"bottom": "0",
+		"margin-top": "32px",
+		"margin-left": "0"
+	})
+}
+
 $('a#impact[data-toggle="tab"]').on('shown.bs.tab', function(e) {
   e.target // newly activated tab
   e.relatedTarget // previous active tab
@@ -516,4 +544,4 @@ function getTimeline() {
       }
     }
   });
-}
+}