diff --git a/components/02_Molecules/_molecules.scss b/components/02_Molecules/_molecules.scss index dfaba7a..37c5103 100644 --- a/components/02_Molecules/_molecules.scss +++ b/components/02_Molecules/_molecules.scss @@ -2,4 +2,5 @@ @import 'placeTeaser/placeTeaser'; @import 'tagList/tagList'; @import 'navigation/navigation'; -@import 'messageList/messageList'; \ No newline at end of file +@import 'messageList/messageList'; +@import 'userInfo/userInfo'; \ No newline at end of file diff --git a/components/02_Molecules/userInfo/_userInfo.scss b/components/02_Molecules/userInfo/_userInfo.scss new file mode 100644 index 0000000..fdc28f2 --- /dev/null +++ b/components/02_Molecules/userInfo/_userInfo.scss @@ -0,0 +1,36 @@ +.LP-UserInfo { + display: flex; + flex-direction: column; + background-color: $-beige; + + max-width: 400px; + width: 100%; + min-width: 300px; + + &__UserName { + background-color: $-light-brown; + + .LP-Headline { + color: black; + padding: 0; + margin: 0; + text-align: center; + padding: $-spacing-small / 2; + font-size: 25px; + } + } + + &__Meta { + * { + font-family: $-primary-sans-serif-font; + font-size: 18px; + } + + padding: $-spacing-small / 2; + + .LP-UserInfo__Key { + padding-right: $-spacing-medium; + font-weight: bold; + } + } +} \ No newline at end of file diff --git a/components/02_Molecules/userInfo/userInfo.config.json b/components/02_Molecules/userInfo/userInfo.config.json new file mode 100644 index 0000000..9e26dfe --- /dev/null +++ b/components/02_Molecules/userInfo/userInfo.config.json @@ -0,0 +1 @@ +{} \ No newline at end of file diff --git a/components/02_Molecules/userInfo/userInfo.hbs b/components/02_Molecules/userInfo/userInfo.hbs new file mode 100644 index 0000000..16b1588 --- /dev/null +++ b/components/02_Molecules/userInfo/userInfo.hbs @@ -0,0 +1,44 @@ +
+
+ {{> @headline headline='reverend'}} +
+
+ {{> @image source='/images/profile_picture.jpeg'}} +
+
+ + + + + + + + + + + + + + + + + +
+ Joined + + 27th of September 2020 +
+ Places + + 42 +
+ Place Assets + + 136 +
+ Location + + Münster +
+
+
\ No newline at end of file diff --git a/components/03_Organisms/_organisms.scss b/components/03_Organisms/_organisms.scss index 20f13e8..5dd0db7 100644 --- a/components/03_Organisms/_organisms.scss +++ b/components/03_Organisms/_organisms.scss @@ -5,4 +5,5 @@ @import 'footer/footer'; @import 'form/form'; @import 'imageGrid/imageGrid'; -@import 'osmMap/osmMap'; \ No newline at end of file +@import 'osmMap/osmMap'; +@import 'userProfile/userProfile'; \ No newline at end of file diff --git a/components/03_Organisms/userProfile/_userProfile.scss b/components/03_Organisms/userProfile/_userProfile.scss new file mode 100644 index 0000000..ee8c381 --- /dev/null +++ b/components/03_Organisms/userProfile/_userProfile.scss @@ -0,0 +1,16 @@ +.LP-UserProfile { + display: flex; + flex-direction: row; + + &__Bio { + flex-grow: 5; + flex-shrink: 10; + padding-right: $-spacing-large; + } + + &__Info { + flex-grow: 10; + flex-shrink: 1; + flex-basis: max-content; + } +} \ No newline at end of file diff --git a/components/03_Organisms/userProfile/userProfile.config.json b/components/03_Organisms/userProfile/userProfile.config.json new file mode 100644 index 0000000..9e26dfe --- /dev/null +++ b/components/03_Organisms/userProfile/userProfile.config.json @@ -0,0 +1 @@ +{} \ No newline at end of file diff --git a/components/03_Organisms/userProfile/userProfile.hbs b/components/03_Organisms/userProfile/userProfile.hbs new file mode 100644 index 0000000..a8316fb --- /dev/null +++ b/components/03_Organisms/userProfile/userProfile.hbs @@ -0,0 +1,11 @@ +
+
+

Bio

+

Natus id quaerat aperiam. Dolore tempora repellendus atque. Facilis quidem eum dolore incidunt aut voluptatibus ex culpa. Consectetur est explicabo ut fugit. +Et illum cumque recusandae et. Nisi et aspernatur non qui architecto. Beatae molestias hic beatae in doloremque dolores nihil libero. Rerum voluptas tempora laborum est quae quaerat. +Maiores fuga voluptatem laborum ut sit eum itaque. Molestiae molestiae non consequatur expedita. Explicabo sit a qui omnis.

+
+
+ {{> @userinfo }} +
+
\ No newline at end of file diff --git a/public/images/profile_picture.jpeg b/public/images/profile_picture.jpeg new file mode 100644 index 0000000..28d3b17 Binary files /dev/null and b/public/images/profile_picture.jpeg differ diff --git a/public/main.css b/public/main.css index ec53249..8d6ab35 100644 --- a/public/main.css +++ b/public/main.css @@ -1027,6 +1027,31 @@ body { .LP-MessageList .LP-MessageList__Item { margin: 5px 0; } +.LP-UserInfo { + display: flex; + flex-direction: column; + background-color: #D7CEC7; + max-width: 400px; + width: 100%; + min-width: 300px; } + .LP-UserInfo__UserName { + background-color: #C09F80; } + .LP-UserInfo__UserName .LP-Headline { + color: black; + padding: 0; + margin: 0; + text-align: center; + padding: 5px; + font-size: 25px; } + .LP-UserInfo__Meta { + padding: 5px; } + .LP-UserInfo__Meta * { + font-family: "Montserrat", Helvetica, sans-serif; + font-size: 18px; } + .LP-UserInfo__Meta .LP-UserInfo__Key { + padding-right: 25px; + font-weight: bold; } + .LP-Header { display: flex; align-items: center; @@ -1688,6 +1713,18 @@ body { padding: .5em; border-radius: 2px; } +.LP-UserProfile { + display: flex; + flex-direction: row; } + .LP-UserProfile__Bio { + flex-grow: 5; + flex-shrink: 10; + padding-right: 35px; } + .LP-UserProfile__Info { + flex-grow: 10; + flex-shrink: 1; + flex-basis: max-content; } + .LP-MainContainer { margin: 0 auto; max-width: 1280px; }