Learn Area Footer Redesign #1645

Oluwabukolab · 2023-10-15T23:31:52Z

This fixes #1591.

sabine · 2023-10-20T08:24:17Z

Hey @sophiatunji! This is really nice, the only two things left to do seem

to add Tailwind styles, and
to move the secondary footer in package_layout.eml to the main content area.

Oluwabukolab · 2023-10-20T14:15:39Z

Thank you for the review Sabine! Will make the necessary changes! :)

Oluwabukolab · 2023-10-20T22:40:54Z

My PR is ready for review, cc @sabine @SaySayo

sabine

Hey @sophiatunji, that looks really good already! 👍 Here's some feedback:

Policies section should not be fixed to the bottom. This is just a part of the non-sticky footer.
On small screens (320px): We need to figure out how to collapse this in a way that works. Policies section is too wide to be a single row. Resources section seems to have whitespace right of it that looks empty, while the left column seems very compressed.
whitespace between OCaml Logo and "Innovation. Community. Security." seems slightly larger in the design than in the implementation.
In the design, there is a small spacing above the section headings that this implementation doesn't have. See Figma:

sabine · 2023-10-21T10:47:02Z

src/ocamlorg_frontend/components/secondary_footer.eml

+    <section class="flex justify-between w-[80%]">
+      <div class="flex flex-col gap-4">
+        <div class="flex flex-col gap-4">


Click area for links is unnecessarily small. Generally, when you have links in a navigation, for the sake of people being able to click on them easily, use padding instead of gap. Here, py-2.5 for the a links seems to be closest to the design.

src/ocamlorg_frontend/components/secondary_footer.eml

src/ocamlorg_frontend/layouts/package_layout.eml

src/ocamlorg_frontend/components/secondary_footer.eml

Oluwabukolab · 2023-10-23T01:16:33Z

the about and resources have a uniform space between them

and I have made the remaining corrections. @sabine @SaySayo

sabine · 2023-10-24T13:22:35Z

Great, I'll put this on staging for our designer to review! 👍

Clairevanden · 2023-10-24T15:35:28Z

Hello @sophiatunji , it is Claire the designer, what you have done looks great. I just have 2 small recommendations to make. You can have a look to my screen shot attach. Let me know if you have any questions in those! Thanks

Oluwabukolab · 2023-10-25T08:36:42Z

Thanks for the review! I have made the recommended adjustments. cc @SaySayo @sabine @Clairevanden

sabine

Hey @sophiatunji, great work, here's some detail adjustments.

I figured a grid column layout will probably collapse better here (just like the existing footer on the other pages) and adjusted some paddings and spacings.

sabine · 2023-10-25T12:43:49Z

src/ocamlorg_frontend/layouts/package_layout.eml

@@ -114,8 +114,9 @@ Layout.base
          <%s! left_sidebar_html %>
        </div>

-        <div class="flex-1 z-0 z- min-w-0 pt-6 pb-12 md:pb-[70vh]">
+        <div class="flex-1 z-0 z- min-w-0 pt-6 pb-12">


Suggested change

<div class="flex-1 z-0 z- min-w-0 pt-6 pb-12">

<div class="flex-1 z-0 z- min-w-0 pt-6">

remove bottom padding so we can't scroll past the footer

sabine · 2023-10-25T12:44:00Z

src/ocamlorg_frontend/layouts/learn_layout.eml

@@ -121,8 +121,9 @@ inner_html
        <%s! Option.value ~default:"" left_sidebar_html %>
      </div>

-      <div class="flex-1 z-0 z- min-w-0 lg:pt-6 pb-12 lg:pb-[70vh] <%s! if right_sidebar_html != None then "lg:max-w-3xl" else "" %>">
+      <div class="flex-1 z-0 z- min-w-0 lg:pt-6 pb-12 <%s! if right_sidebar_html != None then "lg:max-w-3xl" else "" %>">


Suggested change

<div class="flex-1 z-0 z- min-w-0 lg:pt-6 pb-12 <%s! if right_sidebar_html != None then "lg:max-w-3xl" else "" %>">

<div class="flex-1 z-0 z- min-w-0 lg:pt-6 <%s! if right_sidebar_html != None then "lg:max-w-3xl" else "" %>">

sabine · 2023-10-25T12:44:30Z

src/ocamlorg_frontend/components/secondary_footer.eml

+      <a href="<%s Url.carbon_footprint %>" class="font-normal text-lighter leading-7 py-1">Carbon Footprint</a>
+      <a href="<%s Url.governance %>" class="font-normal text-lighter leading-7 py-1">Governance</a>
+      <a href="<%s Url.privacy_policy %>" class="font-normal text-lighter leading-7 py-1">Privacy</a>
+      <a href="<%s Url.code_of_conduct %>" class="font-normal text-lighter leading-7 py-1">Code Of Conduct</a>


Suggested change

