Problem with months?


(Marco) #1

Hi,
I have a problem with the months…

As you can see from the image, date back to 9 months ago:

But the thread, open 4 day ago:

Where is the problem?
I use this change:
In css=> </head>

<script src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.2/owl.carousel.min.js"></script>
<script type="text/javascript">
var createdTiles = false;
    Discourse.Route.reopen({
        activate: function() {
            this._super();
            Em.run.next(function(){
                if(window.location.pathname == "/"){
                        createdTiles = false;
                        createTiles();
                }
            });
        } 
    });

    function createTiles(){
        if(createdTiles === true) return;
        createdTiles = true;
        
        var $listControls = $(".list-controls");
        var html = "<div id='TilesContainer' class='container'><div class='main-slider'><div id='variation' class='owl-carousel'></div></div></div>";
        $listControls.before(html);
        
        var owl = $("#variation");
          owl.owlCarousel({
             jsonPath : '/latest.json', //path to the topics you want to show
             items : 4, //4 items above 1000px browser width
             itemsDesktop : [1000,4], //4 items between 1000px and 901px
             itemsDesktopSmall : [900,3], // 3 betweem 900px and 601px
             itemsTablet: [600,2], //2 items between 600 and 0
             itemsMobile : false, // itemsMobile disabled - inherit from itemsTablet option
                navigation : true,
             pagination: false,
             autoPlay : false,
                     stopOnHover : true,
             jsonSuccess : customDataSuccess
          });
         function customDataSuccess(resp, status, ele){
             
            var tiles = "";
            if (resp.topic_list.topics.length >8)
                var arraylength = 8;
            else
                var arraylength = resp.topic_list.topics.length;    
            for (var i = 0; i < arraylength; i++) {
                var topic = resp.topic_list.topics[i];
                
            
                
                tiles += "<div class='item'>";
                 if(topic.image_url !== null){
                tiles += "<div class='icw-img' style='background-image: url(" + topic.image_url + ")'></div>";
                } else {
                    tiles += "<div class='icw-img' style='background-image: url(//*url for your placeholder image*/)'></div>";
                }
                    tiles += "<a class='tile-hover' href='/t/" + topic.slug + "/" + topic.id + "/last'>";
                        tiles += "<h2 class='tile-title'>" + topic.fancy_title + "</h2>";
                        
                        var d = new Date(topic.bumped_at);    
                        var relative = moment(d, "ddd MMMM DD YYYY hh:mm:ss").fromNow();
                        
                        tiles += "<div class='tile-info'>Updated " + relative + "<br>by <strong>" + topic.last_poster_username + "</strong><br><div class='comment-btn'><span class='fa-stack fa-2x'><i class='fa fa-comment fa-stack-2x'></i><strong class='fa-stack-1x comment-count fa-inverse'>" + topic.posts_count + "</strong></span></div></div>"; //tile
                        
                    tiles += "</a>"; //tile-hover
                tiles += "</div>"; //tile
            }
            
            $("#variation").html(tiles);
        }
    }
</script>

In CSS:

    /* Carousel */
