Improve profile layout taking less vertical space

This commit is contained in:
SondreB 2022-12-31 00:44:28 +01:00
parent e11ed1a373
commit 9c9f19e2ab
No known key found for this signature in database
GPG Key ID: D6CC44C75005FDBF
2 changed files with 27 additions and 5 deletions

View File

@ -4,6 +4,19 @@
<img *ngIf="profile?.follow" class="profile-image-large profile-image-follow" [style.borderColor]="circle?.color" [src]="imagePath" />
<img *ngIf="!profile?.follow" class="profile-image-large" matTooltipPosition="above" [src]="imagePath" />
</div>
<div class="profile-page-header-middle">
<span *ngIf="profile">
<h2 class="marginless">{{ profile.display_name }}</h2>
<span>
<span class="dimmed">{{ profileName }} / {{ profile.nip05 }}</span><br />
<!-- <span class="dimmed wrap">{{ npub }}</span> -->
<p *ngIf="profile.about">{{ profile.about }}</p>
<!-- <p>{{ profile.lud06 }}</p> -->
<!-- Tip: <a class="ln-link" [href]="sanitize('lightning:' + profile.lud06)" target="_blank">⚡️</a> -->
<p *ngIf="profile.website">{{ profile.website }}</p>
</span>
</span>
</div>
<div class="profile-page-header-right">
<div class="profile-button-container">
<a mat-mini-fab color="primary" [href]="sanitize('lightning:' + profile.lud06)">⚡️</a>
@ -21,17 +34,15 @@
</div>
</div>
<span *ngIf="profile">
<!-- <span *ngIf="profile">
<h2 class="marginless">{{ profile.display_name }}</h2>
<span>
{{ profileName }} / {{ profile.nip05 }}<br />
<span class="dimmed wrap">{{ npub }}</span>
<p *ngIf="profile.about">{{ profile.about }}</p>
<!-- <p>{{ profile.lud06 }}</p> -->
<!-- Tip: <a class="ln-link" [href]="sanitize('lightning:' + profile.lud06)" target="_blank">⚡️</a> -->
<p *ngIf="profile.website">{{ profile.website }}</p>
</span>
</span>
</span> -->
</div>
<mat-tab-group>

View File

@ -284,15 +284,27 @@ mat-sidenav-content mat-toolbar {
}
.profile-page-header-left {
flex: 0 1 auto;
}
.profile-page-header-middle {
flex: 1 2 auto;
}
.profile-page-header-right {
width: 48px;
}
.profile-button-container {
margin-bottom: 0.4em;
}
// @media only screen and (max-width: 599px) {
// .profile-button-container {
// margin-bottom: 0.4em;
// }
// }
.event-header {
display: grid;
grid-template-columns: 48px 1fr;
@ -338,7 +350,6 @@ mat-sidenav-content mat-toolbar {
}
}
.event-header .name {
grid-area: name;
overflow: hidden;