Skip to content

Commit 29e9d93

Browse files
jmfarook7jmfarook7
authored
Merge pull request #18 from SyncfusionExamples/EJ2-946605-hotel-mas
946605: Need to implement UI team suggested changes in hotel booking
2 parents affb10e + b0fd72b commit 29e9d93

23 files changed

+533
-579
lines changed

‎Hotel-booking-App/img/hotel-app.gif renamed to ‎Hotel-booking-App/demo-img/hotel-app.gif

File renamed without changes.

‎Hotel-booking-App/index.html

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<meta charset="UTF-8" />
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<meta name="description" content="Essential JS 2 for React - Samples template">
8+
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
9+
<title>Essential JS 2 for React - Hotel room booking application</title>
10+
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
11+
<link rel="preconnect" href="https://fonts.googleapis.com">
12+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
13+
<link
14+
href="https://fonts.googleapis.com/css2?family=Jersey+15&family=Josefin+Sans:ital,wght@0,100..700;1,100..700&family=Rubik+Vinyl&display=swap"
15+
rel="stylesheet">
16+
</head>
17+
18+
<body>
19+
<div id="content-area"></div>
20+
</body>
21+
22+
</html>

‎Hotel-booking-App/package.json

+30-69
Original file line numberDiff line numberDiff line change
@@ -1,80 +1,41 @@
11
{
2-
"name": "react-app",
3-
"version": "0.1.0",
4-
"private": true,
5-
"homepage": ".",
2+
"name": "@syncfusion/ej2-react-hotel-room-reserve",
3+
"version": "1.0.0",
4+
"description": "Essential JS 2 - Hotel room booking application",
5+
"author": "Syncfusion Inc.",
6+
"license": "SEE LICENSE IN license",
7+
"scripts": {
8+
"start": "webpack-dev-server --open --mode development",
9+
"build": "webpack --mode production",
10+
"ci-publish": "gulp publish-sample"
11+
},
12+
"devDependencies": {
13+
"@types/node": "^20.4.1",
14+
"@types/react": "^18.2.14",
15+
"@types/react-dom": "^18.2.6",
16+
"@types/react-router-dom": "^5.3.3",
17+
"css-loader": "^6.8.1",
18+
"html-webpack-plugin": "^5.5.3",
19+
"mini-css-extract-plugin": "^2.7.6",
20+
"terser-webpack-plugin": "^5.3.9",
21+
"ts-loader": "^9.4.4",
22+
"typescript": "^5.1.6",
23+
"webpack": "^5.88.1",
24+
"webpack-cli": "^5.1.4",
25+
"webpack-dev-server": "^4.15.1",
26+
"copy-webpack-plugin": "^12.0.2"
27+
},
628
"dependencies": {
7-
"@babel/plugin-transform-runtime": "^7.23.4",
8-
"@babel/preset-env": "^7.23.3",
9-
"@babel/preset-react": "^7.23.3",
10-
"@babel/preset-typescript": "^7.23.3",
11-
"@headlessui/react": "^1.7.15",
12-
"@heroicons/react": "^2.0.18",
29+
"react": "^18.2.0",
30+
"react-dom": "^18.2.0",
31+
"react-router-dom": "^6.14.1",
1332
"@syncfusion/ej2-react-grids": "*",
1433
"@syncfusion/ej2-react-calendars": "*",
1534
"@syncfusion/ej2-react-buttons": "*",
1635
"@syncfusion/ej2-react-popups": "*",
1736
"@syncfusion/ej2-react-inputs": "*",
1837
"@syncfusion/ej2-react-dropdowns": "*",
1938
"@syncfusion/ej2-react-navigations": "*",
20-
"@syncfusion/ej2-react-maps": "*",
21-
"@testing-library/jest-dom": "^5.16.5",
22-
"@testing-library/react": "^13.4.0",
23-
"@testing-library/user-event": "^13.5.0",
24-
"@types/jest": "^27.5.2",
25-
"@types/node": "^16.18.23",
26-
"@types/numeral": "^2.0.2",
27-
"@types/react": "^18.0.37",
28-
"@types/react-dom": "^18.0.11",
29-
"axios": "^1.4.0",
30-
"babel-plugin-inline-react-svg": "^2.0.2",
31-
"babel-plugin-transform-decorators": "^6.24.1",
32-
"buffer": "^6.0.3",
33-
"formik": "^2.4.2",
34-
"moment": "^2.29.4",
35-
"numeral": "^2.0.6",
36-
"react": "^18.2.0",
37-
"react-dom": "^18.2.0",
38-
"react-inject-env": "^2.1.0",
39-
"react-number-format": "^5.3.1",
40-
"react-router-dom": "^6.11.1",
41-
"react-scripts": "5.0.1",
42-
"typescript": "^4.9.5",
43-
"web-vitals": "^2.1.4",
44-
"yup": "^1.2.0"
45-
},
46-
"scripts": {
47-
"start": "react-scripts start",
48-
"build": "react-scripts build",
49-
"test": "react-scripts test",
50-
"eject": "react-scripts eject",
51-
"format": "prettier --write \"./src/**/*.{js,jsx,ts,tsx,json,css,scss,md}\"",
52-
"prepare": "husky install"
53-
},
54-
"eslintConfig": {
55-
"extends": [
56-
"react-app",
57-
"react-app/jest"
58-
]
59-
},
60-
"browserslist": {
61-
"production": [
62-
">0.2%",
63-
"not dead",
64-
"not op_mini all"
65-
],
66-
"development": [
67-
"last 1 chrome version",
68-
"last 1 firefox version",
69-
"last 1 safari version"
70-
]
71-
},
72-
"devDependencies": {
73-
"@babel/plugin-proposal-private-property-in-object": "^7.21.11",
74-
"autoprefixer": "^10.4.14",
75-
"husky": "^8.0.3",
76-
"postcss": "^8.4.22",
77-
"prettier": "2.8.8",
78-
"tailwindcss": "^3.3.1"
39+
"@syncfusion/ej2-react-maps": "*"
7940
}
8041
}

