User Profile
This commit is contained in:
parent
1bd1797281
commit
802134db14
@ -2,4 +2,5 @@
|
||||
@import 'placeTeaser/placeTeaser';
|
||||
@import 'tagList/tagList';
|
||||
@import 'navigation/navigation';
|
||||
@import 'messageList/messageList';
|
||||
@import 'messageList/messageList';
|
||||
@import 'userInfo/userInfo';
|
36
components/02_Molecules/userInfo/_userInfo.scss
Normal file
36
components/02_Molecules/userInfo/_userInfo.scss
Normal file
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
1
components/02_Molecules/userInfo/userInfo.config.json
Normal file
1
components/02_Molecules/userInfo/userInfo.config.json
Normal file
@ -0,0 +1 @@
|
||||
{}
|
44
components/02_Molecules/userInfo/userInfo.hbs
Normal file
44
components/02_Molecules/userInfo/userInfo.hbs
Normal file
@ -0,0 +1,44 @@
|
||||
<div class="LP-UserInfo">
|
||||
<div class="LP-UserInfo__UserName">
|
||||
{{> @headline headline='reverend'}}
|
||||
</div>
|
||||
<div class="LP-UserInfo__Picture">
|
||||
{{> @image source='/images/profile_picture.jpeg'}}
|
||||
</div>
|
||||
<div class="LP-UserInfo__Meta">
|
||||
<table>
|
||||
<tr>
|
||||
<td class="LP-UserInfo__Key">
|
||||
<span class="LP-Paragraph"> Joined</span>
|
||||
</td>
|
||||
<td class="LP-UserInfo__Value">
|
||||
<span class="LP-Paragraph">27th of September 2020</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="LP-UserInfo__Key">
|
||||
<span class="LP-Paragraph">Places</span>
|
||||
</td>
|
||||
<td class="LP-UserInfo__Value">
|
||||
<span class="LP-Paragraph">42</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="LP-UserInfo__Key">
|
||||
<span class="LP-Paragraph">Place Assets</span>
|
||||
</td>
|
||||
<td class="LP-UserInfo__Value">
|
||||
<span class="LP-Paragraph">136</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="LP-UserInfo__Key">
|
||||
<span class="LP-Paragraph">Location</span>
|
||||
</td>
|
||||
<td class="LP-UserInfo__Value">
|
||||
<span class="LP-Paragraph">Münster</span>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
@ -5,4 +5,5 @@
|
||||
@import 'footer/footer';
|
||||
@import 'form/form';
|
||||
@import 'imageGrid/imageGrid';
|
||||
@import 'osmMap/osmMap';
|
||||
@import 'osmMap/osmMap';
|
||||
@import 'userProfile/userProfile';
|
16
components/03_Organisms/userProfile/_userProfile.scss
Normal file
16
components/03_Organisms/userProfile/_userProfile.scss
Normal file
@ -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;
|
||||
}
|
||||
}
|
@ -0,0 +1 @@
|
||||
{}
|
11
components/03_Organisms/userProfile/userProfile.hbs
Normal file
11
components/03_Organisms/userProfile/userProfile.hbs
Normal file
@ -0,0 +1,11 @@
|
||||
<div class="LP-UserProfile">
|
||||
<div class="LP-UserProfile__Bio">
|
||||
<h2 class="LP-Headline">Bio</h2>
|
||||
<p class="LP-Paragraph">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.</p>
|
||||
</div>
|
||||
<div class="LP-UserProfile__Info">
|
||||
{{> @userinfo }}
|
||||
</div>
|
||||
</div>
|
BIN
public/images/profile_picture.jpeg
Normal file
BIN
public/images/profile_picture.jpeg
Normal file
Binary file not shown.
After Width: | Height: | Size: 166 KiB |
@ -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; }
|
||||
|
Loading…
Reference in New Issue
Block a user