Merge pull request #204 from TheRestartProject/DOT-870_translate_devi…

…ce_categories DOT 870 translate device categories
TheRestartProject · Nov 9, 2020 · e70cb6f · e70cb6f
2 parents c5699ce + d972db4
commit e70cb6f
Show file tree

Hide file tree

Showing 19 changed files with 224 additions and 51 deletions.
diff --git a/resources/assets/js/components/CollapsibleSection.vue b/resources/assets/js/components/CollapsibleSection.vue
@@ -7,7 +7,9 @@
       'justify-content-between': true
       }" @click="toggle">
       <div class="d-flex w-100">
-        <slot name="title" />
+        <div class="d-flex flex-column justify-content-center">
+          <slot name="title" />
+        </div>
         <div v-if="count" :class="{
           'd-inline' : true,
           'd-md-none' : !alwaysShowCount,
@@ -17,10 +19,10 @@
           'justify-content-center' : true
         }">
           <span v-if="countBadge">
-            <b-badge variant="primary" pill>{{ count }}</b-badge>
+            &nbsp;<b-badge variant="primary" pill>{{ count }}</b-badge>
           </span>
           <span v-else>
-            <span :class="countClass">({{ count }})</span>
+            &nbsp;<span :class="countClass">({{ count }})</span>
           </span>
         </div>
         <slot name="title-right" />
@@ -114,8 +116,4 @@ export default {
 .count {
   color: $brand-light;
 }
-
-.text-muted {
-  font-size: 28px;
-}
 </style>
diff --git a/resources/assets/js/components/DeviceCategorySelect.vue b/resources/assets/js/components/DeviceCategorySelect.vue
@@ -79,15 +79,15 @@ export default {
         cluster.categories.forEach((c) => {
           if ((this.powered && c.powered) || (!this.powered && !c.powered)) {
             categories.push({
-              name: c.name,
+              name: this.$lang.get('strings.' + c.name),
               value: c.idcategories
             })
           }
         })
 
         if (categories.length) {
           ret.push({
-            cluster: cluster.name,
+            cluster: this.$lang.get('strings.' + cluster.name),
             categories: categories
           })
         }

diff --git a/resources/assets/js/components/EventAttendance.vue b/resources/assets/js/components/EventAttendance.vue
@@ -1,5 +1,5 @@
 <template>
-  <CollapsibleSection collapsed :count="attendees.length">
+  <CollapsibleSection collapsed :count="attendees.length" class="width">
     <template slot="title">
       {{ translatedTitle }}
     </template>
@@ -286,4 +286,8 @@ h3 {
 .warningbox {
   border: 1px solid $brand-danger;
 }
+
+.width {
+  min-width: 100%;
+}
 </style>
diff --git a/resources/assets/js/components/EventDeviceSummary.vue b/resources/assets/js/components/EventDeviceSummary.vue
@@ -3,7 +3,7 @@
     <b-tr v-if="!editing" :key="'summary-' + device.iddevices">
       <b-td>
         <h3 class="noheader">
-          {{ device.category.name }}
+          {{ translatedName }}
         </h3>
         <div class="d-block d-md-none">
           <div :class="badgeClass + ' d-block d-md-none'">
@@ -97,6 +97,9 @@ export default {
     }
   },
   computed: {
+    translatedName() {
+      return this.$lang.get('strings.' + this.device.category.name)
+    },
     powered() {
       return this.device.category && this.device.category.powered
     },

diff --git a/resources/assets/js/components/EventHeading.vue b/resources/assets/js/components/EventHeading.vue
@@ -5,8 +5,8 @@
       <EventActions v-bind="$props" class="d-block d-md-none" />
     </div>
     <div class="border-top-very-thick border-bottom-thin mb-3">
-      <div class="d-flex flex-wrap mt-4 mb-3 mb-md-3">
-        <div class="bord d-flex w-xs-100 w-md-50">
+      <div class="layout mt-4 mb-3 mb-md-3">
+        <div class="bord d-flex">
           <div class="datebox">
             <span class="day align-top">{{ dayofmonth }}</span> <br />
             <span>
@@ -22,7 +22,7 @@
             {{ event.venue ? event.venue : event.location }}
           </h2>
         </div>
-        <div class="pl-md-4 d-flex w-xs-100 w-md-50 maybeborder pt-3 p-md-0 d-flex flex-column justify-content-center">
+        <div class="pl-md-4 d-flex maybeborder pt-3 p-md-0 d-flex flex-column justify-content-center">
           <div class="d-flex justify-content-between w-100">
             <div class="d-flex mr-2" v-if="event.the_group">
               <b-img @error="brokenGroupImage" :src="groupImage" class="groupImage d-none d-md-block" />
@@ -128,4 +128,15 @@ export default {
   align-items: center;
   display: flex !important;
 }
+
+.layout {
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-template-rows: auto auto;
+
+  @include media-breakpoint-up(md) {
+    grid-template-columns: 1fr 1fr;
+    grid-template-rows: 1fr;
+  }
+}
 </style>
diff --git a/resources/assets/js/components/EventPage.vue b/resources/assets/js/components/EventPage.vue
@@ -2,16 +2,12 @@
   <div>
     <div v-if="event">
       <EventHeading v-bind="$props" />
-      <div class="d-flex flex-wrap">
-        <div class="w-xs-100 w-md-50">
-          <div class="vue">
-            <EventDetails class="pr-md-3" v-bind="$props" />
-          </div>
-          <div class="vue">
-            <EventDescription class="pr-md-3" v-bind="$props" />
-          </div>
+      <div class="layout">
+        <div>
+          <EventDetails class="pr-md-3" v-bind="$props" />
+          <EventDescription class="pr-md-3" v-bind="$props" />
         </div>
-        <div class="w-xs-100 w-md-50 vue">
+        <div>
           <EventAttendance class="pl-md-3" v-bind="$props" />
         </div>
       </div>
@@ -77,4 +73,21 @@ export default {
     }
   }
 }
-</script>
+</script>
+<style scoped lang="scss">
+@import 'resources/global/css/_variables';
+@import '~bootstrap/scss/functions';
+@import '~bootstrap/scss/variables';
+@import '~bootstrap/scss/mixins/_breakpoints';
+
+.layout {
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-template-rows: auto auto;
+
+  @include media-breakpoint-up(md) {
+    grid-template-columns: 1fr 1fr;
+    grid-template-rows: 1fr;
+  }
+}
+</style>
diff --git a/resources/assets/js/components/GroupDeviceRepairPodium.vue b/resources/assets/js/components/GroupDeviceRepairPodium.vue
@@ -11,7 +11,7 @@
             {{ device.counter }}
           </span>
           <span class="font-weight-bold small mb-2">
-            {{ device.name }}
+            {{ translatedName }}
           </span>
           </div>
         </div>
@@ -41,6 +41,11 @@ export default {
       type: Number,
       required: true
     }
+  },
+  computed: {
+    translatedName() {
+      return this.$lang.get('strings.' + this.device.name)
+    }
   }
 }
 </script>

