Merge pull request #2493 from CCAFS/aiccra-dev-responsive

Aiccra dev responsive - home & cluster description
CCAFS · Feb 20, 2024 · c6f76b3 · c6f76b3
2 parents 7ed804f + 23afa2d
commit c6f76b3
Show file tree

Hide file tree

Showing 12 changed files with 4,850 additions and 4,354 deletions.
diff --git a/marlo-web/src/main/webapp/WEB-INF/crp/views/home/dashboard.ftl b/marlo-web/src/main/webapp/WEB-INF/crp/views/home/dashboard.ftl
@@ -8,7 +8,7 @@
   ]
 /]
 [#assign customCSS = [
-  "${baseUrlMedia}/css/home/dashboard.css?20230313",
+  "${baseUrlMedia}/css/home/dashboard.css?20240201",
   "${baseUrlCdn}/global/css/customDataTable.css",
   "${baseUrlCdn}/global/css/impactGraphic.css",
   "https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"

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>

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>

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>
 

diff --git a/marlo-web/src/main/webapp/crp/css/home/dashboard.css b/marlo-web/src/main/webapp/crp/css/home/dashboard.css
@@ -241,6 +241,7 @@ span.timelineControl:hover {
   }
 
   .timeline{
+		position: static;
     margin: 30px 0;
     display: flex;
     justify-content: center;
@@ -485,6 +486,7 @@ span.timelineControl:hover {
 
   .containerMapsection{
     display: flex;
+    position: relative;
   }
 
   .borderMap{
@@ -728,7 +730,6 @@ span.timelineControl:hover {
 
   .containerItems {
     flex-wrap: wrap;
-    width: 100%;
     display: table-cell;
     text-align: center;
     margin-left: 4px;
@@ -804,13 +805,18 @@ span.timelineControl:hover {
     .tableItemsTitle{
       font-size: 1.1em;
     }
+
+   	.itemsTablet{
+    	width: 45%;
+		}
   }
 
- @media (max-width:750px){
+ @media (max-width:768px){
 
   .containerItems {
     display: flex;
-    justify-content: center;
+    justify-content: start;
+    margin-left: 0%;
 }
 
 .sectionItems {
@@ -825,7 +831,6 @@ span.timelineControl:hover {
 
   .itemsTablet {
     height: 80px;
-    width: 80px;
     margin: 10px;
   }
 
@@ -849,8 +854,116 @@ span.timelineControl:hover {
   table.dataTable {
     font-size: 0.7em;
   }
+
+  	/*************** sectionMap ********************/
+  .containerTextMap{
+		margin: 10px 20px 25px 20px;
+	}
+  .containerTextMap .titleMap{
+		font-size: 1.35rem;
+	}
+
+	.containerTextMap .textMap{
+		font-size: 1.1rem;
+	}
+	.containerImgMap{
+		min-width: 17%;
+		display:flex;
+  	flex-direction: column;
+  	justify-content: center;
+	}
+
+	.containerImgMap img{
+		width: 100%;
+	}
  }
 
+@media only screen and (max-width:440px){
+
+	#dashboardContent{
+		display: contents;
+	}
+
+	.containerTabletItems{
+		height: 100%;
+	}
+
+	/**************** Content Items Table **************/
+
+	.sectionItems{
+		margin-left: 0%;
+	}
+
+	.containerItems{
+		justify-content: center;
+
+	}
+
+	.itemsTablet{
+		padding-top: 1rem;
+    width: 40%;
+	}
+
+	.containerTabletItems #dashboardContent{
+		width: 100%;
+    width: -moz-available;         
+    width: -webkit-fill-available;  
+    width: fill-available;
+	}
+
+	.tab-content{
+		width: auto;	
+	}
+
+	.iconSearch{
+		margin-left: 0;
+    right: 5%;
+	}
+
+	/*************** sectionMap ********************/
+
+	  .containerTextMap .titleMap{
+		font-size: 1.15em;
+	}
+
+	.containerTextMap .textMap{
+		font-size: 0.95rem;
+	}
+
+	.containerImgMap{
+		display: block;
+		position: absolute;
+		right: 10%;
+		top: 0;
+		width: 100%;
+		text-align: right;
+	}
+
+	.containerImgMap img{
+		width: 8%;
+	}
+
+	/*************** timeline ********************/
+
+	.timeline{
+		position: relative;
+	}
+
+	.timelineAlert{
+		bottom: 8px;
+		top: auto !important;
+		right: auto;
+	}
+
+	.buttonRightTimeline{
+		right: 0;
+	}
+
+	.buttonLeftTimeline{
+		left: 0;
+	}
+
+}
 
 /* Add styles to the table */
 .dataTables_wrapper {
@@ -879,3 +992,5 @@ span.timelineControl:hover {
  #guide-button{
   display: block;
 }
+
+
diff --git a/marlo-web/src/main/webapp/crp/css/projects/projectDeliverable.css b/marlo-web/src/main/webapp/crp/css/projects/projectDeliverable.css
@@ -1171,3 +1171,10 @@ div.fieldFocus-deliverable {
     left: 610px;
   }
 }
+
+@media (max-width:440px){
+  .containerShowHide{
+    position: static;
+  }
+}
+
diff --git a/marlo-web/src/main/webapp/crp/js/home/dashboard.js b/marlo-web/src/main/webapp/crp/js/home/dashboard.js
@@ -466,6 +466,27 @@ 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_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