Improved blog section.

sql/02_DATA.SQL

@@ -226,36 +226,51 @@ INSERT INTO text VALUES ('PROJECT_LICENSE_LEGAL',   'eu', 'PROJECT', 'Textu osoa
 
 
 -- PAGE blog
-INSERT INTO text VALUES ('BLOG_TITLE',       'es', 'BLOG', 'Blog', null);
-INSERT INTO text VALUES ('BLOG_TITLE',       'en', 'BLOG', 'Blog', null);
-INSERT INTO text VALUES ('BLOG_TITLE',       'eu', 'BLOG', 'Blog', null);
-INSERT INTO text VALUES ('BLOG_DESCRIPTION', 'es', 'BLOG', '', null); --TODO
-INSERT INTO text VALUES ('BLOG_DESCRIPTION', 'en', 'BLOG', '', null); --TODO
-INSERT INTO text VALUES ('BLOG_DESCRIPTION', 'eu', 'BLOG', '', null); --TODO
-INSERT INTO text VALUES ('BLOG_MORE',        'es', 'BLOG', 'leer más', null);
-INSERT INTO text VALUES ('BLOG_MORE',        'en', 'BLOG', 'read more', null);
-INSERT INTO text VALUES ('BLOG_MORE',        'eu', 'BLOG', 'gehiago irakurri', null);
-INSERT INTO text VALUES ('BLOG_TAGS',        'es', 'BLOG', 'Tags', null);
-INSERT INTO text VALUES ('BLOG_TAGS',        'en', 'BLOG', 'Tags', null);
-INSERT INTO text VALUES ('BLOG_TAGS',        'eu', 'BLOG', 'Tags', null);
-INSERT INTO text VALUES ('BLOG_SEARCH',      'es', 'BLOG', 'Buscar', null);
-INSERT INTO text VALUES ('BLOG_SEARCH',      'en', 'BLOG', 'Search', null);
-INSERT INTO text VALUES ('BLOG_SEARCH',      'eu', 'BLOG', 'Bilatu', null);
-INSERT INTO text VALUES ('BLOG_TAG_CLOUD',   'es', 'BLOG', 'Nube de tags', null);
-INSERT INTO text VALUES ('BLOG_TAG_CLOUD',   'en', 'BLOG', 'Tag Cloud', null);
-INSERT INTO text VALUES ('BLOG_TAG_CLOUD',   'eu', 'BLOG', 'Tag Cloud', null);
-INSERT INTO text VALUES ('BLOG_COMMENTS',    'es', 'BLOG', 'Comentarios', null);
-INSERT INTO text VALUES ('BLOG_COMMENTS',    'en', 'BLOG', 'Comments', null);
-INSERT INTO text VALUES ('BLOG_COMMENTS',    'eu', 'BLOG', 'Comentarios', null);
-INSERT INTO text VALUES ('BLOG_COMMENTS_0',  'es', 'BLOG', 'No hay comentarios aún.', null);
-INSERT INTO text VALUES ('BLOG_COMMENTS_0',  'en', 'BLOG', 'No comments yet.', null);
-INSERT INTO text VALUES ('BLOG_COMMENTS_0',  'eu', 'BLOG', 'No hay comentarios aún.', null);
-INSERT INTO text VALUES ('BLOG_COMMENTS_1',  'es', 'BLOG', 'comentario.', null);
-INSERT INTO text VALUES ('BLOG_COMMENTS_1',  'en', 'BLOG', 'comment.', null);
-INSERT INTO text VALUES ('BLOG_COMMENTS_1',  'eu', 'BLOG', 'comantario.', null);
-INSERT INTO text VALUES ('BLOG_COMMENTS_X',  'es', 'BLOG', 'comentarios.', null);
-INSERT INTO text VALUES ('BLOG_COMMENTS_X',  'en', 'BLOG', 'comments.', null);
-INSERT INTO text VALUES ('BLOG_COMMENTS_X',  'eu', 'BLOG', 'comentarios.', null);
+INSERT INTO text VALUES ('BLOG_TITLE',         'es', 'BLOG', 'Blog', null);
+INSERT INTO text VALUES ('BLOG_TITLE',         'en', 'BLOG', 'Blog', null);
+INSERT INTO text VALUES ('BLOG_TITLE',         'eu', 'BLOG', 'Blog', null);
+INSERT INTO text VALUES ('BLOG_DESCRIPTION',   'es', 'BLOG', '', null); --TODO
+INSERT INTO text VALUES ('BLOG_DESCRIPTION',   'en', 'BLOG', '', null); --TODO
+INSERT INTO text VALUES ('BLOG_DESCRIPTION',   'eu', 'BLOG', '', null); --TODO
+INSERT INTO text VALUES ('BLOG_MORE',          'es', 'BLOG', 'leer más', null);
+INSERT INTO text VALUES ('BLOG_MORE',          'en', 'BLOG', 'read more', null);
+INSERT INTO text VALUES ('BLOG_MORE',          'eu', 'BLOG', 'gehiago irakurri', null);
+INSERT INTO text VALUES ('BLOG_TAGS',          'es', 'BLOG', 'Tags', null);
+INSERT INTO text VALUES ('BLOG_TAGS',          'en', 'BLOG', 'Tags', null);
+INSERT INTO text VALUES ('BLOG_TAGS',          'eu', 'BLOG', 'Tags', null);
+INSERT INTO text VALUES ('BLOG_SEARCH',        'es', 'BLOG', 'Buscar', null);
+INSERT INTO text VALUES ('BLOG_SEARCH',        'en', 'BLOG', 'Search', null);
+INSERT INTO text VALUES ('BLOG_SEARCH',        'eu', 'BLOG', 'Bilatu', null);
+INSERT INTO text VALUES ('BLOG_DETAILS',       'es', 'BLOG', 'Detalles', null);
+INSERT INTO text VALUES ('BLOG_DETAILS',       'en', 'BLOG', 'Details', null);
+INSERT INTO text VALUES ('BLOG_DETAILS',       'eu', 'BLOG', 'Xehentasunak', null);
+INSERT INTO text VALUES ('BLOG_ARCHIVE',       'es', 'BLOG', 'Archivo', null);
+INSERT INTO text VALUES ('BLOG_ARCHIVE',       'en', 'BLOG', 'Archive', null);
+INSERT INTO text VALUES ('BLOG_ARCHIVE',       'eu', 'BLOG', 'Archibo', null);
+INSERT INTO text VALUES ('BLOG_RELATED',       'es', 'BLOG', 'Posts relacionados', null);
+INSERT INTO text VALUES ('BLOG_RELATED',       'en', 'BLOG', 'Related posts', null);
+INSERT INTO text VALUES ('BLOG_RELATED',       'eu', 'BLOG', 'Harramenak', null);
+INSERT INTO text VALUES ('BLOG_SHARE',         'es', 'BLOG', 'Comparte este post', null);
+INSERT INTO text VALUES ('BLOG_SHARE',         'en', 'BLOG', 'Shate this post', null);
+INSERT INTO text VALUES ('BLOG_SHARE',         'eu', 'BLOG', 'Banatu', null);
+INSERT INTO text VALUES ('BLOG_TAG_CLOUD',     'es', 'BLOG', 'Nube de tags', null);
+INSERT INTO text VALUES ('BLOG_TAG_CLOUD',     'en', 'BLOG', 'Tag Cloud', null);
+INSERT INTO text VALUES ('BLOG_TAG_CLOUD',     'eu', 'BLOG', 'Tag Cloud', null);
+INSERT INTO text VALUES ('BLOG_COMMENTS',      'es', 'BLOG', 'Comentarios', null);
+INSERT INTO text VALUES ('BLOG_COMMENTS',      'en', 'BLOG', 'Comments', null);
+INSERT INTO text VALUES ('BLOG_COMMENTS',      'eu', 'BLOG', 'Comentarios', null);
+INSERT INTO text VALUES ('BLOG_COMMENTS_0',    'es', 'BLOG', 'No hay comentarios aún.', null);
+INSERT INTO text VALUES ('BLOG_COMMENTS_0',    'en', 'BLOG', 'No comments yet.', null);
+INSERT INTO text VALUES ('BLOG_COMMENTS_0',    'eu', 'BLOG', 'No hay comentarios aún.', null);
+INSERT INTO text VALUES ('BLOG_COMMENTS_1',    'es', 'BLOG', 'comentario.', null);
+INSERT INTO text VALUES ('BLOG_COMMENTS_1',    'en', 'BLOG', 'comment.', null);
+INSERT INTO text VALUES ('BLOG_COMMENTS_1',    'eu', 'BLOG', 'comantario.', null);
+INSERT INTO text VALUES ('BLOG_COMMENTS_X',    'es', 'BLOG', 'comentarios.', null);
+INSERT INTO text VALUES ('BLOG_COMMENTS_X',    'en', 'BLOG', 'comments.', null);
+INSERT INTO text VALUES ('BLOG_COMMENTS_X',    'eu', 'BLOG', 'comentarios.', null);
+INSERT INTO text VALUES ('BLOG_COMMENTS_YOUR', 'es', 'BLOG', 'Tu comentario...', null);
+INSERT INTO text VALUES ('BLOG_COMMENTS_YOUR', 'en', 'BLOG', 'Your comment...', null);
+INSERT INTO text VALUES ('BLOG_COMMENTS_YOUR', 'eu', 'BLOG', 'Tu comentario...', null);
 
 
 -- PAGE profile
@@ -268,9 +283,9 @@ INSERT INTO text VALUES ('PROFILE_DESCRIPTION',      'eu', 'PROFILE', 'Niri buru
 INSERT INTO text VALUES ('PROFILE_DOWNLOAD_CURRENT', 'es', 'PROFILE', 'Descargar en castellano', null);
 INSERT INTO text VALUES ('PROFILE_DOWNLOAD_CURRENT', 'en', 'PROFILE', 'Download in english', null);
 INSERT INTO text VALUES ('PROFILE_DOWNLOAD_CURRENT', 'eu', 'PROFILE', 'Euzkaraz deskargatu', null);
-INSERT INTO text VALUES ('PROFILE_DOWNLOAD_OTHER', 'es', 'PROFILE', 'Descargar en otros idiomas', null);
-INSERT INTO text VALUES ('PROFILE_DOWNLOAD_OTHER', 'en', 'PROFILE', 'Download in other languages', null);
-INSERT INTO text VALUES ('PROFILE_DOWNLOAD_OTHER', 'eu', 'PROFILE', 'Beste hizkuntzetan deskargatu', null);
+INSERT INTO text VALUES ('PROFILE_DOWNLOAD_OTHER',   'es', 'PROFILE', 'Descargar en otros idiomas', null);
+INSERT INTO text VALUES ('PROFILE_DOWNLOAD_OTHER',   'en', 'PROFILE', 'Download in other languages', null);
+INSERT INTO text VALUES ('PROFILE_DOWNLOAD_OTHER',   'eu', 'PROFILE', 'Beste hizkuntzetan deskargatu', null);
 
 
 -- TABLE project_type

www/blog/index.php

@@ -161,35 +161,79 @@
                     </div> <!-- #main_column -->
                 </div> <!-- #content_cell_main -->
                 <div class='content_cell'  id='content_cell_right'>
-                    <div class='section' id='right_column'>
-                        <h3 class='section_title'><?=text($con, "BLOG_SEARCH", $lang)?></h3>
-                        <div class='entry'>
+                    <div class='section' id='info'>
+                        <h3 class='section_title'><?=text($con, "BLOG_DETAILS", $lang)?></h3>
+                        <div id='info_search' class='entry'>
+                            <h4><?=text($con, "BLOG_SEARCH", $lang)?></h4>
                             <div id='search_panel_inputs'>
                                 <form action='#' onSubmit='event.preventDefault();launchSearch("<?=$lng["search_field_all"]?>");'>
                                     <input id='search_panel_input' class='search_element' type='text' name='query' placeholder='<?=text($con, "BLOG_SEARCH", $lang)?>'/>
                                     <input id='search_panel_submit' class='search_element' type='submit' value='<?=text($con, "BLOG_SEARCH", $lang)?>'/>
                                 </form>
                             </div>
-                        </div> <!-- .entry -->
-                        <div class='entry'>
+                        </div> <!-- #info_search -->
+                        <hr/>
+                        <div id='info_tag_cloud' class='entry'>
                             <h4><?=text($con, "BLOG_TAG_CLOUD", $lang)?></h4>
+                            <div id='cloud'>
 <?php
-                            //Get the most used tag
-                            $q_max = mysqli_query($con, "SELECT max(count) AS max FROM (SELECT count(post) AS count FROM post_tag GROUP BY tag) AS t;");
-                            $r_max = mysqli_fetch_array($q_max);
+                                //Get the most used tag
+                                $q_max = mysqli_query($con, "SELECT max(count) AS max FROM (SELECT count(post) AS count FROM post_tag GROUP BY tag) AS t;");
+                                $r_max = mysqli_fetch_array($q_max);
                                 $max = $r_max["max"];
-                            $q_tag = mysqli_query($con, "SELECT tag, count(post) AS count FROM post_tag GROUP BY tag;");
-                            while($r_tag = mysqli_fetch_array($q_tag)){
-                                $size = round(60 + 100 * $r_tag['count'] / $max);
+                                $q_tag = mysqli_query($con, "SELECT tag, count(post) AS count FROM post_tag GROUP BY tag;");
+                                while($r_tag = mysqli_fetch_array($q_tag)){
+                                    $size = round(60 + 100 * $r_tag['count'] / $max);
 ?>
-                                <a href='<?=$lserver?>/blog/search/tag/<?=$r_tag["tag"]?>'>
-                                    <span style='font-size: <?=$size?>%'><?=text($con, $r_tag["tag"], $lang)?></span>
-                                </a>
+                                    <a href='<?=$lserver?>/blog/search/tag/<?=$r_tag["tag"]?>'>
+                                        <span style='font-size: <?=$size?>%'><?=text($con, $r_tag["tag"], $lang)?></span>
+                                    </a>
 <?php
-                            }
+                                }
 ?>
-                        </div> <!-- .entry -->
-                    </div> <!-- #right_column -->
+                            </div>
+                        </div> <!-- #info_tag_cloud -->
+                        <hr/>
+                        <div id='info_all' class='entry'>
+                            <h4><?=text($con, "BLOG_ARCHIVE", $lang)?></h4>
+<?php
+                            $q_year = mysqli_query($con, "SELECT year(dtime) AS year FROM post WHERE visible = 1 GROUP BY year(dtime) ORDER BY year DESC;");
+                            while($r_year = mysqli_fetch_array($q_year)){
+?>
+                                <div class='year pointer' onClick='toggleElement("year_<?=$r_year["year"]?>");'>
+                                    <img class='slider' id='slid_year_<?=$r_year["year"]?>' src='<?=$server?>/img/misc/slid-right.png' alt='<?=$r_year["year"]?>'/>
+                                    <span class='fake_a'><?=$r_year["year"]?></span>
+                                </div>
+                                <div class='list_year pointer' id='list_year_<?=$r_year["year"]?>'>
+<?php
+                                    $q_month = mysqli_query($con, "SELECT month(dtime) AS month FROM post WHERE visible = 1 AND year(dtime) = $r_year[year] GROUP BY month(dtime) ORDER BY month DESC;");
+                                    while($r_month = mysqli_fetch_array($q_month)){
+?>
+                                        <div class='month pointer' onClick='toggleElement("month_<?=$r_year["year"]?>_<?=$r_month["month"]?>");'>
+                                            <img class='slider' id='slid_month_<?=$r_year["year"]?>_<?=$r_month["month"]?>' src='<?=$server?>/img/misc/slid-right.png' alt='<?=$r_month["month"]?>'/>
+                                            <span class='fake_a'><?=ucfirst(text($con, "MONTH_" . str_pad($r_month["month"], 2, "0", STR_PAD_LEFT), $lang))?></span>
+                                        </div>
+                                        <ul id='list_month_<?=$r_year["year"]?>_<?=$r_month["month"]?>' class='post_list'>
+<?php
+                                            $q_title = mysqli_query($con, "SELECT id, permalink, title FROM post WHERE visible = 1 AND year(dtime) = $r_year[year] AND month(dtime) = '$r_month[month]' ORDER BY dtime DESC;");
+                                            while($r_title = mysqli_fetch_array($q_title)){
+?>
+                                                <li>
+                                                    <a href='<?=$lserver?>/blog/<?=$r_title["permalink"]?>'><?=text($con, $r_title["title"], $lang)?></a>
+                                                </li>
+<?php
+                                            }
+?>
+                                        </ul>
+<?php
+                                    }
+?>
+                                </div> <!-- #list_year_<?=$r_year["year"]?> -->
+<?php
+                            } //while($r_year = mysqli_fetch_array($q_year))
+?>
+                        </div> <!-- #info_all -->
+                    </div> <!-- #info -->
                 </div> <!-- .content_cell -->
              </div> <!-- #content_row -->
          </div> <!-- #content -->

www/blog/post.php

@@ -57,6 +57,7 @@
         <script type='text/javascript'>
 <?php
             include $doc_root . "script/ui.js";
+            include $doc_root . "script/blog.js";
 ?>
         </script>
         <!-- Meta tags -->
@@ -176,7 +177,7 @@
                                 //Comment form
 ?>
                                 <div class='comment' id='comment_new'>
-                                    <textarea id='new_comment_text' name='text' maxlength='1800' onfocus='showCommentIdentification();' placeholder='<?=text($con, "COMMENT_YOUR", $lang)?>'></textarea>
+                                    <textarea id='new_comment_text' name='text' maxlength='1800' onfocus='showCommentIdentification();' placeholder='<?=text($con, "BLOG_COMMENTS_YOUR", $lang)?>'></textarea>
                                     <div id='identification_form'>
                                         <br/>
                                         <input id='new_comment_user' name='user' maxlength='50' type='text' placeholder='<?text($con, "COMMENT_YOUR_NAME", $lang)?>'/>
@@ -196,19 +197,25 @@
                 </div> <!-- .content_cell -->
                 <div id='content_cell_info' class='content_cell'>
                     <div class='section' id='info'>
+                        <h3 class='section_title'><?=text($con, "BLOG_DETAILS", $lang)?></h3>
                         <div id="info_date" class='entry'>
                             <span class='date'><?=format_date($r_post["dtime"], $lang)?></span>
                         </div>
+                        <hr/>
                         <div id="info_share" class='entry'>
+                            <h4><?=text($con, "BLOG_SHARE", $lang)?></h4>
+                            <div id='social'>
 <?php
-                            $q_share = mysqli_query($con, "SELECT id FROM share WHERE visible = 1 ORDER BY idx;");
-                            while ($r_share = mysqli_fetch_array($q_share)){
+                                $q_share = mysqli_query($con, "SELECT id FROM share WHERE visible = 1 ORDER BY idx;");
+                                while ($r_share = mysqli_fetch_array($q_share)){
 ?>
-                                <?=share_link($con, $r_share["id"], $lserver, "$server/blog/$permalink", $lang)?>
+                                    <?=share_link($con, $r_share["id"], $lserver, "$server/blog/$permalink", $lang)?>
 <?php
-                            }
+                                }
 ?>
-                        </div>
+                            </div> <!-- #social -->
+                        </div> <!-- #info_share -->
+                        <hr/>
 <?php
                         $q_tag = mysqli_query($con, "SELECT tag FROM post_tag WHERE post = $id;");
                         if (mysqli_num_rows($q_tag) > 0){
@@ -228,10 +235,10 @@
                                 <span class='tags'><?=$tag_string?></span>
                                 <meta itemprop='keywords' content='<?=$tag_raw?>'/>
                             </div> <!-- #info_tags -->
+                            <hr/>
 <?php
                         } // if (mysqli_num_rows($q_tag) > 0)
 ?>
-                        
 <?php
                         // Previous / next
                         $q_prev = mysqli_query($con, "SELECT id, permalink, title FROM post WHERE id <> $id AND dtime <= '$r_post[dtime]' ORDER BY dtime DESC LIMIT 1;");
@@ -272,15 +279,97 @@
                                     </tr>
                                 </table>
                             </div> <!-- #info_prev_next -->
+                            <hr/>
 <?php
                         } //  if (mysqli_num_rows($q_prev) > 0 || mysqli_num_rows($q_next) > 0)
 ?>
                         <div id='info_related' class='entry'>
-                            TODO
+                            <h4><?=text($con, "BLOG_RELATED", $lang)?></h4>
+                            <ul>
+<?php
+                                // TODO: Truly select related
+                                $q_related = mysqli_query($con, "SELECT permalink, title FROM post WHERE id <> $id ORDER BY rand() LIMIT 3;");
+                                while($r_related = mysqli_fetch_array($q_related)){
+?>
+                                    <li>
+                                        <a href='<?=$lserver?>/blog/<?=$r_related["permalink"]?>'><?=text($con, $r_related["title"], $lang)?></a>
+                                    </li>
+<?php
+                                }
+?>
+                            </ul>
                         </div>
+                        <hr/>
+                        <div id='info_search' class='entry'>
+                            <h4><?=text($con, "BLOG_SEARCH", $lang)?></h4>
+                            <div id='search_panel_inputs'>
+                                <form action='#' onSubmit='event.preventDefault();launchSearch("<?=$lng["search_field_all"]?>");'>
+                                    <input id='search_panel_input' class='search_element' type='text' name='query' placeholder='<?=text($con, "BLOG_SEARCH", $lang)?>'/>
+                                    <input id='search_panel_submit' class='search_element' type='submit' value='<?=text($con, "BLOG_SEARCH", $lang)?>'/>
+                                </form>
+                            </div>
+                        </div> <!-- #info_search -->
+                        <hr/>
+                        <div id='info_tag_cloud' class='entry'>
+                            <h4><?=text($con, "BLOG_TAG_CLOUD", $lang)?></h4>
+                            <div id='cloud'>
+<?php
+                                //Get the most used tag
+                                $q_max = mysqli_query($con, "SELECT max(count) AS max FROM (SELECT count(post) AS count FROM post_tag GROUP BY tag) AS t;");
+                                $r_max = mysqli_fetch_array($q_max);
+                                $max = $r_max["max"];
+                                $q_tag = mysqli_query($con, "SELECT tag, count(post) AS count FROM post_tag GROUP BY tag;");
+                                while($r_tag = mysqli_fetch_array($q_tag)){
+                                    $size = round(60 + 100 * $r_tag['count'] / $max);
+?>
+                                    <a href='<?=$lserver?>/blog/search/tag/<?=$r_tag["tag"]?>'>
+                                        <span style='font-size: <?=$size?>%'><?=text($con, $r_tag["tag"], $lang)?></span>
+                                    </a>
+<?php
+                                }
+?>
+                            </div>
+                        </div> <!-- #info_tag_cloud -->
+                        <hr/>
                         <div id='info_all' class='entry'>
-                            TODO
-                        </div>
+                            <h4><?=text($con, "BLOG_ARCHIVE", $lang)?></h4>
+<?php
+                            $q_year = mysqli_query($con, "SELECT year(dtime) AS year FROM post WHERE visible = 1 GROUP BY year(dtime) ORDER BY year DESC;");
+                            while($r_year = mysqli_fetch_array($q_year)){
+?>
+                                <div class='year pointer' onClick='toggleElement("year_<?=$r_year["year"]?>");'>
+                                    <img class='slider' id='slid_year_<?=$r_year["year"]?>' src='<?=$server?>/img/misc/slid-right.png' alt='<?=$r_year["year"]?>'/>
+                                    <span class='fake_a'><?=$r_year["year"]?></span>
+                                </div>
+                                <div class='list_year pointer' id='list_year_<?=$r_year["year"]?>'>
+<?php
+                                    $q_month = mysqli_query($con, "SELECT month(dtime) AS month FROM post WHERE visible = 1 AND year(dtime) = $r_year[year] GROUP BY month(dtime) ORDER BY month DESC;");
+                                    while($r_month = mysqli_fetch_array($q_month)){
+?>
+                                        <div class='month pointer' onClick='toggleElement("month_<?=$r_year["year"]?>_<?=$r_month["month"]?>");'>
+                                            <img class='slider' id='slid_month_<?=$r_year["year"]?>_<?=$r_month["month"]?>' src='<?=$server?>/img/misc/slid-right.png' alt='<?=$r_month["month"]?>'/>
+                                            <span class='fake_a'><?=ucfirst(text($con, "MONTH_" . str_pad($r_month["month"], 2, "0", STR_PAD_LEFT), $lang))?></span>
+                                        </div>
+                                        <ul id='list_month_<?=$r_year["year"]?>_<?=$r_month["month"]?>' class='post_list'>
+<?php
+                                            $q_title = mysqli_query($con, "SELECT id, permalink, title FROM post WHERE visible = 1 AND year(dtime) = $r_year[year] AND month(dtime) = '$r_month[month]' ORDER BY dtime DESC;");
+                                            while($r_title = mysqli_fetch_array($q_title)){
+?>
+                                                <li>
+                                                    <a href='<?=$lserver?>/blog/<?=$r_title["permalink"]?>'><?=text($con, $r_title["title"], $lang)?></a>
+                                                </li>
+<?php
+                                            }
+?>
+                                        </ul>
+<?php
+                                    }
+?>
+                                </div> <!-- #list_year_<?=$r_year["year"]?> -->
+<?php
+                            } //while($r_year = mysqli_fetch_array($q_year))
+?>
+                        </div> <!-- #info_all -->
                     </div> <!-- #info -->
                 </div> <!-- .content-cell -->
             </div> <!-- #content-row -->

www/css/blog.css

@@ -1,6 +1,6 @@
 /* Blog main page */
 
-dov#content{
+div#content{
     display: table;
 }
 
