Updates the right column of the news and front page (#651)

Adds the following things to the right column:

- Follow buttons
- Supporter block
- Press block

On mobile it shows the follow buttons at the top.

Closes #623
Closes #624
Closes #627

fsfe.xsl

@@ -40,5 +40,11 @@
       <xsl:with-param name="nb-items" select="4"/>
     </xsl:call-template>
   </xsl:template>
+  
+  <!-- Static elements which can be included everywhere -->
+  <xsl:template match="static-element">
+    <xsl:variable name="id"><xsl:value-of select="@id"/></xsl:variable>
+    <xsl:copy-of select="/buildinfo/document/set/element[@id=$id]" />
+  </xsl:template>
 
 </xsl:stylesheet>

index.en.xhtml

@@ -19,26 +19,24 @@
         <h2>
           <a href="/news/news.html"><news-label /></a>
           <a class="rss-feed" href="/news/news.rss" title="news RSS feed"><i class="fa fa-rss"></i></a>
-	  <a class="ical" href="https://mastodon.social/@fsfe" title="follow FSFE on Mastodon" rel="me"><i class="fa fa-comments-o"></i></a>
+	        <a class="ical" href="https://mastodon.social/@fsfe" title="follow FSFE on Mastodon" rel="me">
+            <i class="fa fa-comments-o"></i>
+          </a>
         </h2>
-
         <all-news />
+        <div class="more-news">
+          <a href="/news/news.html" class="learn-more">See all news</a>
+          <a href="https://planet.fsfe.org/en" class="learn-more community-blog-link">Read the Community blog</a>
+        </div>
       </div>
 
       <div id="newsletter" class="section">
-        <a class="big-donate" href="https://my.fsfe.org/support">Become a supporter</a>
-
-        <h2><a href="/news/newsletter.html"><newsletter-label /></a></h2>
-
-
-          <subscribe-nl />
-
-          <ul id="more-news-list">
-              <li><a href="/news/news.html" class="learn-more">See all news</a></li>
-              <li><a href="http://planet.fsfe.org/en" class="learn-more">Read FSFE blogs</a></li>
-          </ul>
-
-
+        <static-element id="video" />
+        <h2 class="home-newsletter-label">
+          <newsletter-label/>
+        </h2>
+        <subscribe-nl/>
+        Read <a href="/news/newsletter.html"> the archive</a>
       </div>
 
       <hr />
@@ -54,11 +52,19 @@
       </div>
 
       <div id="shop-promo" class="section">
-          <a href="/order/order.html?ref-frontpage"><img src="/graphics/tshirt-promo.jpg" alt="" /></a>
-
+        <div class="home-shop-block">
+          <a href="/order/order.html?ref-frontpage" class="home-order-image-container">
+            <img src="/graphics/t-shirt-promo-v2.png" alt="" class="home-order-image" />
+          </a>
           <a class="big-donate" href="/order/order.html?ref-frontpage">Shop</a>
+        </div>
+        <div class="home-shop-block">
+          <a href="/order/order.html?ref-frontpage" class="home-order-image-container">
+            <img src="/graphics/pr-material.png" alt="" class="home-order-image" />
+          </a>
+          <a class="big-donate" href="/order/order.html?ref-frontpage">Promotion material</a>
+        </div>
       </div>
-
     </div>
   </body>
 

index.sources

@@ -4,3 +4,4 @@ events/*/event:[front-page]
 tools/frontpage/:[]
 d_day:[]
 
+tools/static-elements/element-:[]

index.xsl

@@ -29,7 +29,7 @@
   <xsl:template match="all-news">
     <xsl:call-template name="fetch-news">
       <xsl:with-param name="tag">front-page</xsl:with-param>
-      <xsl:with-param name="nb-items" select="5" />
+      <xsl:with-param name="nb-items" select="4" />
       <xsl:with-param name="show-date" select="'yes'" />
       <!--TODO enable a "Read More" link with class "learn-more" at the end of newsteaser-->
     </xsl:call-template>

look/style.less

@@ -269,25 +269,30 @@ div#subpages, .grid-row {
 }
 
 
-/* the main and follow up sections */
+/* grid */
+.article, .planet {
+    #content, #planet-posts {
+        flex: 0 0 100%;
+        padding-left: 0;
+    }
+
+    #sidebar {
+        flex: 0 0 100%;
+        padding-right: 0;
+    }
+}
 
