Skip to content

Commit 49fd3ae

Browse files
zaidmstrrzaidmstrr
authored
Improving the BlockCore Notes UI (#146)
1 parent 4373fe0 commit 49fd3ae

File tree

2 files changed

+91
-67
lines changed

2 files changed

+91
-67
lines changed

‎src/app/home/home.css

+25-5
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414

1515
.default-card {
1616
display: inline-block;
17-
/* margin-bottom: 1em; */
17+
margin-bottom: 1em;
1818
width: 300px;
1919
height: 160px;
2020
margin-right: 1em;
@@ -90,21 +90,34 @@
9090

9191
.home {
9292
display: flex;
93+
/* flex-wrap: nowrap; */
94+
justify-content: space-between;
9395
gap: 1.5em;
94-
max-width: 1360px;
96+
max-width: 1100px;
9597
align-self: center;
98+
/* flex-direction: row; */
99+
96100
}
97101

98102
.home-left {
99-
flex: 1 1 0;
100-
min-width: 240px;
103+
/* flex: 1 1 0;
104+
min-width: 240px; */
105+
display: flex;
106+
flex-wrap: nowrap;
107+
justify-content: space-around;
108+
101109
}
102110

103111
.home-right {
104-
flex: 3 1 0;
112+
/* flex: 3 1 0; */
113+
display: flex;
114+
justify-content:space-between;
115+
/* flex-wrap: nowrap; */
105116
}
106117

107118
.home-card {
119+
margin: 15px;
120+
flex-grow: 1;
108121
border-radius: 15px;
109122
margin-bottom: 1.8em;
110123
width: 100%;
@@ -123,10 +136,15 @@
123136
}
124137

125138
.page {
139+
126140
box-sizing: border-box;
127141
display: flex;
128142
width: 100%;
143+
justify-content: space-between;
129144
flex-direction: column;
145+
146+
/* flex-direction: row; */
147+
/* flex-direction: row-reverse; */
130148
}
131149

132150
@media only screen and (max-width: 599px) {
@@ -155,6 +173,8 @@
155173
display: flex;
156174
flex-direction: row;
157175
margin-bottom: 0.2em;
176+
/* align-items: center; */
177+
158178
}
159179

160180
.profile-line::-webkit-scrollbar-thumb {

‎src/app/home/home.html

+66-62
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,72 @@
88
<mat-icon>more_horiz</mat-icon>
99
</button>
1010
</drag-scroll>
11+
12+
13+
14+
<div class="home-right">
15+
<br /><br />
16+
<div class="centered">
17+
<button routerLink="/editor" mat-fab extended color="primary">
18+
<mat-icon>note_add</mat-icon>
19+
{{ 'Home.WriteANote' | translate }}
20+
</button>
21+
</div>
22+
23+
<br /><br />
24+
25+
<!-- <mat-card class="home-card">
26+
<mat-card-header>
27+
<mat-card-title>Create Note</mat-card-title>
28+
</mat-card-header>
29+
<mat-card-content>
30+
<br />
31+
<form [formGroup]="formGroup">
32+
<div mat-dialog-content class="mat-dialog-content">
33+
34+
<emoji-mart class="picker" *ngIf="isEmojiPickerVisible" emoji="point_up" [isNative]="true" [showPreview]="false" (emojiSelect)="addEmoji($event)" title="Choose your emoji"></emoji-mart>
35+
<mat-form-field class="input-full-width">
36+
<mat-label>Note</mat-label>
37+
<textarea class="note-input" matInput type="text" [(ngModel)]="note" formControlName="note" rows="6"></textarea>
38+
</mat-form-field>
39+
40+
</div>
41+
<div mat-dialog-actions class="mat-dialog-actions" align="end">
42+
<button mat-stroked-button (click)="onCancel()">Cancel</button>&nbsp;
43+
<button mat-flat-button (click)="postNote()" color="primary" cdkFocusInitial>Post</button>
44+
</div>
45+
</form>
46+
</mat-card-content>
47+
</mat-card> -->
48+
49+
<mat-card class="events clickable" (click)="navigation.openEvent($event, event)" *ngFor="let event of latestItems; trackBy: trackByFn">
50+
<div class="events-header">
51+
<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>
52+
<app-event-actions [event]="event"></app-event-actions>
53+
</div>
54+
<app-content [event]="event"></app-content>
55+
</mat-card>
56+
57+
<p class="view-more-container">
58+
<button mat-button routerLink="/feed">{{ 'Home.ViewFollowingNotes' | translate }}</button>
59+
</p>
60+
61+
<!-- <mat-card class="home-card">
62+
<mat-card-header>
63+
<img mat-card-avatar src="https://material.angular.io/assets/img/examples/shiba1.jpg" />
64+
<mat-card-title>Shiba Inu</mat-card-title>
65+
<mat-card-subtitle>Dog Breed</mat-card-subtitle>
66+
</mat-card-header>
67+
<img mat-card-image class="home-card-image" src="https://material.angular.io/assets/img/examples/shiba2.jpg" />
68+
<mat-card-content>
69+
<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>
70+
</mat-card-content>
71+
<mat-card-actions>
72+
<button mat-button>Like</button>
73+
<button mat-button>Comments</button>
74+
</mat-card-actions>
75+
</mat-card> -->
76+
</div>
1177
</div>
1278

1379
<div class="home">
@@ -107,69 +173,7 @@
107173
</mat-card-content>
108174
</mat-card>
109175
</div>
110-
<div class="home-right">
111-
<br /><br />
112-
<div class="centered">
113-
<button routerLink="/editor" mat-fab extended color="primary">
114-
<mat-icon>note_add</mat-icon>
115-
{{ 'Home.WriteANote' | translate }}
116-
</button>
117-
</div>
118-
119-
<br /><br />
120-
121-
<!-- <mat-card class="home-card">
122-
<mat-card-header>
123-
<mat-card-title>Create Note</mat-card-title>
124-
</mat-card-header>
125-
<mat-card-content>
126-
<br />
127-
<form [formGroup]="formGroup">
128-
<div mat-dialog-content class="mat-dialog-content">
129-
130-
<emoji-mart class="picker" *ngIf="isEmojiPickerVisible" emoji="point_up" [isNative]="true" [showPreview]="false" (emojiSelect)="addEmoji($event)" title="Choose your emoji"></emoji-mart>
131-
<mat-form-field class="input-full-width">
132-
<mat-label>Note</mat-label>
133-
<textarea class="note-input" matInput type="text" [(ngModel)]="note" formControlName="note" rows="6"></textarea>
134-
</mat-form-field>
135-
136-
</div>
137-
<div mat-dialog-actions class="mat-dialog-actions" align="end">
138-
<button mat-stroked-button (click)="onCancel()">Cancel</button>&nbsp;
139-
<button mat-flat-button (click)="postNote()" color="primary" cdkFocusInitial>Post</button>
140-
</div>
141-
</form>
142-
</mat-card-content>
143-
</mat-card> -->
144-
145-
<mat-card class="events clickable" (click)="navigation.openEvent($event, event)" *ngFor="let event of latestItems; trackBy: trackByFn">
146-
<div class="events-header">
147-
<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>
148-
<app-event-actions [event]="event"></app-event-actions>
149-
</div>
150-
<app-content [event]="event"></app-content>
151-
</mat-card>
152-
153-
<p class="view-more-container">
154-
<button mat-button routerLink="/feed">{{ 'Home.ViewFollowingNotes' | translate }}</button>
155-
</p>
156176

157-
<!-- <mat-card class="home-card">
158-
<mat-card-header>
159-
<img mat-card-avatar src="https://material.angular.io/assets/img/examples/shiba1.jpg" />
160-
<mat-card-title>Shiba Inu</mat-card-title>
161-
<mat-card-subtitle>Dog Breed</mat-card-subtitle>
162-
</mat-card-header>
163-
<img mat-card-image class="home-card-image" src="https://material.angular.io/assets/img/examples/shiba2.jpg" />
164-
<mat-card-content>
165-
<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>
166-
</mat-card-content>
167-
<mat-card-actions>
168-
<button mat-button>Like</button>
169-
<button mat-button>Comments</button>
170-
</mat-card-actions>
171-
</mat-card> -->
172-
</div>
173177
</div>
174178

175179
<!-- <div class="dashboard-header">

0 commit comments

Comments
 (0)