Merge pull request #10 from oslabs-beta/noahoo7/debugging

fixed sidebar overlap

Author: BoopdiBop

.d.js

@@ -1,19 +1,23 @@
 @import './constants.scss';
+
 .main-container {
   background-color: $grey;
-  flex: 1;
+  // flex: 1;
   min-height: 100vh;
   @include centerWithFlex(space-between);
   flex-direction: column;
   padding-left: $sidebarWidth;
+  transition: padding-left, 200ms;
   max-width: 100%;
 
+
   .main-routes {
     width: 100%;
     max-width: 100%;
     height: 100%;
     padding-bottom: 20px;
   }
+
   .copyright-container {
     @include centerWithFlex(center);
     position: fixed;
@@ -23,4 +27,4 @@
     margin: 30px 0px;
     color: $background;
   }
-}
+}

app/stylesheets/MainContainer.scss

@@ -42,6 +42,7 @@
   font-size: 42px;
   margin: 10px;
   padding: 5px;
+
   &:hover {
     cursor: pointer;
     box-shadow: $boxshadow3;
@@ -54,6 +55,7 @@
   top: 43px;
   left: 300px;
   margin-left: $logoPositionLeft - 34px;
+
   &:hover {
     color: $gblue;
     font-weight: 500;
@@ -110,6 +112,7 @@
   margin: 0px;
   margin-left: 15px;
   margin-right: 15px;
+
   &:hover {
     cursor: pointer;
     box-shadow: $boxshadow3;
@@ -123,6 +126,7 @@
   margin-left: -35px;
   font-size: 26px;
   padding: 8px;
+
   &:hover {
     cursor: pointer;
     box-shadow: $boxshadow3;
@@ -172,6 +176,7 @@
   margin-top: 4px;
   margin-left: 2px;
   font-size: 26px;
+
   // padding: 8px;
   &:hover {
     cursor: pointer;
@@ -222,6 +227,7 @@
   margin-top: 4px;
   margin-left: 2px;
   font-size: 26px;
+
   // padding: 8px;
   &:hover {
     cursor: pointer;
@@ -284,6 +290,7 @@ button {
   margin: 10px 0;
   // padding: 0px;
   color: transparent;
+
   &:hover {
     background-color: transparent;
   }
@@ -296,6 +303,7 @@ button {
   box-shadow: none;
   transform: translateX(-40px);
   filter: none;
+
   &:hover {
     background: none;
     background-color: none;
@@ -321,6 +329,7 @@ button {
   position: relative;
   display: flex;
   flex-direction: column;
+
   .searchIconSvg {
     transform: scale(0.1) translate(758.9px, -720px);
     position: absolute;
@@ -383,6 +392,7 @@ select:-webkit-autofill:focus {
   padding: 0;
   cursor: pointer;
   transition: all 0.5s;
+
   &:after,
   &:before {
     content: ' ';
@@ -391,10 +401,12 @@ select:-webkit-autofill:focus {
     position: absolute;
     transition: all 0.5s;
   }
+
   &:hover {
     position: relative;
     border-top-right-radius: 0px;
     border-bottom-left-radius: 0px;
+
     &:before,
     &:after {
       width: 25%;
@@ -410,22 +422,28 @@ select:-webkit-autofill:focus {
     // opacity: 0.7;
     // box-shadow: 0 4px 20px 0 rgba(0, 0, 0,.14), 0 7px 10px -5px rgba(255, 255, 255, 0.4);
   }
+
   &:hover p {
     color: $background;
     font-weight: 400;
   }
+
   &:hover .cardFooter {
     color: $background;
   }
+
   &:hover .cardLine {
     background-color: $background;
   }
+
   &:hover #cardFooterText {
     color: $background;
   }
+
   &:hover .cardFooterIcon {
     color: $background;
   }
+
   &:hover #databaseName {
     color: $background;
   }
@@ -438,10 +456,12 @@ select:-webkit-autofill:focus {
     // opacity: 0.7;
     // box-shadow: 0 4px 20px 0 rgba(0, 0, 0,.14), 0 7px 10px -5px rgba(255, 255, 255, 0.4);
   }
+
   .databaseIconContainer {
     display: inline-block;
     overflow: visible;
   }
+
   .databaseIconHeader {
     position: absolute;
     background-color: $ggreen;
@@ -460,6 +480,7 @@ select:-webkit-autofill:focus {
     background-position: center;
     background-size: 70%;
     background-repeat: no-repeat;
+
     .databaseIcon {
       width: 55px;
       height: 55px;
@@ -475,10 +496,12 @@ select:-webkit-autofill:focus {
     // opacity: 0.7;
     // box-shadow: 0 4px 20px 0 rgba(0, 0, 0,.14), 0 7px 10px -5px rgba(255, 255, 255, 0.4);
   }
+
   .databaseIconContainer {
     display: inline-block;
     overflow: visible;
   }
+
   .databaseIconHeader {
     position: absolute;
     background-color: $gyellow;
@@ -495,6 +518,7 @@ select:-webkit-autofill:focus {
     box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(255, 152, 0, 0.4);
     background-image: url('../assets/postgres-icon-white.png');
     background-size: cover;
+
     .databaseIcon {
       visibility: hidden;
     }
@@ -513,6 +537,7 @@ select:-webkit-autofill:focus {
     display: inline-block;
     overflow: visible;
   }
+
   .databaseIconHeader {
     position: absolute;
     background-color: $gorange;
@@ -529,6 +554,7 @@ select:-webkit-autofill:focus {
     box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(255, 152, 0, 0.4);
     background-image: url('../assets/aws-icon-white.png');
     background-size: cover;
+
     .databaseIcon {
       visibility: hidden;
     }
@@ -554,6 +580,7 @@ select:-webkit-autofill:focus {
   left: 180px;
   border-radius: 3px;
   box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(0, 255, 42, 0.4);
+
   .databaseIcon {
     width: 55px;
     height: 55px;
@@ -600,4 +627,4 @@ select:-webkit-autofill:focus {
 #serviceName {
   font-size: 11px;
   margin-top: 6px;
-}
+}

app/stylesheets/Occupied.scss

@@ -18,6 +18,10 @@
   width: 300px;
 }
 
+.sidebar-container:hover + .main-container {
+  padding-left: 300px;
+}
+
 .sidebar-container:hover #logout {
   opacity: 1;
 }
@@ -111,6 +115,7 @@
   opacity: 0.65;
   width: 78%;
   margin-right: 5px;
+
   &:hover {
     background-color: $hover;
     opacity: 0.85;
@@ -130,6 +135,7 @@
   border-radius: 50%;
   margin: 30px 0px;
   background-size: scale-down;
+
   &:hover {
     background-color: $hover;
     opacity: 0.85;
@@ -222,4 +228,4 @@
     animation: none;
     -webkit-tap-highlight-color: transparent;
   }
-}
+}