‎Hotel-booking-App/public/favicon.ico

-3.08 KB
Binary file not shown.

‎Hotel-booking-App/public/index.html

-17
This file was deleted.

‎Hotel-booking-App/public/logo192.png

-5.22 KB
Binary file not shown.

‎Hotel-booking-App/public/logo512.png

-9.44 KB
Binary file not shown.

‎Hotel-booking-App/public/manifest.json

-25
This file was deleted.

‎Hotel-booking-App/public/robots.txt

-3
This file was deleted.

‎Hotel-booking-App/src/common/index.tsx

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import * as React from "react";
2+
import { createRoot } from 'react-dom/client';
3+
import HotelBook from "../components/HotelBook/HotelBook";
4+
import "../../styles/index.css";
5+
6+
const root = createRoot(document.getElementById("content-area") as HTMLElement);
7+
root.render(
8+
<HotelBook />
9+
);

‎Hotel-booking-App/src/HotelBookApp.css renamed to ‎Hotel-booking-App/src/components/HotelBook/HotelBook.css

+84-23
Original file line numberDiff line numberDiff line change
@@ -187,7 +187,7 @@
187187
.e-semi-bold-header-text {
188188
font-weight: 700;
189189
color: #ec4899;
190-
font-size: 24px;
190+
font-size: 22px;
191191
font-family: "Josefin Sans", serif;
192192
}
193193

@@ -223,7 +223,7 @@
223223

224224
.e-rowtemplate-border-applier {
225225
box-shadow: none;
226-
border: 1px solid #a5b4fc !important;
226+
border-top: 1px solid #a5b4fc !important;
227227
}
228228

229229
.e-room-not-available-cover {
@@ -254,10 +254,6 @@
254254
width: 17px;
255255
}
256256

