Enhanced news

club/models.py

@@ -138,6 +138,9 @@ class Club(models.Model):
         """
         return user.is_in_group(settings.SITH_MAIN_BOARD_GROUP)
 
+    def get_full_logo_url(self):
+        return "https://%s%s" % (settings.SITH_URL, self.logo.url)
+
     def can_be_edited_by(self, user):
         """
         Method to see if that object can be edited by the given user

com/templates/com/news_detail.jinja

@@ -1,15 +1,23 @@
 {% extends "core/base.jinja" %}
-{% from 'core/macros.jinja' import user_profile_link, facebook_share, tweet %}
+{% from 'core/macros.jinja' import user_profile_link, facebook_share, tweet, link_news_logo, gen_news_metatags %}
 
 {% block title %}
 {% trans %}News{% endtrans %} -
 {{ object.title }}
 {% endblock %}
 
+{% block head %}
+{{ super() }}
+{{ gen_news_metatags(news) }}
+{% endblock %}
+
 {% block content %}
 <p><a href="{{ url('com:news_list') }}">{% trans %}Back to news{% endtrans %}</a></p>
-    <h3>{% trans %}News{% endtrans %}</h3>
+    <section id="news_details">
-    <section class="news_event">
+        <div class="club_logo">
+            <img src="{{ link_news_logo(news)}}" alt="{{ news.club }}" />
+            <a href="{{ news.club.get_absolute_url() }}">{{ news.club }}</a>
+        </div>
         <h4>{{ news.title }}</h4>
         <p class="date">
             <span>{{ news.dates.first().start_date|localtime|date(DATETIME_FORMAT) }}
@@ -17,9 +25,13 @@
             <span>{{ news.dates.first().end_date|localtime|date(DATETIME_FORMAT) }}
                 {{ news.dates.first().end_date|localtime|time(DATETIME_FORMAT) }}</span>
         </p>
-        <p><a href="{{ news.club.get_absolute_url() }}">{{ news.club }}</a></p>
+        <div class="news_content">
-        <div>{{ news.summary|markdown }}</div>
+        <div><em>{{ news.summary|markdown }}</em></div>
+        <br/>
         <div>{{ news.content|markdown }}</div>
+        {{ facebook_share(news) }}
+        {{ tweet(news) }}
+        <div class="news_meta">
         <p>{% trans %}Author: {% endtrans %}{{ user_profile_link(news.author) }}</p>
         {% if news.moderator %}
         <p>{% trans %}Moderator: {% endtrans %}{{ user_profile_link(news.moderator) }}</p>
@@ -29,9 +41,8 @@
         {% if user.can_edit(news) %}
         <p> <a href="{{ url('com:news_edit', news_id=news.id) }}">{% trans %}Edit (will be remoderated){% endtrans %}</a></p>
         {% endif %}
-        </br>
+        </div>
-        {{ facebook_share(news) }}
+        </div>
-        {{ tweet(news) }}
     </section>
 {% endblock %}
 

com/templates/com/news_list.jinja

@@ -1,4 +1,5 @@
 {% extends "core/base.jinja" %}
+{% from 'core/macros.jinja' import tweet_quick, fb_quick %}
 
 {% block title %}
 {% trans %}News{% endtrans %}
@@ -112,7 +113,12 @@
                       <span>{{ news.dates.first().start_date|localtime|time(DATETIME_FORMAT) }}</span> -
                       <span>{{ news.dates.first().end_date|localtime|time(DATETIME_FORMAT) }}</span>
                   </div>
-                  <div class="news_content">{{ news.summary|markdown }}</div>
+                  <div class="news_content">{{ news.summary|markdown }}
+                  <div class="button_bar">
+                    {{ fb_quick(news) }}
+                    {{ tweet_quick(news) }}
+                  </div>
+                  </div>
               </section>
               {% endfor %}
           </div>

core/static/core/style.scss

@@ -497,6 +497,15 @@ header {
           }
           .news_content {
             clear: left;
+            .button_bar {
+                text-align: right;
+              .fb {
+                  color: $faceblue;
+                }
+              .twitter {
+                color: $twitblue;
+              }
+            }
           }
         }
       }
@@ -566,36 +575,60 @@ header {
   }
 }
 
