Merge pull request #163 from plone/structural-fixes

Structural fixes

CHANGES.rst

@@ -7,11 +7,13 @@ Changelog
 
 Breaking changes:
 
-- *add item here*
+- Re-ordering of content columns: Have content container before column1 before column2.
+  [tmassman]
 
 New features:
 
-- *add item here*
+- Additional footer portlets show in a doormat footer.
+  [tmassman]
 
 Bug fixes:
 

Gruntfile.js

@@ -62,6 +62,7 @@ module.exports = function (grunt) {
     grunt.loadNpmTasks('grunt-browser-sync');
     grunt.loadNpmTasks('grunt-contrib-watch');
     grunt.loadNpmTasks('grunt-contrib-less');
+    grunt.registerTask('compile', ['less']);
     grunt.registerTask('default', ['watch']);
     grunt.registerTask('bsync', ["browserSync:html", "watch"]);
     grunt.registerTask('plone-bsync', ["browserSync:plone", "watch"]);

plonetheme/barceloneta/theme/index.html

@@ -48,17 +48,22 @@
           <aside id="global_statusmessage"></aside>
         </div>
         <main id="main-container" class="row row-offcanvas row-offcanvas-right">
-          <div id="column1-container">
-          </div>
           <div id="content-container">
           </div>
+          <div id="column1-container">
+          </div>
           <div id="column2-container">
           </div>
         </main><!--/row-->
       </div><!--/container-->
     </div> <!--/outer-wrapper -->
-    <footer id="portal-footer-wrapper">
-      <div class="container" id="portal-footer"></div>
-    </footer>
+      <footer id="portal-footer-wrapper">
+        <div class="container" id="portal-footer">
+          <div class="doormat row"></div>
+          <div class="copyright row"><div class="col-xs-12"></div></div>
+          <div class="colophon row"><div class="col-xs-12"></div></div>
+          <div class="site-actions row"><div class="col-xs-12"></div></div>
+        </div>
+      </footer>
   </body>
 </html>

plonetheme/barceloneta/theme/less/footer.plone.less

@@ -1,15 +1,21 @@
 //*// FOOTER //*//
 
 #portal-footer-wrapper {
-  padding: 30px 15px;
+  padding: 30px 0 30px 0;
   background-color: @plone-footer-bg;
   color: @plone-gray-lighter;
-  text-align: center;
   clear: both;
+
   p {
-    border-bottom: 1px solid @plone-gray-lighter;
-    padding-bottom: 28px;
+    border: none;
+    margin-bottom: 14px;
+    padding-bottom: 0;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
   }
+
   abbr, ul {
     color: @plone-gray-lighter;
   }
@@ -63,6 +69,48 @@
   }
 }
 
+
+#portal-footer {
+  font-weight: 400;
+
+  > .row {
+    margin-top: 14px;
+    padding-top: 14px;
+
+    &:first-child {
+      padding-top: 0;
+      margin-top: 0;
+    }
+  }
+
+  .colophon,
+  .copyright,
+  .site-actions {
+    text-align: center;
+  }
+
+  .row + .site-actions {
+    border-top: 1px solid #4d4d4d;
+  }
+
+  .site-actions {
+    ul {
+      list-style: none;
+      margin: 0;
+      padding: 0;
+
+      li {
+        display: inline-block;
+        padding: 10px 30px;
+      }
+    }
+    padding-top: 0;
+    padding-bottom: 0;
+    margin-bottom: 0;
+  }
+}
+
+
 #portal-siteactions {
   display: inline-block;
   text-transform: uppercase;
@@ -76,3 +124,13 @@
     margin-left: 0;
   }
 }
+
+.doormat {
+  h2 {
+    margin-top: 10px;
+  }
+
+  > div {
+    margin-bottom: 10px;
+  }
+}

plonetheme/barceloneta/theme/rules.xml

@@ -45,10 +45,10 @@
   <replace css:theme="#content-container" method="raw">
 
     <xsl:variable name="central">
-      <xsl:if test="//aside[@id='portal-column-one'] and //aside[@id='portal-column-two']">col-xs-12 col-sm-6</xsl:if>
-      <xsl:if test="//aside[@id='portal-column-two'] and not(//aside[@id='portal-column-one'])">col-xs-12 col-sm-9</xsl:if>
-      <xsl:if test="//aside[@id='portal-column-one'] and not(//aside[@id='portal-column-two'])">col-xs-12 col-sm-9</xsl:if>
-      <xsl:if test="not(//aside[@id='portal-column-one']) and not(//aside[@id='portal-column-two'])">col-xs-12 col-sm-12</xsl:if>
+      <xsl:if test="//aside[@id='portal-column-one'] and //aside[@id='portal-column-two']">col-xs-12 col-sm-12 col-md-6 col-md-push-3</xsl:if>
+      <xsl:if test="//aside[@id='portal-column-two'] and not(//aside[@id='portal-column-one'])">col-xs-12 col-sm-12 col-md-9</xsl:if>
+      <xsl:if test="//aside[@id='portal-column-one'] and not(//aside[@id='portal-column-two'])">col-xs-12 col-sm-12 col-md-9 col-md-push-3</xsl:if>
+      <xsl:if test="not(//aside[@id='portal-column-one']) and not(//aside[@id='portal-column-two'])">col-xs-12 col-sm-12 col-md-12</xsl:if>
     </xsl:variable>
 
     <div class="{$central}">
@@ -71,7 +71,11 @@
   <!-- Left column -->
   <rules css:if-content="#portal-column-one">
     <replace css:theme="#column1-container">
