FSFE/fsfe-website
27
32
Fork 92
Code Issues 63 Pull Requests 11 Wiki Activity

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

Browse Source 
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
This commit is contained in:
Michael Weimann
2018-11-28 11:51:11 +01:00
committed by max.mehl
parent 4c66c37521
commit 5eb5d9e711
13 changed files with 15594 additions and 321 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14911
fsfe.min.css vendored Normal file
View File

File diff suppressed because it is too large Load Diff

6
fsfe.xsl
View File

@@ -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>

BIN
graphics/pr-material.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 257 KiB

BIN
graphics/t-shirt-promo-v2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 299 KiB

42
index.en.xhtml
View File

@@ -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>

1
index.sources
View File

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

2
index.xsl
View File

@@ -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>

746
look/fsfe.less
View File

File diff suppressed because it is too large Load Diff

74
look/style.less
View File

@@ -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;
}
/* grid */
#sidebar {
flex: 0 0 100%;
padding-right: 0;
}
}
@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;
}
}
#content + #sidebar {
.article #sidebar;
#sidebar {
flex: 0 0 33%;
}
}
}
#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;

74
news/news.en.xhtml
View File

@@ -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>

1
news/news.sources
View File

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

26
tools/static-elements/element-supportervideo.en.xml Normal file
View File

@@ -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>

32
tools/xsltsl/static-elements.xsl
View File

@@ -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>