svg

public/styles/css/style.css

@@ -1,3 +1,7 @@
+body {
+    font-size: 20px;
+}
+
 h1{
     padding: 40px 0px 9px 0px;
     border-bottom: 1px solid #eee;
@@ -295,7 +299,6 @@ th.dt-center, td.dt-center { text-align: center; }
 .herotitle {
     text-align: left;
     position:absolute;
-    //width:100%;
     top: 80px;
     left:50px;
     z-index: 9000;
@@ -306,39 +309,6 @@ th.dt-center, td.dt-center { text-align: center; }
     border:none;
 }
 
-.herousers {
-    position: absolute;
-    top: 100px;
-    flex-wrap: wrap;
-    left: 400px;
-    z-index: 10000;
-    display: flex;    
-}
-
-.herousers h3 {
-    width:100%;
-    padding-left:15px;
-}
-
-.herouser {
-    padding:15px;
-    width:250px; 
-    background-color: var(--colorbgbodydark);
-    margin:10px;
-    border-radius:5px;
-    text-align:center;
-}
-
-.herouser img {
-    width:80px;
-    height: 80px;
-}
-
-.herouser h4 {
-    font-size:16px;
-    margin-top:15px;
-}
-
 .heromenu {
     padding-top: 30px;
     font-size: 20px;
@@ -372,7 +342,8 @@ th.dt-center, td.dt-center { text-align: center; }
 }
 
 .herologo img {
-    max-height:200px;
+    height:200px;
+    width:200px;
     border-radius: 100%;
 }
 
@@ -382,15 +353,8 @@ th.dt-center, td.dt-center { text-align: center; }
     .slick-dots { top: 120px; left: 0px; text-align: center; width: 100%; }
     .heromenu .facatmenu {display: none;}
     .catmenu { display:none }
-    .heromenu .linkmenu {zoom:200%}
+    .heromenu .linkmenu {zoom:150%; margin-top: 10px;}
-    .herousers { top:315px; left:0px; width: 100%; justify-content: center; }
+    .herologo img { width:100px; height:100px; }
-    .herousers { text-align: center; }
-    .herousers h3{ padding-left: 0px; }
-    .herouser { width:170px}
-    .herouser img { width:50px;height:50px}
-    .herofloatmenu a {
-        font-size: 40px;
-    }
 
     .herofloatmenu .avatar {
         height: 40px;
@@ -404,7 +368,7 @@ th.dt-center, td.dt-center { text-align: center; }
 .grid-item-size-2  { width: 20%;  margin-bottom: 0%;float:left;}
 .grid-item-size-3  { width: 30%;  margin-bottom: 0%;float:left;}
 .grid-item-size-4  { width: 40%;  margin-bottom: 0%;float:left;}
-.grid-item-size-5  { width: 40%;  margin-bottom: 0%;float:left;}
+.grid-item-size-5  { width: 50%;  margin-bottom: 0%;float:left;}
 .grid-item-size-6  { width: 60%;  margin-bottom: 0%;float:left;}
 .grid-item-size-7  { width: 70%;  margin-bottom: 0%;float:left;}
 .grid-item-size-8  { width: 80%;  margin-bottom: 0%;float:left;}
@@ -412,9 +376,12 @@ th.dt-center, td.dt-center { text-align: center; }
 .grid-item-full  { width: 100%;  margin-bottom: 0%; font-size:20px;float:left; }
 .grid-item-full h1 {margin: 0; border:none; padding: 20px 0px 0px 10px; }
 .gutter-sizer  { width: 0%;float:left; }
+.member{display:flex; flex-direction: column; align-items: center;}
+.member img{border-radius:100%;width:60px; height: 60px;}
 @media (max-width: 980px) {
-    .grid-sizer { width:  50%;  margin-bottom: 0%;}
+    .grid-sizer { width:  10%;  margin-bottom: 0%;}
     .grid-item-size  { width:  50%;  margin-bottom: 0%;}
+    .grid-item-size-small-3 { width: 30%}
 }
 
 

src/Controller/HomeController.php

@@ -14,7 +14,7 @@ class HomeController extends AbstractController
         $em = $this->getDoctrine()->getManager();
 
         $users = $em->getRepository("App:User")->findBy([],["pseudo"=>"ASC"]);
-        $categorys = $em->getRepository("App:Category")->findBy(["user"=>null]);
+        $illustrations = $em->getRepository("App:Illustration")->findAll();
         $links = $em->getRepository("App:Link")->findBy(["user"=>null]);
         $webzines = $em->getRepository("App:Webzine")->findBy(["user"=>null], ['set' => 'ASC', 'order' => 'ASC']);
         
@@ -23,7 +23,7 @@ class HomeController extends AbstractController
             "usesidebar"    => false,
             "usemonocolor"  => true,
             "users"         => $users,
-            "categorys"     => $categorys,
+            "illustrations" => $illustrations,
             "links"         => $links,
             "webzines"      => $webzines
         ]);