-      <div class="col-xs-6 col-sm-3 sidebar-offcanvas">
+      <xsl:variable name="columnone">
+        <xsl:if test="//aside[@id='portal-column-two']">col-xs-12 col-sm-6 col-md-3 col-md-pull-6</xsl:if>
+        <xsl:if test="//aside[@id='portal-column-one'] and not(//aside[@id='portal-column-two'])">col-xs-12 col-sm-12 col-md-3 col-md-pull-9</xsl:if>
+      </xsl:variable>
+      <div class="{$columnone} sidebar-offcanvas">
         <aside id="portal-column-one">
           <xsl:copy-of css:select="#portal-column-one > *" />
         </aside>
@@ -82,7 +86,11 @@
   <!-- Right column -->
   <rules css:if-content="#portal-column-two">
     <replace css:theme="#column2-container">
-      <div class="col-xs-6 col-sm-3 sidebar-offcanvas" role="complementary">
+      <xsl:variable name="columntwo">
+        <xsl:if test="//aside[@id='portal-column-one']">col-xs-12 col-sm-6 col-md-3</xsl:if>
+        <xsl:if test="//aside[@id='portal-column-two'] and not(//aside[@id='portal-column-one'])">col-xs-12 col-sm-12 col-md-3</xsl:if>
+      </xsl:variable>
+      <div class="{$columntwo} sidebar-offcanvas" role="complementary">
         <aside id="portal-column-two">
           <xsl:copy-of css:select="#portal-column-two > *" />
         </aside>
@@ -94,7 +102,81 @@
   <replace css:theme="#portal-top" css:content-children="#portal-top" />
 
   <!-- Footer -->
-  <replace css:theme-children="#portal-footer" css:content-children="#portal-footer-wrapper" />
+  <xsl:variable name="footer_portlets" select="//footer[@id='portal-footer-wrapper']//div[@class='portletWrapper']/*[not(contains(@id,'portal-colophon')) and not(contains(@id,'portal-footer-signature')) and not(contains(@class,'portletActions'))]"></xsl:variable>
+  <xsl:variable name="footer_portlets_count" select="count($footer_portlets)"></xsl:variable>
+
+
+  <!-- Replace footer information with Plone version. -->
+  <replace
+      css:theme-children="#portal-footer .copyright > div"
+      css:content-children="#portal-footer-wrapper #portal-footer-signature .portletContent"
+      />
+
+  <!-- Replace colophon information with Plone version. -->
+  <replace
+      css:theme-children="#portal-footer .colophon > div"
+      css:content-children="#portal-footer-wrapper #portal-colophon .portletContent"
+      />
+
+  <!-- Replace site-actions with Plone version. -->
+  <replace
+      css:theme-children="#portal-footer .site-actions > div"
+      css:content="#portal-footer-wrapper .actions-site_actions"
+      />
+  <drop css:theme="#portal-footer .site-actions" css:if-not-content="#portal-footer-wrapper .actions-site_actions" />
+
+  <!-- Move all other footer portlets into doormat area. -->
+  <replace css:theme-children="#portal-footer .doormat">
+    <xsl:variable name="columns">
+      <xsl:if test="$footer_portlets_count=1">col-md-12</xsl:if>
+      <xsl:if test="$footer_portlets_count=2">col-md-6</xsl:if>
+      <xsl:if test="$footer_portlets_count=3">col-md-4</xsl:if>
+      <xsl:if test="$footer_portlets_count=4">col-md-3</xsl:if>
+      <xsl:if test="$footer_portlets_count>4">col-md-4</xsl:if>
+    </xsl:variable>
+    <xsl:for-each select="$footer_portlets">
+      <div class="col-xs-12 {$columns}">
+        <xsl:for-each select=".">
+          <xsl:choose>
+            <xsl:when css:test=".portlet">
+              <xsl:choose>
+                <xsl:when css:test=".portletHeader:not(.titleless)">
+                  <div class="headline"><h2><xsl:value-of css:select=".portletHeader" /></h2></div>
+                </xsl:when>
+              </xsl:choose>
+              <xsl:choose>
+                <xsl:when css:test=".portletCollection">
+                  <ul>
+                    <xsl:for-each css:select=".portletItem">
+                      <li>
+                        <a><xsl:copy-of select="a/attribute::*" /><xsl:apply-templates select="./a/text()" /></a>
+                        <small><xsl:value-of css:select=".portletItemDetails" /></small>
+                      </li>
+                    </xsl:for-each>
+                  </ul>
+                </xsl:when>
+                <xsl:otherwise>
+                  <xsl:apply-templates css:select=".portletContent" />
+                </xsl:otherwise>
+              </xsl:choose>
+              <xsl:if css:test=".portletFooter">
+                <p><xsl:apply-templates select="./node()[@class='portletFooter']/node()" /></p>
+              </xsl:if>
+            </xsl:when>
+            <xsl:otherwise>
+              <xsl:apply-templates select="./node()" />
+            </xsl:otherwise>
+          </xsl:choose>
+        </xsl:for-each>
+      </div>
+    </xsl:for-each>
+  </replace>
+
+  <!-- Add additional footer content, like script tags (from site settings). -->
+  <after
+      css:theme-children="html body"
+      content="//footer[@id='portal-footer-wrapper']/*[not(@class='row')]"
+      />
 
   <!-- toolbar -->
   <replace css:theme="#portal-toolbar" css:content="#edit-bar" css:if-not-content=".ajax_load" css:if-content=".userrole-authenticated" />