Fix the logos, and add the project details implementation

diff --git a/app/static/src/sass/modules/_all.scss b/app/static/src/sass/modules/_all.scss
index ba59dbaa28600ebedf4a34a6f9af5c8c5d1564f1..cefe9f5eb42991b36f8584f89c494f2c4a59c1ff 100755 (executable)
--- a/app/static/src/sass/modules/_all.scss
+++ b/app/static/src/sass/modules/_all.scss
@@ -31,6 +31,7 @@
 @import 'share-links';
 @import 'partners-list';
 @import 'banner';
+@import 'project-details';
 
 // Typography modules
 @import 'dashed';

diff --git a/app/static/src/sass/modules/_project-details.scss b/app/static/src/sass/modules/_project-details.scss
new file mode 100644 (file)
index 0000000..8ab3664
--- /dev/null
+++ b/app/static/src/sass/modules/_project-details.scss
@@ -0,0 +1,99 @@
+$module: ".project-details";
+
+#{$module} {
+
+    &__title {
+
+        text-align: left;
+        @include padding-left(2);
+        margin-left: 200px;
+        @include margin-top(0);
+
+        @include mq($until: lg) {
+            margin-left: 150px;
+        }
+
+        @include mq($until: md) {
+            margin-left: 150px;
+        }
+
+        @include mq($until: sm) {
+            margin-left: 0;
+            padding-left: 0;
+        }
+
+    }
+
+    &__item {
+
+
+    }
+
+    &__item-title {
+
+        font-weight: weight(bold);
+        float: left;
+        clear: both;
+        width: 200px;
+        text-align: right;
+        @include margin-right(2);
+
+        @include mq($until: lg) {
+            width: 150px;
+        }
+
+        @include mq($until: md) {
+            width: 150px;
+        }
+
+        @include mq($until: sm) {
+            float: none;
+            text-align: left;
+        }
+
+    }
+
+    &__item-desc {
+
+        float: left;
+        width: 200px;
+        @include font-size(m);
+        font-weight: weight(light);
+
+        @include mq($until: lg) {
+            width: 200px;
+        }
+
+        @include mq($until: md) {
+            width: 200px;
+        }
+
+        @include mq($until: sm) {
+            float: none;
+        }
+
+    }
+
+    &__logo {
+
+        clear: both;
+        @include padding-left(0);
+        margin-left: 200px;
+        text-align: left;
+
+        @include mq($until: lg) {
+            margin-left: 150px;
+        }
+
+        @include mq($until: md) {
+            margin-left: 150px;
+        }
+
+        @include mq($until: sm) {
+            margin-left: 0;
+            @include margin-bottom(2);
+        }
+
+    }
+
+}

diff --git a/app/templates/core/inc/logo.html b/app/templates/core/inc/logo.html
index 4cd6b567093f259f2dee3db5b4f1816b1bf52fb7..a316799080201cf5f92db4b0a414f9baf690a208 100644 (file)
--- a/app/templates/core/inc/logo.html
+++ b/app/templates/core/inc/logo.html
@@ -1,18 +1,6 @@
 {% load mezzanine_tags i18n %}
 {% if images %}
-    <div class="white-bg pb2">
-        <div class="page__block{% if block.background_color %} page__block--{{ block.background_color }}{% endif %}">
-            <div class="container">
-                <div class="row" data-summary-content>
-                    <div class="col-sm-9 col-sm-push-3 col-lg-8 col-lg-push-2">
-                        <ul class="partners-list">
-                            {% for image in images %}
-                                <li class="partners-list__item" style="background-image:url('{{ MEDIA_URL }}{{ image.file }}');"><img alt="{{ image.title }}" src="{{ MEDIA_URL }}{{ image.file }}"></li>
-                            {% endfor %}
-                        </ul>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
+    {% for image in images %}
+        <li class="partners-list__item" style="background-image:url('{{ MEDIA_URL }}{{ image.file }}');"><img alt="{{ image.title }}" src="{{ MEDIA_URL }}{{ image.file }}"></li>
+    {% endfor %}
 {% endif %}

diff --git a/app/templates/pages/custompage.html b/app/templates/pages/custompage.html
index fbaf1de4e8e1f39f25b282b8fe8a591567a86ccb..a9d18eb38526754a9dd1211307799031ba03f6ce 100644 (file)
--- a/app/templates/pages/custompage.html
+++ b/app/templates/pages/custompage.html
@@ -115,7 +115,21 @@
 {% endblock %}
 
 {% block logo %}
