design ui page

parent 59700cdd
This diff is collapsed.
......@@ -5,11 +5,25 @@ import { AuthGuard } from "./shared/guards";
import { HomeComponent } from "./home/home.component";
import { TopicComponent } from "./topic/topic.component";
import { CreateTopicComponent } from "./create-topic/create-topic.component";
import { LoginComponent } from './login/login.component';
import { RegisterComponent } from './register/register.component';
const routes: Routes = [
// {
// path: "",
// component: HomeComponent,
// canActivate: [AuthGuard],
// },
{
path: "",
component: HomeComponent,
canActivate: [AuthGuard],
component: HomeComponent
},
{
path: "login",
component: LoginComponent
},
{
path: "register",
component: RegisterComponent
},
{
path: "topic",
......
<app-header [user]="user$ | async"></app-header>
<app-header></app-header>
<!-- have login & register -->
<!-- <app-header [user]="user$ | async"></app-header> -->
<div class="wrapper-app">
<router-outlet></router-outlet>
</div>
......
......@@ -14,6 +14,8 @@ import { HomeComponent } from './home/home.component';
import { AuthService } from './shared/services';
import { TopicComponent } from './topic/topic.component';
import { CreateTopicComponent } from './create-topic/create-topic.component';
import { LoginComponent } from './login/login.component';
import { RegisterComponent } from './register/register.component';
export function appInitializerFactory(authService: AuthService) {
return () => authService.checkTheUserOnTheFirstLoad();
......@@ -21,7 +23,7 @@ export function appInitializerFactory(authService: AuthService) {
@NgModule({
imports: [BrowserAnimationsModule, HttpClientModule, SharedModule, AppRoutingModule],
declarations: [AppComponent, HeaderComponent, HomeComponent, TopicComponent, CreateTopicComponent],
declarations: [AppComponent, HeaderComponent, HomeComponent, TopicComponent, CreateTopicComponent, LoginComponent, RegisterComponent],
providers: [
{
provide: HTTP_INTERCEPTORS,
......
@import url("https://fonts.googleapis.com/css2?family=Kanit:wght@200;300;600&display=swap");
*{
font-family: 'Kanit', sans-serif;
}
\ No newline at end of file
<header>
<mat-toolbar color="primary">
<div class="logo">
<img src="../../assets/img/Logo.png" alt="">
</div>
<span class="example-spacer"></span>
<div>
<button class="button-item " routerLink="">หน้าหลัก</button>
<button class="button-item" routerLink="/create">โพสต์</button>
</div>
<div class="card">
<p class="text-profile">น้องโอมไอ่เด็กเหี้ย</p>
<button class="button-logout" routerLink="/login">ออกจากระบบ</button>
</div>
</mat-toolbar>
</header>
<!-- <header>
<mat-toolbar color="primary">
<a routerLink="/" class="logo"></a>
<span class="example-spacer"></span>
......@@ -15,4 +31,4 @@
</mat-menu>
</div>
</mat-toolbar>
</header>
</header> -->
@import url("https://fonts.googleapis.com/css2?family=Kanit:wght@200;300;600&display=swap");
* {
font-family: "Kanit", sans-serif;
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
header {
width: 100%;
.logo {
background-image: url('../../assets/logo.png');
width: 50px;
height: 50px;
background-image: url("../../assets/Logo.png");
width: 100%;
height: 70%;
background-size: contain;
background-repeat: no-repeat;
}
.example-spacer {
flex: 1 1 auto;
}
.links {
.button-item {
background-color: Transparent;
background-repeat: no-repeat;
border: none;
cursor: pointer;
overflow: hidden;
outline: none;
padding-left: 20px;
padding-right: 20px;
padding-top: 10px;
padding-bottom: 10px;
margin-right: 30px;
font-size: 20px;
color: white;
font-family: 'Helvetica Neue', sans-serif;
font-size: 15px;
font-weight: initial;
letter-spacing: -1px;
line-height: 1;
text-align: center;
padding: 15px;
&.side {
padding: 0 14px;
letter-spacing: 1px;
border-radius: 10px;
font-weight: bold;
}
.button-item:hover {
background-color: #ebebf5;
color: #2c2c2c;
}
.mat-toolbar {
background: black;
display: flex;
background: #2c2c2c;
justify-content: center;
align-items: center;
min-height: 8vh;
}
.mat-icon {
vertical-align: middle;
margin: 0 5px;
.card {
display: flex;
background-color: #1e1e1e;
transition: 0.3s;
padding: 7px;
border-radius: 6px;
}
a {
.button-logout {
border: none;
cursor: pointer;
overflow: hidden;
outline: none;
background-color: #ff3b30;
color: white;
letter-spacing: 1px;
border-radius: 6px;
font-size: 16px;
padding-left: 20px;
padding-right: 20px;
}
.button-logout:hover {
background-color: #c02b23;
}
.text-profile {
margin-right: 20px;
margin-left: 10px;
letter-spacing: 0.5px;
}
\ No newline at end of file
}
<p>
home
</p>
<div class="content-topic-page">
<div class="row">
<div class="card-content">
<div class="row">
<h2 class="title-topic">ล่าสุด</h2>
</div>
<table>
<tr>
<th>
<button class="content-flim">
Review: The Devil All the Time (Antonio Campos, 2020) รีวิวโดย MDC
</button>
</th>
<th>
<button class="content-flim">
ซ่อนเงาผี - Behind You - ไปดูมาแล้ว
</button>
</th>
<th>
<button class="content-flim">
มู่หลาน สงครามย้อนยุค ไปดูๆๆๆๆๆๆๆ
</button>
</th>
</tr>
</table>
</div>
</div>
</div>
<div class="content-topic-page">
<div class="row">
<div class="card-content leftcolumn">
<div class="row">
<h2 class="title-topic" style="padding-bottom: 30px">บทความ</h2>
</div>
<div class="row">
<div class="content-topic">
<div style="padding: 10px" *ngFor="let i of datas">
<a href=""
><label>{{ i.heading }}</label></a
>
<p>{{ i.type }} &nbsp;|&nbsp;&nbsp;{{ i.date }}</p>
</div>
</div>
</div>
</div>
<div class="card-content rightcolumn">
<div class="row">
<h2 class="title-topic" style="padding-bottom: 30px">หมวดหมู</h2>
</div>
<div class="row">
<div class="content-topic">
<div style="padding: 10px" *ngFor="let i of catagorys">
<a href=""
><label>{{ i.type }}</label></a
>
</div>
</div>
</div>
</div>
</div>
</div>
@import url("https://fonts.googleapis.com/css2?family=Kanit:wght@200;300;600&display=swap");
* {
font-family: "Kanit", sans-serif;
}
.content-topic-page {
padding-left: 30px;
padding-right: 30px;
padding-top: 20px;
padding-bottom: 5px;
}
.title-topic {
padding-left: 15px;
padding-bottom: 15px;
}
.card-content {
padding-bottom: 35px;
padding-left: 30px;
padding-right: 30px;
background-color: white;
border-radius: 10px;
opacity: 0.8;
background-color: #3e3e3e;
}
.content-card {
background-color: #262626;
opacity: 1;
}
table {
width: 100%;
}
th {
text-align: center;
}
.content-flim {
background-color: #262626;
opacity: 1px;
width: 400px;
height: 100px;
font-size: 18px;
font-weight: lighter;
padding: 10px;
border-radius: 6px;
border: none;
outline: none;
}
.content-topic {
margin: auto;
background-color: #262626;
opacity: 1px;
font-size: 18px;
width: 95%;
font-weight: lighter;
padding: 10px;
border-radius: 6px;
border: none;
outline: none;
}
.content-catagory {
margin: auto;
background-color: #262626;
width: 55%;
opacity: 1px;
width: 400px;
height: 100px;
font-size: 18px;
font-weight: lighter;
padding: 10px;
border-radius: 6px;
border: none;
outline: none;
}
.leftcolumn {
float: left;
width: 73%;
}
.rightcolumn {
float: right;
width: 25%;
padding-left: 20px;
}
import { Component, OnInit } from '@angular/core';
import { Component, OnInit } from "@angular/core";
import { data } from "data";
import { catagory } from "data";
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.scss']
selector: "app-home",
templateUrl: "./home.component.html",
styleUrls: ["./home.component.scss"],
})
export class HomeComponent implements OnInit {
constructor() { }
datas = data;
catagorys = catagory;
constructor() {}
ngOnInit() {
console.log(this.datas);
}
}
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { LoginComponent } from './login.component';
describe('LoginComponent', () => {
let component: LoginComponent;
let fixture: ComponentFixture<LoginComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ LoginComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(LoginComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
constructor() { }
ngOnInit(): void {
}
}
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { RegisterComponent } from './register.component';
describe('RegisterComponent', () => {
let component: RegisterComponent;
let fixture: ComponentFixture<RegisterComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ RegisterComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(RegisterComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-register',
templateUrl: './register.component.html',
styleUrls: ['./register.component.css']
})
export class RegisterComponent implements OnInit {
constructor() { }
ngOnInit(): void {
}
}
@import url("https://fonts.googleapis.com/css2?family=Kanit:wght@200;300;600&display=swap");
*{
font-family: 'Kanit', sans-serif;
}
\ No newline at end of file
mean/src/assets/logo.png

5.85 KB | W: | H:

mean/src/assets/logo.png

18.3 KB | W: | H:

mean/src/assets/logo.png
mean/src/assets/logo.png
mean/src/assets/logo.png
mean/src/assets/logo.png
  • 2-up
  • Swipe
  • Onion skin
......@@ -2,30 +2,31 @@
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Mean</title>
<title>Film Review</title>
<base href="/" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" type="image/x-icon" href="favicon.ico" />
<link
rel="prefetch"
href="https://fonts.googleapis.com/icon?family=Material+Icons"
as="style"
crossorigin
/>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
<link
rel="preload"
href="https://fonts.googleapis.com/css?family=Exo:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i"
as="style"
crossorigin
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link rel="icon" type="image/x-icon" href="assets/icons/logo.png" />
<link
href="https://fonts.googleapis.com/css?family=Exo:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i"
href="https://fonts.googleapis.com/css2?family=Kanit:wght@200;300;600&display=swap"
rel="stylesheet"
/>
<style>
body {
background-image: url("assets/bg.png");
background-repeat: no-repeat;
background-attachment: fixed;
}
* {
color: white;
}
</style>
</head>
<body>
<app-root></app-root>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment