ninefolio/templates/Home/home.html.twig

{% extends "base.html.twig" %}

{% block localstyle %}
    #main {
        padding: 0px; 
        display:none;
        margin-bottom:200px;
    }
    
    {% if app.session.get("appthumbfilter")=="1" %}
    .cssfilter {
        filter: grayscale({{app.session.get("appthumbfiltergrayscale")}}%) opacity({{app.session.get("appthumbfilteropacity")}}%) sepia({{app.session.get("appthumbfiltersepia")}}%);
        transition: -webkit-filter 0.1s;    
    }

    .cssfilter:hover {
        filter: unset;
        -webkit-filter: unset;
        -moz-filter: unset;
        -o-filter: unset;
        -ms-filter: unset;

        -webkit-transition: -webkit-filter 0.1s;
        transition: -webkit-filter 0.1s;    
    }
    {% endif %}
{% endblock %}

{% block body %}

<!-- FOLIOMENU -----------------------------------------------------------------------------------------------------------------------------------------------!-->
    <div class="foliomenu">
        <a href="#top"><img src="{{ asset("uploads/logo/"~app.session.get("logodark")) }}" class="logo"></a>

        <div>
            {% if users is not empty %}
                <i class="fa fa-circle fa-fw"></i> <a href="#membre">Membres</a>&nbsp;
            {% endif %}

            {% if illustrations is not empty %}
            <i class="fa fa-circle fa-fw"></i> <a href="#illustration">Illustrations</a>&nbsp;
            {% endif %}

            {% if not webzines is empty %}
            <i class="fa fa-circle fa-fw"></i> <a href="#webzine">Webzines</a>&nbsp;
            {% endif %}
            
            {% if not links is empty %}
            <i class="fa fa-circle fa-fw"></i> <a href="#link">Liens</a>&nbsp;
            {% endif %}
        </div>

        <div class="float-right">
            {% if app.user %}
                <a href="{{path("app_user_profil")}}">
                    <img src="{{app.user.avatar|urlavatar}}" class="avatar">
                </a>

                {% if is_granted('ROLE_ADMIN') %}
                    <a href={{ path("app_admin") }} class="btn btn-link" title="Configuration">
                        <i class="fa fa-cog fa-fw"></i>
                    </a>
                {% endif %}

                <a href="" data-toggle="modal" data-target="#addmodal">
                    <i class="fa fa-plus fa-fw"></i>
                </a>

                <a href={{ path("app_logout") }} class="btn btn-link" title="Déconnexion">
                    <i class="fa fa-sign-out-alt fa-fw"></i>
                </a>           
            {% else %}
                {% if(appNinegateurl and appNinegatemoderegistration!="none") %}
                    <a href="{{appNinegateurl}}/registration?redirect={{app.request.uri}}" class="btn btn-link" title="Inscription">
                        <i class="fa fa-user-plus fa-fw"></i>    
                    </a>
                {% endif %}

                <a href={{ path("app_login") }} class="btn btn-link" title="Connexion">
                    <i class="fa fa-sign-in-alt fa-fw"></i>
                </a>  
            {% endif %}      
        </div>
    </div>

    <div class="foliotop">
        <a href="#top"><i class="fa fa-chevron-up"></i></a>
    </div>

