Add Twitter feeds styling

diff --git a/app/static/src/sass/modules/_all.scss b/app/static/src/sass/modules/_all.scss
index 51a4da38e9aefe9a8af00cc9d226fd955f3ec32c..bb234c3eb06dacd49a3369c32ff6bed1aabe78fe 100755 (executable)
--- a/app/static/src/sass/modules/_all.scss
+++ b/app/static/src/sass/modules/_all.scss
@@ -65,6 +65,7 @@
 @import 'map-legend';
 @import 'linked-organizations';
 @import 'newsletter';
+@import 'tweets';
 @import 'hero';
 
 // Typography modules

diff --git a/app/static/src/sass/modules/_tweets.scss b/app/static/src/sass/modules/_tweets.scss
new file mode 100644 (file)
index 0000000..f103fe6
--- /dev/null
+++ b/app/static/src/sass/modules/_tweets.scss
@@ -0,0 +1,73 @@
+$module: ".tweets";
+
+#{$module} {
+
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+
+    &__tweet {
+
+        @include margin-bottom(1);
+
+    }
+
+    &__tweet-image {
+
+        width: 100%;
+        border-radius: 10px;
+
+    }
+
+    &__tweet-content {
+
+        text-align: left;
+
+    }
+
+    &__tweet-author {
+
+        margin: 0;
+        @include margin-bottom(.5);
+        color: white;
+        @include typeface(sans-serif);
+        @include font-size(m);
+        font-weight: weight(regular);
+
+        a {
+            display: inline-block;
+            @include margin-left(.5);
+            color: white;
+
+            &:hover {
+                color: $color-main;
+            }
+        }
+
+        span {
+            display: inline-block;
+            @include margin-left(.5);
+            font-weight: weight(light);
+        }
+
+    }
+
+    &__tweet-body {
+
+        @include typeface(sans-serif);
+        @include font-size(m);
+        font-weight: weight(light);
+        a {
+            display: inline-block;
+            @include margin-right(.25);
+            color: white;
+            font-weight: weight(regular);
+
+            &:hover {
+                color: $color-main;
+            }
+        }
+
+    }
+
+}

diff --git a/app/templates/twitter/tweets.html b/app/templates/twitter/tweets.html
index adba410eb7a3414e016b0b25c0008919ed69a01d..739b89bdb945530cc3c440cd31b18abd8af182d7 100644 (file)
--- a/app/templates/twitter/tweets.html
+++ b/app/templates/twitter/tweets.html
@@ -4,21 +4,24 @@
 {% tweets_default as tweets %}
 
 {% if tweets %}
-<h3>{% trans "Recent Tweets" %}</h3>
-<ul class="list-unstyled tweets">
+<ul class="tweets">
     {% for tweet in tweets %}
-    <li class="tweet">
-        <img class="pull-left tweeter-image" src="{{ tweet.profile_image_url|cut:"http:" }}" alt="{{ tweet.full_name }}">
-        <h4>{{ tweet.full_name }} <small><a href="http://twitter.com/{{ tweet.user_name }}" title="{{ tweet.full_name }}">@{{ tweet.user_name }}</a></small></h4>
-        {% if tweet.is_retweet %}
-        <h6><span class="glyphicon glyphicon-retweet"></span>
-        <a href="http://twitter.com/{{ tweet.retweeter_user_name }}" title="{{ tweet.retweeter_full_name }}">{{ tweet.retweeter_full_name }}</a></h6>
-        {% endif %}
-        <p>{{ tweet.text|safe }}<br>
-        <small class="timespan">
-        {% blocktrans with sometime=tweet.created_at|timesince %}{{ sometime }} ago{% endblocktrans %}
-        <a href="http://twitter.com/{{ tweet.user_name }}/status/{{ tweet.remote_id }}"><span class="glyphicon glyphicon-new-window"></span></a>
-        </small></p>
+    <li class="tweets__tweet">
+        <div class="col-sm-3">
+            <img class="tweets__tweet-image" src="{{ tweet.profile_image_url|cut:"http:" }}" alt="{{ tweet.full_name }}">
+        </div>
+        <div class="col-sm-13 tweets__tweet-content">
+            <h4 class="tweets__tweet-author">
+                {{ tweet.full_name }} <a href="http://twitter.com/{{ tweet.user_name }}" title="{{ tweet.full_name }}">@{{ tweet.user_name }}</a>
+                <span>{% blocktrans with sometime=tweet.created_at|timesince %}{{ sometime }} ago{% endblocktrans %}</span>
+            </h4>
+            <p class="tweets__tweet-body">
+                {{ tweet.text|safe }}<br>
+                {% comment %}
+                    <a href="http://twitter.com/{{ tweet.user_name }}/status/{{ tweet.remote_id }}"></a>
+                {% endcomment %}
+            </p>
+        </div>
     </li>
     {% endfor %}
 </ul>