templates/Home/home.html.twig

@@ -24,26 +24,6 @@
         transition: -webkit-filter 0.1s;    
     }
     {% endif %}
-
-    {% for category in categorys|sort((a, b) => a.order <=> b.order) %}    
-        {% if category.usecategoryconfig and category.appthumbfilter %}
-            .cssfilter-{{category.id}} {
-                filter: grayscale({{category.appthumbfiltergrayscale}}%) opacity({{category.appthumbfilteropacity}}%) sepia({{category.appthumbfiltersepia}}%);
-                transition: -webkit-filter 0.1s;    
-            }
-
-            .cssfilter-{{category.id}}: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 %}
-    {% endfor %}
 {% endblock %}
 
 {% block body %}
@@ -54,16 +34,12 @@
     <a href="#top"><img src="/{{ appAlias }}/uploads/logo/{{ app.session.get("logodark") }}" class="logo"></a>
 
     <div>
-        {% for category in categorys|sort((a, b) => a.order <=> b.order) %}
+        <i class="fa fa-circle fa-fw"></i> <a href="#membre">Membres</a>&nbsp;
-            {% if not category.illustrations is empty %}
+        <i class="fa fa-circle fa-fw"></i> <a href="#illustration">Illustrations</a>&nbsp;
-                <i class="fa fa-circle fa-fw"></i> <a href="#{{ category.name }}">{{category.name}}</a>&nbsp;
-            {% endif %}
-        {% endfor %}
         {% if not webzines is empty %}
         <i class="fa fa-circle fa-fw"></i> <a href="#webzine">Webzines</a>&nbsp;
         {% endif %}
         <i class="fa fa-circle fa-fw"></i> <a href="#link">Liens</a>&nbsp;
-        <i class="fa fa-circle fa-fw"></i> <a href="#contact">Contact</a>&nbsp;
     </div>
 
     <div class="float-right">
@@ -173,11 +149,8 @@
             </div>                    
 
             <div class="catmenu">
-                {% for category in categorys|sort((a, b) => a.order <=> b.order) %}
+                <a href="#membre"><i class="fa fa-arrow-circle-right fa-fw facatmenu"></i> Membres</a><br>
-                    {% if not  category.illustrations is empty %}
+                <a href="#illustration"><i class="fa fa-arrow-circle-right fa-fw facatmenu"></i> Illustrations</a><br>
-                        <a href="#{{ category.name }}"><i class="fa fa-arrow-circle-right fa-fw facatmenu"></i> {{category.name}}</a><br>
-                    {% endif %}
-                {% endfor %}
 
                 {% if not webzines is empty %}
                     <a href="#webzine"><i class="fa fa-arrow-circle-right fa-fw facatmenu"></i> Webzines</a><br>
@@ -186,47 +159,83 @@
                 {% if not links is empty %}
                     <a href="#link"><i class="fa fa-arrow-circle-right fa-fw facatmenu"></i> Liens</a><br>
                 {% endif %}
-
-                <a href="#contact"><i class="fa fa-arrow-circle-right fa-fw facatmenu"></i> Contact</a><br>
             </div>   
         </div>
     </div>
 
