[TWIG] Microformats added to timeline, note's view and media. Should be backwards compatiblr as well.

Signed-off-by: Eliseu Amaro <mail@eliseuama.ro>

public/assets/css/right/right.css

@@ -29,4 +29,15 @@
 
     width: 100%;
     padding: var(--small-size);
+}
+
+input[type="file"] {
+    font-family: var(--display-font);
+}
+
+.custom-file-upload {
+    border: 1px solid #ccc;
+    display: inline-block;
+    padding: 6px 12px;
+    cursor: pointer;
 }

templates/network/public.html.twig

@@ -20,6 +20,7 @@
 {% endblock %}
 
 {% block body %}
+
     <div class="content">
 
         <div class="navigation">
@@ -59,7 +60,8 @@
             </nav>
         </div>
 
-        <div class="timeline">
+        {# Backwards compatibility with hAtom 0.1 #}
+        <div class="h-feed hfeed timeline">
             <div class="notes">
                 {% if notes is defined and notes is not empty %}
                     {% for conversation in notes %}

templates/note/view.html.twig

@@ -1,10 +1,11 @@
-<div class="note">
+<div class="h-entry hentry note">
     <div class="note-info">
         {% set nickname = note.getActorNickname() %}
 
-        <a href="{{ path('settings_avatar') }}">
-            <img class="avatar" src="{{ note.getAvatarUrl() }}" alt="{{ nickname }}'s avatar">
-            <b>{{ nickname }}</b>
+        <a class="u-url" href="{{ path('settings_avatar') }}">
+            {# Microformat's h-card properties indicates a face icon is a "u-logo" #}
+            <img class="u-logo avatar" src="{{ note.getAvatarUrl() }}" alt="{{ nickname }}'s avatar">
+            <b class="p-nickname">{{ nickname }}</b>
         </a>
 
         {% set reply_to = note.getReplyToNickname() %}
@@ -12,7 +13,7 @@
             {% trans with {'%name%': reply_to} %} in reply to %name% {% endtrans %}
         {% endif %}
     </div>
-    <div class="note-content">
+    <div class="e-content entry-content note-content">
         {% block markdown %}
             {% apply markdown_to_html %}
                 {{ note.getContent() }}
@@ -39,7 +40,7 @@
         {# {% endif %} #}
     </div>
     {% if replies is defined %}
-        <div class="replies">
+        <div class="u-in-reply-to replies">
             {% for conversation in replies %}
                 {% include '/note/view.html.twig' with {'note': conversation['note'], 'skip_reply_to': true, 'have_user': have_user, 'replies': conversation['replies']} only %}
             {% endfor %}

templates/sidepanel/right/right.html.twig

@@ -29,9 +29,8 @@
                 </div>
                 <div class="notice-options">
                     <div class="attachments">
-                        {{ form_widget(post_form.attachments) }}
-                        <label for="{{ post_form.attachments.vars.id }}">
-                            {{ icon('attach', 'icon icon-attach') | raw }}
+                        <label for="{{ post_form.attachments.vars.id }}" class="custom-file-upload">
+                            {{ form_widget(post_form.attachments) }}
                         </label>
                     </div>
                     <div class="post">