feat: better header on company page (#853)

officelifehq · May 6, 2021 · 6f81fda · 6f81fda
1 parent cd66bfa
commit 6f81fda
Show file tree

Hide file tree

Showing 7 changed files with 69 additions and 146 deletions.
diff --git a/app/Http/ViewHelpers/Company/CompanyViewHelper.php b/app/Http/ViewHelpers/Company/CompanyViewHelper.php
@@ -32,7 +32,7 @@ public static function information(Company $company): array
         return [
             'number_of_teams' => $teams,
             'number_of_employees' => $employees,
-            'logo' => $company->logo ? ImageHelper::getImage($company->logo, 200, 200) : null,
+            'logo' => $company->logo ? ImageHelper::getImage($company->logo, 75, 75) : null,
             'founded_at' => $company->founded_at ? $company->founded_at->year : null,
         ];
     }

diff --git a/resources/js/Pages/Company/Group/Index.vue b/resources/js/Pages/Company/Group/Index.vue
@@ -7,36 +7,8 @@
 
 <template>
   <layout :notifications="notifications">
-    <!-- company cover -->
-    <div class="cover mb3" :style="'height: 25vh; background: url(https://images.unsplash.com/photo-1531973576160-7125cd663d86?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1500&q=80) no-repeat center center'"></div>
-
-    <!-- company name + data -->
-    <div class="ph2 ph5-ns mb2">
-      <div class="flex relative">
-        <div v-if="statistics.logo" class="company-logo relative ba bb-gray pa2 br3 bg-white mr3-ns">
-          <img :src="statistics.logo" alt="logo" />
-        </div>
-        <div class="mt3">
-          <h2 class="mt0 fw4 f3 mb4 company-name">
-            {{ $page.props.auth.company.name }} <a href="https://dundermifflin.com" class="ml3 f6 fw4 no-underline gray bb-0">https://dundermifflin.com</a>
-          </h2>
-          <div class="flex">
-            <div class="">
-              <p class="ttu f7 gray mb1 mt0 mr5">number of employees</p>
-              <p class="mt0">{{ statistics.number_of_employees }}</p>
-            </div>
-            <div class="">
-              <p class="ttu f7 gray mb1 mt0 mr5">number of teams</p>
-              <p class="mt0">{{ statistics.number_of_teams }}</p>
-            </div>
-            <div v-if="statistics.founded_at" class="">
-              <p class="ttu f7 gray mb1 mt0 mr5">{{ $t('company.stat_founded_at') }}</p>
-              <p class="mt0">{{ statistics.founded_at }}</p>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
+    <!-- header -->
+    <header-component :statistics="statistics" />
 
     <div class="ph2 ph5-ns">
       <!-- central content -->
@@ -100,12 +72,14 @@
 import Layout from '@/Shared/Layout';
 import Avatar from '@/Shared/Avatar';
 import Tab from '@/Pages/Company/Partials/Tab';