<!-- HEROHEADER ------------------------------------------------------------------------------------------------------------------------------------------------!-->
    <div id="top" class="heroheader">
        {%if not app.session.get("hero01") is empty %}
            <div class="cssfilter" style="background-image:url(/{{appAlias}}/uploads/hero/{{app.session.get("hero01")}})"></div>
        {%endif%}

        {%if not app.session.get("hero02") is empty %}
            <div class="cssfilter"style="background-image:url(/{{appAlias}}/uploads/hero/{{app.session.get("hero02")}})"></div>
        {%endif%}

        {%if not app.session.get("hero03") is empty %}
            <div class="cssfilter"style="background-image:url(/{{appAlias}}/uploads/hero/{{app.session.get("hero03")}})"></div>
        {%endif%}

        {%if not app.session.get("hero04") is empty %}
            <div class="cssfilter"style="background-image:url(/{{appAlias}}/uploads/hero/{{app.session.get("hero04")}})"></div>
        {%endif%}

        {%if not app.session.get("hero05") is empty %}
            <div class="cssfilter"style="background-image:url(/{{appAlias}}/uploads/hero/{{app.session.get("hero05")}})"></div>
        {%endif%}
    </div>

    <div class="herofloatmenu" style="position: absolute; top: 0px; right: 10px;">
        {% if app.user %}
            <a href="{{path("app_user_profil")}}">
                <img src="{{app.user.avatar|urlavatar}}" class="avatar">
            </a>

            {% if is_granted('ROLE_ADMIN') %}
                <a href={{ path("app_admin") }} class="btn btn-link" title="Configuration">
                    <i class="fa fa-cog fa-fw"></i>
                </a>
            {% endif %}

            <a href="" data-toggle="modal" class="btn btn-link" data-target="#addmodal">
                <i class="fa fa-plus fa-fw"></i>
            </a>


            <a href={{ path("app_logout") }} class="btn btn-link" title="Déconnexion">
                <i class="fa fa-sign-out-alt fa-fw"></i>
            </a>           
        {% else %}
            {% if(appNinegateurl and appNinegatemoderegistration!="none") %}
                <a href="{{appNinegateurl}}/registration?redirect={{app.request.uri}}" class="btn btn-link" title="Inscription">
                    <i class="fa fa-user-plus fa-fw"></i>    
                </a>
            {% endif %}

            <a href={{ path("app_login") }} class="btn btn-link" title="Connexion">
                <i class="fa fa-sign-in-alt fa-fw"></i>
            </a>  
        {% endif %}   
    </div>

    <div class="herobox"></div>
    
    <div class="herotitle row" style="width:100%">        
        <div class="col-lg-2 px-3">
            <h1><a href="#site">{{ (app.session.get("appname")) }}</a></h1>

            <div class="heromenu" >
                {% if not app.session.get("appsubname") is empty %}
                    <i style="font-size:80%;">{{ app.session.get("appsubname") }}</i><br>
                {% endif %}

                <div class="linkmenu" style="clear:both">
                    {% if app.session.get('email') is not empty %}
                    <a href="mailto:{{ app.session.get('email') }}" target="_blank" title="Email"><i class="fas fa-envelope fa-2x"></i></a>
                    {% endif %}            
                    {% if app.session.get('facebook') is not empty %}
                    <a href="{{ app.session.get('facebook') }}" target="_blank" title="Facebook"><i class="fab fa-facebook fa-2x"></i></a>
                    {% endif %}
                    {% if app.session.get('instagram') is not empty %}
                    <a href="{{ app.session.get('instagram') }}" target="_blank" title="Instagram"><i class="fab fa-instagram fa-2x"></i></a>
                    {% endif %}
                    {% if app.session.get('twitter') is not empty %}
                    <a href="{{ app.session.get('twitter') }}" target="_blank" title="Twitter"><i class="fab fa-twitter fa-2x"></i></a>
                    {% endif %}
                    {% if app.session.get('google') is not empty %}
                    <a href="{{ app.session.get('google') }}" target="_blank" title="Google"><i class="fab fa-google-plus fa-2x"></i></a>
                    {% endif %}
                    {% if app.session.get('youtube') is not empty %}
                    <a href="{{ app.session.get('youtube') }}" target="_blank" title="Youtube"><i class="fab fa-youtube fa-2x"></i></a>
                    {% endif %}     
                    <a href="{{ path("app_feedhome") }}" target="_blank" title="RSS"><i class="fa fa-rss-square fa-2x"></i></a>    
                </div>                    

                <div class="catmenu">
                    {% if not users is empty %}
                        <a href="#membre"><i class="fa fa-arrow-circle-right fa-fw facatmenu"></i> Membres</a><br>
                    {% endif %}

                    {% if not illustrations is empty %}
                        <a href="#illustration"><i class="fa fa-arrow-circle-right fa-fw facatmenu"></i> Illustrations</a><br>
                    {% endif %}

                    {% if not webzines is empty %}
                        <a href="#webzine"><i class="fa fa-arrow-circle-right fa-fw facatmenu"></i> Webzines</a><br>
                    {% endif %}

                    {% if not links is empty %}
                        <a href="#link"><i class="fa fa-arrow-circle-right fa-fw facatmenu"></i> Liens</a><br>
                    {% endif %}
                </div>   

                {% if not items is empty %}
                    <div class="itemmenu" style="max-width:360px; display:flex; margin:20px auto 30px auto; flex-wrap: wrap; justify-content: center;">
                        {% for item in items %}
                            {% if item.title|lower != "ninefolio" %}
                                <a href="{{ item.url }}" target="_blank">
                                    <div class="item" style="display:flex; flex-direction: column; align-items: center; font-size:15px; padding:5px; width:90px;">
                                        <img src="{{ item.icon }}" style="width:50px;height:50px">
                                        <span style="margin-top:5px">{{ item.title }}</span>
                                    </div>
                                </a>
                            {% endif %}
                        {% endfor %}
                    </div>
                {% endif %}
            </div>
        </div>

        <div class="col-lg-8 text-center">
            <img src="/{{ appAlias }}/uploads/logo/{{ app.session.get('logodark') }}" style="width:200px; border-radius:100%">
            {% if not app.session.get("appdescription") is empty %}
                <div style="max-width:80%; text-align: justify; font-size:120%; margin:20px auto; padding:15px; background-color:var(--colorbgbodydarkdarker); border-radius:10px; opacity: 0.8;">
                    {{ app.session.get("appdescription")|raw}}
                </div>
            {%endif%}

            {% for user in users %}
                {% if user.hasRole('ROLE_MEMBER') %}
                    {{ render(path("app_home_userhero",{userpseudo:user.slug})) }}
                {% endif %}
            {% endfor %}

            <div style="text-align:center; padding:50px 0px">
                {% set qrCode = qr_code_result(absolute_url(path("app_home"))) %}
                <img src="{{ qrCode.dataUri }}" width="200px" />
            </div>   
        </div>
    </div>

    <div class="herologo">
        
    </div>


