Latest news and featured projects component #41

Moggach · 2022-11-14T20:29:06Z

Description

Adds gallery component as a struct block for now - needs hooking up to database
Should be re-usable across any content type - will need to add logic for this
A HTML and CSS template
A Stimulus Carousel component for the slider

Motivation and Context

Addresses issues #218 and #216

How Can It Be Tested?

Download the branch and run locally. Include the 'carousel' block on a page template
Fill in the required fields in the CMS. View the page.

Screenshots (if appropriate):

Types of changes

New feature (non-breaking change which adds functionality)

Checklist:

I've checked the spec (e.g. Figma file) and documented any divergences.
My code follows the code style of this project.

app/templates/app/blocks/carousel_block.html

package.json

janbaykara · 2022-11-15T10:03:26Z

app/templates/app/blocks/carousel_block.html

+                    {% image card.image fill-300x200 as img %}
+                    <img src="{{ img.url }}" alt="{{ img.alt }}" class="rounded-xl mb-4"/>
+                    <div class="flex flex-row gap-2 items-center text-sm font-medium text-gray-700 mb-4">
+                        {{ card.category }}
+                        <svg class="xmlns"
+                             None="http://www.w3.org/2000/svg"
+                             width="4"
+                             height="5"
+                             viewBox="0 0 4 5"
+                             fill="none">
+                            <path d="M1.99141 4.35869C1.64608 4.35869 1.33808 4.28402 1.06741 4.13469C0.806081 3.97602 0.596081 3.76602 0.437414 3.50469C0.288081 3.23402 0.213414 2.92602 0.213414 2.58069C0.213414 2.22602 0.288081 1.91802 0.437414 1.65669C0.596081 1.38602 0.806081 1.17602 1.06741 1.02669C1.33808 0.868023 1.64608 0.78869 1.99141 0.78869C2.34608 0.78869 2.65408 0.868023 2.91541 1.02669C3.18608 1.17602 3.39608 1.38602 3.54541 1.65669C3.70408 1.91802 3.78341 2.22602 3.78341 2.58069C3.78341 2.92602 3.70408 3.23402 3.54541 3.50469C3.39608 3.76602 3.18608 3.97602 2.91541 4.13469C2.65408 4.28402 2.34608 4.35869 1.99141 4.35869Z" fill="#5F5F5F"/>
+                        </svg>
+                        {% comment %} The metadata we display here will depend on the post category {% endcomment %}
+                        {% if self.impact_area %}{{ self.impact_area }}{% endif %}
+                        {% if card.date %}{{ card.date | date:"d M Y" }}{% endif %}
+                    </div>
+                    <h4 class="font-semibold leading-tight sm:text-xl md:text-2xl text-gray-900 mb-4">{{ card.heading }}</h4>
+                    <p class="text-base font-normal text-gray-700 mb-4">{{ card.blurb }}</p>
+                    {% comment %} The metadata we display here will depend on the post category {% endcomment %}
+                    {% if card.organisation %}<p class="text-base font-semibold text-gray-900 mb-7">{{ card.organisation }}</p>{% endif %}
+                    {% if card.author %}<p class="text-base font-semibold text-gray-900 mb-7">{{ card.author }}</p>{% endif %}
+                </div>


In the future, we should define a carousel_card.html template for each Page Type and include that via {% include page.card_template %}, and use this code as the default implementation.

Okay great - so the 'type' of data passed to the template e.g. news, projects, tools etc will depend on the Page Type?

Yes I think that's wise.

janbaykara · 2022-11-16T11:31:28Z

One comment on the desktop screenshot: I think we want the imagery to be full width across its column, right?

Moggach · 2022-11-16T12:39:08Z

One comment on the desktop screenshot: I think we want the imagery to be full width across its column, right?

Yeah I think this is the case across all screen widths actually. I've changed it now.

app/templates/app/blocks/carousel_block.html

janbaykara · 2022-11-16T13:40:39Z

Ohh, I see the point of having a generic options-value property. I can reuse that for the impact area carousel. Maybe let's keep it that way then?

janbaykara · 2022-11-16T13:47:40Z

