Skip to content

Commit a1a9c6a

Browse files
jmfarook7jmfarook7
authored
Merge pull request #19 from SyncfusionExamples/EJ2-946605-hotel-mas3141
946605: Need to implement UI team suggested changes in hotel booking
2 parents 29e9d93 + ecb343f commit a1a9c6a

File tree

2 files changed

+80
-37
lines changed

2 files changed

+80
-37
lines changed

‎Hotel-booking-App/src/components/HotelBook/HotelBook.css

+54-4
Original file line numberDiff line numberDiff line change
@@ -92,7 +92,7 @@
9292
}
9393

9494
.e-side-bar-treeview-separator {
95-
padding: 10px 3px;
95+
padding: 10px;
9696
}
9797

9898
.e-line-separator,
@@ -245,7 +245,7 @@
245245

246246
.e-img {
247247
margin: 15px;
248-
width: 210px;
248+
width: 310px;
249249
height: 210px;
250250
}
251251

@@ -383,7 +383,7 @@
383383
}
384384

385385
.e-book-details-button {
386-
padding-right: 65px;
386+
padding-right: 95px;
387387
}
388388

389389
.e-padding-right {
@@ -529,7 +529,13 @@
529529

530530
#hotelamenities,
531531
#roomamenities {
532-
border: 0px;
532+
border-color: #D1D5DB;
533+
}
534+
535+
.e-treeview .e-level-1.e-list-item>.e-fullrow,
536+
.e-treeview .e-level-1.e-list-item.e-active.e-hover>.e-fullrow,
537+
.e-treeview .e-level-1.e-list-item.e-active.e-node-focus>.e-fullrow {
538+
background-color: #F3F4F6;
533539
}
534540

535541
.e-dialog.e-dialog-print-info .e-dlg-header {
@@ -573,6 +579,50 @@
573579
width: 96%;
574580
}
575581

582+
.vertical-divider {
583+
width: 1px;
584+
background-color: #a5b4fc;
585+
flex-shrink: 0;
586+
margin: 0px 15px;
587+
}
588+
589+
.e-info-flex-direction-column {
590+
flex-direction: column;
591+
}
592+
593+
.e-info-flex-40-width {
594+
width: 40%
595+
}
596+
597+
.e-info-flex-50-width {
598+
width: 50%
599+
}
600+
601+
.e-info-flex-60-width {
602+
width: 60%
603+
}
604+
605+
.e-info-flex-40-height {
606+
height: 40%
607+
}
608+
609+
.e-info-flex-50-height {
610+
height: 50%
611+
}
612+
613+
.e-info-flex-60-height {
614+
height: 60%
615+
}
616+
617+
#form1 {
618+
padding: 0px 30px;
619+
}
620+
621+
.e-padding-side {
622+
padding-left: 20px;
623+
padding-right: 20px;
624+
}
625+
576626
@import '../../../node_modules/@syncfusion/ej2-base/styles/tailwind3.css';
577627
@import '../../../node_modules/@syncfusion/ej2-buttons/styles/tailwind3.css';
578628
@import '../../../node_modules/@syncfusion/ej2-calendars/styles/tailwind3.css';

‎Hotel-booking-App/src/components/HotelBook/HotelBook.tsx