<a href="<%s Url.carbon_footprint %>" class="font-normal text-lighter leading-7 py-1">Carbon Footprint</a>

<a href="<%s Url.governance %>" class="font-normal text-lighter leading-7 py-1">Governance</a>

<a href="<%s Url.privacy_policy %>" class="font-normal text-lighter leading-7 py-1">Privacy</a>

<a href="<%s Url.code_of_conduct %>" class="font-normal text-lighter leading-7 py-1">Code Of Conduct</a>

<a href="<%s Url.carbon_footprint %>" class="font-normal text-lighter leading-7 p-2.5">Carbon Footprint</a>

<a href="<%s Url.governance %>" class="font-normal text-lighter leading-7 p-2.5">Governance</a>

<a href="<%s Url.privacy_policy %>" class="font-normal text-lighter leading-7 p-2.5">Privacy</a>

<a href="<%s Url.code_of_conduct %>" class="font-normal text-lighter leading-7 p-2.5">Code Of Conduct</a>

sabine · 2023-10-25T12:50:45Z

src/ocamlorg_frontend/components/secondary_footer.eml

-  </div>
-</footer>
+    <div
+      class="flex flex-wrap gap-x-7 md:justify-between items-center py-4 border-solid border-t-[1px] border-[#00000033] bottom-0 bg-white">


Suggested change

class="flex flex-wrap gap-x-7 md:justify-between items-center py-4 border-solid border-t-[1px] border-[#00000033] bottom-0 bg-white">

class="flex flex-wrap gap-x-7 md:justify-between items-center py-2 border-solid border-t-[1px] border-[#00000033] bottom-0 bg-white">

sabine · 2023-10-25T12:51:12Z

src/ocamlorg_frontend/components/secondary_footer.eml

+        <a href="<%s Url.install %>" class="font-normal text-lighter leading-7 py-1">Install OCaml</a>
+        <a href="<%s Url.getting_started %>" class="font-normal text-lighter leading-7 py-1">Get Started</a>
+        <a href="<%s Url.platform %>" class="font-normal text-lighter leading-7 py-1">Platform Tools</a>
+        <a href="<%s Url.manual %>" class="font-normal text-lighter leading-7 py-1">Language Manual</a>
+        <a href="<%s Url.api %>" class="font-normal text-lighter leading-7 py-1">Standard Library API</a>
+        <a href="<%s Url.books %>" class="font-normal text-lighter leading-7 py-1">Books</a>
+        <a href="<%s Url.exercises %>" class="font-normal text-lighter leading-7 py-1">Exercises</a>
+        <a href="<%s Url.papers %>" class="font-normal text-lighter leading-7 py-1">Papers</a>
+        <a href="<%s Url.playground %>" class="font-normal text-lighter leading-7 py-1">OCaml Playground</a>


Suggested change

<a href="<%s Url.install %>" class="font-normal text-lighter leading-7 py-1">Install OCaml</a>

<a href="<%s Url.getting_started %>" class="font-normal text-lighter leading-7 py-1">Get Started</a>

<a href="<%s Url.platform %>" class="font-normal text-lighter leading-7 py-1">Platform Tools</a>

<a href="<%s Url.manual %>" class="font-normal text-lighter leading-7 py-1">Language Manual</a>

<a href="<%s Url.api %>" class="font-normal text-lighter leading-7 py-1">Standard Library API</a>

<a href="<%s Url.books %>" class="font-normal text-lighter leading-7 py-1">Books</a>

<a href="<%s Url.exercises %>" class="font-normal text-lighter leading-7 py-1">Exercises</a>

<a href="<%s Url.papers %>" class="font-normal text-lighter leading-7 py-1">Papers</a>

<a href="<%s Url.playground %>" class="font-normal text-lighter leading-7 py-1">OCaml Playground</a>

<a href="<%s Url.install %>" class="font-normal text-lighter leading-7 py-2.5">Install OCaml</a>

<a href="<%s Url.getting_started %>" class="font-normal text-lighter leading-7 py-2.5">Get Started</a>

<a href="<%s Url.platform %>" class="font-normal text-lighter leading-7 py-2.5">Platform Tools</a>

<a href="<%s Url.manual %>" class="font-normal text-lighter leading-7 py-2.5">Language Manual</a>

<a href="<%s Url.api %>" class="font-normal text-lighter leading-7 py-2.5">Standard Library API</a>

<a href="<%s Url.books %>" class="font-normal text-lighter leading-7 py-2.5">Books</a>

<a href="<%s Url.exercises %>" class="font-normal text-lighter leading-7 py-2.5">Exercises</a>

<a href="<%s Url.papers %>" class="font-normal text-lighter leading-7 py-2.5">Papers</a>

<a href="<%s Url.playground %>" class="font-normal text-lighter leading-7 py-2.5">OCaml Playground</a>

sabine · 2023-10-25T12:53:05Z

src/ocamlorg_frontend/components/secondary_footer.eml