-  {% with page.custompage.images.all|get_type:'logo' as images %}
-    {% include 'core/inc/logo.html' %}
-  {% endwith %}
+    {% with page.custompage.images.all|get_type:'logo' as images %}
+        {% if images %}
+            <div class="page__block{% if block.background_color %} page__block--{{ block.background_color }}{% endif %}">
+                <div class="white-bg pb2">
+                    <div class="container">
+                        <div class="row" data-summary-content>
+                            <div class="col-sm-9 col-sm-push-3 col-lg-8 col-lg-push-2">
+                                <ul class="partners-list">
+                                    {% include 'core/inc/logo.html' %}
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        {% endif %}
+    {% endwith %}
 {% endblock %}

diff --git a/app/templates/projects/project_detail.html b/app/templates/projects/project_detail.html
index 91a76c832bc9f7ccf63e845e0776b1f6cfac1efe..32a5ccfb3a33bcfc2ca7da407547eb847985f169 100644 (file)
--- a/app/templates/projects/project_detail.html
+++ b/app/templates/projects/project_detail.html
@@ -1,6 +1,31 @@
 {% extends "pages/page.html" %}
 {% load mezzanine_tags keyword_tags i18n organization_tags %}
 
+{% block meta_title %}{{ project.meta_title }}{% endblock %}
+
+{% block meta_keywords %}{% metablock %}
+{% keywords_for project as keywords %}
+{% for keyword in keywords %}
+    {% if not forloop.first %}, {% endif %}
+    {{ keyword }}
+{% endfor %}
+{% endmetablock %}{% endblock %}
+
+{% block page_class %}
+    project
+{% endblock %}
+
+{% block breadcrumb_menu %}
+
+    {{ block.super }}
+
+    {% comment %}
+        <!-- TODO: Make the breadcrumb -->
+    {% endcomment %}
+
+    <li class="breadcrumb__item active">{{ project.title }}</li>
+
+{% endblock %}
 
 {% block page_title %}
 
@@ -8,96 +33,193 @@
         <h1 class="dotted">{{ project.title }}</h1>
     {% endeditable %}
 
+    {% if project.description %}
+        {% editable project.description %}
+            <div class="chapo">
+                {{ project.description }}
+            </div>
+        {% endeditable %}
+    {% endif %}
+
 {% endblock %}
 
 {% block page_content %}
-  {% if project.description %}
-    {{ project.description }}
-  {% endif %}
 
-  {% if project.content %}
-    {{ project.content|richtext_filters|safe }}
-  {% endif %}
+    {% if project.content %}
+        {{ project.content|richtext_filters|safe }}
+    {% endif %}
+
 {% endblock %}
 
 {% block page_audio %}
-  {% with project.audios.all as audios %}
-    {% if audios %}
-      {% include 'core/inc/audio.html' %}
-    {% endif %}
-  {% endwith %}
+    {% with project.audios.all as audios %}
+        {% if audios %}
+            {% include 'core/inc/audio.html' %}
+        {% endif %}
+    {% endwith %}
 {% endblock %}
 
 {% block page_slider %}
-  {% with project.images.all|get_type:'page_slider' as slider_images %}
-    {% if slider_images %}
-      {% include 'core/inc/slider.html' %}
-    {% endif %}
-  {% endwith %}
+    {% with project.images.all|get_type:'page_slider' as slider_images %}
+        {% if slider_images %}
+            {% include 'core/inc/slider.html' %}
+        {% endif %}
+    {% endwith %}
 {% endblock %}
 
 {% block page_video %}
     {% with project.videos.all as videos %}
-      {% if videos %}
-        {% include 'core/inc/video.html' %}
-      {% endif %}
+        {% if videos %}
+            {% include 'core/inc/video.html' %}
+        {% endif %}
     {% endwith %}
 {% endblock %}
 
 {% block page_sub_content %}
     {% with project.blocks.all as blocks %}
-      {% include "core/inc/block.html" %}
+        {% include "core/inc/block.html" %}
     {% endwith %}
 {% endblock %}
 
 {% block page_related_content %}
-<div>
-  <div>
-    {% trans "Project details" %}<br>
-
-    {% if project.program %}
-      {% trans "Program" %} {{ project.program }}<br>
-    {% endif %}
-
-    {% if project.program_type %}
-      {% trans "Program type" %} {{ project.program_type }}<br>
-    {% endif %}
 
