erp5_web_project_ui: responsive styles for front page

bt5/erp5_web_project_ui/PathTemplateItem/web_page_module/project_gadget_page_project_css.css

 /* FRONT PAGE */
 
-div[data-gadget-url$="gadget_erp5_page_project_front_page.html"] .front-project-list  {
-  margin-top: 10px;
+div[data-gadget-url$="gadget_erp5_page_project_front_page.html"] ul {
+    display: flex;
+    align-items: flex-start;
+    flex-wrap: wrap;
 }
 
-div[data-gadget-url$="gadget_erp5_page_project_front_page.html"] .front-project-list li {
-  width: 32%;
-  display: inline-grid;
-  margin-bottom: 10px;
-  margin-left: 10px;
+div[data-gadget-url$="gadget_erp5_page_project_front_page.html"] ul li {
+    flex-shrink: 1;
+    vertical-align: top;
+    padding: 3pt;
+    border: 1px solid rgba(0, 0, 0, 0.3);
+    border-radius: 0.325em;
+    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.15);
+    background-color: #FFFFFF;
+}
+
+@media only screen and (max-width: 85em) and (min-width: 45em), not screen and (max-width: 85em) {
+  div[data-gadget-url$="gadget_erp5_page_project_front_page.html"] ul li {
+      margin-right: 18pt;
+      margin-bottom: 18pt;
+      flex-basis: 28em;
+  }
+}
+
+@media not screen and (min-width: 45em) {
+  div[data-gadget-url$="gadget_erp5_page_project_front_page.html"] ul li {
+      flex-basis: 100%;
+      margin-bottom: 6pt;
+  }
+}
+
+div[data-gadget-url$="gadget_erp5_page_project_front_page.html"] .front-project-list  {
+  margin-top: 10px;
 }
 
 div[data-gadget-url$="gadget_erp5_page_project_front_page.html"] .front-project-list .project-box  {
-  border-style: solid;
-  border-width: 1px;
-  border-radius: 5px;
-  padding: 5px;
   padding: 5px;
   padding-left: 15px;
 }
@@ -25,7 +45,7 @@ div[data-gadget-url$="gadget_erp5_page_project_front_page.html"] a {
   text-decoration: none;
 }
 
-div[data-gadget-url$="gadget_erp5_page_project_front_page.html"] .left a {
+div[data-gadget-url$="gadget_erp5_page_project_front_page.html"] .project-left a {
   color: #111;
   text-decoration: none;
 }
@@ -34,14 +54,18 @@ div[data-gadget-url$="gadget_erp5_page_project_front_page.html"] .front-project-
   display: inline-flex;
 }
 
-div[data-gadget-url$="gadget_erp5_page_project_front_page.html"] .front-project-list .project-box .project-info .left  {
+div[data-gadget-url$="gadget_erp5_page_project_front_page.html"] .front-project-list .project-box .project-info .project-left  {
   width: 100%;
 }
 
+div[data-gadget-url$="gadget_erp5_page_project_front_page.html"] .front-project-list .project-box .project-info .project-right  {
+  min-width: 66px;
+}
+
 div[data-gadget-url$="gadget_erp5_page_project_front_page.html"] .front-project-list .project-box .project-line  {
   margin-bottom: 5px;
   font-family: "Roboto", Arial, sans-serif;
-  font-size: 1.25em;
+  font-size: 11pt;
   line-height: 1.58em;
   letter-spacing: -.003em;
 }
@@ -57,10 +81,10 @@ div[data-gadget-url$="gadget_erp5_page_project_front_page.html"] .front-project-
 div[data-gadget-url$="gadget_erp5_page_project_front_page.html"] .front-project-list .project-box .project-title  {
   color: #19535F;
   font-weight: normal;
-  font-size: 24px;
+  font-size: 20px;
   line-height: 33px;
   font-weight: bold;
-  margin-bottom: 5px;
+  margin-bottom: 8px;
 }
 
 div[data-gadget-url$="gadget_erp5_page_project_front_page.html"] .front-project-list .project-box span.margined  {

bt5/erp5_web_project_ui/PathTemplateItem/web_page_module/project_gadget_page_project_css.xml

@@ -242,7 +242,7 @@
                   </item>
                   <item>
                       <key> <string>serial</string> </key>
-                      <value> <string>982.28724.7791.17220</string> </value>
+                      <value> <string>982.32516.14143.33843</string> </value>
                   </item>
                   <item>
                       <key> <string>state</string> </key>
@@ -260,7 +260,7 @@
                           </tuple>
                           <state>
                             <tuple>
-                              <float>1583922997.83</float>
+                              <float>1584100274.69</float>
                               <string>UTC</string>
                             </tuple>
                           </state>

bt5/erp5_web_project_ui/PathTemplateItem/web_page_module/project_gadget_page_project_front_page_js.js

@@ -337,7 +337,8 @@
       project_link.innerHTML = project_title;
       title_div.appendChild(project_link);
       info_div.classList.add("project-info");
-      left_info_div.classList.add("left");
+      left_info_div.classList.add("project-left");
+      right_div.classList.add("project-right");
       right_line_div.classList.add("project-line");
       forum_link.setAttribute("id", getProjectHtlmElementId(project_id, FORUM_LINK_TYPE,
                                                             FORUM_LINK_ID_SUFFIX));

bt5/erp5_web_project_ui/PathTemplateItem/web_page_module/project_gadget_page_project_front_page_js.xml

@@ -234,7 +234,7 @@
                   </item>
                   <item>
                       <key> <string>serial</string> </key>
-                      <value> <string>982.29590.9365.35601</string> </value>
+                      <value> <string>982.32514.48282.8072</string> </value>
                   </item>
                   <item>
                       <key> <string>state</string> </key>
@@ -252,7 +252,7 @@
                           </tuple>
                           <state>
                             <tuple>
-                              <float>1583924710.12</float>
+                              <float>1584100120.35</float>
                               <string>UTC</string>
                             </tuple>
                           </state>