Skip to content

M
Moments
Commit 55a5003b by abraham
Options

planningtools

parent 6b88a6a8
Showing with 348 additions and 43 deletions
src/app/body/body-routing.module.ts
...@@ -4,6 +4,7 @@ import{LoginComponent} from './login/login.component'; ...@@ -4,6 +4,7 @@ import{LoginComponent} from './login/login.component';
import{JoinComponent} from './join/join.component'; import{JoinComponent} from './join/join.component';
import{HomeComponent} from './home/home.component'; import{HomeComponent} from './home/home.component';
import { LoginaccountComponent } from './loginaccount/loginaccount.component'; import { LoginaccountComponent } from './loginaccount/loginaccount.component';
import { PlanningComponent } from './planning/planning.component';
import { from } from 'rxjs'; import { from } from 'rxjs';
import { LoginvendorsComponent } from './loginvendors/loginvendors.component'; import { LoginvendorsComponent } from './loginvendors/loginvendors.component';
import { PaymentComponent } from './payment/payment.component'; import { PaymentComponent } from './payment/payment.component';
...@@ -28,7 +29,10 @@ const ModuleRoutes: Routes = [ ...@@ -28,7 +29,10 @@ const ModuleRoutes: Routes = [
}, },
{ {
path:'payment',component: PaymentComponent path:'payment',component: PaymentComponent
} },
{
path:'plan',component: PlanningComponent
}
]; ];
export const moduleRouting: ModuleWithProviders = RouterModule.forChild(ModuleRoutes) export const moduleRouting: ModuleWithProviders = RouterModule.forChild(ModuleRoutes)
\ No newline at end of file
src/app/body/body.module.ts
...@@ -8,8 +8,9 @@ import { SlickCarouselModule } from 'ngx-slick-carousel'; ...@@ -8,8 +8,9 @@ import { SlickCarouselModule } from 'ngx-slick-carousel';
import { LoginaccountComponent } from './loginaccount/loginaccount.component'; import { LoginaccountComponent } from './loginaccount/loginaccount.component';
import { LoginvendorsComponent } from './loginvendors/loginvendors.component'; import { LoginvendorsComponent } from './loginvendors/loginvendors.component';
import { PaymentComponent } from './payment/payment.component'; import { PaymentComponent } from './payment/payment.component';
import { PlanningComponent } from './planning/planning.component';
@NgModule({ @NgModule({
declarations: [LoginComponent, JoinComponent, HomeComponent, LoginaccountComponent, LoginvendorsComponent, PaymentComponent], declarations: [LoginComponent, JoinComponent, HomeComponent, LoginaccountComponent, LoginvendorsComponent, PaymentComponent, PlanningComponent],
imports: [ imports: [
CommonModule, CommonModule,
moduleRouting, moduleRouting,
......
src/app/body/loginaccount/loginaccount.component.html
...@@ -64,23 +64,35 @@ ...@@ -64,23 +64,35 @@
</div> </div>
<div class="loginaccount_overlay2"> <div class="loginaccount_overlay2">
<div class="container"> <div class="container">
<ul> <ul class="inp_head_ul">
<li><a href="#">Messages</a></li> <li class="inp_head_li"><a href="#">Messages</a></li>
<li><a href="#">Checklist</a></li> <li class="inp_head_li"><a href="#">Checklist</a></li>
<li><a href="#">Guest List</a></li> <li class="inp_head_li"><a href="#">Guest List</a></li>
<li><a href="#">Budget</a></li> <li class="inp_head_li"><a href="#">Budget</a></li>
<li><a href="#">Favorite Vendors</a></li> <li class="inp_head_li"><a href="#">Favorite Vendors</a></li>
</ul> </ul>
<div class="input_box"> <div class="input_box">
<div class="input_cont input_cont1"> <div class="input_cont input_cont1">
<input placeholder="eg, rustic venues, florists, beach wedding" (keyup)="onKey1($event)"> <input placeholder="eg, rustic venues, florists, beach wedding" (keyup)="onKey1($event)">
<div class="con1_drop" *ngIf="con1"> <div class="con1_drop" *ngIf="con1">
<p>Planning</p> <ul>
<p>Planning</p> <li>
<p>Planning</p> <h4>Search1</h4>
<p>Planning</p> <p>description</p>
<p>Planning</p> </li>
<p>Planning</p> <li>
<h4>Search1</h4>
<p>description</p>
</li>
<li>
<h4>Search1</h4>
<p>description</p>
</li>
<li>
<h4>Search1</h4>
<p>description</p>
</li>
</ul>
</div> </div>
</div> </div>
<div class="input_cont input_cont2"> <div class="input_cont input_cont2">
...@@ -89,13 +101,25 @@ ...@@ -89,13 +101,25 @@
<i class="fas fa-search"></i> <i class="fas fa-search"></i>
</div> </div>
<div class="con2_drop" *ngIf="con2"> <div class="con2_drop" *ngIf="con2">
<p>Planning</p> <ul>
<p>Planning</p> <li>
<p>Planning</p> <h4>Search2</h4>
<p>Planning</p> <p>description</p>
<p>Planning</p> </li>
<p>Planning</p> <li>
</div> <h4>Search2</h4>
<p>description</p>
</li>
<li>
<h4>Search2</h4>
<p>description</p>
</li>
<li>
<h4>Search2</h4>
<p>description</p>
</li>
</ul>
</div>
</div> </div>
<div class="clear"></div> <div class="clear"></div>
</div> </div>
...@@ -312,6 +336,7 @@ ...@@ -312,6 +336,7 @@
</select> </select>
<button>Save</button> <button>Save</button>
</div> </div>
<div class="clear"></div>
</div> </div>
</div> </div>
</div> </div>
......
src/app/body/loginaccount/loginaccount.component.scss
...@@ -98,10 +98,10 @@ ...@@ -98,10 +98,10 @@
.loginaccount_overlay2{ .loginaccount_overlay2{
background-color: #fcfde4; background-color: #fcfde4;
.container{ .container{
ul{ .inp_head_ul{
padding-top: 50px; padding-top: 50px;
padding-left: 0px; padding-left: 0px;
li{ .inp_head_li{
list-style: none; list-style: none;
display: inline-block; display: inline-block;
margin-right: 50px; margin-right: 50px;
...@@ -109,6 +109,7 @@ ...@@ -109,6 +109,7 @@
font-weight: 400; font-weight: 400;
font-size: 16px; font-size: 16px;
color: #5f5f5f; color: #5f5f5f;
text-decoration: none;
} }
} }
} }
...@@ -120,7 +121,7 @@ ...@@ -120,7 +121,7 @@
display: inline-block; display: inline-block;
height: 60px; height: 60px;
background-color: #ffffff; background-color: #ffffff;
padding: 10px 10px 10px 10px; padding: 10px;
input{ input{
float: left; float: left;
width: calc(100% - 40px); width: calc(100% - 40px);
...@@ -169,10 +170,25 @@ ...@@ -169,10 +170,25 @@
background-color: #fff; background-color: #fff;
border-radius: 5px; border-radius: 5px;
width: calc(100% - 30px); width: calc(100% - 30px);
p{ ul{
padding-left: 0px;
margin-bottom: 0px; margin-bottom: 0px;
font-weight: 600; li{
color: #c717c7; padding: 5px 10px;
list-style: none;
h4{
font-size: 17px;
font-weight: 500;
color: #c717c7;
margin-bottom: 0px;
}
p{
margin-bottom: 0px;
font-weight: 400;
font-size: 12px;
color: #a8a8a8;
}
}
} }
} }
} }
...@@ -189,10 +205,25 @@ ...@@ -189,10 +205,25 @@
background-color: #fff; background-color: #fff;
border-radius: 5px; border-radius: 5px;
width: calc(100% - 30px); width: calc(100% - 30px);
p{ ul{
padding-left: 0px;
margin-bottom: 0px; margin-bottom: 0px;
font-weight: 600; li{
color: #c717c7; padding: 5px 10px;
list-style: none;
h4{
font-size: 17px;
font-weight: 500;
color: #c717c7;
margin-bottom: 0px;
}
p{
margin-bottom: 0px;
font-weight: 400;
font-size: 12px;
color: #a8a8a8;
}
}
} }
} }
} }
...@@ -458,10 +489,10 @@ ...@@ -458,10 +489,10 @@
margin: 100px auto; margin: 100px auto;
.modal-content{ .modal-content{
.modal-body{ .modal-body{
padding: 40px 15px; padding: 30px 15px;
h3{ h3{
font-weight: 600; font-weight: 400;
font-size: 18px; font-size: 21px;
color: #535353; color: #535353;
} }
hr{ hr{
...@@ -472,22 +503,24 @@ ...@@ -472,22 +503,24 @@
} }
select{ select{
margin-top: 20px; margin-top: 20px;
width: 80%; width: 100%;
font-size: 14px; font-size: 14px;
padding: 5px; padding: 5px;
border: transparent; height: 40px;
margin-bottom: 25px; margin-bottom: 25px;
border: 1px solid #a8a8a8;
} }
button{ button{
outline: none;
color: #fff; color: #fff;
font-size: 18px; font-size: 18px;
padding: 5px 20px; padding: 5px 20px;
display: block; display: block;
margin: 0 auto; float: right;
background-color: #ff9c00; background-color: #ff9c00;
border: 1px solid #ff9c00; border: 1px solid #ff9c00;
border-radius: 24px; border-radius: 24px;
margin-bottom: 30px; margin-top: 20px;
} }
} }
} }
......
src/app/body/planning/planning.component.html 0 → 100644
<div class="planning">
<div class="planning_overlay1">
<div class="container">
<ul class="inp_head_ul nav nav-pills" role="tablist">
<li class="inp_head_li nav-item"><a href="#message" class="nav-link active" data-toggle="pill">Messages</a></li>
<li class="inp_head_li nav-item"><a href="#check" class="nav-link" data-toggle="pill">Checklist</a></li>
<li class="inp_head_li nav-item"><a href="#guest" class="nav-link" data-toggle="pill">Guest List</a></li>
<li class="inp_head_li nav-item"><a href="#budget" class="nav-link" data-toggle="pill">Budget</a></li>
<li class="inp_head_li nav-item"><a href="#favorite" class="nav-link" data-toggle="pill">Favorite Vendors</a></li>
</ul>
<div class="input_box">
<div class="input_cont input_cont1">
<input placeholder="eg, rustic venues, florists, beach wedding" (keyup)="onKey1($event)">
<div class="con1_drop" *ngIf="con1">
<ul>
<li>
<h4>Search1</h4>
<p>description</p>
</li>
<li>
<h4>Search1</h4>
<p>description</p>
</li>
<li>
<h4>Search1</h4>
<p>description</p>
</li>
<li>
<h4>Search1</h4>
<p>description</p>
</li>
</ul>
</div>
</div>
<div class="input_cont input_cont2">
<input placeholder="North Pole, AK" (keyup)="onKey2($event)">
<div class="input_box_button">
<i class="fas fa-search"></i>
</div>
<div class="con2_drop" *ngIf="con2">
<ul>
<li>
<h4>Search2</h4>
<p>description</p>
</li>
<li>
<h4>Search2</h4>
<p>description</p>
</li>
<li>
<h4>Search2</h4>
<p>description</p>
</li>
<li>
<h4>Search2</h4>
<p>description</p>
</li>
</ul>
</div>
</div>
<div class="clear"></div>
</div>
</div>
</div>
<div class="container tab_container">
<div class="tab-content">
<div id="message" class="container tab-pane active"><br>
<div class="row message_row">
<div class="col-md-4">
<div class="search_bar">
<input placeholder="Search a chat">
<div class="search_box"><img src="../../../assets/img/4 (1).png"></div>
</div>
<div class="clear"></div>
<div class="chat_items">
<ul>
<li>
<div class="li_contents">
<img src="../../../assets/img/1509453790_pexels-photo.jpg">
<p>07:27 AM</p>
<div class="img_name">
<h3>Animals</h3><br>
<p>asdasdasd</p>
</div>
</div>
<div class="clear"></div>
</li>
<li>
<div class="li_contents">
<img src="../../../assets/img/1509453790_pexels-photo.jpg">
<p>07:27 AM</p>
<div class="img_name">
<h3>Animals</h3><br>
<p>asdasdasd</p>
</div>
</div>
<div class="clear"></div>
</li>
</ul>
</div>
</div>
<div class="col-md-8">
<div class=" row messge_1_box">
<div class="col-md-9">
<p>02/12/2018, 07:27 AM</p>
<div class="message_box">
<a>asdasdasd</a>
</div>
<div class="clear"></div>
</div>
<div class="col-md-3">
<div class="head_img">
<img src="../../../assets/img/avatar.png">
</div>
</div>
</div>
<div class="clear"></div>
<div class="row messge_2_box">
<div class="col">
<textarea placeholder="Type your text here"></textarea>
<div class="post_message">
<p>Post Message</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="check" class="container tab-pane fade"><br>
<div class="checklist_contents">
<div class="checklist">
<img src="../../../assets/img/18.png">
<h3>CHECKLIST</h3>
</div>
<div class="row">
<div class="col padd_tp calendar">
<div class="calen_value">
<p>date</p>
</div>
</div>
<div class="col padd_tp"></div>
<div class="col add_done padd_tp">
<div class="add_to_do" (click)="addtofunc()">
<img src="../../../assets/img/19 (1).png">
<h4>ADD TO - DO</h4>
</div>
<div class="done">
<h5>Done (3)</h5>
</div>
</div>
</div>
<div class="addto_contents" *ngIf=" addto">
<div class="row">
<div class="col">
<input type="text" placeholder="Item Name">
</div>
<div class="col">
<input type="text" placeholder="Add a Note">
</div>
<div class="col">
<input type="text" placeholder="Due Date">
</div>
</div>
<div class="save_to_do">
<h6>Save To Do</h6>
</div>
</div>
<div class="row">
<div class="col-md-6 both_col fir_col">
<h2>3</h2>
<h4>Accepted</h4>
</div>
<div class="col-md-6 both_col sec_col">
<h2 class="head_clr">3</h2>
<h4>Invited</h4>
</div>
</div>
</div>
<div class="back_to_chek">
</div>
</div>
<div id="guest" class="container tab-pane fade"><br>
<h3>Menu 2</h3>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
</div>
</div>
</div>
</div>
src/app/body/planning/planning.component.spec.ts 0 → 100644
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { PlanningComponent } from './planning.component';
describe('PlanningComponent', () => {
let component: PlanningComponent;
let fixture: ComponentFixture<PlanningComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ PlanningComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(PlanningComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
src/app/body/planning/planning.component.ts 0 → 100644
import { Component, OnInit } from '@angular/core';
import { Router,ActivatedRoute } from '@angular/router';
@Component({
selector: 'app-planning',
templateUrl: './planning.component.html',
styleUrls: ['./planning.component.scss']
})
export class PlanningComponent implements OnInit {
addto= false;
constructor(private router: Router,
private route: ActivatedRoute,) { }
ngOnInit() {
}
addtofunc(){
this.addto = !this.addto;
}
goToPage(path,data=null){
this.router.navigateByUrl(path,{queryParams:data});
}
}
src/app/header/header.component.html
...@@ -16,10 +16,10 @@ ...@@ -16,10 +16,10 @@
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="Text-Style nav-link brd " (click)=" plansfunc()" >PLANNING TOOLS</a> <a class="Text-Style nav-link brd " (click)=" plansfunc()" >PLANNING TOOLS</a>
<div class="planning_tools_header" *ngIf=" plansShow "> <div class="planning_tools_header" *ngIf=" plansShow">
<div class="row"> <div class="row">
<div class="col"> <div class="col">
<div class="planning_tools_header_item"> <div class="planning_tools_header_item" (click)="goto('plan')">
<a>Checklist</a> <a>Checklist</a>
</div> </div>
</div> </div>
......
src/assets/responsive.scss
...@@ -139,9 +139,9 @@ ...@@ -139,9 +139,9 @@
} }
.loginaccount_overlay2{ .loginaccount_overlay2{
.container{ .container{
ul{ .inp_head_ul{
text-align: center !important; text-align: center !important;
li{ .inp_head_li{
margin-right: 0px !important; margin-right: 0px !important;
padding: 5px !important; padding: 5px !important;
} }
...@@ -166,6 +166,9 @@ ...@@ -166,6 +166,9 @@
} }
.loginaccount_overlay4{ .loginaccount_overlay4{
.container{ .container{
.nav-pills{
display: inline-block !important;
}
.tab-content{ .tab-content{
.tab-pane{ .tab-pane{
ul{ ul{
...@@ -815,9 +818,9 @@ margin-top: 10px !important; ...@@ -815,9 +818,9 @@ margin-top: 10px !important;
.loginaccount_overlay{ .loginaccount_overlay{
.loginaccount_overlay2{ .loginaccount_overlay2{
.container{ .container{
ul{ .inp_head_ul{
text-align: center !important; text-align: center !important;
li{ .inp_head_li{
margin-right: 30px !important; margin-right: 30px !important;
margin-left: 30px !important; margin-left: 30px !important;
} }
......
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