GTNPORTAL-3065: update the responsive portlets to better handle RTL l…

…anguages GTNPORTAL-3074: update the responsive portlets to work better with the classic skin
gatein · May 29, 2013 · e2124dd · e2124dd
1 parent 4baf8ac
commit e2124dd
Show file tree

Hide file tree

Showing 18 changed files with 206 additions and 76 deletions.
diff --git a/mobile-integration/portlets/banner/src/main/webapp/WEB-INF/gatein-resources.xml b/mobile-integration/portlets/banner/src/main/webapp/WEB-INF/gatein-resources.xml
@@ -14,7 +14,7 @@
         <application-name>responsive-banner-portlet</application-name>
         <portlet-name>ResponsiveBannerPortlet</portlet-name>
         <skin-name>Default</skin-name>
-        <css-path>/css/ResponsiveStylesheet.css</css-path>
+        <css-path>/css/DefaultStylesheet.css</css-path>
     </portlet-skin>
 
 </gatein-resources>
diff --git a/mobile-integration/portlets/banner/src/main/webapp/css/DefaultStylesheet.css b/mobile-integration/portlets/banner/src/main/webapp/css/DefaultStylesheet.css
@@ -0,0 +1,10 @@
+@import url(ResponsiveStylesheet.css);
+
+.gtnResponsiveBannerPortlet {
+  margin: 0;
+  border-radius: 0;
+}
+
+.gtnResponsiveBannerPortletShadow {
+  margin: 0;
+}
diff --git a/mobile-integration/portlets/banner/src/main/webapp/css/ResponsiveStylesheet.css b/mobile-integration/portlets/banner/src/main/webapp/css/ResponsiveStylesheet.css
@@ -2,7 +2,8 @@
     background-color: #003971;
     background-image: url(../images/banner-masthead-bg.jpg);
     background-repeat: repeat-x;
-    background-position: left center;
+    background-position: right center; /* orientation=rt */
+    background-position: left center; /* orientation=lt */
     border-radius: 0.625em 0.625em 0 0;
     text-align: center;
     margin: -0.25em -0.25em 0 -0.25em; /* To cover up the white area*/

diff --git a/mobile-integration/portlets/community/src/main/webapp/WEB-INF/gatein-resources.xml b/mobile-integration/portlets/community/src/main/webapp/WEB-INF/gatein-resources.xml
@@ -15,7 +15,7 @@
         <application-name>responsive-community-portlet</application-name>
         <portlet-name>ResponsiveCommunityPortlet</portlet-name>
         <skin-name>Default</skin-name>
-        <css-path>/css/ResponsiveStylesheet.css</css-path>
+        <css-path>/css/DefaultStylesheet.css</css-path>
     </portlet-skin>
 
     <module>

diff --git a/mobile-integration/portlets/community/src/main/webapp/css/DefaultStylesheet.css b/mobile-integration/portlets/community/src/main/webapp/css/DefaultStylesheet.css
@@ -0,0 +1,32 @@
+@import url(ResponsiveStylesheet.css);
+
+.gtnResponsiveCommunityPortlet {
+  padding-top: 1em;
+  padding-bottom: 1em;
+}
+
+.gtnResponsiveCommunityPortlet p {
+  font-size: 12px;
+}
+
+.gtnResponsiveCommunityPortlet #conversation #tweets-content-mobile .info span,
+.gtnResponsiveCommunityPortlet #conversation .info > span + span,
+.gtnResponsiveCommunityPortlet #conversation .info a {
+  font-size: 11px;
+}
+
+.gtnResponsiveCommunityPortlet #documentation h4 {
+  font-size: 13px;
+}
+
+.gtnResponsiveCommunityPortlet #documentation p,
+.gtnResponsiveCommunityPortlet #conversation .accordion-body > a,
+.gtnResponsiveCommunityPortlet #conversation h6,
+.gtnResponsiveCommunityPortlet #conversation .accordion-toggle {
+  font-size: 12px;
+}
+
+.gtnResponsiveCommunityPortlet #documentation i {
+  width: 73px;
+  height: 57px;
+}
diff --git a/mobile-integration/portlets/community/src/main/webapp/css/ResponsiveStylesheet.css b/mobile-integration/portlets/community/src/main/webapp/css/ResponsiveStylesheet.css
@@ -4,8 +4,10 @@
 
 .gtnResponsiveCommunityPortlet #willing,
 .gtnResponsiveCommunityPortlet #documentation {
