Minor formatting edits to dog card expand buttons

pstrassmann · Aug 18, 2020 · 219d670 · 219d670
1 parent 5c32bb2
commit 219d670
Show file tree

Hide file tree

Showing 4 changed files with 60 additions and 28 deletions.
diff --git a/client/src/App.scss b/client/src/App.scss
@@ -27,9 +27,8 @@ body {
 }
 
 .home-content {
-  display: flex;
-  width: 42rem;
-  flex-direction: column;
+  //display: flex;
+  //flex-direction: column;
 }
 
 .home-content__header {

diff --git a/client/src/components/DogItem.js b/client/src/components/DogItem.js
@@ -123,7 +123,7 @@ const DogItem = React.forwardRef((props, ref) => {
             { dogItemHeader }
             <animated.div style={iconDivBorderBottom} className="dog-item__headerIcon">
               <animated.div style={ iconFlip }>
-                <FontAwesomeIcon icon={ faAngleDown } size="sm"/>
+                <FontAwesomeIcon icon={ faAngleDown }/>
               </animated.div>
             </animated.div>
           </div>

diff --git a/client/src/components/DogItemBody.js b/client/src/components/DogItemBody.js
@@ -5,6 +5,7 @@ import {
   faEnvelope,
   faHome,
   faAngleDoubleDown,
+  faEdit,
 } from '@fortawesome/free-solid-svg-icons';
 import DogItemBodyTail from './DogItemBodyTail';
 import { formatDate } from '../utils/dates';
@@ -104,9 +105,9 @@ const DogItemBody = ({ dog, bodyExpanded }) => {
 
   return (
     <animated.div style={expand}>
-    <div ref={ref}  className="dog-item-body-tail-wrapper">
-      <div>
-          <div className="dog-item-body">
+    <div ref={ref}  className="dog-item-body-wrapper">
+      <div className="dog-item-body-all">
+        <div className="dog-item-body">
             <div className="dog-item__pic">
               <img src={default_dog} alt="Default dog pic" />
             </div>
@@ -236,16 +237,23 @@ const DogItemBody = ({ dog, bodyExpanded }) => {
               </div>
             </div>
           </div>
-      {bodyTailInitialized && (<DogItemBodyTail dog={dog} bodyExpanded={bodyExpanded} bodyTailExpanded={bodyTailExpanded}/>)}
+        {bodyTailInitialized && (<DogItemBodyTail dog={dog} bodyExpanded={bodyExpanded} bodyTailExpanded={bodyTailExpanded}/>)}
       </div>
-      <div className="dog-item__angleDoubleDown" onClick={handleExpandBodyTail}>
-        <animated.div style={doubleDownIconAnimation}>
+      <div className="dog-item-body__side-panel">
+        <div className="dog-item__edit">
           <FontAwesomeIcon
-            icon={faAngleDoubleDown}
-            size="sm"
-            className="dog-item__angleDoubleDown__icon"
+            icon={faEdit}
+            className="dog-item__edit__icon"
           />
-        </animated.div>
+        </div>
+        <div className="dog-item__angleDoubleDown" onClick={handleExpandBodyTail}>
+          <animated.div style={doubleDownIconAnimation}>
+            <FontAwesomeIcon
+              icon={faAngleDoubleDown}
+              className="dog-item__angleDoubleDown__icon"
+            />
+          </animated.div>
+        </div>
       </div>
     </div>
     </animated.div>

diff --git a/client/src/scss/_dogItem.scss b/client/src/scss/_dogItem.scss
@@ -15,6 +15,7 @@
 
 .dog-item-header-wrapper {
   display: flex;
+  justify-content: space-between;
 }
 
 .dog-item-header {
@@ -32,6 +33,7 @@
   justify-content: center;
   align-items: center;
   width: 1rem;
+  font-size: 0.9rem;
   border-left: 1px solid colors.$dark-blue-2;
   border-bottom: 1px solid colors.$dark-blue-2;
   cursor: pointer;
@@ -40,9 +42,15 @@
   }
 }
 
-.dog-item-body-tail-wrapper {
+.dog-item-body-wrapper {
   display: flex;
-  align-items: flex-end;
+  //border: 1px solid red;
+}
+
+.dog-item-body-all {
+  display: flex;
+  flex-direction: column;
+  //border: 1px solid yellow;
 }
 
 .dog-item-body {
@@ -57,16 +65,41 @@
   padding-top: 1px;
 }
 
+.dog-item-body__side-panel {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-end;
+}
+
 .dog-item__angleDoubleDown {
   @extend .dog-item__headerIcon;
+  justify-self: flex-end;
   height: 2.5rem;
-  align-items: center;
+  //align-self: flex-end;
   border-left: 1px solid colors.$dark-blue-2;
   border-top: 1px solid colors.$dark-blue-2;
   border-bottom: none;
   border-top-left-radius: 5px;
 }
 
+.dog-item__edit {
+  position: absolute;
+  top: 1rem;
+  padding: 0.3rem 1rem 0.3rem 0.5rem;
+  font-size: 0.8rem;
+  border-left: 1px solid colors.$dark-blue-2;
+  border-top: 1px solid colors.$dark-blue-2;
+  border-bottom: 1px solid colors.$dark-blue-2;
+  border-top-left-radius: 5px;
+  border-bottom-left-radius: 5px;
+  cursor: pointer;
+  &:hover {
+    background-color: colors.$dark-blue-4;
+  }
+}
+
 .dog-item-body-tail {
   @extend .dog-item-body;
   grid-template-areas:
@@ -134,10 +167,10 @@
 
 .dog-item__pic {
   grid-area: pic;
-  margin-left: 0.5rem;
+  padding-left: 0.5rem;
   img {
-    width: 85%;
-    height: 85%;
+    width: 90%;
+    height: 90%;
     border-radius: 10px;
   }
 }
@@ -213,13 +246,6 @@
   padding-bottom: 0.3rem;
 }
 
-//.z-neg {
-//  z-index: -1;
-//}
-//
-//.dog-item__angleDoubleDown__icon {
-//}
-
 .dog-item__history {
   grid-area: history;
   margin: 0 0 0 0.5rem;
@@ -242,7 +268,6 @@
 .dog-item__vetAppts {
   grid-area: vetAppts;
 }
-
 .dog-item__notes {
   grid-area: notes;
   margin: 0 0 0 0.5rem;