@@ -13,6 +13,10 @@ div#content div#content_row div.content_cell{
     display: table-cell;
 }
 
+div#content div#content_row div#content_cell_main{
+    width: 75%;
+}
+
 div#post_list img.post_list_image{
     float: left;
     background-color: #ffffff;
@@ -38,19 +42,15 @@ div#post_list span.tags{
     font-style: italic;
 }
 
-/* Post view page */
 
+/* Post view page. */
 div#content_cell_post{
+    /* Post and comments container. */
     width: 75%;
 }
 
-div#content_cell_info{
-    width: 25%;
-    min-width: 8em;
-    max-width: 20em;
-}
-
 div#post img#post_main_image{
+    /* Post main image. */
     display: block;
     max-height: 11em;
     margin: 0.5em auto 1em auto;
@@ -60,6 +60,7 @@ div#post img#post_main_image{
 }
 
 div#post div#image_reel{
+    /* Post secondary images container. */
     overflow-x: scroll;
     border: 0.1em solid #003400;
     border-radius: 0.3em;
@@ -69,6 +70,7 @@ div#post div#image_reel{
 }
 
 div#post div#image_reel img{
+    /* Secondary images of the post. */
     vertical-align: middle;
     max-height: 5em;
     max-width: 7em;
@@ -78,12 +80,31 @@ div#post div#image_reel img{
     background-color: #ffffff;
 }
 