-.fb-share-button {
+#news_details {
-  background: $faceblue;
-  border: none;
-  color: white;
-  padding: 0.5em 1em;
-  text-align: center;
-  text-decoration: none;
   display: inline-block;
-  font-size: 16px;
+  padding: 0.4em;
-  border-radius: 2px;
+  width: 80%;
-}
+  background: $white-color;
+  h4 {
+    margin-top: 1em;
+    text-transform: uppercase;
+  }
+  .club_logo {
+    display: inline-block;
+    text-align: center;
+    width: 19%;
+    float: left;
+    min-width: 10em;
+    margin: 0em;
+    margin-right: 0.5em;
+    margin-top: 0.5em;
+    img {
+      max-height: 15em;
+      max-width: 12em;
+      display: block;
+      margin: 0em auto;
+    }
+  }
+  .share_button {
+    border: none;
+    color: white;
+    padding: 0.5em 1em;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    font-size: 16px;
+    border-radius: 2px;
+    float: right;
+    display: block;
+    margin-left: 0.3em;
+    &:hover {
+      color: lightgrey;
+    }
+  }
 
-.fb-share-button:hover {
+  .facebook {
-  color: lightgrey;
+    background: $faceblue;
-}
+  }
 
-.twitter-share-button {
+  .twitter {
-  background: $twitblue;
+    background: $twitblue;
-  border: none;
+  }
-  color: white;
-  padding: 0.5em 1em;
-  text-align: center;
-  text-decoration: none;
-  display: inline-block;
-  font-size: 16px;
-  border-radius: 2px;
-}
 
-.twitter-share-button:hover {
+  .news_meta {
-  color: lightgrey;
+    margin-top: 10em;
+    font-size: small;
+  }
 }
 
 .helptext {

core/templates/core/macros.jinja

@@ -12,17 +12,43 @@
 </a>
 {%- endmacro %}
 
+{% macro link_news_logo(news) -%}
+    {% if news.club.logo -%}
+        {{ news.club.logo.url }}
+    {% else -%}
+        {{ static("com/img/news.png") }}
+    {% endif %}
+{%- endmacro %}
+
+{% macro gen_news_metatags(news) -%}
+<meta name="twitter:card" content="summary" />
+<meta name="twitter:site" content="{{ settings.SITH_TWITTER }}" />
+<meta name="twitter:creator" content= "{{ settings.SITH_TWITTER }}" />
+<meta property="og:url"                content="{{ news.get_full_url() }}" />
+<meta property="og:type"               content="article" />
+<meta property="og:title"              content="{{ news.title }}" />
+<meta property="og:description"        content="{{ news.summary }}" />
+<meta property="og:image"              content="{{ "https://%s%s" % (settings.SITH_URL, link_news_logo(news)) }}" />
+{%- endmacro %}
+
 {% macro facebook_share(news) -%}
-<a rel="nofollow" target="#" class="fb-share-button" href="https://www.facebook.com/sharer/sharer.php?u={{ news.get_full_url() }}">{% trans %}Share on Facebook{% endtrans %}</a>
+<a rel="nofollow" target="#" class="share_button facebook" href="https://www.facebook.com/sharer/sharer.php?u={{ news.get_full_url() }}">{% trans %}Share on Facebook{% endtrans %}</a>
 {%- endmacro %}
 
 {% macro tweet(news) -%}
-<a rel="nofollow" target="#" class="twitter-share-button" href="https://twitter.com/intent/tweet?text={{ news.get_full_url() }}">{% trans %}Tweet{% endtrans %}</a>
+<a rel="nofollow" target="#" class="share_button twitter" href="https://twitter.com/intent/tweet?text={{ news.get_full_url() }}">{% trans %}Tweet{% endtrans %}</a>
+{%- endmacro %}
+
+{% macro fb_quick(news) -%}
+<a rel="nofollow" target="#" href="https://www.facebook.com/sharer/sharer.php?u={{ news.get_full_url() }}" class="fb fa fa-facebook-square fa-2x"></a>
+{%- endmacro %}
+
+{% macro tweet_quick(news) -%}
+<a rel="nofollow" target="#" href="https://twitter.com/intent/tweet?text={{ news.get_full_url() }}" class="twitter fa fa-twitter-square fa-2x"></a>
 {%- endmacro %}
 
 {% macro user_mini_profile(user) %}
 <div id="user_profile">
-
     <div id="right_column">
         <div id="pictures">
             {% if user.profile_pict %}

sith/settings.py

@@ -272,6 +272,7 @@ OLD_MYSQL_INFOS = {
 
 SITH_URL = "my.url.git.an"
 SITH_NAME = "Sith website"
+SITH_TWITTER = "@ae_utbm"
 
 # AE configuration
 SITH_MAIN_CLUB_ID = 1  # TODO: keep only that first setting, with the ID, and do the same for the other clubs