From 6126864a67155ad7f29bae6c2d83a0616d2b157f Mon Sep 17 00:00:00 2001
From: Charly C <changaco@changaco.oy.lc>
Date: Thu, 19 Oct 2023 09:16:35 +0200
Subject: [PATCH] roll out the new exploration pages (#2285)

This commit replaces the exploration pages for individuals, organizations and teams with the new `/explore/recipients` and `/explore/hopefuls` pages.
---
 style/base/cards.scss               | 28 +++++++++++++--------
 templates/macros/nav.html           |  5 ++--
 www/%username/giving/index.html.spt |  8 +++---
 www/explore/index.html.spt          | 39 +++++++++++------------------
 4 files changed, 38 insertions(+), 42 deletions(-)

diff --git a/style/base/cards.scss b/style/base/cards.scss
index 00297e2663..f823eb5617 100644
--- a/style/base/cards.scss
+++ b/style/base/cards.scss
@@ -1,16 +1,8 @@
 
 .card {
-    border-radius: 0.5em;
     display: block;
     margin-bottom: 0.5em;
     padding: 0.5em;
-    vertical-align: top;
-}
-.card-default {
-    border: 1px solid $panel-default-border;
-}
-.card-primary {
-    border: 1px solid $panel-primary-border;
 }
 .card-md {
     font-size: $font-size-medium;
@@ -18,17 +10,30 @@
 
 @media (min-width: $screen-sm-min) {
     .card {
+        border-radius: 0.5em;
         display: inline-block;
         margin-right: 1em;
+        vertical-align: top;
         width: 450px;
     }
     .card-narrow {
         width: 290px;
     }
+    .card-center {
+        display: block;
+        margin-left: auto;
+        margin-right: auto;
+    }
+    .card-default {
+        border: 1px solid $panel-default-border;
+    }
+    .card-primary {
+        border: 1px solid $panel-primary-border;
+    }
 }
 
-@media (max-width: $screen-sm-min) {
-    .card-xs-vanish {
+@media (max-width: $screen-xs-max) {
+    .card-default, .card-primary {
         border-radius: 0;
         border-style: dashed;
         border-width: 1px 0;
@@ -40,6 +45,9 @@
             padding-top: 0;
         }
     }
+    .card-xs-vanish {
+        border-width: 0;
+    }
 }
 
 .card.donation {
diff --git a/templates/macros/nav.html b/templates/macros/nav.html
index 80773aff90..6f649de864 100644
--- a/templates/macros/nav.html
+++ b/templates/macros/nav.html
@@ -87,9 +87,8 @@
 % macro nav_explore()
     {{ nav([
         ('/', _('Overview')),
-        ('/teams', _('Teams')),
-        ('/organizations', _('Organizations')),
-        ('/individuals', _('Individuals')),
+        ('/recipients', _('Recipients')),
+        ('/hopefuls', _('Hopefuls')),
         ('/pledges', _('Unclaimed Donations')),
         ('/repositories', _('Repositories')),
         ('/elsewhere', _('Social Networks')),
diff --git a/www/%username/giving/index.html.spt b/www/%username/giving/index.html.spt
index 649cb4f0e6..6d376cb4ee 100644
--- a/www/%username/giving/index.html.spt
+++ b/www/%username/giving/index.html.spt
@@ -281,7 +281,7 @@ next_payday = compute_next_payday_date()
             <input type="hidden" name="currency" value="{{ currency }}" />
         % for tip in tips
             % set tippee = tip.tippee_p
-            <div class="card card-default card-xs-vanish donation">
+            <div class="card card-default donation">
                 <div class="recipient">
                     % set username = tippee.username
                     <div class="col-1"><a href="/{{ username }}/">{{
@@ -429,7 +429,7 @@ next_payday = compute_next_payday_date()
             <input type="hidden" name="currency" value="{{ currency }}" />
         % for tip in pledges
             % set e = tip.e_account
-            <div class="card card-default card-xs-vanish donation">
+            <div class="card card-default donation">
                 <div class="recipient">
                     <div class="col-1"><a href="{{ e.liberapay_path }}">{{
                         avatar_img(e.participant, size=72)
@@ -497,7 +497,7 @@ next_payday = compute_next_payday_date()
         <input type="hidden" name="csrf_token" value="{{ csrf_token }}" />
     % for tip in cancelled_tips
         % set tippee = tip.tippee_p
-        <div class="card card-default card-xs-vanish donation">
+        <div class="card card-default donation">
             <div class="recipient">
                 % set username = tippee.username
                 <div class="col-1"><a href="/{{ username }}/">{{
@@ -555,7 +555,7 @@ next_payday = compute_next_payday_date()
         <input type="hidden" name="csrf_token" value="{{ csrf_token }}" />
     % for tip in cancelled_pledges
         % set e = tip.e_account
-        <div class="card card-default card-xs-vanish donation">
+        <div class="card card-default donation">
             <div class="recipient">
                 <div class="col-1"><a href="{{ e.liberapay_path }}">{{
                     avatar_img(e.participant, size=72)
diff --git a/www/explore/index.html.spt b/www/explore/index.html.spt
index 5d0287fb1b..b58430d1fc 100644
--- a/www/explore/index.html.spt
+++ b/www/explore/index.html.spt
@@ -9,37 +9,25 @@ title = _("Explore")
 % extends "templates/layouts/explore.html"
 
 % block content
+<div class="text-center">
 
-    <p>{{ _(
-        "Liberapay provides several ways of finding great people to donate to:"
-    ) }}</p>
-    <br>
-
-    <div class="card card-default card-md text-center">
-        <h2 class="text-info">{{ _("Teams") }}</h2>
-        <p>{{ _(
-            "A team is a group of users working on a specific project."
-        ) }}</p>
-        <p><a class="btn btn-info btn-lg" href="/explore/teams">{{ _("Explore Teams") }}</a></p>
-    </div>
-
-    <div class="card card-default card-md text-center">
-        <h2 class="text-info">{{ _("Organizations") }}</h2>
+    <div class="card card-default card-md text-center card-xs-vanish">
+        <h2 class="text-info">{{ _("Recipients") }}</h2>
         <p>{{ _(
-            "Great nonprofits and companies trying to improve the world."
+            "People and projects who receive donations through Liberapay."
         ) }}</p>
-        <p><a class="btn btn-info btn-lg" href="/explore/organizations">{{ _("Explore Organizations") }}</a></p>
+        <p><a class="btn btn-info btn-lg" href="/explore/recipients">{{ _("Explore Recipients") }}</a></p>
     </div>
 
-    <div class="card card-default card-md text-center">
-        <h2 class="text-info">{{ _("Individuals") }}</h2>
+    <div class="card card-default card-md text-center card-xs-vanish">
+        <h2 class="text-info">{{ _("Hopefuls") }}</h2>
         <p>{{ _(
-            "People like you who contribute to the commons (art, knowledge, software, …)."
+            "Users who are hoping to receive their first donations through Liberapay."
         ) }}</p>
-        <p><a class="btn btn-info btn-lg" href="/explore/individuals">{{ _("Explore Individuals") }}</a></p>
+        <p><a class="btn btn-info btn-lg" href="/explore/hopefuls">{{ _("Explore Hopefuls") }}</a></p>
     </div>
 
-    <div class="card card-default card-md text-center">
+    <div class="card card-default card-md text-center card-xs-vanish card-center">
         <h2 class="text-info">{{ _("Pledges") }}</h2>
         <p>{{ _(
             "Liberapay allows pledging to fund people who haven't joined the site yet."
@@ -47,7 +35,7 @@ title = _("Explore")
         <p><a class="btn btn-info btn-lg" href="/explore/pledges">{{ _("Explore Pledges") }}</a></p>
     </div>
 
-    <div class="card card-default card-md text-center">
+    <div class="card card-default card-md text-center card-xs-vanish">
         <h2 class="text-info">{{ _("Repositories") }}
             <small title="{{ _("A repository contains a project's data, for example the source code of an application.") }}"
                    data-toggle="tooltip" data-placement="top"
@@ -60,7 +48,7 @@ title = _("Explore")
         <p><a class="btn btn-info btn-lg" href="/explore/repositories">{{ _("Explore Repositories") }}</a></p>
     </div>
 
-    <div class="card card-default card-md text-center">
+    <div class="card card-default card-md text-center card-xs-vanish">
         <h2 class="text-info">{{ _("Social Networks") }}</h2>
         <p>{{ _(
             "Browse the accounts that Liberapay users have on other platforms. "
@@ -69,7 +57,7 @@ title = _("Explore")
         <p><a class="btn btn-info btn-lg" href="/explore/elsewhere">{{ _("Explore Social Networks") }}</a></p>
     </div>
 
-    {#<div class="card card-default card-md text-center">
+    {#<div class="card card-default card-md text-center card-xs-vanish">
         <h2 class="text-info">{{ _("Communities") }}</h2>
         <p>{{ _(
             "Communities allow you to find people that work on things you care "
@@ -78,4 +66,5 @@ title = _("Explore")
         <p><a class="btn btn-info btn-lg" href="/explore/communities">{{ _("Explore Communities") }}</a></p>
     </div>#}
 
+</div>
 % endblock