<!-- ADDMODAL ------------------------------------------------------------------------------------------------------------------------------------------------------!-->
    {% if app.user %}
        <div id="addmodal" class="modal" tabindex="-1" role="dialog" style="z-index:100000">
            <div class="modal-dialog modal-md" role="document">
                <div class="modal-content" style="margin-top:120px">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    
                    <div class="modal-body" style="display:flex; flex-direction: column;">
                        <a href={{ path("app_illustration_submit",{"by":"user","userid":app.user.id}) }} class="btn btn-link" style="font-size:30px;" title="Créer une Illustration">
                            Ajouter une Illustration
                        </a>

                        <a href={{ path("app_illustration_submits01",{"by":"user","userid":app.user.id}) }} class="btn btn-link" style="font-size:30px;" title="Créer une Illustration">
                            Ajouter des Illustrations en masse
                        </a>

                        <a href={{ path("app_webzine_submit",{"by":"user","userid":app.user.id}) }} class="btn btn-link" style="font-size:30px;" title="Créer un Webzine">
                            Ajouter un Webzine
                        </a>                        
                    </div>            
                </div>
            </div>
        </div>
    {% endif %}
{% endblock %}

{% block localjavascript %}
    $(document).ready(function() {
        $('body').imagesLoaded(function() {
            height=Math.max(500,$(window).height());
            $('.heroheader').height(height);
            himg=$('.herologo img').height();
            $('.herologo').css({ top: (height-himg-50) +'px' });

            $('.heroheader').slick({
                slidesToShow: 1,
                slidesToScroll: 1,
                autoplay: true,
                autoplaySpeed: 6000,
                dots: true,
                touchMove: false,
                pauseOnDotsHover: true,
                fade: true,
                cssEase: 'linear',
                prevArrow: false,
                nextArrow: false,
                customPaging: function(slider, i) {
                    return '<span class="heroheader-dot fa fa-circle fa-fw"></span>';
                }
            });

            $("#main").show();


            resizeThumb();


            $('.grid').masonry({
                columnWidth: '.grid-sizer',
                gutter: '.gutter-sizer',
                itemSelector: '.grid-item',
                percentPosition: true,
                horizontalOrder: false,
            });

            if (location.hash) {
                $(document).scrollTop( $(location.hash).offset().top -60);  
            }            
        });
    });

    $(window).resize(function() {
        $(window).scroll();
        height=Math.max(500,$(window).height());
        $('.heroheader').height(height);
        himg=$('.herologo img').height();
        $('.herologo').css({ top: (height-himg-50) +'px' });
        resizeThumb();
    }); 

    $(window).scroll(function () {
        if($(window).width()>=980) {
            // set distance user needs to scroll before we start fadeIn
            if ($(this).scrollTop() > 300) {
                if($('.foliomenu').is(":hidden")) $('.foliomenu').show();
            } else {
                if($('.foliomenu').is(":visible")) $('.foliomenu').hide();
            }
        }
        else {
            if($('.foliomenu').is(":hidden")) $('.foliomenu').show();
        }

        if ($(this).scrollTop() > 300) {
            if($('.foliotop').is(":hidden")) $('.foliotop').show();
        } else {
            if($('.foliotop').is(":visible")) $('.foliotop').hide();
        }
    });    

    function resizeThumb() {
        $(".grid-item-size").each(function() {
            if(!$(this).hasClass("grid-item-size-noresize")) {
                if($(this).hasClass("grid-item-size-square")) {
                    $(this).height($(this).width());
                }
                else if($(this).hasClass("grid-item-size-proportion")) {
                    var width=$(this).width();
                    var oriwidth=$(this).data("width")
                    if(oriwidth>0) {
                        pourcentage=width*100/oriwidth;
                        height=$(this).data("height")*pourcentage/100;
                        $(this).height(height);
                    }
                    else {
                        $(this).height($(this).width());
                    }
                }
                else {
                    $(this).height($(this).width()*30/21);
                }
            } 
        }); 

        setTimeout(() => {
            $(".userhero").each(function() {
                height=$(this).find(".herouseravatar").height();
                $(this).height(height+60);
                pos=height+60;
                height=$(this).find(".userherocontainer").css({ top: '-'+pos+'px' });
            });
        }, "100");
    }
{% endblock %}