Skip to content

M
Moments
Commit 556abe2a by abraham
Options

lunch

parent 005a9111
Showing with 216 additions and 73 deletions
angular.json
......@@ -37,6 +37,7 @@
"scripts": [
"node_modules/jquery/dist/jquery.js",
"node_modules/jquery/dist/jquery.min.js",
"node_modules/popper.js/dist/umd/popper.js",
"node_modules/bootstrap/dist/js/bootstrap.js",
"node_modules/slick-carousel/slick/slick.min.js"
],
......
package-lock.json
......@@ -7303,6 +7303,11 @@
"find-up": "^2.1.0"
}
},
"popper.js": {
"version": "1.15.0",
"resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.15.0.tgz",
"integrity": "sha512-w010cY1oCUmI+9KwwlWki+r5jxKfTFDVoadl7MSrIujHU5MJ5OR6HTDj6Xo8aoR/QsA56x8jKjA59qGH4ELtrA=="
},
"portfinder": {
"version": "1.0.21",
"resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.21.tgz",
......
package.json
......@@ -24,6 +24,7 @@
"jquery": "^3.4.1",
"ng5-slider": "^1.2.4",
"ngx-slick-carousel": "^0.4.4",
"popper.js": "^1.15.0",
"rxjs": "~6.3.3",
"slick-carousel": "^1.8.1",
"tslib": "^1.9.0",
......
src/app/body/planning/planning.component.html
......@@ -497,19 +497,35 @@
</div>
<div id="favorite" class="tab-pane fade">
<div class="container favourite_vendors">
<div class="fav_top">
<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>
<img src="../../../assets/img/53.png" style="float: left;
padding-top: 10px;
padding-right: 20px;">
<div class="dropdown" style="float: left;">
<button type="button" class="dropdown-toggle" data-toggle="dropdown">
Hired & Favorite Vendors
</button>
<div class="clear"></div>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">--None Selected--</a>
<a class="dropdown-item" href="#">A-List</a>
<a class="dropdown-item" href="#">B-List</a>
<a class="dropdown-item" href="#">C-List</a>
</div>
<div class="clear"></div>
</div>
</div>
<div class="clear"></div>
</div>
<div class="vendor_left_side">
<ul class="nav flex-column">
<li>
<a class="active" data-toggle="tab" href="#recent">
<a class="active" data-toggle="tab" href="#all">
<img src="../../../assets/img/56.png">
<p>All</p>
<div class="vendor_counter">
......@@ -519,7 +535,7 @@
</a>
</li>
<li>
<a data-toggle="tab" href="#order">
<a data-toggle="tab" href="#venue">
<img src="../../../assets/img/57.png">
<p>Venue</p>
<div class="vendor_counter">
......@@ -529,7 +545,7 @@
</a>
</li>
<li>
<a data-toggle="tab" href="#payment">
<a data-toggle="tab" href="#Wedding_Photographers">
<img src="../../../assets/img/1507722456_56cdf37898bb3bb1b3356fad8831dc1a--on-your-wedding-day-pre-wedding.jpg">
<p>Wedding Photographers</p>
<div class="vendor_counter">
......@@ -539,7 +555,7 @@
</a>
</li>
<li>
<a data-toggle="tab" href="#manage">
<a data-toggle="tab" href="#Wedding_Venues">
<img src="../../../assets/img/1507875334_wedding-icon-12670446.jpg">
<p>Wedding Venues</p>
<div class="vendor_counter">
......@@ -549,7 +565,7 @@
</a>
</li>
<li>
<a data-toggle="tab" href="#communication">
<a data-toggle="tab" href="#Planning">
<img src="../../../assets/img/1517468986_wedding-planning_318-99774.jpg">
<p>Planning</p>
<div class="vendor_counter">
......@@ -559,7 +575,7 @@
</a>
</li>
<li>
<a data-toggle="tab" href="#communication">
<a data-toggle="tab" href="#Wedding_DJs">
<img src="../../../assets/img/1508740269_marriage-marry-009-256.png">
<p>Wedding DJs</p>
<div class="vendor_counter">
......@@ -569,7 +585,7 @@
</a>
</li>
<li>
<a data-toggle="tab" href="#communication">
<a data-toggle="tab" href="#Wedding_Invitations">
<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">
......@@ -579,7 +595,7 @@
</a>
</li>
<li>
<a data-toggle="tab" href="#communication">
<a data-toggle="tab" href="#Wedding_Caterers">
<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">
......@@ -589,7 +605,7 @@
</a>
</li>
<li>
<a data-toggle="tab" href="#communication">
<a data-toggle="tab" href="#Wedding_Favors_Gifts">
<img src="../../../assets/img/1509360077_images.png">
<p>Wedding Favors & Gifts</p>
<div class="vendor_counter">
......@@ -599,7 +615,7 @@
</a>
</li>
<li>
<a data-toggle="tab" href="#communication">
<a data-toggle="tab" href="#Wedding_Jewelry">
<img src="../../../assets/img/1509360090_wedding_17-512.png">
<p>Wedding Jewelry</p>
<div class="vendor_counter">
......@@ -612,7 +628,7 @@
</div>
<div class="vendor_right_side">
<div class="tab-content">
<div class="tab-pane active" id="recent">
<div class="tab-pane active" id="all">
<div class="all_tab">
<img src="../../../assets/img/1511411361_800x800_1484776452685-exterior-1.jpg">
<div class="all_tab_contents">
......@@ -639,13 +655,23 @@
<div class="clear"></div>
</div>
</div>
<div class="tab-pane fade" id="order">
<div class="tab-pane fade" id="venue">
</div>
<div class="tab-pane fade" id="Wedding_Photographers">
</div>
<div class="tab-pane fade" id="Wedding_Venues">
</div>
<div class="tab-pane fade" id="Planning ">
</div>
<div class="tab-pane fade" id="Wedding_DJs ">
</div>
<div class="tab-pane fade" id="payment">
<div class="tab-pane fade" id="Wedding_Invitations ">
</div>
<div class="tab-pane fade" id="manage">
<div class="tab-pane fade" id="Wedding_Caterers ">
</div>
<div class="tab-pane fade" id="communication ">
<div class="tab-pane fade" id="Wedding_Favors_Gifts ">
</div>
<div class="tab-pane fade" id="Wedding_Jewelry ">
</div>
</div>
</div>
......@@ -675,22 +701,34 @@
</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>
<div class="dropdown">
<button type="button" class="dropdown-toggle" data-toggle="dropdown">
--None Selected--
</button>
<div class="clear"></div>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">--None Selected--</a>
<a class="dropdown-item" href="#">Not Invited</a>
<a class="dropdown-item" href="#">No Response</a>
<a class="dropdown-item" href="#">Accepted</a>
<a class="dropdown-item" href="#">Declined</a>
</div>
</div>
</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>
<div class="dropdown">
<button type="button" class="dropdown-toggle" data-toggle="dropdown">
--None Selected--
</button>
<div class="clear"></div>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">--None Selected--</a>
<a class="dropdown-item" href="#">A-List</a>
<a class="dropdown-item" href="#">B-List</a>
<a class="dropdown-item" href="#">C-List</a>
</div>
</div>
</li>
</ul>
</div>
......@@ -706,25 +744,37 @@
</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>
<div class="dropdown">
<button type="button" class="dropdown-toggle" data-toggle="dropdown">
--None Selected--
</button>
<div class="clear"></div>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">--None Selected--</a>
<a class="dropdown-item" href="#">Not Invited</a>
<a class="dropdown-item" href="#">No Response</a>
<a class="dropdown-item" href="#">Accepted</a>
<a class="dropdown-item" href="#">Declined</a>
</div>
</div>
</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>
<div class="dropdown">
<button type="button" class="dropdown-toggle" data-toggle="dropdown">
--None Selected--
</button>
<div class="clear"></div>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">--None Selected--</a>
<a class="dropdown-item" href="#">A-List</a>
<a class="dropdown-item" href="#">B-List</a>
<a class="dropdown-item" href="#">C-List</a>
</div>
</div>
</li>
</ul>
<button>Save</button>
<button class="bottom_button">Save</button>
</div>
</div>
</div>
......@@ -770,22 +820,34 @@
</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>
<div class="dropdown">
<button type="button" class="dropdown-toggle" data-toggle="dropdown">
--None Selected--
</button>
<div class="clear"></div>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">--None Selected--</a>
<a class="dropdown-item" href="#">Not Invited</a>
<a class="dropdown-item" href="#">No Response</a>
<a class="dropdown-item" href="#">Accepted</a>
<a class="dropdown-item" href="#">Declined</a>
</div>
</div>
</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>
<div class="dropdown">
<button type="button" class="dropdown-toggle" data-toggle="dropdown">
--None Selected--
</button>
<div class="clear"></div>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">--None Selected--</a>
<a class="dropdown-item" href="#">A-List</a>
<a class="dropdown-item" href="#">B-List</a>
<a class="dropdown-item" href="#">C-List</a>
</div>
</div>
</li>
</ul>
</div>
......@@ -801,25 +863,37 @@
</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>
<div class="dropdown">
<button type="button" class="dropdown-toggle" data-toggle="dropdown">
--None Selected--
</button>
<div class="clear"></div>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">--None Selected--</a>
<a class="dropdown-item" href="#">Not Invited</a>
<a class="dropdown-item" href="#">No Response</a>
<a class="dropdown-item" href="#">Accepted</a>
<a class="dropdown-item" href="#">Declined</a>
</div>
</div>
</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>
<div class="dropdown">
<button type="button" class="dropdown-toggle" data-toggle="dropdown">
--None Selected--
</button>
<div class="clear"></div>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">--None Selected--</a>
<a class="dropdown-item" href="#">Beef</a>
<a class="dropdown-item" href="#">Chicken</a>
<a class="dropdown-item" href="#">Fish</a>
</div>
</div>
</li>
</ul>
<button>Save</button>
<button class="bottom_button">Save</button>
</div>
</div>
</div>
......
src/app/body/planning/planning.component.scss
......@@ -713,6 +713,8 @@
}
}
.favourite_vendors{
.fav_top{
width: 82%;
.fav_vendors{
display: inline-block;
margin-bottom: 10px;
......@@ -726,6 +728,34 @@
}
.filter_icon{
float: right;
.dropdown{
button{
text-align: left;
width: 100%;
color: rgba(0, 0, 0, 0.87);
font-size: 16px;
padding-left: 20px;
padding-right: 20px;
height: 40px;
outline: none;
border: 1px solid #9e9e9e;
background: transparent;
&:after{
margin-top: 8px;
margin-left: 10px;
float: right;
}
}
.dropdown-menu{
width: 100%;
.dropdown-item{
color: #b638b6;
padding-top: 7px;
padding-bottom: 7px;
}
}
}
}
}
.vendor_left_side{
background-color: #f6f5f5;
......@@ -903,12 +933,16 @@
list-style: none;
padding: 10px;
input{
outline: none;
width: 100%;
height: 40px;
border: 1px solid #9e9e9e;
padding-left: 10px;
&::placeholder{
color: #a8a8a8;
padding-left: 10px;
}
&:focus{
border: 2px solid #b638b6;
}
}
label{
......@@ -916,6 +950,30 @@
color: #9e9e9e;
display: block;
}
.dropdown{
button{
text-align: left;
width: 100%;
color: #6f6f6f;
font-size: 14px;
height: 40px;
outline: none;
border: 1px solid #9e9e9e;
background: transparent;
&:after{
margin-top: 8px;
float: right;
}
}
.dropdown-menu{
width: 100%;
.dropdown-item{
color: #b638b6;
padding-top: 7px;
padding-bottom: 7px;
}
}
}
select{
outline: none;
width: 100%;
......@@ -929,7 +987,7 @@
}
}
}
button{
.bottom_button{
outline: none;
color: #fff;
font-size: 18px;
......@@ -974,11 +1032,15 @@
width: 100%;
height: 40px;
border: 1px solid #d7d7d7;
outline: none;
&::placeholder{
color: #d7d7d7;
padding-left: 10px;
font-size: 16px;
}
&:focus{
border: 1px solid #b638b6;
}
}
button{
outline: none;
......
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