.main-slider{padding:0px 0px 12px;}
.owl-carousel .owl-wrapper:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0}
.owl-carousel{display:none;position:relative;width:100%;-ms-touch-action:pan-y}
.owl-carousel .owl-wrapper{display:none;position:relative;-webkit-transform:translate3d(0px, 0px, 0px)}
.owl-carousel .owl-wrapper-outer{overflow:hidden;position:relative;width:100%}
.owl-carousel .owl-wrapper-outer.autoHeight{-webkit-transition:height 500ms ease-in-out;-moz-transition:height 500ms ease-in-out;-ms-transition:height 500ms ease-in-out;-o-transition:height 500ms ease-in-out;transition:height 500ms ease-in-out}
.owl-carousel .owl-item{float:left;}
.owl-controls .owl-page,.owl-controls .owl-buttons div{cursor:pointer}
.owl-controls{-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:rgba(0,0,0,0)}
.grabbing{cursor:url(https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.2/grabbing.png) 8 8,move}
.owl-buttons .owl-prev,.owl-buttons .owl-next{position:absolute;top:50%;margin-top:-18px;width:23px;height:36px;border-radius:10px;left:-25px;background:url(//talk.polygonalweave.com/uploads/default/89/81cca8f5c0775a90.png) 0 0 no-repeat;font-size:0px}
.owl-buttons .owl-next{left:inherit;right:-25px !important;background-position:-23px 0px !important}
.owl-carousel .owl-wrapper,.owl-carousel .owl-item{-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;-webkit-transform:translate3d(0, 0, 0);-moz-transform:translate3d(0, 0, 0);-ms-transform:translate3d(0, 0, 0)}
#variation .item{position:relative;height:200px;font-size:14px;background:#a1def8;padding:0px;display:block;margin:1px;color:#FFF;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;text-align:center;
          -webkit-box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
  -moz-box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
  box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
}
#variation .item .icw-img{position:absolute;top:0px;left:0px;right:0px;bottom:0px;z-index:0;width:100%;height:100%;-webkit-box-shadow:inset 0 0 50px rgba(0,0,0,0.5);-moz-box-shadow:inset 0 0 50px rgba(0,0,0,0.5);box-shadow:inset 0 0 50px rgba(0,0,0,0.5);background-size:cover;background-position:center;background-repeat:no-repeat;position:relative}
.tile-hover{position:absolute;top:0px;left:0px;right:0px;bottom:0px;padding:10px;color:#fff;text-decoration:none;}
.tile-hover:hover{text-decoration:none;color:#fff;}
.tile-hover h2.tile-title{text-shadow:1px 1px 2px rgba(0,0,0,0.5);font-size:16px;line-height:130%;margin:0px;padding:0px;color:#fff;font-weight:400}
.tile-hover .tile-info{line-height:20px;background-color:#fff;color:#000000;position:absolute;left:0px;right:0px;bottom:0px;padding:10px 10px 10px;text-align:left;-webkit-transition:all 200ms linear;-moz-transition:all 200ms linear;-o-transition:all 200ms linear;transition:all 200ms linear;}
#variation .owl-item .icw-img:after{content:'';position:absolute;top:0;left:0;width:100%;height:100%;opacity:.7;-webkit-transition:all 200ms linear;-moz-transition:all 200ms linear;-o-transition:all 200ms linear;transition:all 200ms linear}
#variation .owl-item:hover .icw-img:after{opacity:.9;}
#variation .owl-item:nth-child(1n+0) .icw-img:after{background-color:#000000;
background: -moz-linear-gradient(top, rgba(0,0,0,0.24) 0%, rgba(0,0,0,0.83) 57%, rgba(0,0,0,0.83) 58%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.24)), color-stop(57%,rgba(0,0,0,0.83)), color-stop(58%,rgba(0,0,0,0.83))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(0,0,0,0.24) 0%,rgba(0,0,0,0.83) 57%,rgba(0,0,0,0.83) 58%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(0,0,0,0.24) 0%,rgba(0,0,0,0.83) 57%,rgba(0,0,0,0.83) 58%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(0,0,0,0.24) 0%,rgba(0,0,0,0.83) 57%,rgba(0,0,0,0.83) 58%); /* IE10+ */
background: linear-gradient(to bottom, rgba(0,0,0,0.24) 0%,rgba(0,0,0,0.83) 57%,rgba(0,0,0,0.83) 58%); /* W3C */
}
#variation .owl-item:nth-child(1n+0):hover .icw-img:after{background-color:rgba(0,0,0,0);
      -webkit-box-shadow: 0 0 4px rgba(0,0,0,.14),0 4px 8px rgba(0,0,0,.28);
    -moz-box-shadow: 0 0 4px rgba(0,0,0,.14),0 4px 8px rgba(0,0,0,.28);
    box-shadow: 0 0 4px rgba(0,0,0,.14),0 4px 8px rgba(0,0,0,.28);
}
#variation .owl-item:nth-child(1n+0) .comment-btn{color:#dc4225;}
#variation .owl-item:nth-child:hover .item, .comment-btn{
           -webkit-box-shadow: 0 0 4px rgba(0,0,0,.14),0 4px 8px rgba(0,0,0,.28);
    -moz-box-shadow: 0 0 4px rgba(0,0,0,.14),0 4px 8px rgba(0,0,0,.28);
    box-shadow: 0 0 4px rgba(0,0,0,.14),0 4px 8px rgba(0,0,0,.28);
}
#variation .owl-item:nth-child(2n+0) .comment-btn{color:#002f4b;}
#variation .owl-item:nth-child(3n+0) .comment-btn{color:#292484;}
#variation .owl-item:nth-child(4n+0) .comment-btn{color:#d38312;}
@media (max-width: 1200px){.main-slider{padding:0px 30px 12px}}

.comment-btn{
      position: absolute;
  top: -25px;
  right: 10px;
  border-radius: 40px;
  width: 60px;
  height: 60px;
  text-shadow:1px 1px 2px rgba(0,0,0,0.5);
    text-align: center;
    font-size:12px;
    -webkit-transition:all 200ms linear;-moz-transition:all 200ms linear;-o-transition:all 200ms linear;transition:all 200ms linear;
}

.comment-count{
    font-size:16px;
    padding-top:2px;
    color: #fff;
}
/* End Carousel */

(Marco) #2

Ehi guys, topic bump ^^