Commander1024/lostplaces-frontend
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Compare commits

base: Commander1024:cf5e804e50f0853e27ab7ea853321eb5c646beba
Branches Tags
Commander1024:master
Commander1024:linklist-add
..
compare: Commander1024:93341886d6cf6a33671b5e37bbd6be30de6274d6
Branches Tags
Commander1024:master
Commander1024:linklist-add

No commits in common. "cf5e804e50f0853e27ab7ea853321eb5c646beba" and "93341886d6cf6a33671b5e37bbd6be30de6274d6" have entirely different histories.
cf5e804e50 ... 93341886d6

11 changed files with 5706 additions and 112 deletions
Show Stats Expand all files Collapse all files

1
.gitignore vendored
View File

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

18
components/02_Molecules/navigation/_navigation.scss
View File

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

11
components/03_Organisms/header/_header.scss
View File

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

3
components/03_Organisms/header/header.hbs
View File

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

22
components/05_Pages/_pages.scss
View File

@ -1,22 +0,0 @@
$-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';

0
components/05_Pages/placeDetail/_placeDetail.scss
View File

1
components/05_Pages/placeDetail/placeDetail.config.json
View File

@ -1 +0,0 @@
{}

9
components/05_Pages/placeDetail/placeDetail.hbs
View File

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

17
components/components.scss
View File

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

5678
package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

56
public/components.css
View File

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