-    {% trans "Beginning" %} {{ project.date_from }}<br>
-    {% trans "End" %} {{ project.date_to }}<br>
-    {% trans "Status" %} {{ project.project_status }}<br>
+    <div class="page__block page__block--yellow">
+        <div class="container">
+            <div class="row">
+                <div class="col-sm-12 col-lg-10 col-lg-push-1">
+                    <div class="row">
+                        <div class="col-sm-6">
+                            <div class="project-details">
+                                <h3 class="dotted project-details__title">{% trans "Project details" %}</h3>
+
+                                <div>
+                                    {% if project.program %}
+                                        <div class="project-details__item">
+                                            <div class="project-details__item-title">
+                                                {% trans "Program" %}
+                                            </div>
+                                            <div class="project-details__item-desc">
+                                                {{ project.program }}
+                                            </div>
+                                        </div>
+                                    {% endif %}
+
+                                    {% if project.program_type %}
+                                        <div class="project-details__item">
+                                            <div class="project-details__item-title">
+                                                {% trans "Program type" %}
+                                            </div>
+                                            <div class="project-details__item-desc">
+                                                {{ project.program_type }}
+                                            </div>
+                                        </div>
+                                    {% endif %}
+
+                                    <div class="project-details__item">
+                                        <div class="project-details__item-title">
+                                            {% trans "Beginning" %}
+                                        </div>
+                                        <div class="project-details__item-desc">
+                                            {{ project.date_from }}
+                                        </div>
+                                    </div>
+
+                                    <div class="project-details__item">
+                                        <div class="project-details__item-title">
+                                            {% trans "End" %}
+                                        </div>
+                                        <div class="project-details__item-desc">
+                                            {{ project.date_to }}
+                                        </div>
+                                    </div>
+
+                                    <div class="project-details__item">
+                                        <div class="project-details__item-title">
+                                            {% trans "Status" %}
+                                        </div>
+                                        <div class="project-details__item-desc">
+                                            {{ project.project_status }}
+                                        </div>
+                                    </div>
+
+                                    {% if project.website %}
+                                        <div class="project-details__item">
+                                            <div class="project-details__item-title">
+                                                {% trans "Website" %}
+                                            </div>
+                                            <div class="project-details__item-desc">
+                                                <a href="{{ project.website }}" target="_blank" title="{{ project.title }}">{{ project.website }}</a>
+                                            </div>
+                                        </div>
+                                    {% endif %}
+
+                                    <div class="project-details__logo">
+                                        {% with project.images.all|get_type:'logo' as images %}
+                                            {% include 'core/inc/logo.html' %}
+                                        {% endwith %}
+                                    </div>
+
+                                </div>
+                            </div>
+                        </div>
+                        <div class="col-sm-6">
+                            <div class="project-details">
+                                <h3 class="dotted project-details__title">{% trans "Participants" %}</h3>
+
+                                <div>
+
+                                    {% if project.lead_team %}
+                                        <div class="project-details__item">
+                                            <div class="project-details__item-title">
+                                                {% trans "Project lead team" %}
+                                            </div>
+                                            <div class="project-details__item-desc">
+                                                {{ project.lead_team }}
+                                            </div>
+                                        </div>
+                                    {% endif %}
+
+                                    <div class="project-details__item">
+                                        <div class="project-details__item-title">
+                                            {% trans "Partners" %}
+                                        </div>
+                                        <div class="project-details__item-desc">
+                                            {% for team in project.teams.all %}
+                                                {{ team }}<br>
+                                            {% endfor %}
+                                            {% for organization in project.organizations.all %}
+                                                {{ organization }}<br>
+                                            {% endfor %}
+                                        </div>
+                                    </div>
+
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
 
-    {% if project.website %}
-      {% trans "Website" %} {{ project.website }}<br>
-    {% endif %}
-
-    {% with project.images.all|get_type:'logo' as images %}
-      {% include 'core/inc/logo.html' %}
-    {% endwith %}
-  </div>
-  <div>
-    {% trans "Participants" %}<br>
-
-    {% if project.lead_team %}
-      {% trans "Project lead team"%} {{ project.lead_team }}<br>
-    {% endif %}
-
-    {% trans "Partners" %}
-
-    {% for team in project.teams.all %}
-      {{ team }}<br>
-    {% endfor %}
-    {% for organization in project.organizations.all %}
-      {{ organization }}<br>
-    {% endfor %}
-  </div>
-</div>
 {% endblock %}
 
 {% block logo %}
-{% for organization in project.organizations.all %}
-  {% with organization.images.all|get_type:'logo' as images %}
-    {% include 'core/inc/logo.html' %}
-  {% endwith %}
-{% endfor %}
+    <div class="page__block{% if block.background_color %} page__block--{{ block.background_color }}{% endif %}">
+        <div class="white-bg pb2">
+            <div class="container">
+                <div class="row" data-summary-content>
+                    <div class="col-sm-9 col-sm-push-3 col-lg-8 col-lg-push-2">
+                        <ul class="partners-list">
+                            {% for organization in project.organizations.all %}
+                                {% with organization.images.all|get_type:'logo' as images %}
+                                    {% include 'core/inc/logo.html' %}
+                                {% endwith %}
+                            {% endfor %}
+                        </ul>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
 {% endblock %}