-    /* grid */
+@media (min-width: @screen-md-min) {
     .article, .planet {
         #content, #planet-posts {
-            .make-xs-column(12);
-            .make-md-column(8);
-            padding-left: 0;
+            flex: 1 0 66%;
         }
+
         #sidebar {
-            .make-xs-column(12);
-            .make-md-column(4);
-            padding-right: 0;
+            flex: 0 0 33%;
         }
     }
-
-    #content + #sidebar {
-        .article #sidebar;
-    }
+}
 
 #main, #followup {
     background: @body-bg;
@@ -1088,22 +1093,27 @@ a.learn-more {
     border-bottom: 1px dotted @brand-primary;
     font-variant: small-caps;
     text-transform: lowercase;
-}
-a.learn-more:hover {
-    text-decoration: none;
-    border-bottom-style: solid;
-}
-a.learn-more:after {
-    padding-left: 0.3em;
-    content: " ▸";
-    opacity: 0.8;
-    transition: padding-left 0.15s linear 0s, color 0.15s linear 0s, opacity 0.15s linear 0s;
-}
-a.learn-more:hover:after {
-    padding-left: 0.6em;
-    margin-right: -0.3em;
-    content: " ▸";
-    opacity: 1;
+    padding-right: 1em;
+    position: relative;
+
+    &:hover {
+        text-decoration: none;
+        border-bottom-style: solid;
+    }
+
+    &:after {
+        position: absolute;
+        right: .3em;
+        content: " ▸";
+        opacity: 0.8;
+        transition: all 150ms linear;
+    }
+
+    &:hover:after {
+        right: 0;
+        content: " ▸";
+        opacity: 1;
+    }
 }
 
 .social-link {
@@ -1117,8 +1127,12 @@ a.learn-more:hover:after {
     .btn-block;
     .btn-success;
     font-size: 1.4em;
-    margin-top: 2em;
 }
+
+.supporter-text {
+    margin-top: 5px;
+}
+
 .small-donate, .small.donate {
     .btn;
     .btn-sm;

news/news.en.xhtml

@@ -6,15 +6,83 @@
   </head>
 
   <body class="article" microformats="h-entry">
+  <div class="news-follow-us">
+    <div class="share-top-buttons-label">Follow us:</div>
+    <div class="share-buttons-top">
+      <a target="_blank" href="https://fsfe.org/news/newsletter">
+        <button class="share-button-top share-mail">Newsletter</button>
+      </a>
+      <a target="_blank" href="https://fsfe.org/news/news.en.rss">
+        <button class="share-button-top share-rss">RSS Feed</button>
+      </a>
+      <a target="_blank" href="https://mastodon.social/@fsfe">
+        <button class="share-button-top share-mastodon">Mastodon</button>
+      </a>
+      <a target="_blank" href="https://diasp.eu/u/fsfe">
+        <button class="share-button-top share-diaspora">Diaspora</button>
+      </a>
+      <a target="_blank" href="https://twitter.com/fsfe">
+        <button class="share-button-top share-twitter">Twitter</button>
+      </a>
+      <a target="_blank" href="https://facebook.com/thefsfe">
+        <button class="share-button-top share-facebook">Facebook</button>
+      </a>
+    </div>
+  </div>
+
     <h1 class="p-name">News</h1>
     <include-news/>
   </body>
 
   <sidebar promo="none">
-    <h2><i class="fa fa-rss"></i></h2>
-    <p>This page collects the regular news stories that FSFE publishes about its campaigns and activities. <br />Join the <a href="/press/index.html">press release mailing list</a> or subscribe to <a href="/news/news.rss">our RSS feed</a> to keep up-to-date on our activites. <a href="newsletter.html">Monthly newsletters</a> are also available.</p>
+    <div class="news-sidebar">
+      <h2>Follow our News</h2>
+
+      <p>
+        To keep up with our latest news, you can subscribe our <a href="/news/news.en.rss">RSS feed</a> and
+        our <a href="/news/newsletter">Newsletter</a>.
+      </p>
+
+      <div class="share-buttons-sidebar">
+        <a target="_blank" href="https://fsfe.org/news/newsletter">
+          <button class="share-button-sidebar share-mail">Newsletter</button>
+        </a>
+        <a target="_blank" href="https://fsfe.org/news/news.en.rss">
+          <button class="share-button-sidebar share-rss">RSS Feed</button>
+        </a>
+      </div>
+
+
+      <h2>Social Media</h2>
+
+      <p>
+        For instant updates and hot news you can also follow us on <a
+          href="https://mastodon.social/@fsfe">Mastodon</a>, <a href="https://diasp.eu/u/fsfe">Diaspora</a>, <a
+          href="https://twitter.com/fsfe">Twitter</a> and <a href="https://facebook.com/thefsfe">Facebook</a>.
+      </p>
+
+      <div class="share-buttons-sidebar">
+        <a target="_blank" href="https://mastodon.social/@fsfe">
+          <button class="share-button-sidebar share-mastodon">Mastodon</button>
+        </a>
+        <a target="_blank" href="https://diasp.eu/u/fsfe">
+          <button class="share-button-sidebar share-diaspora">Diaspora</button>
+        </a><br/>
+        <a target="_blank" href="https://twitter.com/fsfe">
+          <button class="share-button-sidebar share-twitter">Twitter</button>
+        </a>
+        <a target="_blank" href="https://facebook.com/thefsfe">
+          <button class="share-button-sidebar share-facebook">Facebook</button>
+        </a>
+      </div>
+
+      <hr/>
+
+      <static-element id="video" />
+
+    </div>
   </sidebar>
 
   <text id="more">Read more…</text>
   <timestamp>$Date$ $Author$</timestamp>
-</html>
+</html>

news/news.sources

@@ -1,3 +1,4 @@
 news/*/news:[]
 news/generated_xml/:[]
 news/nl/nl:[]
+tools/static-elements/element-:[]

tools/static-elements/element-supportervideo.en.xml

@@ -0,0 +1,26 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<elementset>
+  <element id="video">
+  <h2>Support the FSFE</h2>
+
+  <video
+      crossorigin="crossorigin"
+      poster="https://download.fsfe.org/videos/supporter/posters/cryptie.jpg"
+      controls="controls"
+      width="100%">
+    <source
+        media="screen and (max-device-width:999px)"
+        type="video/mp4; codecs=&quot;avc1.42E01E, mp4a.40.2&quot;"
+        src="https://download.fsfe.org/videos/supporter/cryptie_mobile.mp4"/>
+    <source
+        media="screen and (max-device-width:999px)"
+        type="video/webm; codecs=&quot;vp9, opus&quot;"
+        src="https://download.fsfe.org/videos/supporter/cryptie_mobile.webm"/>
+    <track default="default" label="English" srclang="en" kind="subtitles" src="https://download.fsfe.org/videos/supporter/subtitles/cryptie.vtt"/>
+  </video>
+  <p class="supporter-text">
+    By becoming a FSFE supporter you empower our work and help to assure our financial independence.
+  </p>
+    <a class="big-donate" href="https://my.fsfe.org/support">Become a supporter</a>
+  </element>
+</elementset>

tools/xsltsl/static-elements.xsl

@@ -54,20 +54,24 @@
     </xsl:variable>
 
     <form id="formnl" name="formnl" method="POST" action="//lists.fsfe.org/mailman/listinfo/newsletter-{$nl-lang}">
-      <p>
-        <select id="language" name="language" onchange="var form = document.getElementById('formnl'); var sel=document.getElementById('language'); form.action='//lists.fsfe.org/mailman/listinfo/newsletter-'+sel.options[sel.options.selectedIndex].value">
-	  <xsl:for-each select="document('')/xsl:stylesheet/nl:langs/nl:lang">	  
-	    <xsl:element name="option">
-	      <xsl:attribute name="value"><xsl:value-of select="@value" /></xsl:attribute>
-	      <xsl:if test="$nl-lang = @value"><xsl:attribute name="selected" /></xsl:if>
-	      <xsl:value-of select="." />
-	    </xsl:element>
-	  </xsl:for-each>
-	</select> <!-- select -->
-  
-        <!--<input id="email" name="email" type="email" placeholder="{$email}"/>-->
-        <input id="submit" type="submit" value="{$submit}" />
-      </p>
+      <select id="language" name="language"
+              class="form-control form-control-lg input-lg"
+              onchange="var form = document.getElementById('formnl'); var sel=document.getElementById('language'); form.action='//lists.fsfe.org/mailman/listinfo/newsletter-'+sel.options[sel.options.selectedIndex].value">
+        <xsl:for-each select="document('')/xsl:stylesheet/nl:langs/nl:lang">
+          <xsl:element name="option">
+            <xsl:attribute name="value">
+              <xsl:value-of select="@value"/>
+            </xsl:attribute>
+            <xsl:if test="$nl-lang = @value">
+              <xsl:attribute name="selected"/>
+            </xsl:if>
+            <xsl:value-of select="."/>
+          </xsl:element>
+        </xsl:for-each>
+      </select>
+
+      <!--<input id="email" name="email" type="email" placeholder="{$email}"/>-->
+      <input id="submit" type="submit" value="{$submit}"/>
     </form>
   </xsl:template>