-    <div class="herousers">
-        <h3>Membres</h3>
-        {% for user in users %}
-            <div class="herouser">
-                <a href="{{path("app_home_user",{userpseudo:user.slug})}}">
-                    <img src="/{{ appAlias }}/uploads/avatar/{{ user.avatar }}" class="avatar"><br>
-                    <h4>{{user.pseudo}}</h4>
-                </a>
-            </div>
-        {% endfor %}
-        </div>
-
     <div class="herologo">
         <img src="/{{ appAlias }}/uploads/logo/{{ app.session.get('logodark') }}">
     </div>
 
+
 <!-- GRID ------------------------------------------------------------------------------------------------------------------------------------------------------!-->
-    {% set style="margin:30px" %}
+    <div style="max-width:1000px; margin:30px auto;">
-    {% if app.session.get("appmaxthumbwidth")!="0" %}
+        <div class="grid" style="margin:30px">
-        {% set style="max-width:"~app.session.get("appmaxthumbwidth")~"px; margin:30px auto;" %}
-    {% endif %}
-    <div class="grid" style="{{ style }}">
             <div class="grid-sizer"></div>
             <div class="gutter-sizer"></div>
 
-        {% for category in categorys|sort((a, b) => a.order <=> b.order) %}
+<!-- SITE ------------------------------------------------------------------------------------------------------------------------------------------------------!-->
-            {% if not category.illustrations is empty %}
+            <div>
-                <div id="{{ category.name }}" class="grid-item grid-item-full"><h1 class="mt-5">{{ category.name }}</h1></div>
+                <div id="site" class="grid-item grid-item-size grid-item-size-3 grid-item-size-square cssfilter" style="height:200px;background-position: center; background-size: cover; background-image: url(/{{ appAlias }}/uploads/image/{{ app.session.get("imgcontact")}});">
-                {% for illustration in category.illustrations %}
+                </div>
+                
+                <div class="grid-item grid-item-size grid-item-size-6 grid-item-size-noresize" style="padding:0px 15px;">
+                    <h1 style="border:none; padding:0px;">{{ app.session.get("appname")}}</h1>
+                    
+                    {% if not app.session.get("appsubname") is empty %}
+                        {{ app.session.get("appsubname")}}<br>
+                    {%endif%}
+
+                    {% if not app.session.get("appdescription") is empty %}
+                       <br>{{ app.session.get("appdescription")|raw}}
+                    {%endif%}
+                    
+                    {% if app.session.get('email') is not empty or app.session.get('facebook') is not empty or app.session.get('instagram') is not empty or app.session.get('twitter') is not empty or app.session.get('google') is not empty or app.session.get('youtube') is not empty %}
+                        <br><br>
+                    {% endif %}
+
+                    {% if app.session.get('email') is not empty %}
+                    <i class="fas fa-envelope"></i> Email = <a href="mailto:{{ app.session.get('email') }}" target="_blank" title="Email">{{ app.session.get('email') }}</a><br>
+                    {% endif %}            
+                    {% if app.session.get('facebook') is not empty %}
+                    <i class="fab fa-facebook"></i> Facebook = <a href="{{ app.session.get('facebook') }}" target="_blank" title="Facebook">{{ app.session.get('facebook') }}</a><br>
+                    {% endif %}
+                    {% if app.session.get('instagram') is not empty %}
+                    <i class="fab fa-instagram"></i> Instagram = <a href="{{ app.session.get('instagram') }}" target="_blank" title="Instagram">{{ app.session.get('instagram') }}</a><br>
+                    {% endif %}
+                    {% if app.session.get('twitter') is not empty %}
+                    <i class="fab fa-twitter"></i> Twitter = <a href="{{ app.session.get('twitter') }}" target="_blank" title="Twitter">{{ app.session.get('twitter') }}</a><br>
+                    {% endif %}
+                    {% if app.session.get('google') is not empty %}
+                    <i class="fab fa-google-plus"></i> Google = <a href="{{ app.session.get('google') }}" target="_blank" title="Google">{{ app.session.get('google') }}</a><br>
+                    {% endif %}
+                    {% if app.session.get('youtube') is not empty %}
+                    <i class="fab fa-youtube"></i> Youtube = <a href="{{ app.session.get('youtube') }}" target="_blank" title="Youtube">{{ app.session.get('youtube') }}</a><br>
+                    {% endif %}         
+                </div>
+            </div>
+
+<!-- MEMBRE ------------------------------------------------------------------------------------------------------------------------------------------------------!-->
+            <div>
+                <div id="membre" class="grid-item grid-item-full"><h1 class="mt-5 mb-3">Membres</h1></div>
+                
+                {% for user in users %}
+                    <div class="grid-item grid-item-size grid-item-size-2 grid-item-size-small-3 grid-item-size-noresize" style="padding:0px 15px;">
+                        <a class="member" href="{{path("app_home_user",{userpseudo:user.slug})}}">
+                            <img src="/{{ appAlias }}/uploads/avatar/{{ user.avatar }}">
+                            {{user.pseudo}}
+                        </a>
+                    </div>
+                {% endfor %}
+            </div>
+
+<!-- ILLUSTRATION ------------------------------------------------------------------------------------------------------------------------------------------------------!-->
+            <div>
+                <div id="illustration" class="grid-item grid-item-full"><h1 class="mt-5">Illustrations</h1></div>
+
+                {% for illustration in illustrations %}
                     {% set appthumbwidth=app.session.get("appthumbwidth") %}
                     {% set appthumbheight=app.session.get("appthumbheight") %}
