Merge branch 'master' of mowoe.com:reverend/lostplaces-frontend

.gitignore

@@ -10,6 +10,7 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 lerna-debug.log*
+package-lock.json
 
 # Diagnostic reports (https://nodejs.org/api/report.html)
 report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json

components/02_Molecules/navigation/_navigation.scss

@@ -30,22 +30,30 @@
     }
 
     &--sidebar{
-        border: none;
+        border-top: 1px solid $-light-brown;
-        min-width: 80px;
+        min-width: 60px;
+        background-color: $-almost-white;
+        height: 100%;
         .LP-Menu__List{
+            margin-left: 25px;
+            margin-top: 25px;
             flex-direction: column;
 
             .LP-Menu__Item{
                 text-align: left;
-                border-left: 1px solid $-light-brown;
                 margin-bottom: 10px;
+                padding: 5px;
+                padding-left: 25px;
 
                 &:last-child{
                     margin-bottom: 0;
                 }
 
-                .LP-Link:hover{
+                &:hover{
-                    background-color: $-almost-white;
+                    border-left: 2px solid $-light-brown;
+                    position: relative;
+                    background-color: $-beige;
+                    left: -2px;
                     
                 }
             }

components/03_Organisms/header/_header.scss

@@ -1,24 +1,27 @@
+
+$-logo-height: 45px;
 .LP-Header {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    margin-bottom: 70px;
     height: 60px;
+    box-shadow: 0 0 2px $-light-brown;
 
     &__Navigation{
         flex-grow: 2;
     }
     
     &__Logo {
-        height: 60px;
+        height: $-logo-height;
         margin: 25px;
         object-fit:cover;
         max-height: 100%;
+        width: 225px;
         overflow: hidden;
         flex-shrink: 0;
 
         .LP-Image{
-            height: 60px;
+            height: 100%;
         }
     }
 }
@@ -38,7 +41,7 @@
 
 @media(max-width: $-viewport-medium){
     .LP-Header__Logo{
-        width: 60px;
+        width: $-logo-height;
         .LP-Image{
             object-position: 0 0;
             object-fit: cover;

components/03_Organisms/header/header.hbs

@@ -7,7 +7,4 @@
             Hi there!{{> @link url="#" text="Login"}} or {{> @link url="#" text="Sign up"}}
             </span>
     </div>
-    <div class="LP-Header__Navigation">
-        {{> @navigation}}
-    </div>
 </header>

components/05_Pages/_pages.scss

@@ -0,0 +1,22 @@
+$-sidebar-width: 250px;
+
+.LP-Main{
+    display: flex;
+    flex-direction: row-reverse;
+    height: calc(100% - 61px);
+
+    .LP-Main__Content{
+         flex-grow: 1;
+         width: calc(100% -300px);
+         min-height: 1px;
+    }
+
+    .LP-Main__Navigation{
+        flex-shrink: 0;
+        width: $-sidebar-width;
+        flex-grow: 0;
+        height: 100%;
+    }
+}
+
+@import 'placeDetail/placeDetail';

components/05_Pages/placeDetail/placeDetail.config.json

@@ -0,0 +1 @@
+{}

components/05_Pages/placeDetail/placeDetail.hbs

@@ -0,0 +1,9 @@
+{{> @header}}
+<article class="LP-Main">
+    <section class="LP-Main__Content">
+        
+    </section>
+    <section class="LP-Main__Navigation">
+        {{> @navigation modifier='--sidebar'}}
+    </section>
+</article>

components/components.scss

@@ -10,9 +10,9 @@
   @font-face {
     font-family: Montserrat;
     src:
-        url('fonts/Montserrat/Montserrat-Regular.otf'),
+        url('fonts/Montserrat/Montserrat-Regular.ttf'),
-        url('fonts/Montserrat/Montserrat-Bold.otf'),
+        url('fonts/Montserrat/Montserrat-Bold.ttf'),
-        url('fonts/Montserrat/Montserrat-Italic.otf')
+        url('fonts/Montserrat/Montserrat-Italic.ttf')
         ;
   }
 
@@ -31,8 +31,19 @@ $-viewport-extra-small: 450px;
 $-viewport-medium: 750px;
 $-viewport-normal: 1000px;
 
+html{
+  height:100%;
+  margin: 0;
+  padding: 0;
+}
+
+body{
+  height: 100%;
+  margin: 0;
+}
 
 @import '01_Atoms/atoms';
 @import '02_Molecules/molecules';
 @import '03_Organisms/organisms';
-@import '04_Templates/templates';
+@import '04_Templates/templates';
+@import '05_Pages/pages';

public/components.css

@@ -4,7 +4,16 @@
 
 @font-face {
   font-family: Montserrat;
-  src: url("fonts/Montserrat/Montserrat-Regular.otf"), url("fonts/Montserrat/Montserrat-Bold.otf"), url("fonts/Montserrat/Montserrat-Italic.otf"); }
+  src: url("fonts/Montserrat/Montserrat-Regular.ttf"), url("fonts/Montserrat/Montserrat-Bold.ttf"), url("fonts/Montserrat/Montserrat-Italic.ttf"); }
+
+html {
+  height: 100%;
+  margin: 0;
+  padding: 0; }
+
+body {
+  height: 100%;
+  margin: 0; }
 
 .LP-Link {
   color: #565656;
@@ -252,18 +261,26 @@
     .LP-Menu .LP-Link__Text:hover {
       color: #76323F; }
   .LP-Menu--sidebar {
-    border: none;
+    border-top: 1px solid #C09F80;
-    min-width: 80px; }
+    min-width: 60px;
+    background-color: #f9f9f9;
+    height: 100%; }
     .LP-Menu--sidebar .LP-Menu__List {
+      margin-left: 25px;
+      margin-top: 25px;
       flex-direction: column; }
       .LP-Menu--sidebar .LP-Menu__List .LP-Menu__Item {
         text-align: left;
-        border-left: 1px solid #C09F80;
+        margin-bottom: 10px;
-        margin-bottom: 10px; }
+        padding: 5px;
+        padding-left: 25px; }
         .LP-Menu--sidebar .LP-Menu__List .LP-Menu__Item:last-child {
           margin-bottom: 0; }
-        .LP-Menu--sidebar .LP-Menu__List .LP-Menu__Item .LP-Link:hover {
+        .LP-Menu--sidebar .LP-Menu__List .LP-Menu__Item:hover {
-          background-color: #f9f9f9; }
+          border-left: 2px solid #C09F80;
+          position: relative;
+          background-color: #D7CEC7;
+          left: -2px; }
 
 @media (max-width: 750px) {
   .LP-Menu:not(.LP-Menu--sidebar) .LP-Menu__List {
@@ -281,19 +298,20 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  margin-bottom: 70px;
+  height: 60px;
-  height: 60px; }
+  box-shadow: 0 0 2px #C09F80; }
   .LP-Header__Navigation {
     flex-grow: 2; }
   .LP-Header__Logo {
-    height: 60px;
+    height: 45px;
     margin: 25px;
     object-fit: cover;
     max-height: 100%;
+    width: 225px;
     overflow: hidden;
     flex-shrink: 0; }
     .LP-Header__Logo .LP-Image {
-      height: 60px; }
+      height: 100%; }
 
 .LP-Header__UserInformation {
   margin-right: 3%; }
@@ -306,7 +324,7 @@
 
 @media (max-width: 750px) {
   .LP-Header__Logo {
-    width: 60px; }
+    width: 45px; }
     .LP-Header__Logo .LP-Image {
       object-position: 0 0;
       object-fit: cover; } }
@@ -496,3 +514,17 @@
     height: auto;
     margin: 0;
     padding: 0; } }
+
+.LP-Main {
+  display: flex;
+  flex-direction: row-reverse;
+  height: calc(100% - 61px); }
+  .LP-Main .LP-Main__Content {
+    flex-grow: 1;
+    width: calc(100% -300px);
+    min-height: 1px; }
+  .LP-Main .LP-Main__Navigation {
+    flex-shrink: 0;
+    width: 250px;
+    flex-grow: 0;
+    height: 100%; }