Browse Source

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
tags/stw2018
Michael Weimann 10 months ago
parent
commit
5eb5d9e711
Signed by: max.mehl <max.mehl@fsfe.org> GPG Key ID: 2704E4AB371E2E92

+ 14911
- 0
fsfe.min.css
File diff suppressed because it is too large
View File


+ 6
- 0
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 View File


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


+ 24
- 18
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
- 0
index.sources View File

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

tools/static-elements/element-:[]

+ 1
- 1
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>

+ 468
- 232
look/fsfe.less
File diff suppressed because it is too large
View File


+ 43
- 29
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;
}

#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;

+ 71
- 3
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
- 0
news/news.sources View File

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

+ 26
- 0
tools/static-elements/element-supportervideo.en.xml 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>

+ 18
- 14
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>

Loading…
Cancel
Save