+import HeaderComponent from '@/Pages/Company/Partials/Header';
 
 export default {
   components: {
     Layout,
     Avatar,
     Tab,
+    HeaderComponent,
   },
 
   props: {

diff --git a/resources/js/Pages/Company/HR/Index.vue b/resources/js/Pages/Company/HR/Index.vue
@@ -1,12 +1,4 @@
 <style lang="scss" scoped>
-.company-logo {
-  top: -40px;
-  width: 225px;
-}
-.company-name {
-  margin-bottom: 17px;
-}
-
 .progress-bar {
 	border-radius: 3px;
 	overflow: hidden;
@@ -34,36 +26,8 @@
 
 <template>
   <layout :notifications="notifications">
-    <!-- company cover -->
-    <div class="cover mb3" :style="'height: 25vh; background: url(https://images.unsplash.com/photo-1531973576160-7125cd663d86?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1500&q=80) no-repeat center center'"></div>
-
-    <!-- company name + data -->
-    <div class="ph2 ph5-ns mb2">
-      <div class="flex relative">
-        <div v-if="statistics.logo" class="company-logo relative ba bb-gray pa2 br3 bg-white mr3-ns">
-          <img :src="statistics.logo" alt="logo" />
-        </div>
-        <div class="mt3">
-          <h2 class="mt0 fw4 f3 mb4 company-name">
-            {{ $page.props.auth.company.name }} <a href="https://dundermifflin.com" class="ml3 f6 fw4 no-underline gray bb-0">https://dundermifflin.com</a>
-          </h2>
-          <div class="flex">
-            <div class="">
-              <p class="ttu f7 gray mb1 mt0 mr5">number of employees</p>
-              <p class="mt0">{{ statistics.number_of_employees }}</p>
-            </div>
-            <div class="">
-              <p class="ttu f7 gray mb1 mt0 mr5">number of teams</p>
-              <p class="mt0">{{ statistics.number_of_teams }}</p>
-            </div>
-            <div class="">
-              <p class="ttu f7 gray mb1 mt0 mr5">founded</p>
-              <p class="mt0">1987</p>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
+    <!-- header -->
+    <header-component :statistics="statistics" />
 
     <div class="ph2 ph5-ns">
       <!-- central content -->
@@ -96,13 +60,15 @@ import Layout from '@/Shared/Layout';
 import eCoffees from '@/Pages/Company/HR/Partials/eCoffees';
 import Genders from '@/Pages/Company/HR/Partials/Genders';
 import Tab from '@/Pages/Company/Partials/Tab';
+import HeaderComponent from '@/Pages/Company/Partials/Header';
 
 export default {
   components: {
     Layout,
     eCoffees,
     Genders,
     Tab,
+    HeaderComponent,
   },
 
   props: {

diff --git a/resources/js/Pages/Company/Index.vue b/resources/js/Pages/Company/Index.vue
@@ -1,46 +1,10 @@
 <style lang="scss" scoped>
-.company-logo {
-  top: -40px;
-  width: 225px;
-}
-
-.company-name {
-  margin-bottom: 17px;
-}
 </style>
 
 <template>
   <layout :notifications="notifications">
-    <!-- company cover -->
-    <div class="cover mb3" :style="'height: 25vh; background: url(https://images.unsplash.com/photo-1531973576160-7125cd663d86?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1500&q=80) no-repeat center center'"></div>
-
-    <!-- company name + data -->
-    <div class="ph2 ph5-ns mb2">
-      <div class="flex relative">
-        <div v-if="statistics.logo" class="company-logo relative ba bb-gray pa2 br3 bg-white mr3-ns">
-          <img :src="statistics.logo" alt="logo" />
-        </div>
-        <div class="mt3">
-          <h2 class="mt0 fw4 f3 mb4 company-name">
-            {{ $page.props.auth.company.name }} <a href="https://dundermifflin.com" class="ml3 f6 fw4 no-underline gray bb-0">https://dundermifflin.com</a>
-          </h2>
-          <div class="flex">
-            <div class="">
-              <p class="ttu f7 gray mb1 mt0 mr5">number of employees</p>
-              <p class="mt0">{{ statistics.number_of_employees }}</p>
-            </div>
-            <div class="">
-              <p class="ttu f7 gray mb1 mt0 mr5">number of teams</p>
-              <p class="mt0">{{ statistics.number_of_teams }}</p>
-            </div>
-            <div v-if="statistics.founded_at" class="">
-              <p class="ttu f7 gray mb1 mt0 mr5">{{ $t('company.stat_founded_at') }}</p>
-              <p class="mt0">{{ statistics.founded_at }}</p>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
+    <!-- header -->
+    <header-component :statistics="statistics" />
 
     <div class="ph2 ph5-ns">
       <!-- central content -->
@@ -80,6 +44,7 @@
 <script>
 import Layout from '@/Shared/Layout';
 import Tab from '@/Pages/Company/Partials/Tab';
+import HeaderComponent from '@/Pages/Company/Partials/Header';
 import Questions from '@/Pages/Company/Partials/Questions';
 import GuessEmployeeGame from '@/Pages/Company/Partials/GuessEmployeeGame';
 import Birthdays from '@/Pages/Company/Partials/Birthdays';
@@ -95,6 +60,7 @@ export default {
   components: {
     Layout,
     Tab,
+    HeaderComponent,
     Questions,
     GuessEmployeeGame,
     Birthdays,

diff --git a/resources/js/Pages/Company/Partials/Header.vue b/resources/js/Pages/Company/Partials/Header.vue
@@ -0,0 +1,51 @@
+<style lang="scss" scoped>
+.company-logo {
+  width: 45px;
+  padding: 4px;
+  margin: 10px;
+}
+</style>
+
+<template>
+  <div class="ph2 ph5-ns mb5 bb bb-gray">
+    <div class="flex-ns justify-between items-center">
+      <div class="flex items-center">
+        <!-- logo  -->
+        <div v-if="statistics.logo" class="company-logo relative ba bb-gray br3 bg-white mr3-ns">
+          <img :src="statistics.logo" alt="logo" />
+        </div>
+
+        <!-- company name  -->
+        <h2 class="ma0 fw4 f3">
+          {{ $page.props.auth.company.name }} <a href="https://dundermifflin.com" class="ml3-ns di-ns db mb0-ns mb2 f6 fw4 no-underline gray bb-0">https://dundermifflin.com</a>
+        </h2>
+      </div>
+
+      <div class="flex pa0-ns pa3">
+        <div>
+          <p class="ttu f7 gray mb1 mt0 mr5">number of employees</p>
+          <p class="mt0 mb0">{{ statistics.number_of_employees }}</p>
+        </div>
+        <div>
+          <p class="ttu f7 gray mb1 mt0 mr5">number of teams</p>
+          <p class="mt0 mb0">{{ statistics.number_of_teams }}</p>
+        </div>
+        <div v-if="statistics.founded_at" class="">
+          <p class="ttu f7 gray mb1 mt0 mr5">{{ $t('company.stat_founded_at') }}</p>
+          <p class="mt0 mb0">{{ statistics.founded_at }}</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    statistics: {
+      type: Object,
+      default: null,
+    },
+  },
+};
+</script>
diff --git a/resources/js/Pages/Company/Project/Index.vue b/resources/js/Pages/Company/Project/Index.vue
@@ -1,12 +1,4 @@
 <style lang="scss" scoped>
-.company-logo {
-  top: -40px;
-  width: 225px;
-}
-.company-name {
-  margin-bottom: 17px;
-}
-
 .grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
@@ -42,36 +34,8 @@
 
 <template>
   <layout :notifications="notifications">
-    <!-- company cover -->
-    <div class="cover mb3" :style="'height: 25vh; background: url(https://images.unsplash.com/photo-1531973576160-7125cd663d86?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1500&q=80) no-repeat center center'"></div>
-
-    <!-- company name + data -->
-    <div class="ph2 ph5-ns mb2">
-      <div class="flex relative">
-        <div v-if="statistics.logo" class="company-logo relative ba bb-gray pa2 br3 bg-white mr3-ns">
-          <img :src="statistics.logo" alt="logo" />
-        </div>
-        <div class="mt3">
-          <h2 class="mt0 fw4 f3 mb4 company-name">
-            {{ $page.props.auth.company.name }} <a href="https://dundermifflin.com" class="ml3 f6 fw4 no-underline gray bb-0">https://dundermifflin.com</a>
-          </h2>
-          <div class="flex">
-            <div class="">
-              <p class="ttu f7 gray mb1 mt0 mr5">number of employees</p>
-              <p class="mt0">{{ statistics.number_of_employees }}</p>
-            </div>
-            <div class="">
-              <p class="ttu f7 gray mb1 mt0 mr5">number of teams</p>
-              <p class="mt0">{{ statistics.number_of_teams }}</p>
-            </div>
-            <div v-if="statistics.founded_at" class="">
-              <p class="ttu f7 gray mb1 mt0 mr5">{{ $t('company.stat_founded_at') }}</p>
-              <p class="mt0">{{ statistics.founded_at }}</p>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
+    <!-- header -->
+    <header-component :statistics="statistics" />
 
     <div class="ph2 ph5-ns">
       <!-- central content -->
@@ -123,11 +87,13 @@
 <script>
 import Layout from '@/Shared/Layout';
 import Tab from '@/Pages/Company/Partials/Tab';
+import HeaderComponent from '@/Pages/Company/Partials/Header';
 
 export default {
   components: {
     Layout,
     Tab,
+    HeaderComponent,
   },
 
   props: {

diff --git a/tests/Unit/ViewHelpers/Company/CompanyViewHelperTest.php b/tests/Unit/ViewHelpers/Company/CompanyViewHelperTest.php
@@ -48,7 +48,7 @@ public function it_gets_information_about_the_company(): void
             [
                 'number_of_teams' => 2,
                 'number_of_employees' => 3,
-                'logo' => ImageHelper::getImage($file, 200, 200),
+                'logo' => ImageHelper::getImage($file, 75, 75),
                 'founded_at' => 2020,
             ],
             $response