-    float: left;
-    margin-left: 2.5641%;
+    float: right; /* orientation=rt */
+    float: left; /* orientation=lt */
+    margin-right: 2.5641%; /* orientation=rt */
+    margin-left: 2.5641%; /* orientation=lt */
     width: 46.1538%;
 }
 
@@ -24,10 +26,10 @@
     background-color: #F5F5F5;
     background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#e6e6e6)); /* Chrome, Safari 4+ */
     background-image: -webkit-linear-gradient(top, #fff, #e6e6e6); /* Chrome 10-25, iOS 5+, Safari 5.1+ */
-    background-image:    -moz-linear-gradient(top, #fff, #e6e6e6); /* Firefox 3.6-15 */
-    background-image:     -ms-linear-gradient(top, #fff, #e6e6e6); /* IE 10+ */
-    background-image:      -o-linear-gradient(top, #fff, #e6e6e6); /* Opera 11.10-12.00 */
-    background-image:         linear-gradient(to bottom, #fff, #e6e6e6); /* Chrome 26, Firefox 16+, IE 10+, Opera 12.10+ */
+    background-image: -moz-linear-gradient(top, #fff, #e6e6e6); /* Firefox 3.6-15 */
+    background-image: -ms-linear-gradient(top, #fff, #e6e6e6); /* IE 10+ */
+    background-image: -o-linear-gradient(top, #fff, #e6e6e6); /* Opera 11.10-12.00 */
+    background-image: linear-gradient(to bottom, #fff, #e6e6e6); /* Chrome 26, Firefox 16+, IE 10+, Opera 12.10+ */
     background-position: center top;
     background-repeat: repeat-x;
     border-radius: 0.25em;
@@ -71,11 +73,14 @@
 }
 
 .gtnResponsiveCommunityPortlet #documentation i {
-    background: url(../images/welcome-book.png) no-repeat left top;
+    background: url(../images/welcome-book.png) no-repeat right top; /* orientation=rt */
+    background: url(../images/welcome-book.png) no-repeat left top; /* orientation=lt */
     display: block;
-    float: left;
+    float: right; /* orientation=rt */
+    float: left; /* orientation=lt */
     height: 3.5625em;
-    margin-right: 0.9375em;
+    margin-left: 0.9375em; /* orientation=rt */
+    margin-right: 0.9375em; /* orientation=lt */
     margin-top: 0.125em;
     width: 4.5625em;
 }
@@ -85,7 +90,8 @@
     font-size: 1.25em;
     margin-bottom: 0.5em;
     text-shadow: 0 0.125em 0 #fff;
-    margin-left: 4.4em;
+    margin-right: 4.4em; /* orientation=rt */
+    margin-left: 4.4em; /* orientation=lt */
 }
 
 .gtnResponsiveCommunityPortlet #documentation p {
@@ -95,14 +101,16 @@
     text-shadow: 0 .0666em 0 #FFFFFF;
     font-size: 0.9375em;
     margin-top: 0;
-    margin-left: 6.28571428571429em;
+    margin-right: 6.28571428571429em; /* orientation=rt */
+    margin-left: 6.28571428571429em; /* orientation=lt */
 }
 
 
 /* Conversation */
 
 .gtnResponsiveCommunityPortlet #conversation {
-    float: right;
+    float: left; /* orientation=rt */
+    float: right; /* orientation=lt */;
     margin-left: 2.5641%;
     margin-right: 2.5641%;
     width: 46.1538%;
@@ -125,7 +133,8 @@
 }
 
 .gtnResponsiveCommunityPortlet #conversation .accordion-toggle i {
-    margin-right: 0.35714em;
+    margin-left: 0.35714em; /* orientation=rt */
+    margin-right: 0.35714em; /* orientation=lt */
     width: 1.14285714285714em;
     height: 1.14285714285714em;
     vertical-align: middle;
@@ -182,13 +191,15 @@
 
 .gtnResponsiveCommunityPortlet #conversation .info > span + span {
     font-size: 0.75em;
-    margin-left: 0.25em;
+    margin-right: 0.25em; /* orientation=rt */
+    margin-left: 0.25em; /* orientation=lt */
     color:#999;
 }
 
 .gtnResponsiveCommunityPortlet #conversation .info > span + span:before {
     content: "·";
-    margin-right: 0.25em;
+    margin-left: 0.25em; /* orientation=rt */
+    margin-right: 0.25em; /* orientation=lt */
 }
 
 .gtnResponsiveCommunityPortlet #conversation #tweets-content-mobile .info span {
@@ -197,7 +208,8 @@
 }
 
 .gtnResponsiveCommunityPortlet #conversation .accordion-body > a {
-    float: right;
+    float: left; /* orientation=rt */
+    float: right; /* orientation=lt */
     font-size: .8125em;
     margin-bottom: 0.38461em;
     line-height: 1.53846153846154em;
@@ -231,7 +243,8 @@
     .gtnResponsiveCommunityPortlet #documentation {width: 57.6923%;}
 
     .gtnResponsiveCommunityPortlet #conversation {
-        margin-left: 4.70085%;
+        margin-right: 4.70085%; /* orientation=rt */
+        margin-left: 4.70085%; /* orientation=lt */
         width: 29.0598%;
     }
 
