From d96766528eea7fb37772dd3d8e236a7a491d9599 Mon Sep 17 00:00:00 2001 From: Daniel Scalzi Date: Mon, 22 Jan 2018 01:17:56 -0500 Subject: [PATCH] Added an edit overlay to the user avatar. --- app/assets/css/launcher.css | 38 +++++++++++++++++++++++++++++++++++-- app/index.ejs | 5 ++++- 2 files changed, 40 insertions(+), 3 deletions(-) diff --git a/app/assets/css/launcher.css b/app/assets/css/launcher.css index 87813ae..56812f2 100644 --- a/app/assets/css/launcher.css +++ b/app/assets/css/launcher.css @@ -286,14 +286,48 @@ p { height: 75px; } -/* User profile avater. */ -#user_avatar { +/* User profile avatar container. */ +#avatarContainer { border-radius: 50%; border: 2px solid #cad7e1; background: rgba(1, 2, 1, 0.5); height: 70px; + width: 70px; width: auto; box-shadow: 0px 0px 10px 0px rgb(0, 0, 0); + overflow: hidden; + position: relative; +} + +/* Avatar edit overlay. */ +#avatarOverlay { + opacity: 0; + position: absolute; + z-index: 1; + top: 0; + bottom: 0; + left: 0; + right: 0; + display: flex; + justify-content: center; + align-items: center; + font-family: 'Avenir Book'; + color: #fff; + transition: 0.25s ease; + font-weight: bold; + letter-spacing: 2px; + background: linear-gradient(65deg, rgba(0, 0, 0, 0.4), rgba(136, 77, 77, 0.4) 60%); + -webkit-user-select: none; + cursor: pointer; +} +#avatarOverlay:hover { + opacity: 1; +} + +/* User profile avater image. */ +#avatarImage { + height: 100%; + width: auto; } /* User profile name text. */ diff --git a/app/index.ejs b/app/index.ejs index e81bacf..eafd503 100644 --- a/app/index.ejs +++ b/app/index.ejs @@ -25,7 +25,10 @@
Username - +
+
Edit
+ +