IDEMPIERE-4161 Application Home Refinements. Fix cut-off text. Clean up css. Switch to flex layout and center the grids.

org.adempiere.server/resources/templates/black/styles/template.css

@@ -73,24 +73,39 @@ div.body{
 	top:262px;
 }
 
+.main-content{
+	position: relative;
+	height: 550px;
+}
+#main-docuBtns {
+  display: flex;
+  justify-content: center;
+}
 #main-docuBtns ul {
   margin:0;
   padding:28px;
-  overflow:hidden;
+  display: flex;
-  list-style:none;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-content: center;
+  align-items: flex-start;
+  justify-content: flex-start;
+  height: 450px;
+  width: 700px;
 }
 #main-docuBtns ul li {
-  display: inline-block;
+  display: inline-flex;
+  flex-direction: column;
   height:120px;
-  width:120px;
+  width:130px;
-  padding:18px 0;
+  padding: 9px 0;
   text-align:center;
   background-color: #111;
-  margin: 2px;
+  margin: 5px;
 }
 #main-docuBtns ul li > a {
 	width: 100%;
-	height: 95%;
+	flex-grow: 1;
 	display: inline-block;
 }
 #main-docuBtns ul li > a > img {
@@ -102,6 +117,7 @@ div.body{
 	padding-top:2px;
 	padding-bottom:2px;
 	color: #fff;
+	flex-grow: 0;
 }
 #main-requestBtns-btnLogin{
 	overflow: hidden;
@@ -237,23 +253,7 @@ div.body{
  	filter:alpha(opacity=100);
  	opacity: 1;
 }
-.btnDocu-content{
-	position: relative;
-}
 
-.btnResoc-content{
-	position: relative;
-}
-
-.main-content{
-	position: relative;
-	height: 550px;
-}
-#main-rssContent{
-	position: absolute;
-    right: 50px;
-    top: 50px;
-}
 #credits{
 	font-size: 70%;	
 }
@@ -288,52 +288,3 @@ div.body{
 	filter:alpha(opacity=100);
  	opacity: 1;
 }
-
-/** RSS FEED **/
-.labelfield{ 
-	color:gray; 
-	font-size: 50%; }
-.datefield{ 
-	color:gray; 
-	font-size: 80%;}
-#rssfeeds a{ 
-	color: #336699;
-	text-decoration: none;
-	font-weight: bold;
-	font-size: 90%;
-}
-#rssfeeds p{ 
-	margin-bottom: 2px;
-	text-decoration: none;
-	font-size: 90%;
-}
-code{ 
-	color: red;
-}
-#blogoolafeed, #blogoolafeed a { 
-					color:white; 
-				}
-#blogoolafeed a:hover{ 
-				color:#8E7BD3; 
-			}
-#blogoolafeed ul { 
-	margin-left:-15px 
-}
-#rssfeed-wrap:hover {
-	opacity: 0.9;
-	filter:alpha(opacity=90);
-}
-#rssfeed-wrap {
-	font-size: 80%;
-	background-color: #CCCCCC;
-    border-radius: 15px;
-    color: #000000;
-    height: 340px;
-    opacity: 0.3;
-    overflow: scroll;
-    padding: 10px;
-    text-align: left;
-    width: 300px;
-    filter:alpha(opacity=30); 
-    -moz-border-radius: 15px;
-}

org.adempiere.server/resources/templates/white/styles/template.css

@@ -67,31 +67,35 @@ div.body{
 	position: relative;
 	height: 550px;
 }
-.btnDocu-content{
+#main-docuBtns {
-	position: relative;
+  display: flex;
+  justify-content: center;
 }
-.btnResoc-content{
-	position: relative;
-}
-
 #main-docuBtns ul {
-  margin:0;
+  margin: 0px auto;
   padding:28px;
-  overflow:hidden;
+  display: flex;
-  list-style:none;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-content: center;
+  align-items: flex-start;
+  justify-content: flex-start;
+  height: 450px;
+  width: 700px;
 }
 #main-docuBtns ul li {
-  display: inline-block;
+  display: inline-flex;
-  height:110px;
+  flex-direction: column;
-  width:120px;
+  height:120px;
-  padding:18px 0;
+  width:130px;
+  padding: 9px 0;
   text-align:center;
   background-color: #fff;
-  margin: 2px;
+  margin: 5px;
 }
 #main-docuBtns ul li > a {
 	width: 100%;
-	height: 95%;
+	flex-grow: 1;
 	display: inline-block;
 }
 #main-docuBtns ul li > a > img {
@@ -103,6 +107,7 @@ div.body{
 	padding-top:2px;
 	padding-bottom:2px;
 	color: #333;
+	flex-grow: 0;
 }
 #main-requestBtns-btnLogin{
 	overflow: hidden;
@@ -239,11 +244,6 @@ div.body{
  	opacity: 1;
 }
 
-#main-rssContent{
-	height: 320px;
-	padding-left: 25px;
-    padding-top: 25px;
-}
 #credits{
 	font-size: 70%;	
 }
@@ -262,52 +262,9 @@ div.body{
 #socialBar img{
 	filter:alpha(opacity=80);
  	opacity: 0.8;
+ 	filter: invert(40%);
 }
 #socialBar img:hover{
 	filter:alpha(opacity=100);
  	opacity: 1;
 }
-
-/** RSS FEED **/
-.labelfield{ 
-	color:gray; 
-	font-size: 50%; }
-.datefield{ 
-	color:gray; 
-	font-size: 80%;}
-#rssfeeds a{ 
-	color: #336699;
-	text-decoration: none;
-	font-weight: bold;
-	font-size: 90%;
-}
-#rssfeeds p{ 
-	margin-bottom: 2px;
-	text-decoration: none;
-	font-size: 90%;
-}
-code{ 
-	color: red;
-}
-#blogoolafeed, #blogoolafeed a { 
-					color:white; 
-				}
-#blogoolafeed a:hover{ 
-				color:#8E7BD3; 
-			}
-#blogoolafeed ul { 
-	margin-left:-15px 
-}
-#rssfeed-wrap {
-	font-size: 80%;
-	height: 300px;
-    overflow: scroll;
-    text-align: left;
-    width: 280px;
-    background-color:white; 
-    filter:alpha(opacity=90); 
-    opacity:.9;
-    -moz-border-radius: 15px;
-	border-radius: 15px;
-	padding: 10px;
-}