From 8f170d3397a7d3d0032d06b029fdad8109baabb2 Mon Sep 17 00:00:00 2001
From: Ethan-clay03 <ethanclay2017@gmail.com>
Date: Mon, 2 Dec 2024 22:18:47 +0000
Subject: [PATCH] Add top listings, add view deals button, to start full search
for deals once database is created
---
app/bookings/routes.py | 18 ++++++------
app/models/listing_images.py | 4 +--
app/models/listings.py | 2 +-
app/static/listings.css | 27 +++++++++++++++++
app/static/listings_slider.css | 0
app/templates/bookings/index.html | 44 ++++++++++++++++++++++++----
app/templates/bookings/listings.html | 31 +-------------------
7 files changed, 79 insertions(+), 47 deletions(-)
create mode 100644 app/static/listings.css
delete mode 100644 app/static/listings_slider.css
diff --git a/app/bookings/routes.py b/app/bookings/routes.py
index 650eeea..39129c8 100644
--- a/app/bookings/routes.py
+++ b/app/bookings/routes.py
@@ -4,14 +4,6 @@ from app.models import Listings, ListingImages
@bp.route('/home')
def index():
- return render_template('bookings/index.html')
-
-@bp.route('/')
-def redirect_index():
- return redirect(url_for('bookings.index'), code=301)
-
-@bp.route('/listings')
-def listings():
listing_ids = []
top_listings = Listings.get_top_listings(5)
@@ -20,4 +12,12 @@ def listings():
top_listing_images = ListingImages.get_selected_main_images(listing_ids)
- return render_template('bookings/listings.html', top_listings=top_listings, top_listing_images=top_listing_images)
+ return render_template('bookings/index.html', top_listings=top_listings, top_listing_images=top_listing_images)
+
+@bp.route('/')
+def redirect_index():
+ return redirect(url_for('bookings.index'), code=301)
+
+@bp.route('/listings')
+def listings():
+ return render_template('bookings/listings.html')
diff --git a/app/models/listing_images.py b/app/models/listing_images.py
index 5429614..a68b52d 100644
--- a/app/models/listing_images.py
+++ b/app/models/listing_images.py
@@ -9,8 +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")
+ # 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 a04b2fb..6c79da1 100644
--- a/app/models/listings.py
+++ b/app/models/listings.py
@@ -13,7 +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")
+ # listing_images = relationship("ListingImages", back_populates="listing_images")
@classmethod
def get_all_listings(cls):
diff --git a/app/static/listings.css b/app/static/listings.css
new file mode 100644
index 0000000..4fc4a6a
--- /dev/null
+++ b/app/static/listings.css
@@ -0,0 +1,27 @@
+/* https://codepen.io/enbee81/pen/popZGoX */
+.deals_text {
+ font-size: 80px;
+ text-transform: uppercase;
+ text-align: center;
+ line-height: 1;
+ font-family: "Work Sans", sans-serif;
+ padding: 20px 20px;
+}
+
+.deals_underline {
+position: relative;
+white-space: nowrap;
+&:after {
+ --deco-height: 0.3125em;
+ content: "";
+ position: absolute;
+ left: 0;
+ right: 0;
+ bottom: calc(var(--deco-height) * -0.625);
+ height: var(--deco-height);
+ background-image: url("data:image/svg+xml,%3Csvg width='100' height='64' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath d='M-17 30.5C-1 22 72-4 54 13 37.9 28.2-2.5 57.5 16 55.5s72-29 104-40' stroke='%2300FDCF' stroke-width='10'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h100v64H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
+ background-size: auto 100%;
+ background-repeat: round;
+ background-position: 0em;
+}
+}
diff --git a/app/static/listings_slider.css b/app/static/listings_slider.css
deleted file mode 100644
index e69de29..0000000
diff --git a/app/templates/bookings/index.html b/app/templates/bookings/index.html
index e0e3f1e..511b121 100644
--- a/app/templates/bookings/index.html
+++ b/app/templates/bookings/index.html
@@ -1,10 +1,44 @@
{% extends 'base.html' %}
{% block content %}
- <div class="content">
- <h2>Top Deals For you</h2>
- <h3>Create slide show of top bookings here<h3>
-
- <div style="margin-left:50px"> <a href= "{{ url_for('bookings.listings') }}" class="button_1">View All Deals</a></div>
+<head>
+ <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='listings.css')}}">
+ <script src="https://cdn.jsdelivr.net/npm/swiffy-slider@1.6.0/dist/js/swiffy-slider.min.js" crossorigin="anonymous" defer></script>
+ <link href="https://cdn.jsdelivr.net/npm/swiffy-slider@1.6.0/dist/css/swiffy-slider.min.css" rel="stylesheet" crossorigin="anonymous">
+</head>
+<div class="content">
+ <div class="deals_text"><span class="deals_underline">Deals for you</span></div>
+ <div class="swiffy-slider slider-item-show2 slider-item-reveal slider-nav-outside slider-nav-round slider-nav-visible slider-indicators-outside slider-indicators-round slider-indicators-dark slider-nav-animation slider-nav-animation-fadein slider-item-first-visible">
+ <ul class="slider-container py-4">
+ {% for listing in top_listings %}
+ <li class="slide-visible">
+ <div class="card shadow h-100">
+ <div class="ratio ratio-16x9">
+ <th>{{top_listing_images[listing.id]}}</th>
+ <img src="{{ url_for('main.upload_file', filename=top_listing_images[listing.id]) }}" class="card-img-top" loading="lazy" alt="Main Image">
+ </div>
+ <div class="card-body p-3 p-xl-4">
+ <h3 class="card-title h5">{{listing.destination_location}}</h3>
+ <p class="card-text">Add Location description here once implemented</p>
+ <div><a href="#" class="btn btn-primary">Book now</a>
+ </div>
+ </div>
+ </div>
+ </li>
+ {% endfor %}
+ </ul>
+
+ <button type="button" class="slider-nav" aria-label="Go left"></button>
+ <button type="button" class="slider-nav slider-nav-next" aria-label="Go left"></button>
+
+ <div class="slider-indicators">
+ <button class="active" aria-label="Go to slide"></button>
+ <button aria-label="Go to slide" class=""></button>
+ <button aria-label="Go to slide" class=""></button>
+ <button aria-label="Go to slide" class=""></button>
+ </div>
</div>
+</div>
+
+<div style="margin-left:50px"> <a href= "{{ url_for('bookings.listings') }}" class="button_1">View All Deals</a></div>
{% endblock %}
\ No newline at end of file
diff --git a/app/templates/bookings/listings.html b/app/templates/bookings/listings.html
index 5754b15..5fba48d 100644
--- a/app/templates/bookings/listings.html
+++ b/app/templates/bookings/listings.html
@@ -7,35 +7,6 @@
<link href="https://cdn.jsdelivr.net/npm/swiffy-slider@1.6.0/dist/css/swiffy-slider.min.css" rel="stylesheet" crossorigin="anonymous">
</head>
<div class="content">
- <div class="swiffy-slider slider-item-show2 slider-item-reveal slider-nav-outside slider-nav-round slider-nav-visible slider-indicators-outside slider-indicators-round slider-indicators-dark slider-nav-animation slider-nav-animation-fadein slider-item-first-visible">
- <ul class="slider-container py-4">
- {% for listing in top_listings %}
- <li class="slide-visible">
- <div class="card shadow h-100">
- <div class="ratio ratio-16x9">
- <th>{{top_listing_images[listing.id]}}</th>
- <img src="{{ url_for('main.upload_file', filename=top_listing_images[listing.id]) }}" class="card-img-top" loading="lazy" alt="Main Image">
- </div>
- <div class="card-body p-3 p-xl-4">
- <h3 class="card-title h5">{{listing.destination_location}}</h3>
- <p class="card-text">Add Location description here once implemented</p>
- <div><a href="#" class="btn btn-primary">Book now</a>
- </div>
- </div>
- </div>
- </li>
- {% endfor %}
- </ul>
-
- <button type="button" class="slider-nav" aria-label="Go left"></button>
- <button type="button" class="slider-nav slider-nav-next" aria-label="Go left"></button>
-
- <div class="slider-indicators">
- <button class="active" aria-label="Go to slide"></button>
- <button aria-label="Go to slide" class=""></button>
- <button aria-label="Go to slide" class=""></button>
- <button aria-label="Go to slide" class=""></button>
- </div>
- </div>
+ <p>Create full listings page here with search functionality</p>
</div>
{% endblock %}
\ No newline at end of file
--
GitLab