style: align color and position of contact's sidebar (#4898)

monicahq · Feb 20, 2021 · c1eb71c · c1eb71c
1 parent ad190b3
commit c1eb71c
Show file tree

Hide file tree

Showing 12 changed files with 84 additions and 83 deletions.
diff --git a/public/css/app-ltr.css b/public/css/app-ltr.css
diff --git a/public/css/app-rtl.css b/public/css/app-rtl.css
diff --git a/public/js/app.js b/public/js/app.js
diff --git a/public/mix-manifest.json b/public/mix-manifest.json
@@ -1,9 +1,9 @@
 {
  "/js/manifest.js": "/js/manifest.js?id=7db827d654313dce4250",
  "/js/vendor.js": "/js/vendor.js?id=00e7f0754586d71c64d5",
- "/js/app.js": "/js/app.js?id=a1f554f8a6a0be2766f7",
- "/css/app-ltr.css": "/css/app-ltr.css?id=247eac24f03a2c03e7b9",
- "/css/app-rtl.css": "/css/app-rtl.css?id=98bc5014524646c66b73",
+ "/js/app.js": "/js/app.js?id=bef2cb7cade956c77c81",
+ "/css/app-ltr.css": "/css/app-ltr.css?id=96fcb4c95f14e7e346ab",
+ "/css/app-rtl.css": "/css/app-rtl.css?id=a59d56bd052fc3e3dbcd",
  "/css/stripe.css": "/css/stripe.css?id=04066fb482310d18299c",
  "/js/stripe.js": "/js/stripe.js?id=8ef2e658e80670420943"
 }
diff --git a/resources/js/components/people/Addresses.vue b/resources/js/components/people/Addresses.vue
@@ -2,18 +2,18 @@
 </style>
 
 <template>
- <div class="br2 pa3 mb3 f6" :class="[editMode ? 'bg-washed-yellow b--yellow ba' : 'bg-near-white']">
+ <div class="sidebar-box" :class="[ editMode ? 'edit' : '' ]">
  <div class="w-100 dt">
- <div class="dtc">
- <h3 class="f6 ttu normal">
+ <div class="sidebar-box-title">
+ <h3>
  {{ $t('people.contact_address_title') }}
  </h3>
  </div>
  <div v-if="contactAddresses.length > 0" class="dtc" :class="[ dirltr ? 'tr' : 'tl' ]">
  <a v-if="!editMode" class="pointer" href="" @click.prevent="editMode = true">
  {{ $t('app.edit') }}
  </a>
- <a v-else class="pointer" href="" @click.prevent="toggleEditExcept(-1); editMode = false; addMode = false">
+ <a v-else class="pointer" href="" @click.prevent="toggleEditExcept(-1); resetState();">
  {{ $t('app.done') }}
  </a>
  </div>
@@ -238,7 +238,7 @@
  <a class="btn btn-primary" href="" @click.prevent="store">
  {{ $t('app.add') }}
  </a>
- <a class="btn" href="" @click.prevent="addMode = false">
+ <a class="btn" href="" @click.prevent="resetState">
  {{ $t('app.cancel') }}
  </a>
  </div>
@@ -336,8 +336,14 @@ export default {
  this.createForm.longitude = '';
  },
 
+ resetState() {
+ this.editMode = false;
+ this.addMode = false;
+ },
+
  toggleAdd() {
  this.addMode = true;
+ this.editMode = true;
  this.reinitialize();
  },
 

diff --git a/resources/js/components/people/ContactInformation.vue b/resources/js/components/people/ContactInformation.vue
@@ -2,18 +2,18 @@
 </style>
 
 <template>
- <div class="br2 pa3 mb3 f6" :class="[editMode ? 'bg-washed-yellow b--yellow ba' : 'bg-near-white']">
+ <div class="sidebar-box" :class="[ editMode ? 'edit' : '' ]">
  <div class="w-100 dt">
- <div class="dtc">
- <h3 class="f6 ttu normal">
+ <div class="sidebar-box-title">
+ <h3>
  {{ $t('people.contact_info_title') }}
  </h3>
  </div>
  <div v-if="contactInformationData.length > 0" class="dtc" :class="[ dirltr ? 'tr' : 'tl' ]">
  <a v-if="!editMode" class="pointer" href="" @click.prevent="editMode = true">
  {{ $t('app.edit') }}
  </a>
- <a v-else class="pointer" href="" @click.prevent="[editMode = false, addMode = false]">
+ <a v-else class="pointer" href="" @click.prevent="resetState">
  {{ $t('app.done') }}
  </a>
  </div>
@@ -101,7 +101,7 @@
  <a class="btn btn-primary" href="" @click.prevent="store">
  {{ $t('app.add') }}
  </a>
