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

User Profile

This commit is contained in:
reverend 2020-10-04 11:14:41 +02:00
parent 1bd1797281
commit 802134db14
10 changed files with 150 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
components/02_Molecules/_molecules.scss
View File

@ -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
View 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
View File

@ -0,0 +1 @@
{}

44
components/02_Molecules/userInfo/userInfo.hbs Normal file
View 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>

3
components/03_Organisms/_organisms.scss
View File

@ -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
View 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;
}
}

1
components/03_Organisms/userProfile/userProfile.config.json Normal file
View File

@ -0,0 +1 @@
{}

11
components/03_Organisms/userProfile/userProfile.hbs Normal file
View 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
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 166 KiB

37
public/main.css
View File

@ -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; }