added code for preview and merged in work on uploading photo from other branch, still needs full styling

1 files changed, 96 insertions, 41 deletions

diff --git a/css/contact-details-avatar.scss b/css/contact-details-avatar.scss
index 07b494ba..68a6bdfd 100644
--- a/css/contact-details-avatar.scss
+++ b/css/contact-details-avatar.scss
@@ -21,44 +21,99 @@
  *
  */
 
- // AVATAR
- #contact-header-avatar {
-    position: relative;
-    height: 75px;
-    width: 75px;
-    border-radius: 50%;
-    overflow: hidden;
-    flex-shrink: 0;
-    margin: 0 22px 0 44px;
-    .contact-avatar-background {
-        background-color: var(--color-background-dark);
-        opacity: .2;
-        z-index: 0;
-    }
-    img {
-        z-index: 1;
-    }
-    label.icon-upload-white {
-        opacity: .5;
-        z-index: 2;
-        &:hover,
-        a:active,
-        a:focus {
-            opacity: .7;
-        }
-    }
-    img +  label.icon-upload-white {
-        opacity: 0;
-    }
-    .contact-avatar-background,
-    img,
-    label.icon-upload-white {
-        position: absolute;
-        width: 100%;
-        height: 100%;
-    }
-    &__picture {
-        border-radius: 50%;
-        flex-shrink: 0;
-    }
-}
\ No newline at end of file
+// AVATAR
+#contact-header-avatar {
+	position: relative;
+	height: 75px;
+	width: 75px;
+	border-radius: 50%;
+	overflow: hidden;
+	flex-shrink: 0;
+	margin: 0 22px 0 44px;
+	.contact-avatar-background {
+		background-color: var(--color-background-dark);
+		opacity: .2;
+		z-index: 0;
+	}
+	img {
+		z-index: 10;
+	}
+	label.icon-upload-white {
+		opacity: .5;
+		z-index: 2;
+		&:hover,
+		a:active,
+		a:focus {
+			opacity: .7;
+		}
+	}
+	img +  label.icon-upload-white {
+		opacity: 0;
+	}
+	.contact-avatar-background,
+	img,
+	label.icon-upload-white {
+		position: absolute;
+		width: 100%;
+		height: 100%;
+	}
+	.avatar-options {
+		top: 0;
+		background-color: rgba(0, 0, 0, 0.2);
+		width: 100%;
+		height: 100%;
+		overflow: hidden;
+	}
+}
+
+#contact-header-avatar.maximised {
+	position: fixed;
+	height: 100%;
+	width: 100%;
+	top: 0;
+	left: 0;
+	border-radius: 0;
+	padding: 20px;
+	background-color: rgba(0, 0, 0, 0.9);
+	display: flex;
+	justify-content: center;
+	z-index: 200;
+	padding-top: 65px;
+	img {
+		width: auto;
+		height: auto;
+		border-radius: 0;
+		max-height: calc(100% - 40px);
+		max-width: 100%;
+		align-self: center;
+		margin-bottom: 40px;
+	}
+	.avatar-options {
+		height: 40px;
+		width: 100%;
+		position: absolute;
+		top: calc(100% - 40px);
+		left: 0;
+		display: flex;
+		opacity: 1;
+		padding: 0;
+		flex-wrap: wrap;
+		justify-content: space-around;
+	}
+	.avatar-options > [class^='icon-'] {
+		min-width: 25%;
+		display: block;
+	}
+}
+
+.contact-header-avatar-options {
+	top: 0;
+	background-color: rgba(0, 0, 0, 0.2);
+	display: flex;
+	width: 100%;
+	height: 100%;
+	overflow: hidden;
+	
+}
+
+