Refactor auction views

src/views/auction/view.slim

@@ -1,25 +1,27 @@
-#auction-view
+.content-container#auction-view-container
-  - if auction.images.length >= 1
+  #auction-view
-    .slideshow-container
+    - if auction.images.length >= 1
-      - auction.images.each do |image|
+      .slideshow-container
-        .slide-container
+        - auction.images.each do |image|
-          .numbertext
+          .slide-container
-            a.prev onclick="nextSlide(-1)" = "<"
+            img src="#{image.url}" 
-            | #{image.image_order+1}/#{auction.images.length}
+            .numbertext
-            a.next onclick="nextSlide(1)" = ">"
+              | #{image.image_order+1}/#{auction.images.length}
-          img src="#{image.url}" 
 
+        .next-container
+          a.prev onclick="nextSlide(-1)" = "<"
+          a.next onclick="nextSlide(1)" = ">"
 
-    .slideshow-button-container
+      .slideshow-button-container
-      - auction.images.each do |image|
+        - auction.images.each do |image|
-          span.dot onclick="setSlide(#{image.image_order})"
+            span.dot onclick="setSlide(#{image.image_order})"
 
-  #auctioninfo.card
+    #auctioninfo.card
-    h2 = auction.title
+      h2 = auction.title
 
-  ul.list-container#category-list
+    ul.list-container#category-list
-    - auction.categories.each do |category|
+      - auction.categories.each do |category|
-        p = category.name
+          p = category.name
 
 
-  script src="/js/slides.js" type="text/javascript"
+    script src="/js/slides.js" type="text/javascript"

src/views/stylesheets/style.sass

@@ -445,10 +445,13 @@ ul.list-container
   display: flex
   flex-direction: column
 
+#auction-view-container
+  margin-top: 1rem
+  justify-content: unset
 
 #auction-view
   display: grid
-  grid-template-columns: 1fr 2fr
+  grid-template-columns: 1fr 1fr
   grid-template-rows: 1fr 1fr
   grid-template-areas: "im in" "de in"
 
@@ -460,38 +463,40 @@ ul.list-container
 
 .slideshow-container
   grid-area: im
+  width: 40rem
   margin: auto
   .slide-container
     padding: 1rem
+    padding-top: 0
     .numbertext
       text-align: center
     img
       margin: 0 auto
+      width: 100% 
       height: 500px
-      width: auto
-      max-width: 500px
       object-fit: cover
+      border: 4px solid $shadow_clr
+  .next-container
+    display: flex
+    align-items: center
+    justify-content: center
+    .prev, .next 
+      cursor: pointer
+      position: relative
+      width: auto
+      padding: 1px 16px
+      margin: 0 2rem
+      margin-top: -55px
+      color: $fg_clr
+      font-weight: bold
+      font-size: 1.2rem
+      transition: 0.6s ease
+      user-select: none
+      border-radius: $border_radius
 
-  .prev, .next 
+    .prev:hover, .next:hover 
-    cursor: pointer
+      color: $bg_clr
-    position: absolute
+      background-color: #0002
-    top: 50%
-    width: auto
-    padding: 1px 16px
-    margin-top: -22px
-    color: $fg_clr
-    font-weight: bold
-    font-size: 18px
-    transition: 0.6s ease
-    border-radius: 0 3px 3px 0
-    user-select: none
-
-  .next 
-    right: 0
-    border-radius: 3px 0 0 3px
-
-  .prev:hover, .next:hover 
-    background-color: #0022
 
 // Animation keyframes
 @keyframes fade-in