Zoom on hover and shadows to cards

Author: goranmrd

main/templates/main/index.html

@@ -36,11 +36,11 @@ <h1 class="text-center">Make your search</h1>
     </div>
     <hr>
     {% if items %}
-        <div class="row">
+        <div class="row items">
             {% for item in items %}
             <div class="col-xs-12 col-sm-12 col-md-6 col-lg-4 pb-2 d-flex align-items-stretch justify-content-center">
                 <div class="card" style="width: 18rem;">
-                    <img class="card-img-top" src="{{ item.image }}" alt="Card image cap">
+                    <a href="{{item.link}" target="_blank"><img class="card-img-top" src="{{ item.image }}" alt="Card image cap"></a>
                     <div class="card-body">
                         <h5 class="card-title"><a href="{{item.link}}" target="_blank">{{ item.name }}</a></h5>
                         <p class="card-text">{{ item.condition }}</p>

main/views.py

@@ -9,11 +9,13 @@ class Index(ListView):
     context_object_name = "items"
     template_name = "main/index.html"
 
+    # 2. Pass queryset to templates
     def get_context_data(self, *args, **kwargs):
         context = super(Index, self).get_context_data(*args, **kwargs)
         context['queryset'] = self.queryset
         return context    
-
+    
+    # 1. Get search form data, scrape results and pass it to queryset
     def get_queryset(self):
         base_url = "https://www.ebay.com/sch/parser.html?_from=R40&_nkw={item}&_ipg=25"
         prices_url = "&_udlo={price_low}&_udhi={price_high}"
@@ -38,12 +40,14 @@ def __init__(self, base_url=None):
         self.base_url = base_url
         self.queryset[:] = []
 
+    # Start scraping 
     def run(self):
-        
         try:
+            # 2. Create soup with make_soup method (bs = BeautifulSoup)
             bs = self.make_soup(self.base_url)
             if not bs.get('error'):
                 rows = bs.find_all('div', class_="s-item__wrapper")[:10]
+                # 2.1 Loop through soup rows and parse them with parse_rows method
                 for parser in rows:
                     self.parse_rows(parser)
             else:
@@ -52,6 +56,7 @@ def run(self):
             print(error)
         return self.queryset
 
+    # 3. Parse soup from make_soup method
     def parse_rows(self, parser):
         name = parser.find('h3', class_="s-item__title").text
         link = parser.find('a', class_="s-item__link").get('href')
@@ -63,6 +68,7 @@ def parse_rows(self, parser):
             image = soup.find('img', {'id': "icImg"}).get('src')
         self.queryset.append(dict(name=name,link=link,condition=condition,price=price,image=image))
 
+    # 1. Make soup method
     def make_soup(self, url):
         headers = {'Accept': '*/*',
                    'Accept-Encoding': 'gzip, deflate, sdch',

static/css/style.css

@@ -7,7 +7,7 @@ body {
     margin: 0;
     height: 100%;
     background: rgb(12,17,98);
-background: linear-gradient(0deg, rgba(12,17,98,0.8550770650056898) 0%, rgba(9,9,121,0.8130602582830007) 6%, rgba(0,212,255,0.9251050762101716) 100%);
+    background: linear-gradient(0deg, rgba(12,17,98,0.8550770650056898) 0%, rgba(9,9,121,0.8130602582830007) 6%, rgba(0,212,255,0.9251050762101716) 100%);
     background-repeat: no-repeat;
     background-attachment: fixed;
 }
@@ -35,3 +35,22 @@ h1, .price-range {
     font-family: 'Kalam', cursive;
     padding-top: 15px;
 }
+
+.card {
+    -webkit-box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.75);
+    -moz-box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.75);
+    box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.75);
+    transition: all .5s ease;
+}
+
+.card:hover {
+    webkit-box-shadow: 3px 3px 8px 1px rgba(0,0,0,0.75);
+    -moz-box-shadow: 3px 3px 8px 1px rgba(0,0,0,0.75);
+    box-shadow: 3px 3px 8px 1px rgba(0,0,0,0.75);
+    transform: scale(1.1);
+    z-index: 999;
+}
+
+.items {
+    padding-bottom: 25px;
+}

static/js/main.js

@@ -25,7 +25,7 @@ function startDictation() {
     }
   }
 
-// remove URL parameters ?  
+// remove URL parameters ?
 $(document).ready(function(){
     var uri = window.location.toString();
     if (uri.indexOf("?") > 0) {