- <a class="btn" href="" @click.prevent="addMode = false">
+ <a class="btn" href="" @click.prevent="resetState">
  {{ $t('app.cancel') }}
  </a>
  </div>
@@ -204,8 +204,14 @@ export default {
  this.addMode = false;
  },
 
+ resetState() {
+ this.editMode = false;
+ this.addMode = false;
+ },
+
  toggleAdd() {
  this.addMode = true;
+ this.editMode = true;
  this.createForm.data = '';
  this.createForm.contact_field_type_id = '';
  },

diff --git a/resources/js/components/people/Pets.vue b/resources/js/components/people/Pets.vue
@@ -2,20 +2,18 @@
 </style>
 
 <template>
- <div class="br2 pa3 mb3 f6" :class="[editMode ? 'bg-washed-yellow b--yellow ba' : 'bg-near-white']">
+ <div class="sidebar-box" :class="[ editMode ? 'edit' : '' ]">
  <notifications group="main" position="bottom right" />
 
  <div class="w-100 dt">
- <div class="dtc">
- <h3 class="f6 ttu normal">
- {{ $t('people.pets_title') }}
- </h3>
+ <div class="sidebar-box-title">
+ <h3>{{ $t('people.pets_title') }}</h3>
  </div>
  <div v-if="pets.length > 0" class="dtc" :class="[ dirltr ? 'tr' : 'tl' ]">
  <a v-if="!editMode" class="pointer" href="" @click.prevent="editMode = true">
  {{ $t('app.edit') }}
  </a>
- <a v-else class="pointer" href="" @click.prevent="[editMode = false, addMode = false]">
+ <a v-else class="pointer" href="" @click.prevent="resetState">
  {{ $t('app.done') }}
  </a>
  </div>
@@ -99,14 +97,14 @@
  {{ $t('people.pets_name') }}
  </label>
  <input id="add-name" v-model="createForm.name" class="pa2 db w-100" type="text" @keyup.enter="store"
- @keyup.esc="addMode = false"
+ @keyup.esc="resetState"
  />
  </div>
  <div class="lh-copy mt3">
  <a class="btn btn-primary" href="" @click.prevent="store">
  {{ $t('app.add') }}
  </a>
- <a class="btn" href="" @click.prevent="addMode = false">
+ <a class="btn" href="" @click.prevent="resetState">
  {{ $t('app.cancel') }}
  </a>
  </div>
@@ -196,8 +194,14 @@ export default {
  });
  },
 
+ resetState() {
+ this.editMode = false;
+ this.addMode = false;
+ },
+
  toggleAdd() {
  this.addMode = true;
+ this.editMode = true;
  this.createForm.data = '';
  this.createForm.pet_category_id = '';
  },
@@ -240,7 +244,7 @@ export default {
  });
 
  if (this.pets.length <= 1) {
- this.editMode = false;
+ this.resetState();
  }
  },
  }

