mirror of
https://github.com/block-core/blockcore-notes.git
synced 2024-09-29 22:40:44 +00:00
Improving the BlockCore Notes UI
This commit is contained in:
zaidmstrr
parent
4373fe0346
commit
b74f8f31b7
@ -14,7 +14,7 @@
|
||||
|
||||
.default-card {
|
||||
display: inline-block;
|
||||
/* margin-bottom: 1em; */
|
||||
margin-bottom: 1em;
|
||||
width: 300px;
|
||||
height: 160px;
|
||||
margin-right: 1em;
|
||||
@ -90,21 +90,34 @@
|
||||
|
||||
.home {
|
||||
display: flex;
|
||||
/* flex-wrap: nowrap; */
|
||||
justify-content: space-between;
|
||||
gap: 1.5em;
|
||||
max-width: 1360px;
|
||||
max-width: 1100px;
|
||||
align-self: center;
|
||||
/* flex-direction: row; */
|
||||
|
||||
}
|
||||
|
||||
.home-left {
|
||||
flex: 1 1 0;
|
||||
min-width: 240px;
|
||||
/* flex: 1 1 0;
|
||||
min-width: 240px; */
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: space-around;
|
||||
|
||||
}
|
||||
|
||||
.home-right {
|
||||
flex: 3 1 0;
|
||||
/* flex: 3 1 0; */
|
||||
display: flex;
|
||||
justify-content:space-between;
|
||||
/* flex-wrap: nowrap; */
|
||||
}
|
||||
|
||||
.home-card {
|
||||
margin: 15px;
|
||||
flex-grow: 1;
|
||||
border-radius: 15px;
|
||||
margin-bottom: 1.8em;
|
||||
width: 100%;
|
||||
@ -123,10 +136,15 @@
|
||||
}
|
||||
|
||||
.page {
|
||||
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
flex-direction: column;
|
||||
|
||||
/* flex-direction: row; */
|
||||
/* flex-direction: row-reverse; */
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 599px) {
|
||||
@ -155,6 +173,8 @@
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin-bottom: 0.2em;
|
||||
/* align-items: center; */
|
||||
|
||||
}
|
||||
|
||||
.profile-line::-webkit-scrollbar-thumb {
|
||||
|
||||
@ -8,6 +8,72 @@
|
||||
<mat-icon>more_horiz</mat-icon>
|
||||
</button>
|
||||
</drag-scroll>
|
||||
|
||||
|
||||
|
||||
<div class="home-right">
|
||||
<br /><br />
|
||||
<div class="centered">
|
||||
<button routerLink="/editor" mat-fab extended color="primary">
|
||||
<mat-icon>note_add</mat-icon>
|
||||
{{ 'Home.WriteANote' | translate }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<br /><br />
|
||||
|
||||
<!-- <mat-card class="home-card">
|
||||
<mat-card-header>
|
||||
<mat-card-title>Create Note</mat-card-title>
|
||||
</mat-card-header>
|
||||
<mat-card-content>
|
||||
<br />
|
||||
<form [formGroup]="formGroup">
|
||||
<div mat-dialog-content class="mat-dialog-content">
|
||||
|
||||
<emoji-mart class="picker" *ngIf="isEmojiPickerVisible" emoji="point_up" [isNative]="true" [showPreview]="false" (emojiSelect)="addEmoji($event)" title="Choose your emoji"></emoji-mart>
|
||||
<mat-form-field class="input-full-width">
|
||||
<mat-label>Note</mat-label>
|
||||
<textarea class="note-input" matInput type="text" [(ngModel)]="note" formControlName="note" rows="6"></textarea>
|
||||
</mat-form-field>
|
||||
|
||||
</div>
|
||||
<div mat-dialog-actions class="mat-dialog-actions" align="end">
|
||||
<button mat-stroked-button (click)="onCancel()">Cancel</button>
|
||||
<button mat-flat-button (click)="postNote()" color="primary" cdkFocusInitial>Post</button>
|
||||
</div>
|
||||
</form>
|
||||
</mat-card-content>
|
||||
</mat-card> -->
|
||||
|
||||
<mat-card class="events clickable" (click)="navigation.openEvent($event, event)" *ngFor="let event of latestItems; trackBy: trackByFn">
|
||||
<div class="events-header">
|
||||
<app-event-header [pubkey]="event.pubkey"><span class="event-date" matTooltipPosition="below">{{ event.created_at | ago }}</span> <app-directory-icon [pubkey]="event.pubkey"></app-directory-icon></app-event-header>
|
||||
<app-event-actions [event]="event"></app-event-actions>
|
||||
</div>
|
||||
<app-content [event]="event"></app-content>
|
||||
</mat-card>
|
||||
|
||||
<p class="view-more-container">
|
||||
<button mat-button routerLink="/feed">{{ 'Home.ViewFollowingNotes' | translate }}</button>
|
||||
</p>
|
||||
|
||||
<!-- <mat-card class="home-card">
|
||||
<mat-card-header>
|
||||
<img mat-card-avatar src="https://material.angular.io/assets/img/examples/shiba1.jpg" />
|
||||
<mat-card-title>Shiba Inu</mat-card-title>
|
||||
<mat-card-subtitle>Dog Breed</mat-card-subtitle>
|
||||
</mat-card-header>
|
||||
<img mat-card-image class="home-card-image" src="https://material.angular.io/assets/img/examples/shiba2.jpg" />
|
||||
<mat-card-content>
|
||||
<p>The Shiba Inu is the smallest of the six original and distinct spitz breeds of dog from Japan. A small, agile dog that copes very well with mountainous terrain, the Shiba Inu was originally bred for hunting.</p>
|
||||
</mat-card-content>
|
||||
<mat-card-actions>
|
||||
<button mat-button>Like</button>
|
||||
<button mat-button>Comments</button>
|
||||
</mat-card-actions>
|
||||
</mat-card> -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="home">
|
||||
@ -107,69 +173,7 @@
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</div>
|
||||
<div class="home-right">
|
||||
<br /><br />
|
||||
<div class="centered">
|
||||
<button routerLink="/editor" mat-fab extended color="primary">
|
||||
<mat-icon>note_add</mat-icon>
|
||||
{{ 'Home.WriteANote' | translate }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<br /><br />
|
||||
|
||||
<!-- <mat-card class="home-card">
|
||||
<mat-card-header>
|
||||
<mat-card-title>Create Note</mat-card-title>
|
||||
</mat-card-header>
|
||||
<mat-card-content>
|
||||
<br />
|
||||
<form [formGroup]="formGroup">
|
||||
<div mat-dialog-content class="mat-dialog-content">
|
||||
|
||||
<emoji-mart class="picker" *ngIf="isEmojiPickerVisible" emoji="point_up" [isNative]="true" [showPreview]="false" (emojiSelect)="addEmoji($event)" title="Choose your emoji"></emoji-mart>
|
||||
<mat-form-field class="input-full-width">
|
||||
<mat-label>Note</mat-label>
|
||||
<textarea class="note-input" matInput type="text" [(ngModel)]="note" formControlName="note" rows="6"></textarea>
|
||||
</mat-form-field>
|
||||
|
||||
</div>
|
||||
<div mat-dialog-actions class="mat-dialog-actions" align="end">
|
||||
<button mat-stroked-button (click)="onCancel()">Cancel</button>
|
||||
<button mat-flat-button (click)="postNote()" color="primary" cdkFocusInitial>Post</button>
|
||||
</div>
|
||||
</form>
|
||||
</mat-card-content>
|
||||
</mat-card> -->
|
||||
|
||||
<mat-card class="events clickable" (click)="navigation.openEvent($event, event)" *ngFor="let event of latestItems; trackBy: trackByFn">
|
||||
<div class="events-header">
|
||||
<app-event-header [pubkey]="event.pubkey"><span class="event-date" matTooltipPosition="below">{{ event.created_at | ago }}</span> <app-directory-icon [pubkey]="event.pubkey"></app-directory-icon></app-event-header>
|
||||
<app-event-actions [event]="event"></app-event-actions>
|
||||
</div>
|
||||
<app-content [event]="event"></app-content>
|
||||
</mat-card>
|
||||
|
||||
<p class="view-more-container">
|
||||
<button mat-button routerLink="/feed">{{ 'Home.ViewFollowingNotes' | translate }}</button>
|
||||
</p>
|
||||
|
||||
<!-- <mat-card class="home-card">
|
||||
<mat-card-header>
|
||||
<img mat-card-avatar src="https://material.angular.io/assets/img/examples/shiba1.jpg" />
|
||||
<mat-card-title>Shiba Inu</mat-card-title>
|
||||
<mat-card-subtitle>Dog Breed</mat-card-subtitle>
|
||||
</mat-card-header>
|
||||
<img mat-card-image class="home-card-image" src="https://material.angular.io/assets/img/examples/shiba2.jpg" />
|
||||
<mat-card-content>
|
||||
<p>The Shiba Inu is the smallest of the six original and distinct spitz breeds of dog from Japan. A small, agile dog that copes very well with mountainous terrain, the Shiba Inu was originally bred for hunting.</p>
|
||||
</mat-card-content>
|
||||
<mat-card-actions>
|
||||
<button mat-button>Like</button>
|
||||
<button mat-button>Comments</button>
|
||||
</mat-card-actions>
|
||||
</mat-card> -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- <div class="dashboard-header">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user