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

View File

@ -2,4 +2,5 @@
@import 'placeTeaser/placeTeaser';
@import 'tagList/tagList';
@import 'navigation/navigation';
@import 'messageList/messageList';
@import 'messageList/messageList';
@import 'userInfo/userInfo';

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

View File

@ -0,0 +1 @@
{}

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>

View File

@ -5,4 +5,5 @@
@import 'footer/footer';
@import 'form/form';
@import 'imageGrid/imageGrid';
@import 'osmMap/osmMap';
@import 'osmMap/osmMap';
@import 'userProfile/userProfile';

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

View File

@ -0,0 +1 @@
{}

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>

Binary file not shown.

After

Width:  |  Height:  |  Size: 166 KiB

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