+26-33
Original file line numberDiff line numberDiff line change
@@ -364,18 +364,34 @@ function HotelBook() {
364364
<img src={src} alt={props.RoomImgID} className='e-img' />
365365
</div>
366366
<div className='e-info-container'>
367-
<div className='e-row-template-separator'>
368-
<div className='e-flex-layout'>
369-
<div className='e-info-flex-width-applier'>
367+
<div className='e-flex-layout'>
368+
<div className='e-info-flex-60-width e-flex-layout e-info-flex-direction-column'>
369+
<div className='e-row-template-separator e-info-flex-60-height'>
370370
<div>
371371
<span className='e-semi-bold-header-text'>{props.HotelName}</span>
372372
</div>
373373
<div className='normal-text-color e-flex-layout e-margin-top-10'>
374374
<span className='e-map-text-styler e-semi-title-header-text' onClick={showMap}><img src="./images/map.png" className="e-map-img" alt="Map" title='Show on map' /></span>
375375
<span className='e-address-text-styler e-map-text-spacer'>{props.Address}</span>
376376
</div>
377+
<div className='normal-text-color e-margin-top-10'>
378+
{props.Description}
379+
</div>
380+
</div>
381+
<div className='e-row-template-separator e-info-flex-40-height'>
382+
<span className='e-semi-title-header-text'>Amenities:</span>
383+
<ChipListComponent cssClass='e-outline'>
384+
<ChipsDirective>
385+
{hotelFacilityList.map((item, index) => (
386+
<ChipDirective key={index} text={item} cssClass="e-info" enabled={false}></ChipDirective>
387+
))}
388+
</ChipsDirective>
389+
</ChipListComponent>
377390
</div>
378-
<div className='e-info-flex-width-applier'>
391+
</div>
392+
<div className='vertical-divider'></div>
393+
<div className='e-info-flex-40-width e-flex-layout e-info-flex-direction-column'>
394+
<div className='e-row-template-separator e-info-flex-50-height'>
379395
<div>
380396
<span className='e-semi-title-header-text'>Rating:</span>
381397
</div>
@@ -387,37 +403,14 @@ function HotelBook() {
387403
({props.ReviewCount} reviews)
388404
</div>
389405
</div>
390-
391406
</div>
392-
</div>
393-
</div>
394-
<div className='e-row-template-separator'>
395-
<div className='e-flex-layout'>
396-
<div className='e-info-flex-width-applier normal-text-color'>
397-
{props.Description}
398-
</div>
399-
<div className='e-info-flex-width-applier'>
407+
<div className='e-row-template-separator e-info-flex-50-height'>
400408
<div>
401409
<span className='e-semi-title-header-text'>Room Name:</span> <span className='e-semi-bold-title-header-text'>{props.RoomName}</span><span className='normal-text-color'> ({props.Capacity} person)</span>
402410
</div>
403411
<div className='e-semi-title-header-text normal-hint-text-color'>(Extra bed capacity: {props.ExtraBed} and per bed cost: ${props.ExtraBedCost})</div>
404412
</div>
405-
406-
</div>
407-
</div>
408-
<div className='e-row-template-separator'>
409-
<div className='e-flex-layout'>
410-
<div className='e-info-flex-width-applier'>
411-
<span className='e-semi-title-header-text'>Amenities:</span>
412-
<ChipListComponent cssClass='e-outline'>
413-
<ChipsDirective>
414-
{hotelFacilityList.map((item, index) => (
415-
<ChipDirective key={index} text={item} cssClass="e-info" enabled={false}></ChipDirective>
416-
))}
417-
</ChipsDirective>
418-
</ChipListComponent>
419-
</div>
420-
<div className='e-info-flex-width-applier'>
413+
<div className='e-row-template-separator e-info-flex-50-height'>
421414
<span className='e-semi-title-header-text'>Room Amenities:</span>
422415
<ChipListComponent cssClass='e-outline'>
423416
<ChipsDirective>
@@ -432,7 +425,7 @@ function HotelBook() {
432425
</div>
433426
</div>
434427
<div className='e-data-line-separator'></div>
435-
<div className='e-book-layout'>
428+
<div className='e-book-layout e-padding-side'>
436429
<div className='e-extralist-price-info-container'>
437430
<div className='e-extralist-container'>
438431
<ChipListComponent cssClass='e-outline'>
@@ -456,7 +449,7 @@ function HotelBook() {
456449
</div>
457450
</div>
458451
<div className='e-book-spacer'></div>
459-
<div className='e-book-button e-padding-right'>
452+
<div className='e-book-button'>
460453
<ButtonComponent cssClass='e-primary e-outline' onClick={goToRoomBookingPage} disabled={!isRoomAvailable}>{!isRoomAvailable ? "Room's not available" : "Book Room"}</ButtonComponent>
461454
</div>
462455
</div>
@@ -896,7 +889,7 @@ function HotelBook() {
896889
<div className='e-details-info-container'>
897890
<div className='e-booking-details-container'>
898891
<div className='e-header-text e-light-blue-border-bottom'>Booking Details</div>
899-
<form id="form1" method="post">
892+
<form id="form1" method="post" className='e-margin-top-10'>
900893
<div className='e-booking-details-separator'>
901894
<div className='e-semi-header-text'>Personal information</div>
902895
<div className='e-flex-layout e-booking-details-separator'>
@@ -988,7 +981,7 @@ function HotelBook() {
988981
</div>
989982
<div className='e-hotel-details-container'>
990983
<div className='e-header-text e-light-blue-border-bottom'>Information</div>
991-
<div className='e-hotel-details-side-bar-separator'><span className='e-semi-title-header-text'>Hotel Name: </span><span className='e-semi-bold-header-text'>{selectedRoom.HotelName}</span></div>
984+
<div className='e-hotel-details-side-bar-separator e-margin-top-10'><span className='e-semi-title-header-text'>Hotel Name: </span><span className='e-semi-bold-header-text'>{selectedRoom.HotelName}</span></div>
992985
<div className='e-info-flex-items-center-applier e-hotel-details-side-bar-separator'><span className='e-semi-title-header-text'>Rating: </span><RatingComponent value={selectedRoom.Rating} readOnly={true} cssClass='e-custom-rating-color'></RatingComponent></div>
993986
<div className='e-hotel-details-side-bar-separator'><span className='e-semi-title-header-text'>Room Name: </span><span className='e-semi-bold-title-header-text'>{selectedRoom.RoomName}</span></div>
994987
<div className='e-hotel-details-side-bar-separator'><span className='e-semi-title-header-text'>Capacity: </span><span className='normal-text-color'>{selectedRoom.Capacity} person</span></div>

0 commit comments

Comments
 (0)