com: improve news page

Signed-off-by: Skia <skia@libskia.so>

com/templates/com/news_list.jinja

@@ -6,11 +6,13 @@
 
 {% block content %}
 <div id="news">
-    <h3>{% trans %}News{% endtrans %}</h3>
     {% if user.is_in_group(settings.SITH_GROUP_COM_ADMIN_ID) %}
+    <div id="news_admin">
       <a href="{{ url('com:news_admin_list') }}">{% trans %}Administrate news{% endtrans %}</a>
+    </div>
     {% endif  %}
 
+    <div id="right_column" class="news_column">
       <div id="agenda">
           <div id="agenda_title">{% trans %}Agenda{% endtrans %}</div>
           <div id="agenda_content">
@@ -34,57 +36,91 @@
           {% endfor %}
           </div>
       </div>
+    </div>
+
+
+    <div id="left_column" class="news_column">
 
       {% for news in object_list.filter(type="NOTICE") %}
       <section class="news_notice">
-        <h4> <a href="{{ url('com:news_detail', news_id=news.id) }}">{{ news.title }}</a></h4>
+          <h4><a href="{{ url('com:news_detail', news_id=news.id) }}">{{ news.title }}</a></h4>
-        <p>{{ news.summary|markdown }}</p>
+          <div class="news_content">{{ news.summary|markdown }}</div>
       </section>
       {% endfor %}
-    {% for news in object_list.filter(dates__start_date__lte=timezone.now(), dates__end_date__gte=timezone.now(), type="CALL") %}
+
+      {% for news in object_list.filter(dates__start_date__lte=timezone.now(),
+          dates__end_date__gte=timezone.now(), type="CALL") %}
       <section class="news_call">
           <h4> <a href="{{ url('com:news_detail', news_id=news.id) }}">{{ news.title }}</a></h4>
-        <p class="news_date">
+          <div class="news_date">
               <span>{{ news.dates.first().start_date|localtime|date(DATETIME_FORMAT) }}
                   {{ news.dates.first().start_date|localtime|time(DATETIME_FORMAT) }}</span> -
               <span>{{ news.dates.first().end_date|localtime|date(DATETIME_FORMAT) }}
                   {{ news.dates.first().end_date|localtime|time(DATETIME_FORMAT) }}</span>
-        </p>
+          </div>
-        <p>{{ news.summary|markdown }}</p>
+          <div class="news_content">{{ news.summary|markdown }}</div>
       </section>
       {% endfor %}
