<!--views/front/post.ejs-->
<link rel="stylesheet" href="/styles/front/post.css" />
<script src="/scripts/setPlayer.js"></script>

<script>
    var fb_api = false
    window.fbAsyncInit = function(){
        fb_api = true
    }
</script>

<section class="Post">
    <div class="outer">
        <div class="content">
            <div class="title"><%= data.item.title %></div>
            <div class="wrapper">
                <span class="price">តំលៃៈ $<%= data.item.price %></span>
                <span class="postdate">
                    <%= (new Date(data.item.postdate)).toLocaleDateString('it-IT') %>
                </span>
            </div>
            <div class="phone">ទូរស័ព្ទៈ <%= data.item.phone %></div>
            <div class="location">ទីកន្លែងៈ <%= data.item.location %></div>

            <% if((data.item.video) && (data.item.video !== "[]")){ %>
            <div class="video">
                <div class="screen"></div>
                <div class="playlist"></div>
            </div>
            <script>
                const videos = JSON.parse('<%- data.item.video %>')
                let clicked = 0

                for(let index in videos){
                    let ending = ''
                    if(index == videos.length-1){
                        ending = videos[index].ending
                    }
                    
                    let html = `<div id="part${index}" 
                                class="part" onClick="setScreen(videos[${index}],${index},true)">
                                    ភាគ​ ${++index} ${ending}
                                </div>`
                    $('.playlist').append(html)
                    setScreen(videos[0],0,false)
                }
            </script>
            <% } %>
            <article>
                <%- data.item.content %>
            </article>

            <div id="disqus_thread"></div>
        </div>
        <div class="sidebar">
            <% if(data.items){ %>
                <% for(let item of data.items){ %>
                <a href="/post/<%= item.id %>" class="related_post">
                    <p class="title"><%= item.title %></p>
                    <p class="price">តំលៃៈ $<%= item.price %></p>
                    <p>ទូរស័ព្ទៈ <%= item.phone %></p>
                    <p>ទីកន្លែងៈ <%= item.location %></p>
                </a>
                <% } %>
            <% } %>
        </div>
    </div>
</section>

<script>
    var disqus_config = function () {
    this.page.url = 'https://khmerweb-sale.herokuapp.com/post/<%= data.item.id %>';
    this.page.identifier =  '<%= data.item.id %>';
    };
    
    (function() { // DON'T EDIT BELOW THIS LINE
    var d = document, s = d.createElement('script');
    s.src = 'https://khmer-web-sale.disqus.com/embed.js';
    s.setAttribute('data-timestamp', +new Date());
    (d.head || d.body).appendChild(s);
    })();
</script>
<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>

 

/* static/styles/front/post.css */
.Post .outer{
    display: grid;
    grid-template-columns: calc(70% - 15px) 30%;
    grid-gap: 15px;
    margin-bottom: 45px;
}

.Post .outer .content{
    background: white;
    padding: 20px;
}

.Post .outer .content .title{
    font: 22px/1.5 Oswald,Bayon;
    padding-bottom: 20px;
}

.Post .outer .content .price,
.Post .outer .sidebar .related_post .price{
    color: red;
}

.Post .outer .content .wrapper .postdate{
    float: right;
}

.Post .outer .content .location{
    padding-bottom: 30px;
}

.Post .outer .content .video{
    background: var(--background);
}

.Post .outer .content .video .screen div{
    position: relative;
    padding-top: 56.25%;
}

.Post .outer .content .video .screen div iframe{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.Post .outer .content .video .playlist{
    max-height: 410px;
    overflow: auto;
    margin-bottom: 20px;
}

.Post .outer .content .video .playlist .part{
    text-align: center;
    padding: 10px;
    color: black;
    display: block;
    height: auto;
    border: 1px solid black;
    border-top: none;
}

.Post .outer .content .video .playlist .part:last-child{
    margin-bottom: 0;
}

.Post .outer .content .video .playlist .part:hover{
    cursor: pointer;
    opacity: .7;
}

.Post .outer .content article{
    font: bold 14px/1.5 Courgette,HandWriting;
    color: rgb(90, 90, 90);
}

.Post .outer .sidebar{
    background-color: white;
    padding: 20px;
}

.Post .outer .sidebar .related_post{
    display: block;
    border: 2px solid var(--link);
    padding: 10px;
    margin-bottom: 20px;
}

.Post .outer .sidebar .related_post .title{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media only screen and (max-width: 600px){
    .Post .outer{
        grid-template-columns: 100%;
    }
}

 

Heroku: https://khmerweb-sale.herokuapp.com