tpl/home.twig

   1 {% extends "layout.twig" %}
   2 {% block title %}{% trans "home" %}{% endblock %}
   3 {% block menu %}
   4             <ul id="links">
   5                 <li><a href="./" {% if view == 'home' %}class="current"{% endif %}>{% trans "home" %}</a></li>
   6                 <li><a href="./?view=fav" {% if view == 'fav' %}class="current"{% endif %}>{% trans "favorites" %}</a></li>
   7                 <li><a href="./?view=archive" {% if view == 'archive' %}class="current"{% endif %}>{% trans "archive" %}</a></li>
   8                 <li><a href="./?view=config" {% if view == 'config' %}class="current"{% endif %}>{% trans "config" %}</a></li>
   9                 <li><a href="./?logout" title="{% trans "logout" %}">{% trans "logout" %}</a></li>
  10             </ul>
  11 {% endblock %}
  12 {% block precontent %}
  13             <ul id="sort">
  14                 <li><img src="./tpl/img/up.png" onclick="sort_links('{{ view }}', 'ia');" title="{% trans "by date asc" %}" /> {% trans "by date" %} <img src="./tpl/img/down.png" onclick="sort_links('{{ view }}', 'id');" title="{% trans "by date desc" %}" /></li>
  15                 <li><img src="./tpl/img/up.png" onclick="sort_links('{{ view }}', 'ta');" title="{% trans "by title asc" %}" /> {% trans "by title" %} <img src="./tpl/img/down.png" onclick="sort_links('{{ view }}', 'td');" title="{% trans "by title desc" %}" /></li>
  16             </ul>
  17 {% endblock %}
  18 {% block notices %}
  19             <div class="messages">
  20                 <ul>
  21                 {% for notice in notices %}
  22                     <li>{{ notice.value|e }}</li>
  23                 {% endfor %}
  24                 </ul>
  25             </div>
  26 {% endblock %}
  27 {% block content %}
  28             <div id="content">
  29                 {% for entry in entries %}
  30                     <div id="entry-{{ entry.id|e }}" class="entrie mb2">
  31                         <span class="content">
  32                             <h2 class="h6-like">
  33                                 <a href="index.php?&view=view&id={{ entry.id|e }}">{{ entry.title|e }}</a>
  34                             </h2>
  35                             <div class="tools">
  36                                 <ul>
  37                                     <li>
  38                                         <a title="{% trans "toggle mark as read" %}" class="tool archive {% if entry.is_read == 0 %}archive-off{% endif %}" onclick="toggle_archive(this, {{ entry.id|e }})"><span></span></a></li>
  39                                         <li><a title="{% trans "toggle favorite" %}" class="tool fav {% if entry.is_fav == 0 %}fav-off{% endif %}" onclick="toggle_favorite(this, {{ entry.id|e }})"><span></span></a></li>
  40                                         <li><form method="post" style="display: inline;"><input type="hidden" name="token" id="token" value="{{ token }}" /><input type="hidden" id="action" name="action" value="delete" /><input type="hidden" id="view" name="view" value="{{ view }}" /><input type="hidden" id="id" name="id" value="{{ entry.id|e }}" /><input type="submit" class="delete" title="{% trans "toggle delete" %}" /></form>
  41                                     </li>
  42                                 </ul>
  43                             </div>
  44                             <div class="url">{{ entry.url|e }}</div>
  45                         </span>
  46                     </div>
  47                 {% endfor %}
  48             </div>
  49 {% endblock %}
  50
  51 {% block js %}
  52             <script type="text/javascript" src="./tpl/js/jquery-1.9.1.min.js"></script>
  53             <script type="text/javascript" src="./tpl/js/poche.js"></script>
  54             <script type="text/javascript" src="./tpl/js/jquery.masonry.min.js"></script>
  55             <script type="text/javascript">
  56                 $( window ).load( function()
  57                 {
  58                     var columns    = 3,
  59                         setColumns = function() { columns = $( window ).width() > 640 ? 3 : $( window ).width() > 320 ? 2 : 1; };
  60
  61                     setColumns();
  62                     $( window ).resize( setColumns );
  63
  64                     $( '#content' ).masonry(
  65                     {
  66                         itemSelector: '.entrie',
  67                         columnWidth:  function( containerWidth ) { return containerWidth / columns; }
  68                     });
  69                 });
  70             </script>
  71 {% endblock %}