-    <hr>
+
-    <h4>{% trans %}Events today and the next few days{% endtrans %}</h4>
+      {% set events_dates = NewsDate.objects.filter(end_date__gte=timezone.now(), start_date__lte=timezone.now()+timedelta(days=5),
-    {% for d in NewsDate.objects.filter(end_date__gte=timezone.now(), start_date__lte=timezone.now()+timedelta(days=5),
                                           news__type="EVENT", news__is_moderated=True).datetimes('start_date', 'day') %}
-    <h5 class="news_date">{{ d|localtime|date(DATETIME_FORMAT) }}</h5>
+      <h3>{% trans %}Events today and the next few days{% endtrans %}</h3>
-    {% for news in object_list.filter(dates__start_date__gte=d, dates__start_date__lte=d+timedelta(days=1),
+      {% if events_dates %}
-                                      type="EVENT").exclude(dates__end_date__lt=timezone.now()) %}
+      {% for d in events_dates %}
+      <div class="news_events_group">
+          <div class="news_events_group_date">
+              <div>
+                  <div>{{ d|localtime|date('D') }}</div>
+                  <div class="day">{{ d|localtime|date('d') }}</div>
+                  <div>{{ d|localtime|date('b') }}</div>
+              </div>
+          </div>
+          <div class="news_events_group_items">
+              {% for news in object_list.filter(dates__start_date__gte=d,
+                    dates__start_date__lte=d+timedelta(days=1),
+                    type="EVENT").exclude(dates__end_date__lt=timezone.now())
+                    .order_by('dates__start_date') %}
               <section class="news_event">
+                  <div class="club_logo">
+                    {% if news.club.logo %}
+                    <img src="{{ news.club.logo.url }}" alt="{{ news.club }}" />
+                    {% else %}
+                    <img src="{{ static("com/img/news.png") }}" alt="{{ news.club }}" />
+                    {% endif %}
+                  </div>
                   <h4> <a href="{{ url('com:news_detail', news_id=news.id) }}">{{ news.title }}</a></h4>
-        <p class="news_date">
+                  <div><a href="{{ news.club.get_absolute_url() }}">{{ news.club }}</a></div>
-        <span>{{ news.dates.first().start_date|localtime|date(DATETIME_FORMAT) }}
+                  <div class="news_date">
-        {{ news.dates.first().start_date|localtime|time(DATETIME_FORMAT) }}</span> -
+                      <span>{{ news.dates.first().start_date|localtime|time(DATETIME_FORMAT) }}</span> -
-        <span>{{ news.dates.first().end_date|localtime|date(DATETIME_FORMAT) }}
+                      <span>{{ news.dates.first().end_date|localtime|time(DATETIME_FORMAT) }}</span>
-        {{ news.dates.first().end_date|localtime|time(DATETIME_FORMAT) }}</span>
+                  </div>
-        </p>
+                  <div class="news_content">{{ news.summary|markdown }}</div>
-        <p><a href="{{ news.club.get_absolute_url() }}">{{ news.club }}</a></p>
-        <p>{{ news.summary|markdown }}</p>
               </section>
               {% endfor %}
-    <hr>
+          </div>
+      </div>
       {% endfor %}
-    <h4>{% trans %}Coming soon... don't miss!{% endtrans %}</h4>
+      {% else %}
-    {% for news in object_list.filter(dates__start_date__gte=timezone.now()+timedelta(days=5), type="EVENT", is_moderated=True) %}
+      <div class="news_empty">
-    <section>
+        <em>{% trans %}Nothing to come...{% endtrans %}</em>
-        <h4> <a href="{{ url('com:news_detail', news_id=news.id) }}">{{ news.title }}</a>
+      </div>
+      {% endif %}
+
+      {% set coming_soon = object_list.filter(dates__start_date__gte=timezone.now()+timedelta(days=5),
+          type="EVENT").order_by('dates__start_date') %}
+      {% if coming_soon %}
+      <h3>{% trans %}Coming soon... don't miss!{% endtrans %}</h3>
+      {% for news in coming_soon %}
+      <section class="news_coming_soon">
+          <a href="{{ url('com:news_detail', news_id=news.id) }}">{{ news.title }}</a>
           <span class="news_date">{{ news.dates.first().start_date|localtime|date(DATETIME_FORMAT) }}
               {{ news.dates.first().start_date|localtime|time(DATETIME_FORMAT) }} -
           {{ news.dates.first().end_date|localtime|date(DATETIME_FORMAT) }}
           {{ news.dates.first().end_date|localtime|time(DATETIME_FORMAT) }}</span>
-        </h4>
       </section>
       {% endfor %}
+      {% endif %}
+    </div>
 </div>
 {% endblock %}
 

com/views.py

@@ -43,7 +43,7 @@ from datetime import timedelta
 from com.models import Sith, News, NewsDate, Weekmail, WeekmailArticle
 from core.views import CanViewMixin, CanEditMixin, CanEditPropMixin, TabedViewMixin, CanCreateMixin, QuickNotifMixin
 from core.views.forms import SelectDateTime
-from core.models import Notification, RealGroup
+from core.models import Notification, RealGroup, User
 from club.models import Club, Mailing
 
 
@@ -277,6 +277,7 @@ class NewsAdminListView(CanEditMixin, ListView):
 class NewsListView(CanViewMixin, ListView):
     model = News
     template_name = 'com/news_list.jinja'
+    queryset = News.objects.filter(is_moderated=True)
 
     def get_context_data(self, **kwargs):
         kwargs = super(NewsListView, self).get_context_data(**kwargs)

core/management/commands/populate.py

@@ -542,6 +542,12 @@ Welcome to the wiki page!
                 friday += timedelta(hours=6)
             friday.replace(hour=20, minute=0, second=0)
             # Event
+            n = News(title="Apero barman", summary="Viens boire un coup avec les barmans",
+                    content="Glou glou glou glou glou glou glou" , type="EVENT",
+                    club=bar_club, author=subscriber, is_moderated=True, moderator=skia)
+            n.save()
+            NewsDate(news=n, start_date=timezone.now()+timedelta(hours=70),
+                    end_date=timezone.now()+timedelta(hours=72)).save()
             n = News(title="Repas barman", summary="Enjoy la fin du semestre!",
                     content="Viens donc t'enjailler avec les autres barmans aux "
                     "frais du BdF! \o/", type="EVENT", club=bar_club,
@@ -549,6 +555,13 @@ Welcome to the wiki page!
             n.save()
             NewsDate(news=n, start_date=timezone.now()+timedelta(hours=72),
                     end_date=timezone.now()+timedelta(hours=84)).save()
+            n = News(title="Repas fromager", summary="Wien manger du l'bon fromeug'",
+                    content="Fô viendre mangey d'la bonne fondue!",
+                    type="EVENT", club=bar_club, author=subscriber,
+                    is_moderated=True, moderator=skia)
+            n.save()
+            NewsDate(news=n, start_date=timezone.now()+timedelta(hours=96),
+                    end_date=timezone.now()+timedelta(hours=100)).save()
             n = News(title="SdF", summary="Enjoy la fin des finaux!",
                     content="Viens faire la fête avec tout plein de gens!",
                     type="EVENT", club=bar_club, author=subscriber,

core/static/core/style.scss

@@ -339,23 +339,42 @@ header {
       }
     }
   }
+
 /*---------------------------------NEWS--------------------------------*/
   #news {
-    section {
+    .news_column {
-      padding: 5px;
+      display: inline-block;
+      margin: 0px;
+      vertical-align: top;
     }
-    section.news_call, section.news_notice {
+    #news_admin {
-      background: lightgrey;
+      margin-bottom: 1em;
-      margin: 2px;
     }
-    section.news_event:nth-of-type(even) {
+    #right_column {
-      background: lightblue;
-    }
-    #agenda {
-      box-shadow: $black-color 2px 2px 2px;
-      display: block;
       width: 20%;
       float: right;
+    }
+    #left_column {
+      width: 79%;
+      h3 {
+        background: $second-color;
+        box-shadow: grey 2px 2px 2px;
+        padding: 0.4em;
+        margin: 0em 0em 0.5em 0em;
+        text-transform: uppercase;
+        font-size: 1.1em;
+        border: solid 1px black;
+        &:last-of-type {
+          margin: 2em 0em 1em 0em;
+        }
+      }
+    }
+
+/* AGENDA */
+    #agenda {
+      box-shadow: grey 2px 2px 2px;
+      display: block;
+      width: 100%;
       background: white;
       font-size: 70%;
       border: solid 1px $black-color;
@@ -368,7 +387,6 @@ header {
         text-transform: uppercase;
         border-bottom: solid 1px $black-color;
         background: $second-color;
-
       }
       #agenda_content {
         overflow: auto;
@@ -391,11 +409,136 @@ header {
         }
       }
     }