-                    {% if category.usecategoryconfig %}
-                        {% set appthumbwidth=category.appthumbwidth %}
-                        {% set appthumbheight=category.appthumbheight %}
-                    {% endif %}
 
                     {% if appthumbwidth==0 %}
                         {% set class="" %}    
@@ -266,15 +275,15 @@
                         {% set source="thumbori_"~illustration.illustration %}
                     {% endif %}
 
-                    <a href="{{ path("app_illustration_view",{"idcat":category.id,"id":illustration.id}) }}">
+                    <a href="{{ path("app_illustration_view",{"idcat":illustration.category.id,"id":illustration.id}) }}">
-                        <div id="illustration{{illustration.id}}" class="grid-item grid-item-size {{class}} cssfilter cssfilter-{{category.id}} no-cache-bg" data-width="{{illustration.width}}"  data-background-image="/{{ appAlias }}/uploads/illustration/{{source}}"  data-height="{{illustration.height}}" style="height:auto;background-position: center ; background-size: cover; background-image: url(/{{ appAlias }}/uploads/illustration/{{source}}");">
+                        <div id="illustration{{illustration.id}}" class="grid-item grid-item-size {{class}} cssfilter no-cache-bg" data-width="{{illustration.width}}"  data-background-image="/{{ appAlias }}/uploads/illustration/{{source}}"  data-height="{{illustration.height}}" style="height:auto;background-position: center ; background-size: cover; background-image: url(/{{ appAlias }}/uploads/illustration/{{source}}");">
                         </div>
                     </a>
                 {% endfor %}        
-            {% endif %}
+            </div>
-        {% endfor %}
 
 <!-- WEBZINE ------------------------------------------------------------------------------------------------------------------------------------------------------!-->
+            <div>
                 {% if not webzines is empty %}
                     <div id="webzine" class="grid-item grid-item-full"><h1 class="mt-5">Webzines</h1></div>
                 {% endif %}
@@ -298,8 +307,10 @@
                         </a>
                     {% endif %}
                 {% endfor %}
+            </div>
 
 <!-- LINK ------------------------------------------------------------------------------------------------------------------------------------------------------!-->
+            <div>
                 {% if not webzines is empty %}
                     <div id="link" class="grid-item grid-item-full"><h1 class="mt-5">Liens</h1></div>
                     
@@ -312,51 +323,13 @@
                         {% endfor %}
                     </div>
                 {% endif %}
-
-<!-- CONTACT ------------------------------------------------------------------------------------------------------------------------------------------------------!-->
-        <div id="contact" class="grid-item grid-item-full"><h1 class="mt-5">Contact</h1></div>
-        
-        <div class="grid-item grid-item-size grid-item-size-3 grid-item-size-square cssfilter" style="height:200px;background-position: center; background-size: cover; background-image: url(/{{ appAlias }}/uploads/image/{{ app.session.get("imgcontact")}});">
-
             </div>
 