@@ -274,4 +287,4 @@
     text-indent: -9999px;
     display: block;
     float: none;
-}
+}
diff --git a/mobile-integration/portlets/features/src/main/webapp/WEB-INF/gatein-resources.xml b/mobile-integration/portlets/features/src/main/webapp/WEB-INF/gatein-resources.xml
@@ -14,7 +14,7 @@
         <application-name>responsive-features-portlet</application-name>
         <portlet-name>ResponsiveFeaturesPortlet</portlet-name>
         <skin-name>Default</skin-name>
-        <css-path>/css/ResponsiveStylesheet.css</css-path>
+        <css-path>/css/DefaultStylesheet.css</css-path>
     </portlet-skin>
 
 </gatein-resources>
diff --git a/mobile-integration/portlets/features/src/main/webapp/css/DefaultStylesheet.css b/mobile-integration/portlets/features/src/main/webapp/css/DefaultStylesheet.css
@@ -0,0 +1,13 @@
+@import url(ResponsiveStylesheet.css);
+
+.gtnResponsiveFeaturesPortlet p {
+  font-size: 12px;
+}
+
+.gtnResponsiveFeaturesPortlet h2 {
+  font-size: 14px;
+}
+
+.gtnResponsiveFeaturesPortlet .footer a {
+  font-size: 12px;
+}
diff --git a/mobile-integration/portlets/features/src/main/webapp/css/ResponsiveStylesheet.css b/mobile-integration/portlets/features/src/main/webapp/css/ResponsiveStylesheet.css
@@ -21,11 +21,6 @@
     margin: 0 1.8018% 0;
 }
 
-.gtnResponsiveFeaturesPortlet .feature:nth-child(2) {
-    margin-left: 3.15315%;
-    margin-right: 3.15315%;
-}
-
 /*Creates a new row after 3 features are displayed on a page*/
 .gtnResponsiveFeaturesPortlet .features div:nth-of-type(4) {clear: both;}
 
@@ -36,15 +31,17 @@
     font-weight: normal;
     margin-bottom: 0.68181818181818em;
     margin-top: 0.63636363636364em;