-      <li>
-        <a class="h-10 md:h-12 flex items-center text-lighter" href="<%s Url.jobs %>" class="text-base leading-6 text-lighter">Jobs</a>
-      </li>
+      <div class="flex flex-col gap-2">


Suggested change

<div class="flex flex-col gap-2">

<div class="flex flex-col">

src/ocamlorg_frontend/components/secondary_footer.eml

sabine

Thank you @sophiatunji for the contribution, this is ready to merge now! 👍

gpetiot added the outreachy Outreachy contributions and blog posts label Oct 16, 2023

Oluwabukolab force-pushed the footer-redesign branch from 44ed8d4 to dd98102 Compare October 16, 2023 22:12

Oluwabukolab marked this pull request as ready for review October 20, 2023 22:40

sabine reviewed Oct 21, 2023

View reviewed changes

src/ocamlorg_frontend/components/secondary_footer.eml Outdated Show resolved Hide resolved

sabine added a commit that referenced this pull request Oct 24, 2023

Learn Area Footer Redesign #1645 (c2e50b3)

21a9c53

sabine reviewed Oct 25, 2023

View reviewed changes

sabine added a commit that referenced this pull request Oct 26, 2023

Learn Area Footer Redesign #1645 (c2e50b3)

d9722b1

Oluwabukolab and others added 7 commits October 26, 2023 15:41

footer redesign draft

5835c0f

rebased on main

a0b6979

added more styling and converted it to tailwind classes

d9d8ac2

fixed corrections in secondary footer

8bb9fd8

adjusted whitepace at bottom and padding

ee0b244

adjusted padding and spaces

57986f8

very minor adjustments, merge ready

b7e920f

sabine force-pushed the footer-redesign branch from 6e16b02 to b7e920f Compare October 26, 2023 13:41

sabine approved these changes Oct 26, 2023

View reviewed changes

sabine merged commit 9090bff into ocaml:main Oct 27, 2023
3 checks passed

cuihtlauac pushed a commit that referenced this pull request Nov 15, 2023

Learn Area Footer Redesign (#1645)

2bd2be3

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Learn Area Footer Redesign #1645

Learn Area Footer Redesign #1645

Oluwabukolab commented Oct 15, 2023 •

edited

sabine commented Oct 20, 2023

Oluwabukolab commented Oct 20, 2023

Oluwabukolab commented Oct 20, 2023

sabine left a comment

sabine Oct 21, 2023

Oluwabukolab commented Oct 23, 2023

sabine commented Oct 24, 2023

Clairevanden commented Oct 24, 2023

Oluwabukolab commented Oct 25, 2023

sabine left a comment

sabine Oct 25, 2023

sabine Oct 25, 2023

sabine Oct 25, 2023

sabine Oct 25, 2023

sabine Oct 25, 2023

sabine Oct 25, 2023

sabine left a comment

	<div class="flex-1 z-0 z- min-w-0 pt-6 pb-12">
	<div class="flex-1 z-0 z- min-w-0 pt-6">

	<div class="flex-1 z-0 z- min-w-0 lg:pt-6 pb-12 <%s! if right_sidebar_html != None then "lg:max-w-3xl" else "" %>">
	<div class="flex-1 z-0 z- min-w-0 lg:pt-6 <%s! if right_sidebar_html != None then "lg:max-w-3xl" else "" %>">

	class="flex flex-wrap gap-x-7 md:justify-between items-center py-4 border-solid border-t-[1px] border-[#00000033] bottom-0 bg-white">
	class="flex flex-wrap gap-x-7 md:justify-between items-center py-2 border-solid border-t-[1px] border-[#00000033] bottom-0 bg-white">

	<div class="flex flex-col gap-2">
	<div class="flex flex-col">

Learn Area Footer Redesign #1645

Learn Area Footer Redesign #1645

Conversation

Oluwabukolab commented Oct 15, 2023 • edited

sabine commented Oct 20, 2023

Oluwabukolab commented Oct 20, 2023

Oluwabukolab commented Oct 20, 2023

sabine left a comment

Choose a reason for hiding this comment

sabine Oct 21, 2023

Choose a reason for hiding this comment

Oluwabukolab commented Oct 23, 2023

sabine commented Oct 24, 2023

Clairevanden commented Oct 24, 2023

Oluwabukolab commented Oct 25, 2023

sabine left a comment

Choose a reason for hiding this comment

sabine Oct 25, 2023

Choose a reason for hiding this comment

sabine Oct 25, 2023

Choose a reason for hiding this comment

sabine Oct 25, 2023

Choose a reason for hiding this comment

sabine Oct 25, 2023

Choose a reason for hiding this comment

sabine Oct 25, 2023

Choose a reason for hiding this comment

sabine Oct 25, 2023

Choose a reason for hiding this comment

sabine left a comment

Choose a reason for hiding this comment

Oluwabukolab commented Oct 15, 2023 •

edited