-        <div class="grid-item grid-item-size grid-item-size-6 grid-item-size-noresize" style="padding:0px 15px;">
+            <div id="bottom" class="grid-item grid-item-full" style="height:300px">
-            <h3>{{ app.session.get("appname")}}</h3>
-            {% if not app.session.get("appsubname") is empty %}
-                {{ app.session.get("appsubname")}}<br>
-            {%endif%}
-            {% if not app.session.get("appdescription") is empty %}
-                
-                <small><br>{{ app.session.get("appdescription")|raw}}</small><br>
-                
-            {%endif%}
-
-            <br>
-            
-            {% if app.session.get('email') is not empty %}
-            <i class="fas fa-envelope"></i> Email = <a href="mailto:{{ app.session.get('email') }}" target="_blank" title="Email">{{ app.session.get('email') }}</a><br>
-            {% endif %}            
-            {% if app.session.get('facebook') is not empty %}
-            <i class="fab fa-facebook"></i> Facebook = <a href="{{ app.session.get('facebook') }}" target="_blank" title="Facebook">{{ app.session.get('facebook') }}</a><br>
-            {% endif %}
-            {% if app.session.get('instagram') is not empty %}
-            <i class="fab fa-instagram"></i> Instagram = <a href="{{ app.session.get('instagram') }}" target="_blank" title="Instagram">{{ app.session.get('instagram') }}</a><br>
-            {% endif %}
-            {% if app.session.get('twitter') is not empty %}
-            <i class="fab fa-twitter"></i> Twitter = <a href="{{ app.session.get('twitter') }}" target="_blank" title="Twitter">{{ app.session.get('twitter') }}</a><br>
-            {% endif %}
-            {% if app.session.get('google') is not empty %}
-            <i class="fab fa-google-plus"></i> Google = <a href="{{ app.session.get('google') }}" target="_blank" title="Google">{{ app.session.get('google') }}</a><br>
-            {% endif %}
-            {% if app.session.get('youtube') is not empty %}
-            <i class="fab fa-youtube"></i> Youtube = <a href="{{ app.session.get('youtube') }}" target="_blank" title="Youtube">{{ app.session.get('youtube') }}</a><br>
-            {% endif %}         
-            
         </div>    
     </div>
     
 
-
 {% endblock %}
 
 {% block localjavascript %}
@@ -386,7 +359,8 @@ window.onload = function() {
         $('body').imagesLoaded(function() {
             height=Math.max(500,$(window).height());
             $('.heroheader').height(height);
-            $('.herologo').css({ top: (height-250) +'px' });
+            himg=$('.herologo img').height();
+            $('.herologo').css({ top: (height-himg-50) +'px' });
 
             $('.heroheader').slick({
                 slidesToShow: 1,
@@ -431,9 +405,9 @@ window.onload = function() {
         $(window).scroll();
         height=Math.max(500,$(window).height());
         $('.heroheader').height(height);
-        $('.herologo').css({ top: (height-250) +'px' });
+        himg=$('.herologo img').height();
+        $('.herologo').css({ top: (height-himg-50) +'px' });
         resizeThumb();
-
     }); 
 
     $(window).scroll(function () {

templates/Home/user.html.twig

@@ -381,7 +381,8 @@ window.onload = function() {
         $('body').imagesLoaded(function() {
             height=Math.max(500,$(window).height());
             $('.heroheader').height(height);
-            $('.herologo').css({ top: (height-250) +'px' });
+            himg=$('.herologo img').height();
+            $('.herologo').css({ top: (height-himg-50) +'px' });
 
             $('.heroheader').slick({
                 slidesToShow: 1,
@@ -426,9 +427,9 @@ window.onload = function() {
         $(window).scroll();
         height=Math.max(500,$(window).height());
         $('.heroheader').height(height);
-        $('.herologo').css({ top: (height-250) +'px' });
+        himg=$('.herologo img').height();
+        $('.herologo').css({ top: (height-himg-50) +'px' });
         resizeThumb();
-
     });  
 
     $(window).scroll(function () {