Commit 55a5003b by abraham

planningtools

parent 6b88a6a8
...@@ -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
...@@ -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,
......
...@@ -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>
......
...@@ -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;
} }
} }
} }
......
<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>
.planning{
padding-top: 100px;
.planning_overlay1{
background-color: #fcfde4;
.container{
.inp_head_ul{
padding-top: 50px;
padding-left: 0px;
padding-bottom: 10px;
.inp_head_li{
list-style: none;
display: inline-block;
outline: none;
margin-right: 40px;
a{
font-weight: 400;
font-size: 16px;
color: #5f5f5f;
text-decoration: none;
background-color: transparent;
border: 2px solid transparent;
}
.active{
border: 2px solid #000;
border-radius: 25px;
}
}
}
.input_box{
padding-top: 10px;
padding-bottom: 60px;
.input_cont{
width: 50%;
display: inline-block;
height: 60px;
background-color: #ffffff;
padding: 10px;
input{
float: left;
width: calc(100% - 40px);
height: 100%;
border-radius: 20px;
border: transparent;
outline: none;
padding-left: 20px;
&::placeholder{
opacity: .5;
}
}
.input_box_button{
text-align: center;
float: right;
width: 40px;
height: 40px;
border-radius: 50%;
background-color: rgb(194, 55, 194);
i{
font-size: 18px;
padding-top: 11px;
color: #e2e2e2;
}
}
}
.input_cont1{
border-top-left-radius: 30px;
border-bottom-left-radius: 30px;
position: relative;
input{
border-top-right-radius: 0px;
border-bottom-right-radius: 0px ;
border-right: 1px solid #c717c7 ;
width: 100% ;
}
.input_box_button{
display: none;
}
.con1_drop{
padding:10px;
position: absolute;
top: 70px;
left: 10px;
right: 0;
background-color: #fff;
border-radius: 5px;
width: calc(100% - 30px);
ul{
padding-left: 0px;
margin-bottom: 0px;
li{
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;
}
}
}
}
}
.input_cont2{
border-top-right-radius: 30px;
border-bottom-right-radius: 30px;
position: relative;
.con2_drop{
padding:10px;
position: absolute;
top: 70px;
left: 0px;
right: 0;
background-color: #fff;
border-radius: 5px;
width: calc(100% - 30px);
ul{
padding-left: 0px;
margin-bottom: 0px;
li{
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;
}
}
}
}
}
}
}
}
.tab_container{
.tab-content{
.container{
padding-top: 30px;
.message_row{
.col-md-4{
.search_bar{
padding: 8px 20px;
border: 1px solid #e0e0e0;
overflow: auto;
outline: none;
border-radius: 30px;
input{
width: calc(100% - 20px);
float: left;
padding-left: 5px;
border: transparent;
outline: none;
&::placeholder{
color: #e0e0e0;
}
}
.search_box{
width: 16px;
float: right;
img{
width: 100%;
height: auto;
}
}
}
.chat_items{
margin-top: 30px;
ul{
margin-bottom: 0px;
padding-left: 0px;
li{
list-style: none;
background: #ececec;
padding: 15px 30px 10px 10px;
border-radius: 5px;
margin-bottom: 15px;
.li_contents{
img{
width: 40px;
height: 40px;
border-radius: 50%;
vertical-align: top;
}
p{
font-weight: 400;
font-size: 14px;
color: #6f6f6f;
margin-bottom: 0px;
float: right;
}
.img_name{
padding-left: 20px;
padding-top: 5px;
display: inline-block;
h3{
display: inline-block;
font-weight: 600;
font-size: 15px;
text-transform: uppercase;
color: #494949;
margin-bottom: 0px;
}
p{
display: inline-block;
font-weight: 400;
font-size: 14px;
color: #6f6f6f;
margin-bottom: 0px;
}
}
}
}
}
}
}
.col-md-8{
.messge_1_box{
width: 70%;
float: right;
.col-md-9{
flex: 0 0 80%;
max-width: 80%;
p{
font-weight: 400;
font-size: 13px;
color: #4c4c4c;
margin-bottom: 0px;
display: inline-block;
}
.message_box{
background-color: #ffc000;
padding: 10px 15px;
border-radius: 10px;
a{
font-weight: 400;
font-size: 15px;
color: #fff;
text-decoration: none;
}
&:after{
content: url("../../../assets/img/6\(1\).png");
top: 3px;
left: 24px;
position: relative;
float: right;
}
}
}
.col-md-3{
flex: 0 0 20%;
max-width: 20%;
.head_img{
float: right;
width: 75px;
height: auto;
border-radius: 50%;
img{
width: 100%;
height: 100%;
border-radius: 50%;
}
}
}
}
.messge_2_box{
padding-top: 60px;
padding-bottom: 40px;
textarea{
width: 100%;
border: 1px solid #d7d7d7;
min-height: 100px;
outline: none;
resize: none;
&::placeholder{
color: #d7d7d7;
}
}
.post_message{
margin-top: 20px;
background-color: #ff9c00;
display: inline-block;
padding: 8px 30px;
border-radius: 25px;
outline: none;
p{
font-weight: 400;
font-size: 16px;
color: #fff;
margin-bottom: 0px;
}
}
}
}
}
.checklist_contents{
.checklist{
h3{
padding-left: 10px;
font-weight: 400;
font-size: 16px;
color: #767676;
display: inline;
}
}
.row{
.padd_tp{
padding-top: 40px;
}
.calendar{
.calen_value{
border-bottom: 1px solid #b2b2b2;
p{
margin-bottom: 10px;
}
}
}
.add_done{
.add_to_do{
cursor: pointer;
display: inline-block;
h4{
padding-left: 10px;
display: inline;
font-weight: 400;
font-size: 14px;
color: #767676;
}
}
.done{
cursor: pointer;
padding-left: 20px;
display: inline-block;
h5{
color: #535353;
font-weight: bold;
font-size: 14px;
}
}
}
}
.addto_contents{
padding-top: 50px;
input{
width: 100%;
padding: 10px;
border-radius: 25px;
border: 1px solid #b2b2b2;
outline: none;
&::placeholder{
color: #d7d7d7;
}
}
.save_to_do{
cursor: pointer;
margin-top: 30px;
border: 1px solid #c717c7;
display: inline-block;
padding: 10px 25px;
border-radius: 25px;
h6{
font-weight: 600;
font-size: 13px;
color: #c717c7;
margin-bottom: 0px;
}
&:hover{
background-color: #c717c7;
box-shadow: 0px 3px 6px #888888;
h6{
color: #000;
}
}
}
}
.both_col{
padding-top: 50px;
padding-bottom: 50px;
h2{
display: inline;
font-weight: 600;
font-size: 30px;
color: #00bb5c;
margin: 0 5px 0 0;
}
.head_clr{
color: #e82c2c;
}
h4{
display: inline;
font-weight: 600;
font-size: 18px;
color: #535353;
}
}
.fir_col{
text-align: left;
}
.sec_col{
text-align: right;
}
}
.back_to_chek{
background-color: #f1f1f1;
}
}
}
}
}
\ No newline at end of file
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();
});
});
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});
}
}
...@@ -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>
......
...@@ -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