Affichage des actus

2017-10-10 11:22:02 +02:00 · 2017-10-10 11:22:02 +02:00 · 5a22b1cd37
commit 5a22b1cd37
parent 0e19abb51a
3 changed files with 103 additions and 38 deletions
--- a/gestioncof/cms/static/cofcms/css/screen.css
+++ b/gestioncof/cms/static/cofcms/css/screen.css
@ -169,21 +169,25 @@ article ul {
 article ul li {
  list-style: outside;
 }
+/* line 98, ../sass/screen.scss */
+article:last-child {
+  margin-bottom: 30px;
+}

-/* line 100, ../sass/screen.scss */
+/* line 103, ../sass/screen.scss */
 .container {
  max-width: 1000px;
  margin: 0 auto;
  position: relative;
 }
-/* line 105, ../sass/screen.scss */
+/* line 108, ../sass/screen.scss */
 .container .aside-wrap {
  position: absolute;
  top: 30px;
  height: 100%;
  width: 250px;
 }
-/* line 111, ../sass/screen.scss */
+/* line 114, ../sass/screen.scss */
 .container .aside-wrap .aside {
  color: #fff;
  position: fixed;
@ -194,43 +198,47 @@ article ul li {
  padding: 15px;
  box-shadow: -4px 4px 1px rgba(0, 0, 0, 0.3);
 }
-/* line 121, ../sass/screen.scss */
+/* line 124, ../sass/screen.scss */
+.container .aside-wrap .aside h2 {
+  color: #fff;
+}
+/* line 128, ../sass/screen.scss */
 .container .aside-wrap .aside .calendar {
  margin: 0 auto;
  display: block;
 }
-/* line 128, ../sass/screen.scss */
+/* line 135, ../sass/screen.scss */
 .container .content {
  max-width: 700px;
  margin-left: auto;
  margin-right: 0;
 }
-/* line 133, ../sass/screen.scss */
+/* line 140, ../sass/screen.scss */
 .container .content .intro {
  border-bottom: 3px solid #a3d200;
  margin: 20px -10px;
  margin-top: 5px;
  padding: 15px 5px;
 }
-/* line 143, ../sass/screen.scss */
+/* line 150, ../sass/screen.scss */
 .container .content section article {
  background: #fff;
  padding: 30px;
  box-shadow: -4px 4px 1px rgba(0, 0, 0, 0.3);
 }
-/* line 147, ../sass/screen.scss */
+/* line 154, ../sass/screen.scss */
 .container .content section article a {
  color: #3cb3a6;
 }
-/* line 152, ../sass/screen.scss */
+/* line 159, ../sass/screen.scss */
 .container .content section article + h2 {
  margin-top: 15px;
 }
-/* line 156, ../sass/screen.scss */
+/* line 163, ../sass/screen.scss */
 .container .content section article + article {
  margin-top: 25px;
 }
-/* line 161, ../sass/screen.scss */
+/* line 168, ../sass/screen.scss */
 .container .content section.directory article.entry {
  width: 80%;
  max-width: 600px;
@ -238,7 +246,7 @@ article ul li {
  position: relative;
  padding-right: 120px;
 }
-/* line 168, ../sass/screen.scss */
+/* line 175, ../sass/screen.scss */
 .container .content section.directory article.entry .entry-image {
  display: block;
  position: absolute;
@ -251,25 +259,25 @@ article ul li {
  transform: translateX(90%);
  top: -15px;
 }
-/* line 180, ../sass/screen.scss */
+/* line 187, ../sass/screen.scss */
 .container .content section.directory article.entry .entry-image img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
 }
-/* line 190, ../sass/screen.scss */
+/* line 197, ../sass/screen.scss */
 .container .content section.actuhome {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: top;
 }
-/* line 196, ../sass/screen.scss */
+/* line 203, ../sass/screen.scss */
 .container .content section.actuhome article + article {
  margin: 0;
 }
-/* line 200, ../sass/screen.scss */
+/* line 207, ../sass/screen.scss */
 .container .content section.actuhome article.actu {
  position: relative;
  background: none;
@ -278,7 +286,7 @@ article ul li {
  min-width: 300px;
  flex: 1;
 }
-/* line 208, ../sass/screen.scss */
+/* line 215, ../sass/screen.scss */
 .container .content section.actuhome article.actu .actu-header {
  position: relative;
  box-shadow: -4px 5px 1px rgba(0, 0, 0, 0.3);
@ -289,7 +297,7 @@ article ul li {
  background-size: cover;
  background-position: center center;
 }
-/* line 218, ../sass/screen.scss */
+/* line 225, ../sass/screen.scss */
 .container .content section.actuhome article.actu .actu-header h2 {
  position: absolute;
  width: 100%;
@ -299,11 +307,11 @@ article ul li {
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.8);
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
 }
-/* line 226, ../sass/screen.scss */
+/* line 233, ../sass/screen.scss */
 .container .content section.actuhome article.actu .actu-header h2 a {
  color: #fff;
 }
-/* line 232, ../sass/screen.scss */
+/* line 239, ../sass/screen.scss */
 .container .content section.actuhome article.actu .actu-misc {
  background: white;
  box-shadow: -2px 2px 1px rgba(0, 0, 0, 0.2);
@ -311,17 +319,17 @@ article ul li {
  padding: 15px;
  padding-top: 5px;
 }
-/* line 239, ../sass/screen.scss */
+/* line 246, ../sass/screen.scss */
 .container .content section.actuhome article.actu .actu-misc .actu-minical {
  display: block;
 }
-/* line 242, ../sass/screen.scss */
+/* line 249, ../sass/screen.scss */
 .container .content section.actuhome article.actu .actu-misc .actu-dates {
  display: block;
  text-align: right;
  font-size: 0.9em;
 }
-/* line 249, ../sass/screen.scss */
+/* line 256, ../sass/screen.scss */
 .container .content section.actuhome article.actu .actu-overlay {
  display: block;
  background: none;
@ -333,41 +341,64 @@ article ul li {
  z-index: 5;
  opacity: 0;
 }
+/* line 272, ../sass/screen.scss */
+.container .content section.actulist article.actu {
+  display: flex;
+  width: 100%;
+  padding: 0;
+}
+/* line 277, ../sass/screen.scss */
+.container .content section.actulist article.actu .actu-image {
+  width: 30%;
+  max-width: 200px;
+  background-size: cover;
+  background-position: center center;
+}
+/* line 283, ../sass/screen.scss */
+.container .content section.actulist article.actu .actu-infos {
+  padding: 15px;
+  flex: 1;
+}
+/* line 287, ../sass/screen.scss */
+.container .content section.actulist article.actu .actu-infos .actu-dates {
+  font-weight: bold;
+  font-size: 0.9em;
+}

-/* line 268, ../sass/screen.scss */
+/* line 299, ../sass/screen.scss */
 .calendar td, .calendar th {
  text-align: center;
  vertical-align: center;
  border: 2px solid transparent;
  padding: 1px;
 }
-/* line 275, ../sass/screen.scss */
+/* line 306, ../sass/screen.scss */
 .calendar th {
  font-weight: bold;
 }
-/* line 279, ../sass/screen.scss */
+/* line 310, ../sass/screen.scss */
 .calendar td {
  font-size: 0.8em;
  width: 25px;
  height: 30px;
 }
-/* line 284, ../sass/screen.scss */
+/* line 315, ../sass/screen.scss */
 .calendar td.out {
  opacity: 0.3;
 }
-/* line 287, ../sass/screen.scss */
+/* line 318, ../sass/screen.scss */
 .calendar td.today {
  border-bottom-color: #000;
 }
-/* line 290, ../sass/screen.scss */
+/* line 321, ../sass/screen.scss */
 .calendar td:nth-child(7) {
  background: rgba(0, 0, 0, 0.3);
 }
-/* line 293, ../sass/screen.scss */
+/* line 324, ../sass/screen.scss */
 .calendar td:nth-child(6) {
  background: rgba(0, 0, 0, 0.2);
 }
-/* line 296, ../sass/screen.scss */
+/* line 327, ../sass/screen.scss */
 .calendar td.hasevent {
  font-weight: bold;
  color: #3cb3a6;
--- a/gestioncof/cms/static/cofcms/sass/screen.scss
+++ b/gestioncof/cms/static/cofcms/sass/screen.scss
@ -95,6 +95,9 @@ article {
            list-style: outside;
        }
    }
+    &:last-child {
+        margin-bottom: 30px;
+    }
 }

 .container {
@ -118,6 +121,10 @@ article {
            padding: 15px;
            box-shadow: -4px 4px 1px rgba(#000, 0.3);

+            h2 {
+                color: #fff;
+            }
+            
            .calendar {
                margin: 0 auto;
                display: block;
@ -260,6 +267,30 @@ article {

                }
            }
+            
+            &.actulist {
+                article.actu {
+                    display:flex;
+                    width: 100%;
+                    padding: 0;
+                    
+                    .actu-image {
+                        width: 30%;
+                        max-width: 200px;
+                        background-size: cover;
+                        background-position: center center;
+                    }
+                    .actu-infos {
+                        padding: 15px;
+                        flex: 1;
+
+                        .actu-dates {
+                            font-weight: bold;
+                            font-size: 0.9em;
+                        }
+                    }
+                }
+            }
        }
    }
 }
--- a/gestioncof/cms/templates/cofcms/cof_actu_index_page.html
+++ b/gestioncof/cms/templates/cofcms/cof_actu_index_page.html
@ -14,13 +14,16 @@
    <section class="actulist">
        {% for actu in page.actus %}
            <article class="actu">
-                <h2><a href="{% pageurl actu %}">{{ actu.title }}</a></h2>
-                {% if actu.is_event %}
-                    <p>{{ actu.chapo }}</p>
-                {% else %}
-                    {{ actu.body|safe|truncatewords_html:25 }}
-                {% endif %}
-                <a href="{% pageurl actu %}">Lire plus &gt;</a>
+                <div class="actu-image" {% if actu.image %}{% image actu.image fill-400x200 as img %}style="background-image:url('{{ img.url }}');"{% endif %}></div>
+                <div class="actu-infos">
+                    <h2><a href="{% pageurl actu %}">{{ actu.title }}</a></h2>
+                    {% if actu.is_event %}
+                        <p><span class="actu-dates">{{ actu.dates|capfirst }}</span><br />{{ actu.chapo }}</p>
+                    {% else %}
+                        {{ actu.body|safe|truncatewords_html:25 }}
+                    {% endif %}
+                    <a href="{% pageurl actu %}">Lire plus &gt;</a>
+                </div>
            </article>
        {% endfor %}
    </section>