Ohh, I see the point of having a generic options-value property. I can reuse that for the impact area carousel. Maybe let's keep it that way then?

E.g. here https://github.com/commonknowledge/hotosm-website/pull/44/files#diff-802d9298b6df63d2c47998b8b32f95e08222bcc2410d7ba2066fc98ce8cdef48

Moggach · 2022-11-16T14:14:40Z

Ohh, I see the point of having a generic options-value property. I can reuse that for the impact area carousel. Maybe let's keep it that way then?

should we set a series of default styles in the constructor and then have the options value property for overriding them for specific use cases?

janbaykara · 2022-11-16T14:47:38Z

Ohh, I see the point of having a generic options-value property. I can reuse that for the impact area carousel. Maybe let's keep it that way then?

should we set a series of default styles in the constructor and then have the options value property for overriding them for specific use cases?

Sounds like a plan, but I wouldn't put it in the constructor. Stimulus has a system for default values.

Moggach · 2022-11-16T17:10:58Z

Ohh, I see the point of having a generic options-value property. I can reuse that for the impact area carousel. Maybe let's keep it that way then?

should we set a series of default styles in the constructor and then have the options value property for overriding them for specific use cases?

Sounds like a plan, but I wouldn't put it in the constructor. Stimulus has a system for default values.

So I think it already does this by referencing here:


export default class extends Controller {
    swiper: Swiper;
    // @ts-ignore
    optionsValue: SwiperOptions;

    static values = {
        options: Object,
    };

and defining here:

   get defaultOptions(): SwiperOptions {
        return {
            navigation: {
                nextEl: ".swiper-button-next",
                prevEl: ".swiper-button-prev",
            },
            breakpoints: {
                0: {
                    slidesPerView: 1,
                    spaceBetween: 30,
                },
                768: {
                    slidesPerView: 2,
                    spaceBetween: 20,
                },
                1024: {
                    slidesPerView: 3,
                    spaceBetween: 30,
                },
            },
        };

So if we're happy with these being the default options we can leave it as is?

conatus · 2022-11-21T12:17:54Z

@Moggach

When merge conflicts are restored, feel that we can take another pass at review here, beyond a draft and get this in. It's quite a big deal to put this in the mix.

…test news templates

Moggach · 2022-11-21T18:09:36Z

This now has a main carousel template which is included with relevant data on latest articles and featured projects templates
Latest articles block now pulls from the database and featured projects can be selected in the editor
I think that
{{ page.impact_area }} and {{ page.organisation }} will be tags? Is that right @janbaykara? Think this can be merged now anyhow

conatus · 2022-11-22T07:00:23Z

Tests failing for the same reason as other branches, which is a security update within one of the packages. Should be a straightforward fix.

conatus · 2022-11-22T07:27:51Z

Test failure coming from https://github.com/commonknowledge/hotosm-website/blob/main/poetry.lock#L968-L974

conatus · 2022-11-22T07:31:40Z

py is consumed by pytest. Likely resolution: upgrade pytest to version that makes this fix.

Note though that this is a false positive. The issue was assigned a CVE without much conversation, for an issue which is extremely low to non-existent risk.

pytest-dev/py#287
pytest-dev/pytest#10392

conatus · 2022-11-22T07:37:47Z

We'd have to jump all the way to the latest version https://github.com/pytest-dev/pytest/releases, but as we currently have minimal tests, do not see this as especially problematic.

conatus

Nice little find with the library here.

Looks good to go to me. This library gives us a lot useful functionality in other places.

I've not checked it out and run the code, but I presume @janbaykara has so proceeding.

conatus · 2022-11-22T09:26:34Z

app/models/wagtail/blocks.py

+class LatestArticles(CarouselBlock):
+    class Meta:
+        template = "app/blocks/latest_articles.html"
+


So latest the LatestArticles block is a raw run of latest articles. Whereas projects can be selected. Cool.

Moggach added 10 commits November 9, 2022 12:28

add initial set up for carousel block

15d669f

add stimulus carousel controller

c81221a

set maximum number of cards in carousel to 3

d326d96

add max cards per view to UI, remove it from block

7dbcc93

add svg icons as buttons

239a5fb

add breakpoints to carousel determining number of slides shown

ef05726

adjust fields on carousel block

1811425

add url field to block

5fe6566

add mobile styling to carousel template

2491388

add desktop styles to carousel template

a1c2191

Moggach requested review from janbaykara and conatus November 14, 2022 20:29

janbaykara reviewed Nov 15, 2022

View reviewed changes

put all of the carousel data options in the controller

9b98122

make card images 100% width

0bab41f

janbaykara reviewed Nov 16, 2022

View reviewed changes

app/templates/app/blocks/carousel_block.html Outdated Show resolved Hide resolved

janbaykara closed this Nov 16, 2022

janbaykara reopened this Nov 16, 2022

fix typo

c364894

merge latest from main

c38089a

Moggach added 2 commits November 21, 2022 13:01

add featured projects and latest news blocks

06647ab

add latest articles template

e75da55

Moggach added 2 commits November 21, 2022 17:55

remove carousel option from homepage content panels

968d553

make one carousel template and include it in featured projects and la…

825d671

…test news templates

Moggach marked this pull request as ready for review November 21, 2022 18:09

Moggach changed the title ~~Gallery component - frontend~~ Latest news and featured projects component Nov 21, 2022

Moggach requested a review from janbaykara November 21, 2022 18:13

conatus mentioned this pull request Nov 22, 2022

Upgrade pytest and minor dependencies #51

Merged

3 tasks

Merge branch 'main' into carousel

9645e53

conatus assigned Moggach Nov 22, 2022

conatus approved these changes Nov 22, 2022

View reviewed changes

conatus removed the request for review from janbaykara November 22, 2022 09:29

conatus merged commit d01e674 into main Nov 22, 2022

conatus deleted the carousel branch November 22, 2022 09:29

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Latest news and featured projects component #41

Latest news and featured projects component #41

Moggach commented Nov 14, 2022 •

edited

janbaykara Nov 15, 2022

Moggach Nov 15, 2022

janbaykara Nov 15, 2022

janbaykara commented Nov 16, 2022

Moggach commented Nov 16, 2022

janbaykara commented Nov 16, 2022

janbaykara commented Nov 16, 2022 •

edited

Moggach commented Nov 16, 2022

janbaykara commented Nov 16, 2022

Moggach commented Nov 16, 2022

conatus commented Nov 21, 2022 •

edited

Moggach commented Nov 21, 2022 •

edited

conatus commented Nov 22, 2022

conatus commented Nov 22, 2022

conatus commented Nov 22, 2022 •

edited

conatus commented Nov 22, 2022

conatus left a comment

conatus Nov 22, 2022

Latest news and featured projects component #41

Latest news and featured projects component #41

Conversation

Moggach commented Nov 14, 2022 • edited

Description

Motivation and Context

How Can It Be Tested?

Screenshots (if appropriate):

Types of changes

Checklist:

janbaykara Nov 15, 2022

Choose a reason for hiding this comment

Moggach Nov 15, 2022

Choose a reason for hiding this comment

janbaykara Nov 15, 2022

Choose a reason for hiding this comment

janbaykara commented Nov 16, 2022

Moggach commented Nov 16, 2022

janbaykara commented Nov 16, 2022

janbaykara commented Nov 16, 2022 • edited

Moggach commented Nov 16, 2022

janbaykara commented Nov 16, 2022

Moggach commented Nov 16, 2022

conatus commented Nov 21, 2022 • edited

Moggach commented Nov 21, 2022 • edited

conatus commented Nov 22, 2022

conatus commented Nov 22, 2022

conatus commented Nov 22, 2022 • edited

conatus commented Nov 22, 2022

conatus left a comment

Choose a reason for hiding this comment

conatus Nov 22, 2022

Choose a reason for hiding this comment

Moggach commented Nov 14, 2022 •

edited

janbaykara commented Nov 16, 2022 •

edited

conatus commented Nov 21, 2022 •

edited

Moggach commented Nov 21, 2022 •

edited

conatus commented Nov 22, 2022 •

edited