diff --git a/resources/assets/js/components/GroupDevicesBreakdown.vue b/resources/assets/js/components/GroupDevicesBreakdown.vue
@@ -95,17 +95,18 @@ export default {
     translatedDeviceBreakdown() {
       return this.$lang.get('groups.device_breakdown')
     },
+    // The cluster names are translated in the en.json file, or language variant.
     translatedComputerAndHomeOffice() {
-      return this.$lang.get('groups.computed_and_home_office')
+      return this.$lang.get('strings.Computers and Home Office')
     },
     translatedElectronicGadget() {
-      return this.$lang.get('groups.electronic_gadget')
+      return this.$lang.get('strings.Electronic Gadgets')
     },
     translatedHomeEntertainment() {
-      return this.$lang.get('groups.home_entertainment')
+      return this.$lang.get('strings.Home Entertainment')
     },
     translatedKitchenAndHouseholdItems() {
-      return this.$lang.get('groups.kitchen_and_household_items')
+      return this.$lang.get('strings.Kitchen and Household Items')
     },
     translatedNoUnpoweredStats() {
       return this.$lang.get('groups.no_unpowered_stats')
@@ -131,4 +132,9 @@ export default {
   text-transform: uppercase;
   font-size: 18px;
 }
+
+// Some cluster names are a bit long in English, so make more space.
+/deep/ .ourtabs .nav-link {
+  padding-left: calc(5% + 1px) !important;
+}
 </style>
diff --git a/resources/assets/js/components/GroupDevicesBreakdownCluster.vue b/resources/assets/js/components/GroupDevicesBreakdownCluster.vue
@@ -9,11 +9,11 @@
       <div />
       <div class="divider" />
       <div />
-      <StatsValue :count="stats.most_seen.count" icon="most-seen_ico" size="md" :subtitle="stats.most_seen.name" class="group-stat-most-seen" :border="false" :translate="false" />
+      <StatsValue :count="stats.most_seen.count" icon="most-seen_ico" size="md" :subtitle="translate(stats.most_seen.name)" class="group-stat-most-seen" :border="false" :translate="false" />
       <div />
-      <StatsValue :count="stats.most_repaired.count" icon="most-repaired_ico" size="md" :subtitle="stats.most_repaired.name" class="group-stat-most-repaired" :border="false" :translate="false" />
+      <StatsValue :count="stats.most_repaired.count" icon="most-repaired_ico" size="md" :subtitle="translate(stats.most_repaired.name)" class="group-stat-most-repaired" :border="false" :translate="false" />
       <div />
-      <StatsValue :count="stats.least_repaired.count" icon="least-repaired_ico" size="md" :subtitle="stats.least_repaired.name" class="group-stat-least-repaired" :border="false" :translate="false" />
+      <StatsValue :count="stats.least_repaired.count" icon="least-repaired_ico" size="md" :subtitle="translate(stats.least_repaired.name)" class="group-stat-least-repaired" :border="false" :translate="false" />
     </div>
   </div>
 </template>
@@ -30,6 +30,14 @@ export default {
   methods: {
     pc(val) {
       return this.stats.total ? (Math.round(10000 * val / this.stats.total) / 100) : 0
+    },
+    translate(category) {
+      // Need to translate categories.  Might be null if there were no items.
+      if (category === null) {
+        return ''
+      } else {
+        return this.$lang.get('strings.' + category)
+      }
     }
   }
 }

diff --git a/resources/assets/sass/_global.scss b/resources/assets/sass/_global.scss
@@ -339,7 +339,6 @@ table th {
 }
 
 .text-muted {
-  font-size: 13px;
   color: #5A5A5A;
 }
 

diff --git a/resources/lang/en.json b/resources/lang/en.json
@@ -10,7 +10,6 @@
     "Using a multimeter": "Using a multimeter",
     "Laptop disassembly": "Laptop disassembly",
     "Replacing PCB components": "Replacing PCB components",
-    "Headphones": "Headphones",
     "Electronics safety": "Electronics safety",
     "Replacing screens": "Replacing screens",
     "First aid": "First aid",
@@ -23,5 +22,49 @@
     "Spare parts too expensive":"Spare parts too expensive",
     "No way to open the product":"No way to open the product",
     "Repair information not available":"Repair information not available",
-    "Lack of equipment":"Lack of equipment"
+    "Lack of equipment": "Lack of equipment",
+    "Computers and Home Office": "Computers and Home Office",
+    "Electronic Gadgets": "Electronic Gadgets",
+    "Home Entertainment": "Home Entertainment",
+    "Kitchen and Household Items": "Kitchen and Household Items",
+    "Non-Powered Items": "Non-Powered Items",
+    "Desktop computer": "Desktop computer",
+    "Flat screen 15-17\"": "Flat screen 15-17",
+    "Flat screen 19-20\"": "Flat screen 19-20",
+    "Flat screen 22-24\"": "Flat screen 22-24",
+    "Laptop large": "Laptop large",
+    "Laptop medium": "Laptop medium",
+    "Laptop small": "Laptop small",
+    "Paper shredder": "Paper shredder",
+    "PC Accessory": "PC Accessory",
+    "Printer/scanner": "Printer/scanner",
+    "Digital Compact Camera": "Digital Compact Camera",
+    "DLSR / Video Camera": "DLSR / Video Camera",
+    "Handheld entertainment device": "Handheld entertainment device",
+    "Headphones": "Headphones",
+    "Mobile": "Mobile",
+    "Tablet": "Tablet",
+    "Flat screen 26-30\"": "Flat screen 26-30",
+    "Flat screen 32-37\"": "Flat screen 32-37",
+    "Hi-Fi integrated": "Hi-Fi integrated",
+    "Hi-Fi separates": "Hi-Fi separates",
+    "Musical instrument": "Musical instrument",
+    "Portable radio": "Portable radio",
+    "Projector": "Projector",
+    "TV and gaming-related accessories": "TV and gaming-related accessories",
+    "Aircon/Dehumidifier": "Aircon/Dehumidifier",
+    "Decorative or safety lights": "Decorative or safety lights",
+    "Fan": "Fan",
+    "Hair & Beauty item": "Hair & Beauty item",
+    "Kettle": "Kettle",
+    "Lamp": "Lamp",
+    "Power tool": "Power tool",
+    "Small kitchen item": "Small kitchen item",
+    "Toaster": "Toaster",
+    "Toy": "Toy",
+    "Vacuum": "Vacuum",
+    "Furniture": "Furniture",
+    "Bicycle": "Bicycle",
+    "Clothing/textile": "Clothing/textile",
+    "Misc": "Misc"
 }
diff --git a/resources/lang/en/groups.php b/resources/lang/en/groups.php
@@ -150,9 +150,5 @@
   'fixed_items' => 'Fixed items',
   'repairable_items' => 'Repairable items',
   'end_of_life_items' => 'End-of-life items',
-  'computed_and_home_office' => 'Computer & Home Office',
-  'electronic_gadget' => 'Electronic Gadgets',
-  'home_entertainment' => 'Home Entertainment',
-  'kitchen_and_household_items' => 'Kitchen & Household Items',
   'no_unpowered_stats' => 'At the moment, these stats are only displayed for powered items. We hope to include unpowered items soon.'
 );
