Fix grids and CSS for events and stories

DjangoGirls · May 23, 2024 · 94e0e5a · 94e0e5a
1 parent c4bb37e
commit 94e0e5a
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 19 deletions.
diff --git a/static/source/css/global.styl b/static/source/css/global.styl
@@ -277,7 +277,7 @@ span.highlighted-number
         padding: 0
         background: url('../img/global/krakow.png') no-repeat
         background-size: cover
-        width: calc(33% - 30px)
+        width: 90%
         height: 210px
         text-align: center
         color: white

diff --git a/templates/core/events.html b/templates/core/events.html
@@ -14,12 +14,13 @@ <h2>
                 </div>
             </div>
 
-            <div class="row">
-                {% for event in future_events %}
-                    {% include 'includes/_event.html' with event=event %}
-                    {% if forloop.counter|divisibleby:3 %}</div><div class="row">{% endif %}
-                {% endfor %}
-            </div>
+            {% for event in future_events %}
+                {% if forloop.first %}<div class="row">{% endif %}
+                <div class="col event">
+                    {% include 'includes/_event.html' with event=event %}</div>
+                {% if forloop.counter|divisibleby:3 %}</div><div class="row">{% endif %}
+                {% if forloop.last %}</div>{% endif %}
+            {% endfor %} 
 
             <section id="organize">
                 {% include 'includes/_no_event.html' %}
@@ -31,12 +32,13 @@ <h2>{% trans "Past events" %}</h2>
                 </div>
             </div>
 
-            <div class="row">
                 {% for event in past_events %}
-                    {% include 'includes/_event.html' with event=event %}
+                    {% if forloop.first %}<div class="row">{% endif %}
+                    <div class="col event">
+                        {% include 'includes/_event.html' with event=event %}</div>
                     {% if forloop.counter|divisibleby:3 %}</div><div class="row">{% endif %}
-                {% endfor %}
-            </div>
+                    {% if forloop.last %}</div>{% endif %}
+                {% endfor %} 
         </section>
     </div>
 {% endblock %}
diff --git a/templates/core/index.html b/templates/core/index.html
@@ -97,12 +97,13 @@ <h2>
 
             <div class="upcoming-events">
                 <div class="row-container">
-                    <div class="row">
                     {% for event in future_events %}
-                        {% include 'includes/_event.html' with event=event %}
+                      {% if forloop.first %}<div class="row">{% endif %}
+                      <div class="col event">
+                        {% include 'includes/_event.html' with event=event %}</div>
                         {% if forloop.counter|divisibleby:3 %}</div><div class="row">{% endif %}
-                    {% endfor %}
-                    </div>
+                          {% if forloop.last %}</div>{% endif %}
+                    {% endfor %}    
                 </div>
                 <div class="show-more"><a href="javascript:;">
                     {% blocktrans %}Show all {{ future_events_count }} upcoming events{% endblocktrans %} »
@@ -116,12 +117,13 @@ <h2>
                     <h2>{% trans "Badass Django Ladies" %}</h2>
                     <p>{% trans "Each week we try to introduce one badass lady who uses Python or Django and highlight her work:" %}</p>
 
-                    <div class="row">
                     {% for story in stories %}
-                        {% include 'includes/_story.html' with story=story %}
+                    {% if forloop.first %}<div class="row">{% endif %}
+                      <div class="col story">
+                        {% include 'includes/_story.html' with story=story %}</div>
+                      {% if forloop.counter|divisibleby:2 %}</div><div class="row">{% endif %}
+                      {% if forloop.last %}</div>{% endif %}
                     {% endfor %}
-                    </div>
-
                     <p><a href="{% url 'story:stories' %}">{% trans "Read all Django Stories" %} »</a></p>
                 </div>
                 <div class="col-md-6">