-div#info table#post_details td{
-    width: 50%;
-    padding: 0.5em 1em 0.5em 1em;
+div#content_cell_info{
+    /* post info container. */
+    width: 25%;
+    min-width: 8em;
+    max-width: 20em;
+}
+
+
+/* Right panel */
+div#info hr{
+    margin: 0 5% 0 5%;
+    opacity: 0.3;
+}
+
+div#info h4{
+    margin-top: 0.2em;
+    margin-bottom: 0.2em;
+}
+
+div#info div.entry{
+    margin: 0.2em;
 }
 
 div#info div#info_date{
+    /* Date of the post. */
     text-align: center;
     font-style: italic;
     font-size: 70%;
@@ -91,40 +112,126 @@ div#info div#info_date{
 }
 
 div#info div#info_share{
+    /* Share icons. */
+}
+
+div#info div#info_share div#social{
     text-align: center;
 }
 
 div#info div#info_tags{
+    /* Post tages. */
     font-size: 80%;
     opacity: 90%;
 }
 
-div#info table#prev_next{
+div#info div#info_prev_next{
+    /* Previous / next post. */
+}
+
+div#info div#info_prev_next table#prev_next{
+    /* Previous/next posts links. */
     border-collapse: collapse;
-    margin: 1em auto 1em auto;
+    margin: 0 auto 0 auto;
 }
 
