Merge branch 'improve-about-page' into 'master'

Improve about page

See merge request framasoft/mobilizon!455

js/src/i18n/en_US.json

@@ -601,5 +601,14 @@
   "{actor} reopened {report}": "{actor} reopened {report}",
   "{actor} marked {report} as resolved": "{actor} marked {report} as resolved",
   "{actor} added a note on {report}": "{actor} added a note on {report}",
-  "{actor} deleted an event named \"{title}\"": "{actor} deleted an event named \"{title}\""
+  "{actor} deleted an event named \"{title}\"": "{actor} deleted an event named \"{title}\"",
+  "If the direction given by the development team does not suit you, you have the legal right to create your own version of the software, with your own governance choices.": "If the direction given by the development team does not suit you, you have the legal right to create your own version of the software, with your own governance choices.",
+  "change the world, one byte at a time": "change the world, one byte at a time",
+  "Concieved with care for humans": "Concieved with care for humans",
+  "digital habits of activists": "digital habits of activists",
+  "Register on this instance": "Register on this instance",
+  "Mobilizon is not developed by a secretive start-up, but by a group of friends who strive to {change_world}. So while we do work slower, we remain attentive and in touch with our users.": "Mobilizon is not developed by a secretive start-up, but by a group of friends who strive to {change_world}. So while we do work slower, we remain attentive and in touch with our users.",
+  "We asked professional designers to help us develop our vision for Mobilizon. We took time to study the {digital_habits} in order to understand the features they need to gather, organize, and mobilize.": "We asked professional designers to help us develop our vision for Mobilizon. We took time to study the {digital_habits} in order to understand the features they need to gather, organize, and mobilize.",
+  "So that, right from its conception, Mobilizon would {fit_needs_uses_people} who are going to use it.": "So that, right from its conception, Mobilizon would {fit_needs_uses_people} who are going to use it.",
+  "fit the needs and uses of the people": "fit the needs and uses of the people"
 }

js/src/i18n/fr_FR.json

@@ -609,5 +609,14 @@
   "{actor} reopened {report}": "{actor} a réouvert {report}",
   "{actor} marked {report} as resolved": "{actor} a marqué {report} comme résolu",
   "{actor} added a note on {report}": "{actor} a ajouté une note sur {report}",
-  "{actor} deleted an event named \"{title}\"": "{actor} a supprimé un événement nommé \"{title}\""
+  "{actor} deleted an event named \"{title}\"": "{actor} a supprimé un événement nommé \"{title}\"",
+  "If the direction given by the development team does not suit you, you have the legal right to create your own version of the software, with your own governance choices.": "Si la direction donnée par l’équipe de développement ne vous convient pas, vous avez légalement le droit de créer votre version du logiciel avec vos propres choix de gouvernance.",
+  "change the world, one byte at a time": "changer le monde, un octet à la fois",
+  "Concieved with care for humans": "Conçu avec soin pour les humains",
+  "digital habits of activists": "les usages numériques de militant·es",
+  "Register on this instance": "S'inscrire sur cette instance",
+  "Mobilizon is not developed by a secretive start-up, but by a group of friends who strive to {change_world}. So while we do work slower, we remain attentive and in touch with our users.": "Moblizon n’est pas développé par une start-up inaccessible, mais par un groupe d’ami·e·s qui s’évertuent à {change_world}. Alors, certes, on va moins vite, mais on reste à l’écoute et dans l’échange.",
+  "We asked professional designers to help us develop our vision for Mobilizon. We took time to study the {digital_habits} in order to understand the features they need to gather, organize, and mobilize.": "Nous avons demandé de l’aide à des professionnel·les du design pour concevoir ce que pourrait être Mobilizon. Nous avons pris le temps d’étudier {digital_habits} afin de comprendre les fonctionnalités dont ils et elles ont besoin pour se rassembler, s’organiser, se mobiliser.",
+  "So that, right from its conception, Mobilizon would {fit_needs_uses_people} who are going to use it.": "Afin que Mobilizon corresponde, dès sa conception, {fit_needs_uses_people} des personnes qui sont vouées à l’utiliser.",
+  "fit the needs and uses of the people": "aux besoins et usages"
 }