-    .news_weekly p {
+/* END AGENDA */
+
+/* EVENTS TODAY AND NEXT FEW DAYS */
+    .news_events_group {
+      border: solid 1px black;
+      box-shadow: grey 2px 2px 2px;
+      margin-left: 1em;
+      margin-bottom: 0.5em;
+      .news_events_group_date {
+        display: table-cell;
+        padding: 0.6em;
+        vertical-align: middle;
+        background: $primary-dark-color;
+        color: $white-color;
+        text-transform: uppercase;
+        text-align: center;
+        font-weight: bold;
+        font-family: monospace;
+        font-size: 1.4em;
+        div {
+          margin: 0px auto;
+          .day {
+            font-size: 1.5em;
+          }
+        }
+      }
+      .news_events_group_items {
+        display: table-cell;
+        width: 100%;
+        border-left: solid 1px black;
+        .news_event:nth-of-type(odd) {
+          background: white;
+        }
+        .news_event:nth-of-type(even) {
+          background: $primary-neutral-light-color;
+        }
+        .news_event {
+          display: block;
+          padding: 0.4em;
+          &:not(:last-child) {
+            border-bottom: 1px solid grey;
+          }
+          div {
             margin: 0.2em;
           }
+          h4 {
+            margin-top: 1em;
+            text-transform: uppercase;
+          }
+          .club_logo {
+            float: left;
+            width: 7em;
+            margin: 0em;
+            margin-right: 1em;
+            margin-bottom: 0.8em;
+            img {
+              max-height: 6em;
+              display: block;
+              margin: 0em auto;
+            }
+          }
+          .news_date {
+            font-size: 100%;
+          }
+          .news_content {
+            clear: left;
+          }
+        }
+      }
+    }
+/* END EVENTS TODAY AND NEXT FEW DAYS */
+
+/* COMING SOON */
+    .news_coming_soon {
+      display: list-item;
+      list-style-type: square;
+      list-style-position: inside;
+      margin-left: 1em;
+      padding-left: 0em;
+      a {
+        font-weight: bold;
+        text-transform: uppercase;
+      }
+      .news_date {
+        font-size: 0.9em;
+      }
+    }
+/* END COMING SOON */
+
+/* NOTICES */
+    .news_notice {
+      margin: 0em 0em 1em 1em;
+      padding: 0.4em;
+      padding-left: 1em;
+      background: lightgrey;
+      border: 1px solid grey;
+      box-shadow: grey 2px 2px 2px;
+      h4 {
+        margin: 0em;
+      }
+      .news_content {
+        margin-left: 1em;
+      }
+    }
+/* END NOTICES */
+
+/* CALLS */
+    .news_call {
+      margin: 0em 0em 1em 1em;
+      padding: 0.4em;
+      padding-left: 1em;
+      background: $secondary-neutral-light-color;
+      border: 1px solid grey;
+      box-shadow: grey 2px 2px 2px;
+      h4 {
+        margin: 0em;
+      }
+      .news_date {
+        font-size: 0.9em;
+      }
+      .news_content {
+        margin-left: 1em;
+      }
+    }
+/* END CALLS */
+
+    .news_empty {
+      margin-left: 1em;
+    }
     .news_date {
-      font-size: small;
       color: grey;
     }
   }
@@ -473,7 +616,7 @@ h6 {
 }
 
 p, pre {
-  margin-top: 1em;
+  margin-top: 0.8em;
   margin-left: 0px;
 }