257-
.e-grid .e-dialog-map {
258-
max-height: none !important;
259-
}
260-
261257
.e-info-container {
262258
padding: 5px;
263259
margin-top: 15px;
@@ -296,6 +292,11 @@
296292

297293
.e-map-text-spacer {
298294
margin-left: 10px;
295+
margin-top: 1px;
296+
}
297+
298+
.e-margin-top-10 {
299+
margin-top: 10px;
299300
}
300301

301302
.e-map-text-styler {
@@ -382,7 +383,11 @@
382383
}
383384

384385
.e-book-details-button {
385-
padding-right: 13px;
386+
padding-right: 65px;
387+
}
388+
389+
.e-padding-right {
390+
padding-right: 50px;
386391
}
387392

388393
.emptyRecordTemplate {
@@ -400,7 +405,7 @@
400405
}
401406

402407
.e-carousel-image-holder-height {
403-
height: 280px;
408+
height: 380px;
404409
}
405410

406411
.e-back-button-carousel-container {
@@ -443,7 +448,7 @@
443448

444449
.e-carouselcomponent-container,
445450
.e-carousel-img-container img {
446-
height: 240px;
451+
height: 340px;
447452
width: 520px;
448453
}
449454

@@ -454,6 +459,7 @@
454459

455460
.e-details-info-container {
456461
display: flex;
462+
flex-direction: row-reverse;
457463
background-color: #ffffff;
458464
margin-top: 30px;
459465
}
@@ -493,6 +499,15 @@
493499

494500
.e-print-info-separator {
495501
margin-top: 10px;
502+
padding-bottom: 10px;
503+
font-weight: 600;
504+
color: #14b8a6;
505+
font-family: "Josefin Sans", serif;
506+
font-size: 20px;
507+
}
508+
509+
.e-print-info-separator.e-print-info-separator-margin-top {
510+
margin-top: 20px;
496511
}
497512

498513
.e-chip-list {
@@ -512,18 +527,64 @@
512527
color: #15803d !important;
513528
}
514529

515-
@import '../node_modules/@syncfusion/ej2-base/styles/tailwind3.css';
516-
@import '../node_modules/@syncfusion/ej2-buttons/styles/tailwind3.css';
517-
@import '../node_modules/@syncfusion/ej2-calendars/styles/tailwind3.css';
518-
@import '../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind3.css';
519-
@import '../node_modules/@syncfusion/ej2-inputs/styles/tailwind3.css';
520-
@import '../node_modules/@syncfusion/ej2-navigations/styles/tailwind3.css';
521-
@import '../node_modules/@syncfusion/ej2-popups/styles/tailwind3.css';
522-
@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind3.css';
523-
@import "../node_modules/@syncfusion/ej2-react-grids/styles/tailwind3.css";
524-
@import "../node_modules/@syncfusion/ej2-icons/styles/tailwind3.css";
525-
@import "../node_modules/@syncfusion/ej2-lists/styles/tailwind3.css";
526-
@import '../node_modules/@syncfusion/ej2-notifications/styles/tailwind3.css';
530+
#hotelamenities,
531+
#roomamenities {
532+
border: 0px;
533+
}
534+
535+
.e-dialog.e-dialog-print-info .e-dlg-header {
536+
text-align: center !important;
537+
width: auto !important;
538+
}
539+
540+
.e-dialog .e-footer-content .e-btn {
541+
margin-right: 10px;
542+
}
543+
544+
.e-dialog.e-dlg-modal.e-popup.e-popup-open.e-dialog-map {
545+
max-width: 800px !important;
546+
max-height: 530px !important;
547+
}
548+
549+
.e-dialog.e-dlg-modal.e-popup.e-popup-open.e-dialog-print-info {
550+
max-width: 950px !important;
551+
max-height: 500px !important;
552+
}
553+
554+
.e-dialog.e-dlg-modal.e-popup.e-popup-open.e-dialog-print-info .e-dlg-header-content {
555+
padding-top: 16px;
556+
}
557+
558+
.e-dialog.e-dlg-modal.e-popup.e-popup-open.e-dialog-print-info .e-footer-content {
559+
padding-bottom: 16px;
560+
}
561+
562+
.e-treeview .e-level-1>.e-text-content .e-list-text {
563+
font-size: 16px;
564+
font-weight: 600;
565+
}
566+
567+
.e-slidercomponent-container {
568+
width: 95%;
569+
margin-left: 6px;
570+
}
571+
572+
.e-upload {
573+
width: 96%;
574+
}
575+
576+
@import '../../../node_modules/@syncfusion/ej2-base/styles/tailwind3.css';
577+
@import '../../../node_modules/@syncfusion/ej2-buttons/styles/tailwind3.css';
578+
@import '../../../node_modules/@syncfusion/ej2-calendars/styles/tailwind3.css';
579+
@import '../../../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind3.css';
580+
@import '../../../node_modules/@syncfusion/ej2-inputs/styles/tailwind3.css';
581+
@import '../../../node_modules/@syncfusion/ej2-navigations/styles/tailwind3.css';
582+
@import '../../../node_modules/@syncfusion/ej2-popups/styles/tailwind3.css';
583+
@import '../../../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind3.css';
584+
@import "../../../node_modules/@syncfusion/ej2-react-grids/styles/tailwind3.css";
585+
@import "../../../node_modules/@syncfusion/ej2-icons/styles/tailwind3.css";
586+
@import "../../../node_modules/@syncfusion/ej2-lists/styles/tailwind3.css";
587+
@import '../../../node_modules/@syncfusion/ej2-notifications/styles/tailwind3.css';
527588

528589
@media only screen and (max-width: 1120px) {
529590

@@ -634,7 +695,7 @@
634695

635696
.e-carouselcomponent-container,
636697
.e-carousel-img-container img {
637-
height: 240px;
698+
height: 340px;
638699
width: 420px;
639700
}
640701
}
@@ -656,7 +717,7 @@
656717

657718
.e-carouselcomponent-container,
658719
.e-carousel-img-container img {
659-
height: 240px;
720+
height: 340px;
660721
width: 320px;
661722
}
662723
}

0 commit comments

Comments
 (0)