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
Michael Weimann 2 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 @@
40 40
       <xsl:with-param name="nb-items" select="4"/>
41 41
     </xsl:call-template>
42 42
   </xsl:template>
43
+  
44
+  <!-- Static elements which can be included everywhere -->
45
+  <xsl:template match="static-element">
46
+    <xsl:variable name="id"><xsl:value-of select="@id"/></xsl:variable>
47
+    <xsl:copy-of select="/buildinfo/document/set/element[@id=$id]" />
48
+  </xsl:template>
43 49
 
44 50
 </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 @@
19 19
         <h2>
20 20
           <a href="/news/news.html"><news-label /></a>
21 21
           <a class="rss-feed" href="/news/news.rss" title="news RSS feed"><i class="fa fa-rss"></i></a>
22
-	  <a class="ical" href="https://mastodon.social/@fsfe" title="follow FSFE on Mastodon" rel="me"><i class="fa fa-comments-o"></i></a>
22
+	        <a class="ical" href="https://mastodon.social/@fsfe" title="follow FSFE on Mastodon" rel="me">
23
+            <i class="fa fa-comments-o"></i>
24
+          </a>
23 25
         </h2>
24
-
25 26
         <all-news />
27
+        <div class="more-news">
28
+          <a href="/news/news.html" class="learn-more">See all news</a>
29
+          <a href="https://planet.fsfe.org/en" class="learn-more community-blog-link">Read the Community blog</a>
30
+        </div>
26 31
       </div>
27 32
 
28 33
       <div id="newsletter" class="section">
29
-        <a class="big-donate" href="https://my.fsfe.org/support">Become a supporter</a>
30
-
31
-        <h2><a href="/news/newsletter.html"><newsletter-label /></a></h2>
32
-
33
-
34
-          <subscribe-nl />
35
-
36
-          <ul id="more-news-list">
37
-              <li><a href="/news/news.html" class="learn-more">See all news</a></li>
38
-              <li><a href="http://planet.fsfe.org/en" class="learn-more">Read FSFE blogs</a></li>
39
-          </ul>
40
-
41
-
34
+        <static-element id="video" />
35
+        <h2 class="home-newsletter-label">
36
+          <newsletter-label/>
37
+        </h2>
38
+        <subscribe-nl/>
39
+        Read <a href="/news/newsletter.html"> the archive</a>
42 40
       </div>
43 41
 
44 42
       <hr />
@@ -54,11 +52,19 @@
54 52
       </div>
55 53
 
56 54
       <div id="shop-promo" class="section">
57
-          <a href="/order/order.html?ref-frontpage"><img src="/graphics/tshirt-promo.jpg" alt="" /></a>
58
-
55
+        <div class="home-shop-block">
56
+          <a href="/order/order.html?ref-frontpage" class="home-order-image-container">
57
+            <img src="/graphics/t-shirt-promo-v2.png" alt="" class="home-order-image" />
58
+          </a>
59 59
           <a class="big-donate" href="/order/order.html?ref-frontpage">Shop</a>
60
+        </div>
61
+        <div class="home-shop-block">
62
+          <a href="/order/order.html?ref-frontpage" class="home-order-image-container">
63
+            <img src="/graphics/pr-material.png" alt="" class="home-order-image" />
64
+          </a>
65
+          <a class="big-donate" href="/order/order.html?ref-frontpage">Promotion material</a>
66
+        </div>
60 67
       </div>
61
-
62 68
     </div>
63 69
   </body>
64 70
 

+ 1
- 0
index.sources View File

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

+ 1
- 1
index.xsl View File

@@ -29,7 +29,7 @@
29 29
   <xsl:template match="all-news">
30 30
     <xsl:call-template name="fetch-news">
31 31
       <xsl:with-param name="tag">front-page</xsl:with-param>
32
-      <xsl:with-param name="nb-items" select="5" />
32
+      <xsl:with-param name="nb-items" select="4" />
33 33
       <xsl:with-param name="show-date" select="'yes'" />
34 34
       <!--TODO enable a "Read More" link with class "learn-more" at the end of newsteaser-->
35 35
     </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 {
269 269
 }
270 270
 
271 271
 
272
-/* the main and follow up sections */
272
+/* grid */
273
+.article, .planet {
274
+    #content, #planet-posts {
275
+        flex: 0 0 100%;
276
+        padding-left: 0;
277
+    }
278
+
279
+    #sidebar {
280
+        flex: 0 0 100%;
281
+        padding-right: 0;
282
+    }
283
+}
273 284
 
