diff --git a/app/models/listing_images.py b/app/models/listing_images.py index fc505e2cb6a2ddac40a307853ae26a9da9fa0a15..5429614e112aacc9b631440cd2fe141531bfc11c 100644 --- a/app/models/listing_images.py +++ b/app/models/listing_images.py @@ -9,6 +9,8 @@ class ListingImages(db.Model): image_location = db.Column(db.String(255), nullable=False) image_description = db.Column(db.String(255), nullable=True) main_image = db.Column(db.SmallInteger(), nullable=False) + listings_id = mapped_column(ForeignKey("listings.id")) + listings = relationship("Listings", back_populates="listing_images") @classmethod def get_selected_main_images(cls, listing_ids): diff --git a/app/models/listings.py b/app/models/listings.py index 3a51845608f4c391273f3f7690a665a2c1899756..a04b2fb92d0c9ad026b929c6ec485dd750384c06 100644 --- a/app/models/listings.py +++ b/app/models/listings.py @@ -13,6 +13,7 @@ class Listings(db.Model): transport_type = db.Column(db.String(255), nullable=False) business_tickets = db.Column(db.Integer(), nullable=False) economy_tickets = db.Column(db.Integer(), nullable=False) + listing_images = relationship("ListingImages", back_populates="listing_images") @classmethod def get_all_listings(cls): diff --git a/app/static/base.css b/app/static/base.css index 717de312bc4e927b00ea074e8ffba79e05f72650..fa23b772afbe97ae1ea88983c8b6f1d1bc074cbc 100644 --- a/app/static/base.css +++ b/app/static/base.css @@ -13,18 +13,26 @@ html, body { color: #FBE9D0; margin-top: 40px; padding: 20px 0; - + align-items: center; } -.footer_column { - float: left; - width: 33.33%; - justify-content: center; + +.footer_row { + display: flex; + justify-content: space-evenly; + width: 100%; } -.footer .copyright { - padding-top: 30px; +.footer > .footer_column { + flex-grow: 1; + padding: 1%; + text-align: center; } +.copyright { + margin-top: 20px; + width: 100%; + text-align: center; +} /* MAIN CONTENT CSS */ .main_content { diff --git a/app/static/bootstrap_overrides.css b/app/static/bootstrap_overrides.css index 81096e64d3c4ecc58565ad6e9096f29e05c3ff52..ae682c84848a20250b40d2f1bca3a290742c5f52 100644 --- a/app/static/bootstrap_overrides.css +++ b/app/static/bootstrap_overrides.css @@ -1,7 +1,11 @@ -.custom-dark-blue-text a { - color: #244855 !important; +.nav_background { + background-color: #244855; } -.custom-light-blue-background { - background-color: #90AEAD !important; +.navbar-dark { + color: #FBE9D0; +} + +.dropdown-menu { + background-color: #90AEAD; } \ No newline at end of file diff --git a/app/static/navigation.js b/app/static/navigation.js new file mode 100644 index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 diff --git a/app/templates/base.html b/app/templates/base.html index 983c0b203890328a3c0c36361b55eb17f38a3d21..c405dd2279ffbd7901eca1b55d54968f71f7d0f2 100644 --- a/app/templates/base.html +++ b/app/templates/base.html @@ -3,7 +3,8 @@ <html> <head> <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='base.css')}}"> - <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"> + <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> + <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script> <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='bootstrap_overrides.css')}}"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Horizon Travels</title> @@ -12,31 +13,31 @@ <div class="main_content"> <div class="wrapper"> {% block navigation %} - <!-- Nav bar taken from https://www.w3schools.com/bootstrap/bootstrap_navbar.asp and modified --> + <!-- Nav bar taken from https://htmljstemplates.com/html/bootstrap-5-navbars and modified --> <div class="navigation"> - <nav class="navbar navbar-expand-lg custom-dark-blue-text custom-light-blue-background"> + <nav class="navbar navbar-expand-lg navbar-dark nav_background p-3"> <div class="container-fluid"> - <a class="navbar-brand" href="#">Navbar</a> - <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> + <a class="navbar-brand" href="#">Horizon Travels</a> + <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> - <div class="collapse navbar-collapse" id="navbarSupportedContent"> - <ul class="navbar-nav me-auto mb-2 mb-lg-0"> + + <div class=" collapse navbar-collapse" id="navbarNavDropdown"> + <ul class="navbar-nav ms-auto "> <li class="nav-item"> - <a class="nav-link active" aria-current="page" href="#">Home</a> + <a class="nav-link mx-2 active" aria-current="page" href="#">Home</a> </li> <li class="nav-item"> - <a class="nav-link" href="#">Link</a> + <a class="nav-link mx-2" href="{{ url_for('bookings.index') }}">Find a booking</a> </li> <li class="nav-item dropdown"> - <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false"> - Dropdown + <a class="nav-link mx-2 dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false"> + Account </a> - <ul class="dropdown-menu" aria-labelledby="navbarDropdown"> - <li><a class="dropdown-item" href="#">Action</a></li> - <li><a class="dropdown-item" href="#">Another action</a></li> - <li><hr class="dropdown-divider"></li> - <li><a class="dropdown-item" href="#">Something else here</a></li> + <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink"> + <li><a class="dropdown-item" href="#">Account Details</a></li> + <li><a class="dropdown-item" href="#">My Bookings</a></li> + <li><a class="dropdown-item" href="#">Log Out</a></li> </ul> </li> </ul> @@ -53,16 +54,21 @@ {% block footer %} <footer> <div class="footer"> - <div class="row"> + <div class="footer_row"> <div class="footer_column"> - <div><a >About Us</div> <div>About Us</div> + <div>Contact Us</div> </div> - <div class="footer_column">Contact</div> - <div class="footer_column">Login</div> + <div class="footer_column"> + <a>About Us</a> + <a>Contact Us</a> + </div> + <div class="footer_column"><a>Login</a></div> </div> - <div class="copyright"> - <p>© 2024-2025 Horizon Travels</p> + <div class="footer_row"> + <div class="copyright"> + <p>© 2024-2025 Horizon Travels</p> + </div> </div> </div> </footer> diff --git a/compose.yaml b/compose.yaml index 077859bc44e4b62d0dfc0e373e0a83e3d276dc2b..781e71f26cc68bb660860bb64ea2345221573e55 100644 --- a/compose.yaml +++ b/compose.yaml @@ -13,20 +13,21 @@ services: networks: - network environment: - DB_HOST: database - DB_USER: user - DB_PASSWORD: userpassword - DB_NAME: mydatabase - + DEVELOPMENT_MODE: ${DEVELOPMENT_MODE} + DATABASE_HOST: ${DATABASE_HOST} + DATABASE_USER: ${DATABASE_USER} + DATABASE_PASSWORD: ${DATABASE_PASSWORD} + DATABASE_NAME: ${DATABASE_NAME} database: image: mysql:8.3 ports: - '3306:3306' environment: - MYSQL_ROOT_PASSWORD: rootpassword - MYSQL_DATABASE: mydatabase - MYSQL_USER: user - MYSQL_PASSWORD: userpassword + MYSQL_ROOT_PASSWORD: ${DATABASE_PASSWORD} + MYSQL_DATABASE: ${DATABASE_NAME} + MYSQL_USER: ${DATABASE_USER} + MYSQL_PASSWORD: ${DATABASE_PASSWORD} + volumes: - mysql_data:/var/lib/mysql networks: