[gnome-contacts] Put a margin around the avatar in ContactSheet.

[Niels De Graef <nielsdg src gnome org>]

commit 3b93007c5c245bbc723008722600a6f2250264a4
Author: Niels De Graef <nielsdegraef gmail com>
Date:   Wed Dec 27 11:41:39 2017 +0100

    Put a margin around the avatar in ContactSheet.
    
    This makes sure that it doesn't "jump" when switching to the
    ContactEditor.
    
    Fixes [bug 701370](https://bugzilla.gnome.org/show_bug.cgi?id=701370).

 data/ui/style.css               |    6 ++++++
 src/contacts-contact-sheet.vala |    1 +
 2 files changed, 7 insertions(+), 0 deletions(-)
---
diff --git a/data/ui/style.css b/data/ui/style.css
index 2f12b06..6a75863 100644
--- a/data/ui/style.css
+++ b/data/ui/style.css
@@ -75,6 +75,12 @@ row.contact-data-row {
  border-radius: 5px;
 }
 
+/* Give the avatar in the ContactSheet some margin,
+ * so it doesn't jump when switching to the editor. */
+.contacts-contact-sheet .main-avatar-frame {
+  margin: 4px 8px;
+}
+
 /* Primary toolbar with no line at top to avoid conflicts with frame border */
 ContactsWindow .primary-toolbar.toolbar {
  border-width: 0;
diff --git a/src/contacts-contact-sheet.vala b/src/contacts-contact-sheet.vala
index 6b96794..ea363f2 100644
--- a/src/contacts-contact-sheet.vala
+++ b/src/contacts-contact-sheet.vala
@@ -92,6 +92,7 @@ public class Contacts.ContactSheet : Grid {
     set_row_spacing (12);
     set_column_spacing (16);
     set_orientation (Orientation.VERTICAL);
+    get_style_context ().add_class ("contacts-contact-sheet");
   }
 
   public void update (Contact c) {