core, com: tool bar and agenda design updates

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

com/templates/com/news_list.jinja

@@ -4,66 +4,33 @@
 {% trans %}News{% endtrans %}
 {% endblock %}
 
-{% block head %}
-{{ super() }}
-<style type="text/css" media="all">
-section {
-    padding: 5px;
-}
-section.news_call, section.news_notice {
-    background: lightgrey;
-    margin: 2px;
-}
-section.news_event:nth-of-type(even) {
-    background: lightblue;
-}
-div#agenda {
-    display: block;
-    width: 20%;
-    float: right;
-    background: white;
-    font-size: 70%;
-    border: solid 1px darkgrey;
-    padding: 0.5em;
-}
-div#agenda_content {
-    overflow: auto;
-    width: 100%;
-    height: 20em;
-}
-.news_weekly p {
-    margin: 0.2em;
-}
-.date {
-    font-size: small;
-    color: grey;
-}
-</style>
-{% endblock %}
-
 {% block content %}
+<div id="news">
     <h3>{% trans %}News{% endtrans %}</h3>
     {% if user.is_in_group(settings.SITH_GROUP_COM_ADMIN_ID) %}
     <a href="{{ url('com:news_admin_list') }}">{% trans %}Administrate news{% endtrans %}</a>
     {% endif  %}
 
     <div id="agenda">
-        <h4>{% trans %}Agenda{% endtrans %}</h4>
+        <div id="agenda_title">{% trans %}Agenda{% endtrans %}</div>
-        <hr>
         <div id="agenda_content">
         {% for d in NewsDate.objects.filter(end_date__gte=timezone.now(),
                 news__is_moderated=True, news__type__in=["WEEKLY",
                 "EVENT"]).order_by('start_date', 'end_date') %}
-        <section class="news_weekly">
+            <div class="agenda_item">
-            <p><strong>{{ d.start_date|localtime|date('D d M Y') }}</strong></p>
+                <div class="agenda_date">
-            <p class="date">
+                    <strong>{{ d.start_date|localtime|date('D d M Y') }}</strong>
+                </div>
+                <div class="agenda_time">
                     <span>{{ d.start_date|localtime|time(DATETIME_FORMAT) }}</span> -
                     <span>{{ d.end_date|localtime|time(DATETIME_FORMAT) }}</span>
-            </p>
+                </div>
-            <p><strong><a href="{{ url('com:news_detail', news_id=d.news.id) }}">{{ d.news.title }}</a></strong>
+                <div>
-                <a href="{{ d.news.club.get_absolute_url() }}">{{ d.news.club }}</a></p>
+                    <strong><a href="{{ url('com:news_detail', news_id=d.news.id) }}">{{ d.news.title }}</a></strong>
-            <p>{{ d.news.summary|markdown }}</p>
+                    <a href="{{ d.news.club.get_absolute_url() }}">{{ d.news.club }}</a>
-        </section>
+                </div>
+                <div class="agenda_item_content">{{ d.news.summary|markdown }}</div>
+            </div>
         {% endfor %}
         </div>
     </div>
@@ -77,7 +44,7 @@ div#agenda_content {
     {% 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="date">
+        <p 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) }}
@@ -90,12 +57,12 @@ div#agenda_content {
     <h4>{% trans %}Events today and the next few days{% endtrans %}</h4>
     {% 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="date">{{ d|localtime|date(DATETIME_FORMAT) }}</h5>
+    <h5 class="news_date">{{ d|localtime|date(DATETIME_FORMAT) }}</h5>
     {% 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()) %}
     <section class="news_event">
         <h4> <a href="{{ url('com:news_detail', news_id=news.id) }}">{{ news.title }}</a></h4>
-        <p class="date">
+        <p 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) }}
@@ -111,13 +78,14 @@ div#agenda_content {
     {% for news in object_list.filter(dates__start_date__gte=timezone.now()+timedelta(days=5), type="EVENT", is_moderated=True) %}
     <section>
         <h4> <a href="{{ url('com:news_detail', news_id=news.id) }}">{{ news.title }}</a>
-            <span class="date">{{ news.dates.first().start_date|localtime|date(DATETIME_FORMAT) }}
+            <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 %}
+</div>
 {% endblock %}
 
 

core/static/core/style.scss

