Skip to content

M
Moments
Commit 3da3f9e7 by abraham
Options

Merge branch 'abraham' into 'master'

Abraham See merge request !21
parents 4d60efde 005a9111
Showing with 1517 additions and 200 deletions
angular.json
...@@ -29,10 +29,10 @@ ...@@ -29,10 +29,10 @@
"styles": [ "styles": [
"src/styles.scss", "src/styles.scss",
"src/assets/responsive.scss", "src/assets/responsive.scss",
"node_modules/bootstrap/dist/css/bootstrap.css", "node_modules/bootstrap/dist/css/bootstrap.css",
"node_modules/slick-carousel/slick/slick.scss", "node_modules/slick-carousel/slick/slick.scss",
"node_modules/slick-carousel/slick/slick-theme.scss" "node_modules/slick-carousel/slick/slick-theme.scss",
"node_modules/ng5-slider/scss/ng5-slider.scss"
], ],
"scripts": [ "scripts": [
"node_modules/jquery/dist/jquery.js", "node_modules/jquery/dist/jquery.js",
......
src/app/body/loginaccount/loginaccount.component.scss
...@@ -498,7 +498,7 @@ ...@@ -498,7 +498,7 @@
hr{ hr{
margin-left: 0px; margin-left: 0px;
width: 30px; width: 30px;
border: 2px solid rgb(194, 55, 194); border: 2px solid rgb(255, 0, 255);
border-radius: 1px; border-radius: 1px;
} }
select{ select{
......
src/app/body/planning/planning.component.html
...@@ -62,72 +62,74 @@ ...@@ -62,72 +62,74 @@
</div> </div>
</div> </div>
</div> </div>
<div class="container tab_container"> <div class="tab_container">
<div class="tab-content"> <div class="tab-content">
<div id="message" class="container tab-pane active"><br> <div id="message" class="tab-pane active"><br>
<div class="row message_row"> <div class="container">
<div class="col-md-4"> <div class="row message_row">
<div class="search_bar"> <div class="col-md-4">
<input placeholder="Search a chat"> <div class="search_bar">
<div class="search_box"><img src="../../../assets/img/4 (1).png"></div> <input placeholder="Search a chat">
</div> <div class="search_box"><img src="../../../assets/img/4 (1).png"></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>
<div class="clear"></div> <div class="clear"></div>
</li> <div class="chat_items">
<li> <ul>
<div class="li_contents"> <li>
<img src="../../../assets/img/1509453790_pexels-photo.jpg"> <div class="li_contents">
<p>07:27 AM</p> <img src="../../../assets/img/1509453790_pexels-photo.jpg">
<div class="img_name"> <p>07:27 AM</p>
<h3>Animals</h3><br> <div class="img_name">
<p>asdasdasd</p> <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> </div>
<div class="clear"></div> <div class="clear"></div>
</li> <div class="row messge_2_box">
</ul> <div class="col">
</div> <textarea placeholder="Type your text here"></textarea>
</div> <div class="post_message">
<div class="col-md-8"> <p>Post Message</p>
<div class=" row messge_1_box"> </div>
<div class="col-md-9"> </div>
<p>02/12/2018, 07:27 AM</p> </div>
<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> </div>
</div> </div>
<div id="check" class="container tab-pane fade"><br> <div id="check" class=" tab-pane fade">
<div class="checklist_contents"> <div class="container checklist_contents" *ngIf="!done">
<div class="checklist"> <div class="checklist">
<img src="../../../assets/img/18.png"> <img src="../../../assets/img/18.png">
<h3>CHECKLIST</h3> <h3>CHECKLIST</h3>
...@@ -144,8 +146,8 @@ ...@@ -144,8 +146,8 @@
<img src="../../../assets/img/19 (1).png"> <img src="../../../assets/img/19 (1).png">
<h4>ADD TO - DO</h4> <h4>ADD TO - DO</h4>
</div> </div>
<div class="done"> <div class="done ">
<h5>Done (3)</h5> <h5 (click)="donefunc()">Done (3)</h5>
</div> </div>
</div> </div>
</div> </div>
...@@ -176,15 +178,716 @@ ...@@ -176,15 +178,716 @@
</div> </div>
</div> </div>
</div> </div>
<div class="back_to_chek"> <div class="back_to_chek" *ngIf="done">
<div class="container">
<button (click)="donefunc()"><i class="fas fa-arrow-left"></i>BACK TO CHECKLIST</button>
<div class="done_img">
<img src="../../../assets/img/8 (1).png">
</div>
<h2>NEXT TO-DOs</h2>
<div class="row name_tick">
<div class="col">
<ul>
<li><h6>sandals</h6></li>
<li><h6>Name</h6></li>
<li><h6>haratbuna</h6></li>
</ul>
</div>
<div class="col">
<ul class="done_tick">
<li><i class="fas fa-check"></i></li>
<li><i class="fas fa-check"></i></li>
<li><i class="fas fa-check"></i></li>
</ul>
</div>
</div>
</div>
</div> </div>
</div> </div>
<div id="guest" class="container tab-pane fade"><br> <div id="guest" class="tab-pane fade">
<h3>Menu 2</h3> <div class="container guest_list">
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p> <div class="guestlist">
<img src="../../../assets/img/28.png">
<h3>GUEST LIST</h3>
</div>
<div class="add_new" data-toggle="modal" data-target="#newGuest">
<img src="../../../assets/img/19 (1).png">
<h4>Add New Household</h4>
</div>
<div class="clear"></div>
<ng5-slider [(value)]="value" [options]="options"></ng5-slider>
<div class="row name_list">
<div class="col">
<h5>Household (guests)</h5>
</div>
<div class="col">
<h5>Invitations</h5>
</div>
</div>
<div class="row name_list_items" (click)= "namedownfunc()">
<div class="col-md-6">
<h6>Jamiu</h6>
</div>
<div class="col-md-6">
<i class="fas fa-check" data-toggle="modal" data-target="#household"></i>
<div class="down_img">
<img src="../../../assets/img/22 (1).png">
</div>
<div class="clear"></div>
</div>
</div>
<div class=" row name_line" *ngIf="namedown">
<div class="col">
<div class="row name_details">
<div class="col">
<div class="row">
<div class="col">
<ul>
<li><p>Jamiu</p></li>
</ul>
</div>
<div class="col">
<ul>
<li><p>Olanrewaju</p></li>
</ul>
</div>
<div class="col">
<ul>
<li><p>[email protected]</p></li>
</ul>
</div>
<div class="col">
<ul>
<li><p>8118869409</p></li>
</ul>
</div>
<div class="col">
<ul>
<li></li>
</ul>
</div>
<div class="col">
<ul>
<li><i class="fas fa-pen-square" data-toggle="modal" data-target="#editguest"></i></li>
<li><i class="fas fa-trash-alt"></i></li>
</ul>
</div>
</div>
<div class="row">
<div class="col">
<ul>
<li></li>
</ul>
</div>
<div class="col">
<ul>
<li></li>
<li><p>B-List</p></li>
</ul>
</div>
<div class="col">
<ul>
<li></li>
<li><p>Accepted</p></li>
</ul>
</div>
<div class="col">
<ul>
<li></li>
</ul>
</div>
<div class="col">
<ul>
<li><p>Vegetarian</p></li>
</ul>
</div>
<div class="col">
<ul>
<li></li>
</ul>
</div>
</div>
</div>
</div>
<hr>
</div>
</div>
</div>
</div>
<div id="budget" class="tab-pane fade">
<div class="container budget_page">
<div class="budgetlist">
<img src="../../../assets/img/36.png">
<h3>BUDGET</h3>
</div>
<div class="two_slides">
<div class="row">
<div class="col">
<div class="row">
<div class="col">
<img src="../../../assets/img/37.png">
<div class="ts_cost">
<h4>ESTIMATED COST</h4>
<h6><span>₦</span> 100000</h6>
</div>
</div>
<div class="clear"></div>
<div class="col">
<div class="ts_cost">
<h4>ACTUAL COST</h4>
<h6><span class="est_cost">₦</span> 75111</h6>
</div>
</div>
</div>
<div class="row">
<div class="col">
<ng5-slider [(value)]="value" [options]="options"></ng5-slider>
</div>
</div>
</div>
<div class="col">
<div class="row">
<div class="col">
<img src="../../../assets/img/37.png">
<div class="ts_cost">
<h4>ESTIMATED COST</h4>
<h6><span>₦</span> 100000</h6>
</div>
</div>
<div class="clear"></div>
<div class="col">
<div class="ts_cost">
<h4>ACTUAL COST</h4>
<h6><span class="est_cost">₦</span> 75111</h6>
</div>
</div>
</div>
<div class="row">
<div class="col">
<ng5-slider [(value)]="value" [options]="options"></ng5-slider>
</div>
</div>
</div>
</div>
<div class="row modal_buttons">
<div class="col">
<div class="add_new" data-toggle="modal" data-target="#budget_newhouse">
<img src="../../../assets/img/19 (1).png">
<h4>Add New Household</h4>
</div>
</div>
<div class="col">
<button data-toggle="modal" data-target="#budget_reset">Reset Budget</button>
</div>
</div>
</div>
<div class="catagory_bar">
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col">
<h4>Category</h4>
</div>
<div class="col left_h4">
<h4>Actual cost</h4>
</div>
</div>
</div>
<div class="col-md-4">
<div class="row">
<div class="col">
<h4>Amount Paid</h4>
</div>
<div class="col center_h4">
<h4>Amount Due</h4>
</div>
</div>
</div>
<div class="col-md-2"></div>
</div>
</div>
<div class="catogory_contents">
<div class="cat_cont_row">
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col">
<img src="../../../assets/img/41.png">
<h5>flowers</h5>
</div>
<div class="col left_h4">
<i class="fas fa-pen-square" data-toggle="modal" data-target="#budget_actualcost"></i>
<p>₦ 0</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="row">
<div class="col">
<i class="fas fa-pen-square" data-toggle="modal" data-target="#budget_amountpaid"></i>
<p>₦ 0</p>
</div>
<div class="col">
<p>₦ 0</p>
</div>
</div>
</div>
<div class="col-md-2 delete_but">
<img src="../../../assets/img/49.png">
</div>
</div>
</div>
<div class="cat_cont_row">
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col">
<img src="../../../assets/img/41.png">
<h5>flowers</h5>
</div>
<div class="col left_h4">
<i class="fas fa-pen-square" data-toggle="modal" data-target="#budget_actualcost"></i>
<p>₦ 0</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="row">
<div class="col">
<i class="fas fa-pen-square" data-toggle="modal" data-target="#budget_amountpaid"></i>
<p>₦ 0</p>
</div>
<div class="col">
<p>₦ 0</p>
</div>
</div>
</div>
<div class="col-md-2 delete_but">
<img src="../../../assets/img/49.png">
</div>
</div>
</div>
</div>
<div class="grand_total">
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col">
<h4>Grand Totals:</h4>
</div>
<div class="col left_h4">
<h4>₦ 75111</h4>
</div>
</div>
</div>
<div class="col-md-4">
<div class="row">
<div class="col">
<h4>₦ 115000</h4>
</div>
<div class="col center_h4">
<h4>₦ (39889);</h4>
</div>
</div>
</div>
<div class="col-md-2"></div>
</div>
</div>
</div>
</div>
<div id="favorite" class="tab-pane fade">
<div class="container favourite_vendors">
<div class="fav_vendors">
<img src="../../../assets/img/18.png">
<h3>FAVORITE VENDORS</h3>
</div>
<div class="filter_icon">
<img src="../../../assets/img/53.png">
<div class="dropdown"></div>
</div>
<div class="clear"></div>
<div class="vendor_left_side">
<ul class="nav flex-column">
<li>
<a class="active" data-toggle="tab" href="#recent">
<img src="../../../assets/img/56.png">
<p>All</p>
<div class="vendor_counter">
0
</div>
<div class="clear"></div>
</a>
</li>
<li>
<a data-toggle="tab" href="#order">
<img src="../../../assets/img/57.png">
<p>Venue</p>
<div class="vendor_counter">
0
</div>
<div class="clear"></div>
</a>
</li>
<li>
<a data-toggle="tab" href="#payment">
<img src="../../../assets/img/1507722456_56cdf37898bb3bb1b3356fad8831dc1a--on-your-wedding-day-pre-wedding.jpg">
<p>Wedding Photographers</p>
<div class="vendor_counter">
1
</div>
<div class="clear"></div>
</a>
</li>
<li>
<a data-toggle="tab" href="#manage">
<img src="../../../assets/img/1507875334_wedding-icon-12670446.jpg">
<p>Wedding Venues</p>
<div class="vendor_counter">
0
</div>
<div class="clear"></div>
</a>
</li>
<li>
<a data-toggle="tab" href="#communication">
<img src="../../../assets/img/1517468986_wedding-planning_318-99774.jpg">
<p>Planning</p>
<div class="vendor_counter">
0
</div>
<div class="clear"></div>
</a>
</li>
<li>
<a data-toggle="tab" href="#communication">
<img src="../../../assets/img/1508740269_marriage-marry-009-256.png">
<p>Wedding DJs</p>
<div class="vendor_counter">
0
</div>
<div class="clear"></div>
</a>
</li>
<li>
<a data-toggle="tab" href="#communication">
<img src="../../../assets/img/1509359880_under-new-management-marriage-note-foldable-design-with-black-text-and-icon-decoration-classic-black-and-white-funny-wedding-thank-you-cards.jpg">
<p>Wedding Invitations</p>
<div class="vendor_counter">
0
</div>
<div class="clear"></div>
</a>
</li>
<li>
<a data-toggle="tab" href="#communication">
<img src="../../../assets/img/1509359943_8819003-Illustration-of-a-cook-in-black-and-white-Stock-Vector-chef-cooking-hat.jpg">
<p>Wedding Caterers</p>
<div class="vendor_counter">
0
</div>
<div class="clear"></div>
</a>
</li>
<li>
<a data-toggle="tab" href="#communication">
<img src="../../../assets/img/1509360077_images.png">
<p>Wedding Favors & Gifts</p>
<div class="vendor_counter">
0
</div>
<div class="clear"></div>
</a>
</li>
<li>
<a data-toggle="tab" href="#communication">
<img src="../../../assets/img/1509360090_wedding_17-512.png">
<p>Wedding Jewelry</p>
<div class="vendor_counter">
0
</div>
<div class="clear"></div>
</a>
</li>
</ul>
</div>
<div class="vendor_right_side">
<div class="tab-content">
<div class="tab-pane active" id="recent">
<div class="all_tab">
<img src="../../../assets/img/1511411361_800x800_1484776452685-exterior-1.jpg">
<div class="all_tab_contents">
<h3>Antony Trivet photography</h3>
<div class="rat_box">
<fieldset class="rating">
<input type="radio" id="star5" name="rating" value="5" /><label class = "full" for="star5" title="Awesome - 5 stars"></label>
<input type="radio" id="star4half" name="rating" value="4 and a half" /><label class="half" for="star4half" title="Pretty good - 4.5 stars"></label>
<input type="radio" id="star4" name="rating" value="4" /><label class = "full" for="star4" title="Pretty good - 4 stars"></label>
<input type="radio" id="star3half" name="rating" value="3 and a half" /><label class="half" for="star3half" title="Meh - 3.5 stars"></label>
<input type="radio" id="star3" name="rating" value="3" /><label class = "full" for="star3" title="Meh - 3 stars"></label>
<input type="radio" id="star2half" name="rating" value="2 and a half" /><label class="half" for="star2half" title="Kinda bad - 2.5 stars"></label>
<input type="radio" id="star2" name="rating" value="2" /><label class = "full" for="star2" title="Kinda bad - 2 stars"></label>
<input type="radio" id="star1half" name="rating" value="1 and a half" /><label class="half" for="star1half" title="Meh - 1.5 stars"></label>
<input type="radio" id="star1" name="rating" value="1" /><label class = "full" for="star1" title="Sucks big time - 1 star"></label>
<input type="radio" id="starhalf" name="rating" value="half" /><label class="half" for="starhalf" title="Sucks big time - 0.5 stars"></label>
</fieldset>
</div>
<p>Bangalore, india, 254845</p>
<img class="starimg" src="../../../assets/img/54.png">
<p class="review_newline">Write Review</p>
</div>
<button>Delete Hired</button>
<div class="clear"></div>
</div>
</div>
<div class="tab-pane fade" id="order">
</div>
<div class="tab-pane fade" id="payment">
</div>
<div class="tab-pane fade" id="manage">
</div>
<div class="tab-pane fade" id="communication ">
</div>
</div>
</div>
<div class="clear"></div>
</div>
</div>
</div>
</div>
<!-- modal add new guest -->
<div class="modal fade new_edit" id="newGuest">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-body">
<div class="container">
<h3>Add New Guest</h3>
<hr>
<div class="row">
<div class="col">
<ul>
<li>
<label>First Name</label>
<input placeholder="First Name">
</li>
<li>
<label>Email</label>
<input placeholder="Email">
</li>
<li>
<label>RSVP 1</label>
<select>
<option value="--None Selected--">--None Selected--</option>
<option value="Not Invited">Not Invited</option>
<option value="No Response">No Response</option>
<option value="Accepted">Accepted</option>
<option value="Declined">Declined</option>
</select>
</li>
<li>
<label>Meal 1</label>
<select>
<option value="--None Selected--">--None Selected--</option>
<option value="A-List">A-List</option>
<option value="B-List">B-List</option>
<option value="C-List">C-List</option>
</select>
</li>
</ul>
</div>
<div class="col">
<ul>
<li>
<label>Last Name</label>
<input placeholder="Last Name">
</li>
<li>
<label>Phone</label>
<input placeholder="Phone">
</li>
<li>
<label>RSVP</label>
<select>
<option value="--None Selected--">--None Selected--</option>
<option value="Not Invited">Not Invited</option>
<option value="No Response">No Response</option>
<option value="Accepted">Accepted</option>
<option value="Declined">Declined</option>
</select>
</li>
<li>
<label>Meal</label>
<select>
<option value="--None Selected--">--None Selected--</option>
<option value="A-List">Beef</option>
<option value="B-List">Chicken</option>
<option value="C-List">Fish</option>
</select>
</li>
</ul>
<button>Save</button>
</div>
</div>
</div>
</div>
<div class="clear"></div>
</div>
</div>
</div>
<!-- modal household new -->
<div class="modal fade new_edit2" id="household">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-body">
<h3>Household - New</h3>
<hr>
<input placeholder="Select Date">
<input placeholder="Inside Envelope">
<input placeholder="Outside Envelope">
<button>Save</button>
</div>
<div class="clear"></div>
</div>
</div>
</div>
<!-- modal edit guest -->
<div class="modal fade new_edit" id="editguest">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-body">
<div class="container">
<h3>Add New Guest</h3>
<hr>
<div class="row">
<div class="col">
<ul>
<li>
<label>First Name</label>
<input placeholder="First Name">
</li>
<li>
<label>Email</label>
<input placeholder="Email">
</li>
<li>
<label>RSVP 1</label>
<select>
<option value="--None Selected--">--None Selected--</option>
<option value="Not Invited">Not Invited</option>
<option value="No Response">No Response</option>
<option value="Accepted">Accepted</option>
<option value="Declined">Declined</option>
</select>
</li>
<li>
<label>Meal 1</label>
<select>
<option value="--None Selected--">--None Selected--</option>
<option value="A-List">A-List</option>
<option value="B-List">B-List</option>
<option value="C-List">C-List</option>
</select>
</li>
</ul>
</div>
<div class="col">
<ul>
<li>
<label>Last Name</label>
<input placeholder="Last Name">
</li>
<li>
<label>Phone</label>
<input placeholder="Phone">
</li>
<li>
<label>RSVP</label>
<select>
<option value="--None Selected--">--None Selected--</option>
<option value="Not Invited">Not Invited</option>
<option value="No Response">No Response</option>
<option value="Accepted">Accepted</option>
<option value="Declined">Declined</option>
</select>
</li>
<li>
<label>Meal</label>
<select>
<option value="--None Selected--">--None Selected--</option>
<option value="A-List">Beef</option>
<option value="B-List">Chicken</option>
<option value="C-List">Fish</option>
</select>
</li>
</ul>
<button>Save</button>
</div>
</div>
</div>
</div>
<div class="clear"></div>
</div>
</div>
</div>
<!-- modal budget page new household -->
<div class="modal fade new_edit2" id="budget_newhouse">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-body">
<h3>Household - New</h3>
<hr>
<label>Category Name</label>
<input placeholder="Enter Category Name">
<button>Add</button>
</div>
<div class="clear"></div>
</div>
</div>
</div>
<!-- modal budget page reset -->
<div class="modal fade new_edit2" id="budget_reset">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-body">
<h3>Reset Budget</h3>
<hr>
<label>New Budget</label>
<input placeholder="Enter New Budget">
<button>Reset My Budget</button>
</div>
<div class="clear"></div>
</div>
</div>
</div>
<!-- modal budget page add actual cost -->
<div class="modal fade new_edit2" id="budget_actualcost">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-body">
<h3>ADD ACTUAL COST</h3>
<hr>
<label>Actual Cost</label>
<input placeholder="Enter Actual Cost">
<button>Add</button>
</div>
<div class="clear"></div>
</div>
</div>
</div>
<!-- modal budget page add actual cost -->
<div class="modal fade new_edit2" id="budget_amountpaid">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-body">
<h3>ADD AMOUNT PAID</h3>
<hr>
<label>Amount Paid</label>
<input placeholder="Enter Amount Paid">
<button>Add</button>
</div>
<div class="clear"></div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
src/app/body/planning/planning.component.scss
...@@ -25,7 +25,6 @@ ...@@ -25,7 +25,6 @@
border-radius: 25px; border-radius: 25px;
} }
} }
} }
.input_box{ .input_box{
padding-top: 10px; padding-top: 10px;
...@@ -79,6 +78,7 @@ ...@@ -79,6 +78,7 @@
padding:10px; padding:10px;
position: absolute; position: absolute;
top: 70px; top: 70px;
z-index: 2;
left: 10px; left: 10px;
right: 0; right: 0;
background-color: #fff; background-color: #fff;
...@@ -115,6 +115,7 @@ ...@@ -115,6 +115,7 @@
position: absolute; position: absolute;
top: 70px; top: 70px;
left: 0px; left: 0px;
z-index: 2;
right: 0; right: 0;
background-color: #fff; background-color: #fff;
border-radius: 5px; border-radius: 5px;
...@@ -146,165 +147,168 @@ ...@@ -146,165 +147,168 @@
} }
.tab_container{ .tab_container{
.tab-content{ .tab-content{
.container{ .tab-pane{
padding-top: 30px; .container{
.message_row{ padding-top: 30px;
.col-md-4{ .message_row{
.search_bar{ .col-md-4{
padding: 8px 20px; .search_bar{
border: 1px solid #e0e0e0; padding: 8px 20px;
overflow: auto; border: 1px solid #e0e0e0;
outline: none; overflow: auto;
border-radius: 30px;
input{
width: calc(100% - 20px);
float: left;
padding-left: 5px;
border: transparent;
outline: none; outline: none;
&::placeholder{ border-radius: 30px;
color: #e0e0e0; input{
width: calc(100% - 20px);
float: left;
padding-left: 5px;
border: transparent;
outline: none;
&::placeholder{
color: #e0e0e0;
}
} }
} .search_box{
.search_box{ width: 16px;
width: 16px; float: right;
float: right; img{
img{ width: 100%;
width: 100%; height: auto;
height: auto; }
} }
} }
} .chat_items{
.chat_items{ margin-top: 30px;
margin-top: 30px; ul{
ul{ margin-bottom: 0px;
margin-bottom: 0px; padding-left: 0px;
padding-left: 0px; li{
li{ list-style: none;
list-style: none; background: #ececec;
background: #ececec; padding: 15px 30px 10px 10px;
padding: 15px 30px 10px 10px; border-radius: 5px;
border-radius: 5px; margin-bottom: 15px;
margin-bottom: 15px; .li_contents{
.li_contents{ img{
img{ width: 40px;
width: 40px; height: 40px;
height: 40px; border-radius: 50%;
border-radius: 50%; vertical-align: top;
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{ p{
display: inline-block;
font-weight: 400; font-weight: 400;
font-size: 14px; font-size: 14px;
color: #6f6f6f; color: #6f6f6f;
margin-bottom: 0px; 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{
.col-md-8{ .messge_1_box{
.messge_1_box{ width: 70%;
width: 70%; float: right;
float: right; .col-md-9{
.col-md-9{ flex: 0 0 80%;
flex: 0 0 80%; max-width: 80%;
max-width: 80%; p{
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-weight: 400;
font-size: 15px; font-size: 13px;
color: #fff; color: #4c4c4c;
text-decoration: none; margin-bottom: 0px;
display: inline-block;
} }
&:after{ .message_box{
content: url("../../../assets/img/6\(1\).png"); background-color: #ffc000;
top: 3px; padding: 10px 15px;
left: 24px; border-radius: 10px;
position: relative; a{
float: right; 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{
.col-md-3{ flex: 0 0 20%;
flex: 0 0 20%; max-width: 20%;
max-width: 20%; .head_img{
.head_img{ float: right;
float: right; width: 75px;
width: 75px; height: auto;
height: auto;
border-radius: 50%;
img{
width: 100%;
height: 100%;
border-radius: 50%; border-radius: 50%;
img{
width: 100%;
height: 100%;
border-radius: 50%;
}
} }
} }
} }
} .messge_2_box{
.messge_2_box{ padding-top: 60px;
padding-top: 60px; padding-bottom: 40px;
padding-bottom: 40px; textarea{
textarea{ width: 100%;
width: 100%; border: 1px solid #d7d7d7;
border: 1px solid #d7d7d7; min-height: 100px;
min-height: 100px; outline: none;
outline: none; resize: none;
resize: none; &::placeholder{
&::placeholder{ color: #d7d7d7;
color: #d7d7d7; }
} }
} .post_message{
.post_message{ margin-top: 20px;
margin-top: 20px; background-color: #ff9c00;
background-color: #ff9c00; display: inline-block;
display: inline-block; padding: 8px 30px;
padding: 8px 30px; border-radius: 25px;
border-radius: 25px; outline: none;
outline: none; p{
p{ font-weight: 400;
font-weight: 400; font-size: 16px;
font-size: 16px; color: #fff;
color: #fff; margin-bottom: 0px;
margin-bottom: 0px; }
} }
} }
} }
} }
} }
.checklist_contents{ .checklist_contents{
padding-top: 60px;
.checklist{ .checklist{
h3{ h3{
padding-left: 10px; padding-left: 10px;
...@@ -413,8 +417,584 @@ ...@@ -413,8 +417,584 @@
} }
.back_to_chek{ .back_to_chek{
background-color: #f1f1f1; background-color: #f1f1f1;
padding-bottom: 30px;
.container{
button{
background-color: #b638b6;
border: 1px solid #b638b6;
color: #fff;
padding: 5px 25px;
border-radius: 20px;
outline: none;
font-size: 16px;
i{
padding-right: 10px;
}
}
.done_img{
text-align: center;
margin-top: 40px;
}
h2{
text-align: center;
margin-top: 30px;
margin-bottom: 0px;
font-weight: 600;
font-size: 20px;
color: #636363;
}
.name_tick{
background-color: #fff;
margin-top: 20px;
.col{
ul{
padding-left: 0px;
padding: 5px;
margin-bottom: 0px;
li{
list-style: none;
padding: 10px;
i{
color: #b638b6;
font-size: 18px;
}
h6{
font-weight: 400;
font-size: 16px;
color: #636363;
}
}
}
.done_tick{
text-align: center;
}
}
}
}
}
.guest_list{
.guestlist{
display: inline-block;
h3{
padding-left: 10px;
font-weight: 400;
font-size: 16px;
color: #767676;
display: inline;
}
}
.add_new{
cursor: pointer;
float:right;
h4{
padding-left: 10px;
display: inline;
font-weight: 400;
font-size: 14px;
color: #767676;
}
}
ng5-slider{
.ng-5-slider-selection-bar{
visibility: visible;
background-color: #1ec4b2;
}
}
.name_list{
margin-top: 50px;
background-color: #cf4dcf;
.col{
padding: 20px;
h5{
margin-bottom: 0px;
font-weight: 400;
font-size: 16px;
color: #fff;
}
}
}
.name_list_items{
margin-top: 10px;
background-color: #ebebea;
padding: 15px;
margin-bottom: 20px;
h6{
margin-bottom: 0px;
font-weight: 600;
font-size: 15px;
color: #4c4c4c;
}
i{
color: #b638b6;
font-size: 18px;
}
.down_img{
float: right;
}
}
.name_line{
margin-bottom: 10px;
.name_details{
background-color: #f5f5f5;
margin-top: 5px;
padding: 5px;
.col{
ul{
padding-left: 0px;
margin-bottom: 0px;
li{
display: inline-block;
list-style: none;
p{
margin-bottom: 0px;
padding: 10px;
}
i{
color: #039be5;
padding: 10px 5px 10px 5px;
}
}
}
}
}
}
}
.budget_page{
.budgetlist{
display: inline-block;
margin-bottom: 10px;
h3{
padding-left: 10px;
font-weight: 400;
font-size: 16px;
color: #767676;
display: inline;
}
}
.two_slides{
background-color: #f5f5f5;
padding: 20px;
text-align: center;
img{
float: left;
}
.ts_cost{
display: inline-block;
vertical-align: middle;
text-align: left;
h4{
font-weight: 600;
font-size: 14px;
color: #646464;
}
h6{
font-weight: 600;
font-size: 16px;
color: #00bb5c;
margin-bottom: 0px;
display: inline-block;
span{
color: #00bb5c;
}
.est_cost{
color: #e82c2c;
}
}
}
.modal_buttons{
padding-top: 40px;
padding-bottom: 20px;
.add_new{
overflow: auto;
text-align: left;
cursor: pointer;
h4{
line-height: 2;
padding-left: 10px;
display: inline;
font-weight: 400;
font-size: 16px;
color: #535353;
}
}
button{
outline: none;
color: #fff;
font-weight: 400;
font-size: 16px;
padding: 5px 15px;
display: block;
background-color: #ff9c00;
border: 1px solid #ff9c00;
border-radius: 24px;
}
}
}
.catagory_bar{
background-color: #cf4dcf;
margin-top: 20px;
padding: 20px 15px;
h4{
color: #fff;
margin-bottom: 0px;
font-weight: 400;
font-size: 16px;
}
.left_h4{
text-align: center;
}
.center_h4{
text-align: left;
}
}
.catogory_contents{
margin-top: 20px;
.cat_cont_row{
padding-top: 20px;
padding-bottom: 40px;
padding-left: 20px;
background-color: #ebebea;
margin-bottom: 5px;
img{
width: 25px;
}
h5{
display: inline-block;
padding-left: 10px;
font-weight: 600;
font-size: 15px;
color: #4c4c4c;
margin-bottom: 0px;
}
.left_h4{
text-align: center;
}
i{
cursor: pointer;
font-weight: 900;
color: #777777;
font-size: 22px;
vertical-align: middle;
}
p{
padding-left: 40px;
display: inline-block;
font-weight: 400;
font-size: 14px;
margin-bottom: 0px;
color: #777777;
}
.delete_but{
text-align: center;
img{
width: 30px;
}
}
}
}
.grand_total{
background-color: #666565;
margin-top: 20px;
padding: 20px 15px;
margin-bottom: 20px;
h4{
color: #fff;
margin-bottom: 0px;
font-weight: 400;
font-size: 16px;
}
.left_h4{
text-align: center;
}
.center_h4{
text-align: center;
}
}
}
.favourite_vendors{
.fav_vendors{
display: inline-block;
margin-bottom: 10px;
h3{
padding-left: 10px;
font-weight: 400;
font-size: 16px;
color: #767676;
display: inline;
}
}
.filter_icon{
float: right;
}
.vendor_left_side{
background-color: #f6f5f5;
width: 28%;
margin-top: 40px;
display: inline-block;
margin-bottom: 20px;
ul{
padding-top: 10px;
padding-bottom: 10px;
list-style: none;
border: none;
width: 100%;
margin: 0px;
li{
cursor: pointer;
padding-top: 5px;
padding-bottom: 5px;
a{
padding: 1px 20px;
display: inherit;
border-left: 4px solid transparent;
img{
width: 17px;
}
p{
padding-left: 20px;
display: inline-block;
font-weight: 400;
font-size: 15px;
color: #383838;
}
.vendor_counter{
float: right;
font-weight: 400;
font-size: 12px;
background: #f10000;
border-radius: 50%;
color: #fff;
padding: 2px 7px;
}
}
.active{
border-left: 4px solid #c644c6;
}
}
}
}
.vendor_right_side{
margin-top: 40px;
width: 72%;
float: right;
.tab-content{
.tab-pane {
padding-left: 40px;
.all_tab{
img{
width: 70px;
height: 70px;
border-radius: 50%;
vertical-align: top;
}
button{
float: right;
margin-top: 20px;
margin-right: 100px;
border: 1px solid;
border-color: #f10000;
color: #f10000;
background: transparent;
font-weight: 400;
font-size: 12px;
border-radius: 30px;
padding: 10px 10px;
}
.all_tab_contents{
display: inline-block;
padding-left: 50px;
vertical-align: middle;
h3{
color: #4c4c4c;
font-weight: 600;
font-size: 16px;
margin-bottom: 0px;
}
p{
color: #848484;
font-weight: 400;
font-size: 15px;
margin-bottom: 0px;
}
.review_newline{
display: inline;
padding-left: 10px;
vertical-align: middle;
}
.starimg{
width: 16px;
height: 16px;
vertical-align: middle;
}
.rat_box{
overflow: auto;
/****** Style Star Rating Widget *****/
.rating {
border: none;
float: left;
}
.rating > input { display: none; }
.rating > label:before {
margin: 2px;
font-size: 1.25em;
font-family: FontAwesome;
display: inline-block;
content: "\f005";
}
.rating > .half:before {
content: "\f089";
position: absolute;
}
.rating > label {
color: #ddd;
float: right;
margin-bottom: 0px;
}
/***** CSS Magic to Highlight Stars on Hover *****/
.rating > input:checked ~ label, /* show gold star when clicked */
.rating:not(:checked) > label:hover, /* hover current star */
.rating:not(:checked) > label:hover ~ label { color: #FFD700; } /* hover previous stars in list */
.rating > input:checked + label:hover, /* hover current star when changing rating */
.rating > input:checked ~ label:hover,
.rating > label:hover ~ input:checked ~ label, /* lighten current selection */
.rating > input:checked ~ label:hover ~ label { color: #FFED85; }
}
}
}
}
}
}
} }
} }
} }
} }
} // scss for add new guest modal
\ No newline at end of file .new_edit{
.modal-dialog{
margin: 100px auto;
.modal-content{
.modal-body{
padding: 30px 30px;
.container{
h3{
font-weight: 600;
font-size: 18px;
color: #535353;
}
hr{
margin-left: 0px;
width: 30px;
border: 2px solid rgb(255, 0, 255);
border-radius: 2px;
}
.row{
ul{
margin-bottom: 0px;
padding-left: 0px;
li{
list-style: none;
padding: 10px;
input{
width: 100%;
height: 40px;
border: 1px solid #9e9e9e;
&::placeholder{
color: #a8a8a8;
padding-left: 10px;
}
}
label{
font-size: 15px;
color: #9e9e9e;
display: block;
}
select{
outline: none;
width: 100%;
color: #6f6f6f;
font-size: 14px;
height: 40px;
border: 1px solid #9e9e9e;
option{
color: #b638b6;
}
}
}
}
button{
outline: none;
color: #fff;
font-size: 18px;
padding: 5px 25px;
display: block;
float: right;
background-color: #ff9c00;
border: 1px solid #ff9c00;
border-radius: 24px;
margin-top: 20px;
}
}
}
}
}
}
}
.new_edit2{
.modal-dialog{
margin: 100px auto;
.modal-content{
.modal-body{
padding: 30px 30px;
h3{
font-weight: 600;
font-size: 18px;
color: #535353;
}
hr{
margin-left: 0px;
width: 30px;
border: 2px solid rgb(255, 0, 255);
border-radius: 2px;
}
label{
font-size: 15px;
color: #9e9e9e;
display: block;
}
input{
margin: 10px 0px 10px 0px;
width: 100%;
height: 40px;
border: 1px solid #d7d7d7;
&::placeholder{
color: #d7d7d7;
padding-left: 10px;
font-size: 16px;
}
}
button{
outline: none;
color: #fff;
font-size: 18px;
padding: 5px 25px;
display: block;
float: right;
background-color: #ff9c00;
border: 1px solid #ff9c00;
border-radius: 24px;
margin-top: 20px;
}
}
}
}
}
}
src/app/body/planning/planning.component.ts
import { Component, OnInit } from '@angular/core'; import { Component, OnInit } from '@angular/core';
import { Router,ActivatedRoute } from '@angular/router'; import { Router,ActivatedRoute } from '@angular/router';
import { Options } from 'ng5-slider';
@Component({ @Component({
selector: 'app-planning', selector: 'app-planning',
templateUrl: './planning.component.html', templateUrl: './planning.component.html',
...@@ -8,15 +8,43 @@ import { Router,ActivatedRoute } from '@angular/router'; ...@@ -8,15 +8,43 @@ import { Router,ActivatedRoute } from '@angular/router';
}) })
export class PlanningComponent implements OnInit { export class PlanningComponent implements OnInit {
addto= false; addto= false;
done = false;
down = false;
con2=false;
con1=false;
namedown = false;
value: number = 1;
options: Options = {
floor: 0,
ceil: 1
};
constructor(private router: Router, constructor(private router: Router,
private route: ActivatedRoute,) { } private route: ActivatedRoute,) { }
ngOnInit() { ngOnInit() {
} }
addtofunc(){ addtofunc(){
this.addto = !this.addto; this.addto = !this.addto;
} }
donefunc(){
this.done = !this.done;
}
downfunc(){
this.done = !this.done;
}
onKey2(event: any) {
this.con2 = !this.con2;
}
onKey1(event: any) {
this.con1 = !this.con1;
}
namedownfunc(){
this.namedown = !this.namedown;
}
goToPage(path,data=null){ goToPage(path,data=null){
this.router.navigateByUrl(path,{queryParams:data}); this.router.navigateByUrl(path,{queryParams:data});
} }
......
src/styles.scss
...@@ -68,4 +68,11 @@ ...@@ -68,4 +68,11 @@
} }
} }
} }
} }
\ No newline at end of file //scss for guestslide
ng5-slider{
.ng-5-slider-selection-bar{
visibility: visible;
background-color: #1ec4b2;
}
}
\ No newline at end of file
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