js/src/views/About.vue

@@ -5,11 +5,13 @@
         <div class="container">
           <h1 class="title">{{ $t("About Mobilizon") }}</h1>
           <p class="subtitle">
+            <span>
               {{
                 $t(
                   "A user-friendly, emancipatory and ethical tool for gathering, organising, and mobilising."
                 )
               }}
+            </span>
           </p>
           <b-button
             icon-left="open-in-new"
@@ -122,15 +124,20 @@
               }}</a>
             </i18n>
             <p>
-              If the direction given by the development team does not suit you, you have the legal
+              {{
-              right to create your own version of the software, with your own governance choices.
+                $t(
-            </p>
+                  "If the direction given by the development team does not suit you, you have the legal right to create your own version of the software, with your own governance choices."
-            <p>
+                )
-              Mobilizon is not developed by a secretive start-up, but by a group of friends who
+              }}
-              strive to
-              <a href="https://framasoft.org">change the world, one byte at a time</a>. So while we
-              do work slower, we remain attentive and in touch with our users.
             </p>
+            <i18n
+              tag="p"
+              path="Mobilizon is not developed by a secretive start-up, but by a group of friends who strive to {change_world}. So while we do work slower, we remain attentive and in touch with our users."
+            >
+              <a slot="change_world" href="https://framasoft.org">{{
+                $t("change the world, one byte at a time")
+              }}</a>
+            </i18n>
           </div>
           <div class="column has-text-right-desktop has-text-centered-mobile">
             <img src="img/about/software-to-the-people-mobilizon.png" width="300" alt="" />
@@ -140,17 +147,19 @@
       <section>
         <div class="columns">
           <div class="column has-text-right-desktop">
-            <h2 class="title">Concieved with care for humans</h2>
+            <h2 class="title">{{ $t("Concieved with care for humans") }}</h2>
-            <p>
+            <i18n
-              We asked professional designers to help us develop our vision for Mobilizon. We took
+              tag="p"
-              time to study the
+              path="We asked professional designers to help us develop our vision for Mobilizon. We took time to study the {digital_habits} in order to understand the features they need to gather, organize, and mobilize."
-              <b>digital habits of activists</b> in order to understand the features they need to
+            >
-              gather, organize, and mobilize.
+              <b slot="digital_habits">{{ $t("digital habits of activists") }}</b>
-            </p>
+            </i18n>
-            <p>
+            <i18n
-              So that, right from its conception, Mobilizon would
+              tag="p"
-              <b>fit the needs and uses of the people</b> who are going to use it.
+              path="So that, right from its conception, Mobilizon would {fit_needs_uses_people} who are going to use it."
-            </p>
+            >
+              <b slot="fit_needs_uses_people">{{ $t("fit the needs and uses of the people") }}</b>
+            </i18n>
           </div>
           <div class="column has-text-left-desktop has-text-centered-mobile">
             <img src="img/about/concieved-mobilizon.png" width="300" alt="" />
@@ -164,7 +173,7 @@
         <div class="container has-text-centered">
           <div class="columns">
             <div class="column">
-              <h2 class="title">Register on this instance</h2>
+              <h2 class="title">{{ $t("Register on this instance") }}</h2>
               <b-button
                 type="is-secondary"
                 size="is-large"
@@ -205,7 +214,16 @@ export default class About extends Vue {
 </script>
 
 <style lang="scss" scoped>
-@import "@/variables.scss";
+@import "../variables.scss";
+
+.hero.is-primary .subtitle {
+  padding: 1rem;
+  display: block;
+
+  span {
+    color: lighten($primary, 10%);
+  }
+}
 
 .hero.register {
   background: lighten($primary, 20%);