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';
import{JoinComponent} from './join/join.component';
import{HomeComponent} from './home/home.component';
import { LoginaccountComponent } from './loginaccount/loginaccount.component';
import { PlanningComponent } from './planning/planning.component';
import { from } from 'rxjs';
import { LoginvendorsComponent } from './loginvendors/loginvendors.component';
import { PaymentComponent } from './payment/payment.component';
......@@ -28,7 +29,10 @@ const ModuleRoutes: Routes = [
},
{
path:'payment',component: PaymentComponent
}
},
{
path:'plan',component: PlanningComponent
}
];
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';
import { LoginaccountComponent } from './loginaccount/loginaccount.component';
import { LoginvendorsComponent } from './loginvendors/loginvendors.component';
import { PaymentComponent } from './payment/payment.component';
import { PlanningComponent } from './planning/planning.component';
@NgModule({
declarations: [LoginComponent, JoinComponent, HomeComponent, LoginaccountComponent, LoginvendorsComponent, PaymentComponent],
declarations: [LoginComponent, JoinComponent, HomeComponent, LoginaccountComponent, LoginvendorsComponent, PaymentComponent, PlanningComponent],
imports: [
CommonModule,
moduleRouting,
......
src/app/body/loginaccount/loginaccount.component.html
......@@ -64,23 +64,35 @@
</div>
<div class="loginaccount_overlay2">
<div class="container">
<ul>
<li><a href="#">Messages</a></li>
<li><a href="#">Checklist</a></li>
<li><a href="#">Guest List</a></li>
<li><a href="#">Budget</a></li>
<li><a href="#">Favorite Vendors</a></li>
<ul class="inp_head_ul">
<li class="inp_head_li"><a href="#">Messages</a></li>
<li class="inp_head_li"><a href="#">Checklist</a></li>
<li class="inp_head_li"><a href="#">Guest List</a></li>
<li class="inp_head_li"><a href="#">Budget</a></li>
<li class="inp_head_li"><a href="#">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">
<p>Planning</p>
<p>Planning</p>
<p>Planning</p>
<p>Planning</p>
<p>Planning</p>
<p>Planning</p>
<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">
......@@ -89,13 +101,25 @@
<i class="fas fa-search"></i>
</div>
<div class="con2_drop" *ngIf="con2">
<p>Planning</p>
<p>Planning</p>
<p>Planning</p>
<p>Planning</p>
<p>Planning</p>
<p>Planning</p>
</div>
<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>
......@@ -312,6 +336,7 @@
</select>
<button>Save</button>
</div>
<div class="clear"></div>
</div>
</div>
</div>
......
src/app/body/loginaccount/loginaccount.component.scss
......@@ -98,10 +98,10 @@
.loginaccount_overlay2{
background-color: #fcfde4;
.container{
ul{
.inp_head_ul{
padding-top: 50px;
padding-left: 0px;
li{
.inp_head_li{
list-style: none;
display: inline-block;
margin-right: 50px;
......@@ -109,6 +109,7 @@
font-weight: 400;
font-size: 16px;
color: #5f5f5f;
text-decoration: none;
}
}
}
......@@ -120,7 +121,7 @@
display: inline-block;
height: 60px;
background-color: #ffffff;
padding: 10px 10px 10px 10px;
padding: 10px;
input{
float: left;
width: calc(100% - 40px);
......@@ -169,10 +170,25 @@
background-color: #fff;
border-radius: 5px;
width: calc(100% - 30px);
p{
ul{
padding-left: 0px;
margin-bottom: 0px;
font-weight: 600;
color: #c717c7;
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;
}
}
}
}
}
......@@ -189,10 +205,25 @@
background-color: #fff;
border-radius: 5px;
width: calc(100% - 30px);
p{
ul{
padding-left: 0px;
margin-bottom: 0px;
font-weight: 600;
color: #c717c7;
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;
}
}
}
}
}
......@@ -458,10 +489,10 @@
margin: 100px auto;
.modal-content{
.modal-body{
padding: 40px 15px;
padding: 30px 15px;
h3{
font-weight: 600;
font-size: 18px;
font-weight: 400;
font-size: 21px;
color: #535353;
}
hr{
......@@ -472,22 +503,24 @@
}
select{
margin-top: 20px;
width: 80%;
width: 100%;
font-size: 14px;
padding: 5px;
border: transparent;
height: 40px;
margin-bottom: 25px;
border: 1px solid #a8a8a8;
}
button{
outline: none;
color: #fff;
font-size: 18px;
padding: 5px 20px;
display: block;
margin: 0 auto;
float: right;
background-color: #ff9c00;
border: 1px solid #ff9c00;
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 @@
</li>
<li class="nav-item">
<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="col">
<div class="planning_tools_header_item">
<div class="planning_tools_header_item" (click)="goto('plan')">
<a>Checklist</a>
</div>
</div>
......
src/assets/responsive.scss
......@@ -139,9 +139,9 @@
}
.loginaccount_overlay2{
.container{
ul{
.inp_head_ul{
text-align: center !important;
li{
.inp_head_li{
margin-right: 0px !important;
padding: 5px !important;
}
......@@ -166,6 +166,9 @@
}
.loginaccount_overlay4{
.container{
.nav-pills{
display: inline-block !important;
}
.tab-content{
.tab-pane{
ul{
......@@ -815,9 +818,9 @@ margin-top: 10px !important;
.loginaccount_overlay{
.loginaccount_overlay2{
.container{
ul{
.inp_head_ul{
text-align: center !important;
li{
.inp_head_li{
margin-right: 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