diff --git a/resources/lang/fr-BE.json b/resources/lang/fr-BE.json
@@ -33,5 +33,49 @@
     "Repair information not available": "Informations de réparation non disponibles",
     "Restarter": "Réparateur",
     "Spare parts not available": "Pièces détachées non disponibles",
-    "Spare parts too expensive": "Pièces détachées trop coûteuses"
+    "Spare parts too expensive": "Pièces détachées trop coûteuses",
+    "Computers and Home Office": "Ordinateurs et appareils de bureau",
+    "Electronic Gadgets": "Gadgets électroniques",
+    "Home Entertainment": "Divertissement domestique",
+    "Kitchen and Household Items": "Objets de cuisine et de ménage",
+    "Non-Powered Items": "Non-Powered Items",
+    "Desktop computer": "Ordinateur de bureau",
+    "Flat screen 15-17\"": "Ecran plat 15-17",
+    "Flat screen 19-20\"": "Ecran plat 19-20",
+    "Flat screen 22-24\"": "Ecran plat 22-24",
+    "Laptop large": "Ordinateur portable grand",
+    "Laptop medium": "Ordinateur portable moyen",
+    "Laptop small": "Ordinateur portable petit",
+    "Paper shredder": "Déchiqueteuse de papier",
+    "PC Accessory": "Accessoires PC",
+    "Printer/scanner": "Imprimante/scanner",
+    "Digital Compact Camera": "Appareil photo digital compact",
+    "DLSR / Video Camera": "Appareil photo numérique/Reflex",
+    "Handheld entertainment device": "Appareil de divertissement portable",
+    "Headphones": "Ecouteurs/casque audio",
+    "Mobile": "Téléphone portable",
+    "Tablet": "Tablette",
+    "Flat screen 26-30\"": "Ecran plat 26-30",
+    "Flat screen 32-37\"": "Ecran plat 32-37",
+    "Hi-Fi integrated": "Enceintes Hifi intégrées",
+    "Hi-Fi separates": "Enceintes Hifi séparées",
+    "Musical instrument": "Instrument musical",
+    "Portable radio": "Radio portable",
+    "Projector": "Projecteur",
+    "TV and gaming-related accessories": "Accessoires TV et jeux vidéos",
+    "Aircon/Dehumidifier": "Air conditionné/déshumidificateur",
+    "Decorative or safety lights": "Lumières décoratives/éclairage",
+    "Fan": "Ventilateur",
+    "Hair & Beauty item": "Accessoires de beauté et pour cheveux",
+    "Kettle": "Bouilloire",
+    "Lamp": "Lampe",
+    "Power tool": "Outil électrique",
+    "Small kitchen item": "Petit objet de cuisine",
+    "Toaster": "Grille-pain",
+    "Toy": "Jouet",
+    "Vacuum": "Aspirateur",
+    "Furniture": "Furniture",
+    "Bicycle": "Bicycle",
+    "Clothing/textile": "Clothing/textile",
+    "Misc": "Divers"
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -339,7 +339,6 @@ table th { @@
     }
     .text-muted {
-      font-size: 13px;
       color: #5A5A5A;
     }
@@ Expand Down @@