@@ -293,7 +293,7 @@ header {
 
 /*--------------------------------CONTENT------------------------------*/
   #quick_notif {
-    width: 90%;
+    width: 100%;
     margin: 0px auto;
     list-style-type: none;
     background: $second-color;
@@ -309,6 +309,94 @@ header {
     overflow: auto;
   }
 
+  .tool_bar {
+    overflow: auto;
+    padding: 4px;
+    .tools {
+      display: flex;
+      flex-wrap: wrap;
+      float: right;
+      background: $white-color;
+      border: 1px solid $black-color;
+      text-align: center;
+      a {
+        padding: 10px;
+        display: inline-block;
+        color: $black-color;
+        flex: 1;
+        flex-wrap: nowrap;
+        white-space: nowrap;
+        &.selected_tab {
+          background: $second-color;
+          color: $black-color;
+        }
+        &:hover {
+          background: $primary-color;
+          color: $white-color;
+        }
+      }
+    }
+  }
+/*---------------------------------NEWS--------------------------------*/
+  #news {
+    section {
+      padding: 5px;
+    }
+    section.news_call, section.news_notice {
+      background: lightgrey;
+      margin: 2px;
+    }
+    section.news_event:nth-of-type(even) {
+      background: lightblue;
+    }
+    #agenda {
+      box-shadow: $black-color 2px 2px 2px;
+      display: block;
+      width: 20%;
+      float: right;
+      background: white;
+      font-size: 70%;
+      border: solid 1px $black-color;
+      #agenda_title {
+        margin: 0em;
+        padding: 0.5em;
+        font-weight: bold;
+        font-size: 150%;
+        text-align: center;
+        text-transform: uppercase;
+        border-bottom: solid 1px $black-color;
+        background: $second-color;
+
+      }
+      #agenda_content {
+        overflow: auto;
+        height: 20em;
+        .agenda_item {
+          padding: 0.5em;
+          margin-bottom: 0.5em;
+          &:nth-of-type(even) {
+            background: $secondary-neutral-light-color;
+          }
+          .agenda_time {
+            font-size: 90%;
+            color: grey;
+          }
+          .agenda_item_content {
+            p {
+              margin-top: 0.2em;
+            }
+          }
+        }
+      }
+    }
+    .news_weekly p {
+      margin: 0.2em;
+    }
+    .news_date {
+      font-size: small;
+      color: grey;
+    }
+  }
 }
 
 .helptext {
@@ -455,24 +543,6 @@ u, .underline {
   text-decoration: underline;
 }
 
-.tool-bar {
-  overflow: auto;
-  padding: 4px;
-}
-
-.tools {
-  float: right;
-  border: 1px solid $primary-neutral-light-color;
-  a {
-    padding: 10px;
-    display: inline-block;
-  }
-}
-
-.selected_tab {
-  background: $primary-neutral-light-color;
-}
-
 #basket {
   width: 40%;
   background: $primary-neutral-light-color;
@@ -918,3 +988,7 @@ label {
   background: $primary-color;
   border-color: $primary-color;
 }
+.ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-top,
+.ui-corner-left {
+  border-radius: 0px;
+}

core/templates/core/base.jinja

@@ -142,7 +142,7 @@
           {% block nav %}
           {% if not popup %}
           <nav>
-              <a href="https://ae.utbm.fr/">{% trans %}Main{% endtrans %}</a>
+              <a href="{{ url('core:index') }}">{% trans %}Main{% endtrans %}</a>
               <a href="{{ url('matmat:search_clear') }}">{% trans %}Matmatronch{% endtrans %}</a>
               <a href="{{ url('core:page', page_name="Index") }}">{% trans %}Wiki{% endtrans %}</a>
               <a href="{{ url('sas:main') }}">{% trans %}SAS{% endtrans %}</a>
@@ -163,16 +163,16 @@
 
           <div id="content">
               {% if list_of_tabs %}
-              <div class="tool-bar">
+              <div class="tool_bar">
                   <div>{{ tabs_title }}</div>
                   <div class="tools">
-                      {% for t in list_of_tabs %}
+                      {% for t in list_of_tabs -%}
                       <a href="{{ t.url }}"
                           {%- if current_tab == t.slug %}
                               class="selected_tab"
                           {%- endif -%}
                       >{{ t.name }}</a>
-                      {% endfor %}
+                      {%- endfor %}
                   </div>
                   <hr>
               </div>

core/templates/core/file.jinja

@@ -24,7 +24,7 @@
 {% block content %}
 {{ print_file_name(file) }}
 
-<div class="tool-bar">
+<div class="tool_bar">
     <div class="tools">
         <div>
             {% set home = user.home %}

core/templates/core/page.jinja

@@ -22,7 +22,7 @@
 {% block content %}
 {{ print_page_name(page) }}
 
-<div class="tool-bar">
+<div class="tool_bar">
     <div class="tools">
         {% if page %}
         <a href="{{ url('core:page', page.get_full_name()) }}">{% trans %}View{% endtrans %}</a>