-    text-align: left;
+    text-align: right; /* orientation=rt */
+    text-align: left;  /* orientation=lt */
 }
 
 .gtnResponsiveFeaturesPortlet p {
     color: #666666;
     font-size: 1em;
     line-height: 1.4em;
     margin-bottom: 0;
-    text-align: left;
+    text-align: right; /* orientation=rt */
+    text-align: left;  /* orientation=lt */
 }
 
 .gtnResponsiveFeaturesPortlet .footer {
@@ -93,7 +90,8 @@
     .gtnResponsiveFeaturesPortlet div.feature {
         float: none;
         width: 96.3964%;
-        clear: left;
+        clear: right; /* orientation=rt */
+        clear: left;  /* orientation=lt */
         margin-top: 1.5625em;
     }
 
@@ -107,7 +105,8 @@
     .gtnResponsiveFeaturesPortlet .feature img {
         float: right; /* orientation=rt */
         float: left; /* orientation=lt */
-        margin-right: 1.25em;
+        margin-left: 1.25em;  /* orientation=rt */
+        margin-right: 1.25em; /* orientation=lt */
         width: 12.5em;
     }
 

diff --git a/mobile-integration/portlets/footer/src/main/resources/locale/portlet/responsivefooter_ar.xml b/mobile-integration/portlets/footer/src/main/resources/locale/portlet/responsivefooter_ar.xml
@@ -1,6 +1,5 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <bundle>
     <alternativeSiteTitle>{siteName}</alternativeSiteTitle>
-    <copyrightText>&lt;a href="http://www.redhat.com"&gt;Red Hat, Inc&lt;/a&gt; and &lt;a
-        href="http://www.exoplatform.com/"&gt;eXo Platform SAS&lt;/a&gt; ,ﺞﻤﻴﻋ ﺎﻠﺤﻗﻮﻗ ﻢﺤﻓﻮﻇﺓ © 2009-2012. ﺞﻤﻴﻋ ﺎﻠﺤﻗﻮﻗ ﻢﺤﻓﻮﻇﺓ</copyrightText>
+    <copyrightText>&lt;a href="http://www.redhat.com"&gt;Red Hat, Inc&lt;/a&gt; and &lt;a href="http://www.exoplatform.com/"&gt;eXo Platform SAS&lt;/a&gt; ,ﺞﻤﻴﻋ ﺎﻠﺤﻗﻮﻗ ﻢﺤﻓﻮﻇﺓ © 2009-2012. ﺞﻤﻴﻋ ﺎﻠﺤﻗﻮﻗ ﻢﺤﻓﻮﻇﺓ</copyrightText>
 </bundle>
diff --git a/mobile-integration/portlets/footer/src/main/webapp/css/ClassicStylesheet.css b/mobile-integration/portlets/footer/src/main/webapp/css/ClassicStylesheet.css
@@ -24,4 +24,9 @@
 
 .gtnResponsiveFooterPortlet {
     background-color: #DEDFDF;
-}
+}
+
+.gtnResponsiveFooterPortlet .copyright p,
+.gtnResponsiveFooterPortlet ul li{
+    font-size: 12px;
+}
diff --git a/mobile-integration/portlets/footer/src/main/webapp/css/ResponsiveStylesheet.css b/mobile-integration/portlets/footer/src/main/webapp/css/ResponsiveStylesheet.css
@@ -8,16 +8,19 @@
 .gtnResponsiveFooterPortlet .options {
     float: left; /* orientation=rt */
     float: right; /* orientation=lt */
-    padding-right: 2.5641%;
+    padding-left: 2.5641%;   /* orientation=rt */
+    padding-right: 2.5641%; /* orientation=lt */
 }
 
 .gtnResponsiveFooterPortlet .copyright {
     float: right; /* orientation=rt */
     float: left; /* orientation=lt */
     text-align: center;
     max-width: 100%;
-    padding: 0.75em 1em 0.75em 2.5641%;
-    margin-left: 0.3125em;
+    padding: 0.75em 2.5641% 0.75em 1em; /* orientation=rt */
+    padding: 0.75em 1em 0.75em 2.5641%; /* orientation=lt */
+    margin-right: 0.3125em; /* orientation=rt */
+    margin-left: 0.3125em;  /* orientation=lt */
 }
 
 .gtnResponsiveFooterPortlet .collapsibleRow {
@@ -48,7 +51,8 @@
 
 .gtnResponsiveFooterPortlet ul li {
     display: inline;
-    padding: 1.33333333333333em 0.5em 1.33333333333333em 0.91666666666667em;
+    padding: 1.33333333333333em 0.91666666666667em 1.33333333333333em 0.5em; /* orientation=rt */
+    padding: 1.33333333333333em 0.5em 1.33333333333333em 0.91666666666667em; /* orientation=lt */
     background: url(../images/bullet-separator.png) no-repeat right center; /* orientation=rt */
     background: url(../images/bullet-separator.png) no-repeat left center; /* orientation=lt */
     font-size: 0.75em;
@@ -78,4 +82,4 @@
     float: none;
     clear: both;
     padding-top: 0;
-}
+}
diff --git a/mobile-integration/portlets/header/src/main/webapp/WEB-INF/gatein-resources.xml b/mobile-integration/portlets/header/src/main/webapp/WEB-INF/gatein-resources.xml
@@ -52,7 +52,7 @@
         <application-name>responsive-header-portlet</application-name>
         <portlet-name>ResponsiveHeaderPortlet</portlet-name>
         <skin-name>Default</skin-name>
-        <css-path>/css/ResponsiveStylesheet.css</css-path>
+        <css-path>/css/DefaultStylesheet.css</css-path>
     </portlet-skin>
 
 

diff --git a/mobile-integration/portlets/header/src/main/webapp/css/DefaultStylesheet.css b/mobile-integration/portlets/header/src/main/webapp/css/DefaultStylesheet.css
@@ -0,0 +1,5 @@
+@import url(ResponsiveStylesheet.css);
+
+.gtnResponsiveHeaderPortlet .options a {
+  font-size: 12px;
+}