274
-    /* grid */
285
+@media (min-width: @screen-md-min) {
275 286
     .article, .planet {
276 287
         #content, #planet-posts {
277
-            .make-xs-column(12);
278
-            .make-md-column(8);
279
-            padding-left: 0;
288
+            flex: 1 0 66%;
280 289
         }
290
+
281 291
         #sidebar {
282
-            .make-xs-column(12);
283
-            .make-md-column(4);
284
-            padding-right: 0;
292
+            flex: 0 0 33%;
285 293
         }
286 294
     }
287
-
288
-    #content + #sidebar {
289
-        .article #sidebar;
290
-    }
295
+}
291 296
 
292 297
 #main, #followup {
293 298
     background: @body-bg;
@@ -1088,22 +1093,27 @@ a.learn-more {
1088 1093
     border-bottom: 1px dotted @brand-primary;
1089 1094
     font-variant: small-caps;
1090 1095
     text-transform: lowercase;
1091
-}
1092
-a.learn-more:hover {
1093
-    text-decoration: none;
1094
-    border-bottom-style: solid;
1095
-}
1096
-a.learn-more:after {
1097
-    padding-left: 0.3em;
1098
-    content: " ▸";
1099
-    opacity: 0.8;
1100
-    transition: padding-left 0.15s linear 0s, color 0.15s linear 0s, opacity 0.15s linear 0s;
1101
-}
1102
-a.learn-more:hover:after {
1103
-    padding-left: 0.6em;
1104
-    margin-right: -0.3em;
1105
-    content: " ▸";
1106
-    opacity: 1;
1096
+    padding-right: 1em;
1097
+    position: relative;
1098
+
1099
+    &:hover {
1100
+        text-decoration: none;
1101
+        border-bottom-style: solid;
1102
+    }
1103
+
1104
+    &:after {
1105
+        position: absolute;
1106
+        right: .3em;
1107
+        content: " ▸";
1108
+        opacity: 0.8;
1109
+        transition: all 150ms linear;
1110
+    }
1111
+
1112
+    &:hover:after {
1113
+        right: 0;
1114
+        content: " ▸";
1115
+        opacity: 1;
1116
+    }
1107 1117
 }
1108 1118
 
