diff --git a/src/views/auction/view.slim b/src/views/auction/view.slim index 050e848..c10cf4f 100644 --- a/src/views/auction/view.slim +++ b/src/views/auction/view.slim @@ -1,25 +1,27 @@ -#auction-view - - if auction.images.length >= 1 - .slideshow-container - - auction.images.each do |image| - .slide-container - .numbertext - a.prev onclick="nextSlide(-1)" = "<" - | #{image.image_order+1}/#{auction.images.length} - a.next onclick="nextSlide(1)" = ">" - img src="#{image.url}" +.content-container#auction-view-container + #auction-view + - if auction.images.length >= 1 + .slideshow-container + - auction.images.each do |image| + .slide-container + img src="#{image.url}" + .numbertext + | #{image.image_order+1}/#{auction.images.length} + .next-container + a.prev onclick="nextSlide(-1)" = "<" + a.next onclick="nextSlide(1)" = ">" - .slideshow-button-container - - auction.images.each do |image| - span.dot onclick="setSlide(#{image.image_order})" + .slideshow-button-container + - auction.images.each do |image| + span.dot onclick="setSlide(#{image.image_order})" - #auctioninfo.card - h2 = auction.title + #auctioninfo.card + h2 = auction.title - ul.list-container#category-list - - auction.categories.each do |category| - p = category.name + ul.list-container#category-list + - auction.categories.each do |category| + p = category.name - script src="/js/slides.js" type="text/javascript" + script src="/js/slides.js" type="text/javascript" diff --git a/src/views/stylesheets/style.sass b/src/views/stylesheets/style.sass index c804c98..f6c1566 100644 --- a/src/views/stylesheets/style.sass +++ b/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 - cursor: pointer - position: absolute - 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 + .prev:hover, .next:hover + color: $bg_clr + background-color: #0002 // Animation keyframes @keyframes fade-in