-div#info table#prev_next td{
+div#info div#info_prev_next table#prev_next td{
     width: 50%;
     padding: 0.5em;
 }
 
-div#info table#prev_next td#prev{
+div#info div#info_prev_next table#prev_next td#prev{
     border-right: 0.03em solid #00440088;
     margin-right: 0.5em;
     text-align: right;
 }
 
-div#info table#prev_next td#next{
+div#info div#info_prev_next table#prev_next td#next{
     border-left: 0.03em solid #00440088;
     margin-left: 0.5em;
     text-align: left;
 }
 
-div#info table#prev_next td span.info{
+div#info div#info_prev_next table#prev_next td span.info{
     font-size: 80%;
 }
 
-div#info table#prev_next td span.title{
+div#info div#info_prev_next table#prev_next td span.title{
     font-weight: bold;
 }
+
+div#info div#info_related{
+    /* Related posts. */
+}
+
+div#info div#info_related ul{
+    margin: 0 0 0 0.6em;
+    padding-left: 0.7em;
+}
+
+div#info div#info_related ul li{
+    margin: 0;
+}
+
+div#info div#info_search{
+    /* Post search form. */
+}
+
+div#info div#info_search input#search_panel_input{
+    display: inline-block;
+    width: 60%;
+}
+
+div#info div#info_search input#search_panel_submit{
+    display: inline-block;
+    width: 30%;
+}
+
+div#info div#info_tag_cloud{
+    /* Tag cloud. */
+}
+
+div#info div#info_tag_cloud div#cloud{
+    text-align: center;
+}
+
+div#info div#info_all{
+    /* Post archive. */
+    margin-right: 0;
+    padding-right: 0;
+}
+
+div#info_all div.list_year{
+    /* Year list in the archive.*/
+    margin-left: 1em;
+    max-height: 0em;
+    overflow-y: hidden;
+    transition: max-height 0.6s ease-in-out;
+}
+
+div#info_all ul.post_list{
+    margin-top: 0em;
+    margin-bottom: 0em;
+    max-height: 0em;
+    overflow-y: hidden;
+    transition: max-height 0.6s ease-in-out;
+}
+
+div#info_all ul.post_list li{
+    padding: 0.2em 0 0 0;
+}
+
+div#info_all div.post_list_image_container{
+    text-align: center;
+}
+
+div#info_all img.post_list_image{
+    float: center;
+    max-width: 15em;
+    max-width: 90%;
+    max-height: 9em;
+    margin: 0.5em 1em 0 0.5em;
+    border: 0.15em solid #333333;
+    border-radius: 0.2em;
+    box-shadow: 0 0 0.5em #111111;
+}

www/css/ui.css

@@ -40,6 +40,13 @@ a{
     text-decoration: none;
 }
 
+.fake_a{
+    color: #555555;
+    text-shadow: 0 0 0.5em #7777ff;
+    text-decoration: none;
+}
+
+
 /* Elements fith bold font */
 .bold{
     font-weight: bold;

www/script/blog.js

@@ -0,0 +1,14 @@
+
+function toggleElement(name){
+    if (document.getElementById("list_" + name).clientHeight > 0){
+        document.getElementById("list_" + name).style.maxHeight = '0em';
+        setTimeout(function(){document.getElementById('slid_' + name).src = '/img/misc/slid-right.png';}, 500);
+    }
+    else{
+        document.getElementById("list_" + name).style.maxHeight = '90em';
+        setTimeout(function(){document.getElementById('slid_' + name).src = '/img/misc/slid-down.png';}, 500);
+    }
+    document.getElementById('slid_' + name).style.opacity = '0';
+    setTimeout(function(){document.getElementById('slid_' + name).style.opacity = '1';}, 500);
+}
+