1109 1119
 .social-link {
@@ -1117,8 +1127,12 @@ a.learn-more:hover:after {
1117 1127
     .btn-block;
1118 1128
     .btn-success;
1119 1129
     font-size: 1.4em;
1120
-    margin-top: 2em;
1121 1130
 }
1131
+
1132
+.supporter-text {
1133
+    margin-top: 5px;
1134
+}
1135
+
1122 1136
 .small-donate, .small.donate {
1123 1137
     .btn;
1124 1138
     .btn-sm;

+ 71
- 3
news/news.en.xhtml View File

@@ -6,15 +6,83 @@
6 6
   </head>
7 7
 
8 8
   <body class="article" microformats="h-entry">
9
+  <div class="news-follow-us">
10
+    <div class="share-top-buttons-label">Follow us:</div>
11
+    <div class="share-buttons-top">
12
+      <a target="_blank" href="https://fsfe.org/news/newsletter">
13
+        <button class="share-button-top share-mail">Newsletter</button>
14
+      </a>
15
+      <a target="_blank" href="https://fsfe.org/news/news.en.rss">
16
+        <button class="share-button-top share-rss">RSS Feed</button>
17
+      </a>
18
+      <a target="_blank" href="https://mastodon.social/@fsfe">
19
+        <button class="share-button-top share-mastodon">Mastodon</button>
20
+      </a>
21
+      <a target="_blank" href="https://diasp.eu/u/fsfe">
22
+        <button class="share-button-top share-diaspora">Diaspora</button>
23
+      </a>
24
+      <a target="_blank" href="https://twitter.com/fsfe">
25
+        <button class="share-button-top share-twitter">Twitter</button>
26
+      </a>
27
+      <a target="_blank" href="https://facebook.com/thefsfe">
28
+        <button class="share-button-top share-facebook">Facebook</button>
29
+      </a>
30
+    </div>
31
+  </div>
32
+
9 33
     <h1 class="p-name">News</h1>
10 34
     <include-news/>
11 35
   </body>
12 36
 
13 37
   <sidebar promo="none">
14
-    <h2><i class="fa fa-rss"></i></h2>
15
-    <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>
38
+    <div class="news-sidebar">
39
+      <h2>Follow our News</h2>
40
+
41
+      <p>
42
+        To keep up with our latest news, you can subscribe our <a href="/news/news.en.rss">RSS feed</a> and
43
+        our <a href="/news/newsletter">Newsletter</a>.
44
+      </p>
45
+
46
+      <div class="share-buttons-sidebar">
47
+        <a target="_blank" href="https://fsfe.org/news/newsletter">
48
+          <button class="share-button-sidebar share-mail">Newsletter</button>
49
+        </a>
50
+        <a target="_blank" href="https://fsfe.org/news/news.en.rss">
51
+          <button class="share-button-sidebar share-rss">RSS Feed</button>
52
+        </a>
53
+      </div>
54
+
55
+
56
+      <h2>Social Media</h2>
57
+
58
+      <p>
59
+        For instant updates and hot news you can also follow us on <a
60
+          href="https://mastodon.social/@fsfe">Mastodon</a>, <a href="https://diasp.eu/u/fsfe">Diaspora</a>, <a
61
+          href="https://twitter.com/fsfe">Twitter</a> and <a href="https://facebook.com/thefsfe">Facebook</a>.
62
+      </p>
63
+
64
+      <div class="share-buttons-sidebar">
65
+        <a target="_blank" href="https://mastodon.social/@fsfe">
66
+          <button class="share-button-sidebar share-mastodon">Mastodon</button>
67
+        </a>
68
+        <a target="_blank" href="https://diasp.eu/u/fsfe">
69
+          <button class="share-button-sidebar share-diaspora">Diaspora</button>
70
+        </a><br/>
71
+        <a target="_blank" href="https://twitter.com/fsfe">
72
+          <button class="share-button-sidebar share-twitter">Twitter</button>
73
+        </a>
74
+        <a target="_blank" href="https://facebook.com/thefsfe">
75
+          <button class="share-button-sidebar share-facebook">Facebook</button>
76
+        </a>
77
+      </div>
78
+
79
+      <hr/>
80
+
81
+      <static-element id="video" />
82
+
83
+    </div>
16 84
   </sidebar>
17 85
 
18 86
   <text id="more">Read more…</text>
19 87
   <timestamp>$Date$ $Author$</timestamp>
20
-</html>
88
+</html>

+ 1
- 0
news/news.sources View File

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

+ 26
- 0
tools/static-elements/element-supportervideo.en.xml View File

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

+ 18
- 14
tools/xsltsl/static-elements.xsl View File

@@ -54,20 +54,24 @@
54 54
     </xsl:variable>
55 55
 
56 56
     <form id="formnl" name="formnl" method="POST" action="//lists.fsfe.org/mailman/listinfo/newsletter-{$nl-lang}">
57
-      <p>
58
-        <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">
59
-	  <xsl:for-each select="document('')/xsl:stylesheet/nl:langs/nl:lang">	  
60
-	    <xsl:element name="option">
61
-	      <xsl:attribute name="value"><xsl:value-of select="@value" /></xsl:attribute>
62
-	      <xsl:if test="$nl-lang = @value"><xsl:attribute name="selected" /></xsl:if>
63
-	      <xsl:value-of select="." />
64
-	    </xsl:element>
65
-	  </xsl:for-each>
66
-	</select> <!-- select -->
67
-  
68
-        <!--<input id="email" name="email" type="email" placeholder="{$email}"/>-->
69
-        <input id="submit" type="submit" value="{$submit}" />
70
-      </p>
57
+      <select id="language" name="language"
58
+              class="form-control form-control-lg input-lg"
59
+              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">
60
+        <xsl:for-each select="document('')/xsl:stylesheet/nl:langs/nl:lang">
61
+          <xsl:element name="option">
62
+            <xsl:attribute name="value">
63
+              <xsl:value-of select="@value"/>
64
+            </xsl:attribute>
65
+            <xsl:if test="$nl-lang = @value">
66
+              <xsl:attribute name="selected"/>
67
+            </xsl:if>
68
+            <xsl:value-of select="."/>
69
+          </xsl:element>
70
+        </xsl:for-each>
71
+      </select>
72
+
73
+      <!--<input id="email" name="email" type="email" placeholder="{$email}"/>-->
74
+      <input id="submit" type="submit" value="{$submit}"/>
71 75
     </form>
72 76
   </xsl:template>
73 77
   

Loading…
Cancel
Save