diff --git a/resources/sass/people.scss b/resources/sass/people.scss
@@ -248,20 +248,26 @@
 
  .profile {
  .sidebar-box {
- background-color: #fafafa;
+ background-color: #f2f4f8;
  border: 1px solid #eee;
  border-radius: 3px;
  color: #333;
  margin-bottom: 25px;
  padding: 10px;
  position: relative;
+ font-size: 0.875rem;
+
+ &.edit {
+ background-color: #fffceb;
+ border-color: gold;
+ }
  }
 
  .sidebar-box-title {
  margin-bottom: 4px;
  position: relative;
 
- strong {
+ h3 {
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;

diff --git a/resources/views/people/food-preferences/index.blade.php b/resources/views/people/food-preferences/index.blade.php
@@ -1,27 +1,18 @@
 <div class="sidebar-box">
 
- @if (is_null($contact->food_preferences))
-
- <p class="sidebar-box-title">
- <strong>{{ trans('people.food_preferences_title') }}</strong>
- </p>
+ <div class="sidebar-box-title">
+ <h3>{{ trans('people.food_preferences_title') }}</h3>
+ </div>
 
- <p class="sidebar-box-paragraph">
- <a href="{{ route('people.food.index', $contact) }}">{{ trans('app.add') }}</a>
- </p>
+ <p class="sidebar-box-paragraph">
 
+ @if (is_null($contact->food_preferences))
+ <a href="{{ route('people.food.index', $contact) }}">{{ trans('app.add') }}</a>
  @else
-
- <p class="sidebar-box-title">
- <strong>{{ trans('people.food_preferences_title') }}</strong>
- </p>
-
- {{-- Information about the significant other --}}
- <p class="sidebar-box-paragraph">
- {{ $contact->food_preferences }}
- <a href="{{ route('people.food.index', $contact) }}" class="action-link">{{ trans('app.edit') }}</a>
- </p>
-
+ {{ $contact->food_preferences }}
+ <a href="{{ route('people.food.index', $contact) }}" class="action-link">{{ trans('app.edit') }}</a>
  @endif
 
+ </p>
+
 </div>
diff --git a/resources/views/people/introductions/index.blade.php b/resources/views/people/introductions/index.blade.php
@@ -1,8 +1,8 @@
 <div class="sidebar-box introductions">
 
- <p class="sidebar-box-title">
- <strong>{{ trans('people.introductions_sidebar_title') }}</strong>
- </p>
+ <div class="sidebar-box-title">
+ <h3>{{ trans('people.introductions_sidebar_title') }}</h3>
+ </div>
 
  @if(! $contact->hasFirstMetInformation())
  <p class="sidebar-box-paragraph">

diff --git a/resources/views/people/relationship/index.blade.php b/resources/views/people/relationship/index.blade.php
@@ -1,54 +1,42 @@
 @if ($modules->contains('key', 'love_relationships'))
-<div class="ba b--near-white br2 bg-gray-monica mb3 f6">
- <div class="pa3">
- <div class="w-100 dt">
- <div class="dtc">
- <h3 class="f6 ttu normal">{{ trans('app.relationship_type_group_love') }}</h3>
- </div>
- </div>
-
- @include('people.relationship._relationship', ['relationships' => $loveRelationships])
+<div class="sidebar-box">
+ <div class="sidebar-box-title">
+ <h3>{{ trans('app.relationship_type_group_love') }}</h3>
  </div>
 
- <p class="mb0 pa2 pl3 bt b--near-white f6">
+ @include('people.relationship._relationship', ['relationships' => $loveRelationships])
+
+ <p class="mb0 bt b--near-white f6">
  <a href="{{ route('people.relationships.create', $contact) }}?type={{ $contact->account->getRelationshipTypeByType('partner')->id }}">{{ trans('app.add') }}</a>
  </p>
 </div>
 @endif
 
 @if ($modules->contains('key', 'family_relationships'))
-<div class="ba b--near-white br2 bg-gray-monica mb3 f6">
- <div class="pa3">
- <div class="w-100 dt">
- <div class="dtc">
- <h3 class="f6 ttu normal">{{ trans('app.relationship_type_group_family') }}</h3>
- </div>
- </div>
-
- @include('people.relationship._relationship', ['relationships' => $familyRelationships])
+<div class="sidebar-box">
+ <div class="sidebar-box-title">
+ <h3>{{ trans('app.relationship_type_group_family') }}</h3>
  </div>
 
- <p class="mb0 pa2 pl3 bt b--near-white f6">
+ @include('people.relationship._relationship', ['relationships' => $familyRelationships])
+
+ <p class="mb0 bt b--near-white f6">
  <a href="{{ route('people.relationships.create', $contact) }}?type={{ $contact->account->getRelationshipTypeByType('child')->id }}">{{ trans('app.add') }}</a>
  </p>
 </div>
 @endif
 
 @if ($modules->contains('key', 'other_relationships'))
-<div class="ba b--near-white br2 bg-gray-monica mb3 f6">
- <div class="pa3">
- <div class="w-100 dt">
- <div class="dtc">
- <h3 class="f6 ttu normal">{{ trans('app.relationship_type_group_other') }}</h3>
- </div>
- </div>
+<div class="sidebar-box f6">
+ <div class="sidebar-box-title">
+ <h3>{{ trans('app.relationship_type_group_other') }}</h3>
+ </div>
 
-  @include('people.relationship._relationship', ['relationships' => $friendRelationships])
+ @include('people.relationship._relationship', ['relationships' => $friendRelationships])
 
- @include('people.relationship._relationship', ['relationships' => $workRelationships])
- </div>
+ @include('people.relationship._relationship', ['relationships' => $workRelationships])
 
- <p class="mb0 pa2 pl3 bt b--near-white f6">
+ <p class="mb0 bt b--near-white f6">
  <a href="{{ route('people.relationships.create', $contact) }}?type={{ $contact->account->getRelationshipTypeByType('friend')->id }}">{{ trans('app.add') }}</a>
  </p>
 </div>

diff --git a/resources/views/people/work/index.blade.php b/resources/views/people/work/index.blade.php
@@ -1,8 +1,8 @@
 <div class="sidebar-box">
 
- <p class="sidebar-box-title">
- <strong>{{ trans('people.work_information') }}</strong>
- </p>
+ <div class="sidebar-box-title">
+ <h3>{{ trans('people.work_information') }}</h3>
+ </div>
 
  <div class="work">
  <ul>