HTML5 fixes

app/src/js/modules/editcontent.js

@@ -168,9 +168,10 @@
                     $('.alert').alert(); // Dismiss alert messages
                     if (confirmed === true) {
                         var pathBolt = bolt.conf('paths.bolt'),
+                            form = $('#id').closest('form'),
                             ctype = $('#contenttype').val(),
                             id = $('#id').val(),
-                            token = $('#bolt_csrf_token').val(),
+                            token = form.find('input[name="bolt_csrf_token"]').val(),
                             url = pathBolt + 'content/deletecontent/' + ctype + '/' + id + '?bolt_csrf_token=' + token;
 
                         // Fire delete request.

app/theme_defaults/_sub_searchbox.twig

@@ -9,7 +9,7 @@
 
 </div>
 <!--
-<script type="text/javascript">
+<script>
 
     $('#searchbar :input[name="submit"]').bind('click', function () {
         var link = "/search/" + encodeURI($('input[name="searchterms"]').val());

app/view/twig/_base/_listing.twig

@@ -52,11 +52,11 @@
     </tr>
 {% endif %}
 
-<tr {% if content.status!='published' %}class="dim"{% endif %} id="item_{{ content.id }}">
+<tr {% if content.status!='published' %}class="dim"{% endif %}{% if not compact and editable %} id="item_{{ content.id }}"{% endif %}>
     {% block listing_id %}
 
         {% if not compact and editable and isallowed('delete', contenttype) %}
-            <td class="check hidden-xs"><input type="checkbox" name="checkRow" /></td>
+            <td class="check hidden-xs"><input type="checkbox" name="checkRow"></td>
         {% else %}
             <td style="margin: 0; padding: 0;"></td>
         {% endif %}
@@ -82,7 +82,15 @@
                         </span></td>
         <td class="listthumb">
             {% if content.getImage is not empty %}
-                {{ content.getImage|popup(thumbsize, thumbsize * 0.75, 'c') }}
+                {# Hack to add alt attribute #}
+                {#{ content.getImage|popup(thumbsize, thumbsize * 0.75, 'c') }#}
+                {% set thumb_height = (thumbsize * 0.75)|round %}
+                {% set thumb_small = content.getImage|thumbnail(thumbsize, thumb_height, 'c') %}
+                {% set thumb_large = content.getImage|thumbnail(1000, 800, 'r') %}
+                {% set thumb_title = __('Image') ~ ': ' ~ content.getImage %}
+                <a href="{{ thumb_large }}" class="magnific" title="{{ thumb_title }}">
+                    <img src="{{ thumb_small }}" width="{{ thumbsize }}" height="{{ thumb_height }}" alt="{{ __('Thumbnail') }}">
+                </a>
             {% endif %}
         </td>
     {% endblock %}

app/view/twig/_sub/_csrf_token.twig

@@ -1 +1 @@
-<input type="hidden" name="bolt_csrf_token" id="bolt_csrf_token" value="{{ token() }}" />
+<input type="hidden" name="bolt_csrf_token" value="{{ token() }}">

app/view/twig/activity/changelog.twig

@@ -26,14 +26,16 @@
 
             <table class="table table-striped dashboardlisting">
                 <thead>
-                    <th></th>
-                    <th>Type</th>
-                    <th>Contenttype</th>
-                    <th>Title</th>
-                    <th>Fields</th>
-                    <th>Comment</th>
-                    <th>User</th>
-                    <th>Date</th>
+                    <tr>
+                        <th></th>
+                        <th>Type</th>
+                        <th>Contenttype</th>
+                        <th>Title</th>
+                        <th>Fields</th>
+                        <th>Comment</th>
+                        <th>User</th>
+                        <th>Date</th>
+                    </tr>
                 </thead>
                 <tbody>
                 {% for entry in entries %}

app/view/twig/activity/systemlog.twig

@@ -66,15 +66,17 @@
 
             <table class="table table-striped dashboardlisting">
                 <thead>
-                    <th>№</th>
-                    <th>Type</th>
-                    <th>Context</th>
-                    <th>Route</th>
-                    <th>URI</th>
-                    <th>Details</th>
-                    <th>User</th>
-                    <th>IP</th>
-                    <th>Date</th>
+                    <tr>
+                        <th>№</th>
+                        <th>Type</th>
+                        <th>Context</th>
+                        <th>Route</th>
+                        <th>URI</th>
+                        <th>Details</th>
+                        <th>User</th>
+                        <th>IP</th>
+                        <th>Date</th>
+                    </tr>
                 </thead>
                 <tbody>
                 {% for entry in entries %}

app/view/twig/components/panel-stack.twig

@@ -16,7 +16,7 @@
             <div class="stackitem item-{{ loop.index }} {{ item.type }} info-pop"
                  data-placement="bottom" data-html="true" data-title="{{ item.basename }}" data-content="{{ item.info }}">
                 {% if item.type == 'image' %}
-                    <img src="{{ item.filepath|thumbnail(100,100) }}" width="100" height="100">
+                    <img src="{{ item.filepath|thumbnail(100,100) }}" width="100" height="100" alt="{{ __('Thumbnail') }}">
                 {% else %}
                    <strong>{{ item.extension|upper }}</strong>
                    <small>{{ item.basename }}</small>
@@ -52,7 +52,7 @@
 
     <div id="protostack">
         <div class="stackitem image info-pop item-1" data-placement="bottom" data-html="true" data-title="" data-content="">
-            <img src="" width="100" height="100">
+            <img src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=" width="100" height="100" alt="{{ __('Thumbnail') }}">
         </div>
 
         <div class="stackitem other info-pop item-1" data-placement="bottom" data-html="true" data-title="" data-content="">
@@ -62,7 +62,7 @@
     </div>
 
     {# Modal "select from server" #}
-    <div class="modal fade" id="selectModal-stack" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
+    <div class="modal fade" id="selectModal-stack" tabindex="-1" role="dialog" aria-hidden="true">
         <div class="modal-dialog">
             <div class="modal-content"></div>
         </div>

app/view/twig/dashboard/_aside.twig

@@ -15,8 +15,7 @@
         <b><i class="fa fa-fw fa-bullhorn"></i> Warning: Development version </b>
     </div>
     <div class="panel-body">
-            <p>This is a development version of Bolt, so it might contain bugs and unfinished features. Use at your own risk! For 'production' websites, we advise you to stick with the official stable releases. </p>
-    </p>
+        <p>This is a development version of Bolt, so it might contain bugs and unfinished features. Use at your own risk! For 'production' websites, we advise you to stick with the official stable releases.</p>
     </div>
 </div>
 {% endif %}

app/view/twig/editcontent/_includes-data.twig

@@ -29,8 +29,8 @@
     <script src="{{ paths.app }}view/js/uikit/marked.js"></script>
     <script src="{{ paths.app }}view/js/uikit/codemirror-compressed.js"></script>
     <script src="{{ paths.app }}view/js/uikit/htmleditor.js"></script>
-    <link rel="stylesheet" href="{{ paths.app }}view/js/ckeditor/plugins/codemirror/css/codemirror.min.css">
-    <link rel="stylesheet" href="{{ paths.app }}view/js/uikit/htmleditor.min.css">
+    <link rel="stylesheet" property="stylesheet" href="{{ paths.app }}view/js/ckeditor/plugins/codemirror/css/codemirror.min.css">
+    <link rel="stylesheet" property="stylesheet" href="{{ paths.app }}view/js/uikit/htmleditor.min.css">
 {% endif %}
 
 {% if 'geolocation' in used_fieldtypes %}

app/view/twig/editfile/editfile.twig

@@ -28,7 +28,7 @@
             {{ files_path(context.pathsegments, context.namespace, {'path': '', 'namespace': context.namespace}) }}
 
 
-            <form action="" method="post" class="form-inline" autocomplete="off">
+            <form method="post" class="form-inline" autocomplete="off">
                 {{ form_widget(context.form._token) }}
 
                 <div>
@@ -79,7 +79,7 @@
         {% endif %}
 
         {# use the files includes in ckeditor/codemirror plugin, instead of duplicating files. #}
-        <link rel="stylesheet" href="{{ paths.app }}view/js/ckeditor/plugins/codemirror/css/codemirror.min.css">
+        <link rel="stylesheet" property="stylesheet" href="{{ paths.app }}view/js/ckeditor/plugins/codemirror/css/codemirror.min.css">
         <script src="{{ paths.app }}view/js/ckeditor/ckeditor.js"></script>
         <script src="{{ paths.app }}view/js/ckeditor/plugins/codemirror/js/codemirror.min.js"></script>
         {% for file in codemirror %}

app/view/twig/editlocale/editlocale.twig

@@ -23,7 +23,7 @@
 
     <div class="row">
         <div class="col-xs-12">
-            <form action="" method="post" class="form-inline" autocomplete="off">
+            <form method="post" class="form-inline" autocomplete="off">
                 <div>
                     <textarea{{ macro.attr(attr_text) }}>{{ context.form.vars.value.contents }}</textarea>
                 </div>
@@ -38,7 +38,7 @@
 
     {% if not ismobileclient() %}
         {# use the files includes in ckeditor/codemirror plugin, instead of duplicating files. #}
-        <link rel="stylesheet" href="{{ paths.app }}view/js/ckeditor/plugins/codemirror/css/codemirror.min.css">
+        <link rel="stylesheet" property="stylesheet" href="{{ paths.app }}view/js/ckeditor/plugins/codemirror/css/codemirror.min.css">
         <script src="{{ paths.app }}view/js/ckeditor/ckeditor.js"></script>
         <script src="{{ paths.app }}view/js/ckeditor/plugins/codemirror/js/codemirror.min.js"></script>
         <script src="{{ paths.app }}view/js/ckeditor/plugins/codemirror/plugins/yaml.min.js"></script>

app/view/twig/edituser/edituser.twig

@@ -29,14 +29,14 @@
             {% if context.kind != 'profile' %}
                 <p style="max-width: 500px;">
                     {% if context.kind == 'edit' %}
-                        {{ __('page.edit-users.user-edit') }}</i>
+                        {{ __('page.edit-users.user-edit') }}
                     {% elseif context.kind == 'create' %}
                         {{ __('page.edit-users.user-create') }}
                     {% endif %}
                 </p>
             {% endif %}
 
-            <form action="#" method="post" class="form-horizontal" role="form" autocomplete="off">
+            <form method="post" class="form-horizontal" role="form" autocomplete="off">
                 {{ form_widget(context.form) }}
                 <input type="submit" value="{{ __('page.edit-users.button.save') }}" name="submit" class="btn btn-primary">
             </form>

app/view/twig/extend/install-package.twig

@@ -31,7 +31,7 @@
                             </tr>
                         </thead>
                         <tbody class="installed-version-item">
-                        <tr><td colspan="3"><strong>{{ __('No Stable Versions Available') }}</strong></td></tr>
+                        <tr><td colspan="4"><strong>{{ __('No Stable Versions Available') }}</strong></td></tr>
                         </tbody>
                     </table>
                 </div>
@@ -49,7 +49,7 @@
                             </tr>
                         </thead>
                         <tbody class="installed-version-item">
-                            <tr><td colspan="3"><strong>{{ __('No Test Versions Available') }}</strong></td></tr>
+                            <tr><td colspan="4"><strong>{{ __('No Test Versions Available') }}</strong></td></tr>
                         </tbody>
                     </table>
                 </div>

app/view/twig/files/_files.twig

@@ -2,14 +2,16 @@
     <thead>
         <tr>
             <th>{{ __('page.ckeditor-browse-server.files') }}</th>
-            <th colspan="2" class="hidden-xs hidden-sm">{{ __('page.ckeditor-browse-server.size') }}</th>
-            <th colspan="3"><span class="hidden-xs hidden-sm">{{ __('page.ckeditor-browse-server.modified') }}</span></th>
+            <th class="hidden-xs hidden-sm">{{ __('page.ckeditor-browse-server.size') }}</th>
+            <th class="hidden-xs hidden-sm">{{ __('page.ckeditor-browse-server.modified') }}</th>
+            <th colspan="2"></th>
         </tr>
     </thead>
 
     <tbody>
         {% for file in context.files %}
             <tr>
+                {# Column: Filename #}
                 <td>
                     {% if file.type in ['jpeg', 'jpg', 'png', 'gif'] %}
 
@@ -56,24 +58,27 @@
                         {% endif %}
                     {% endif %}
                 </td>
-                <td style="min-width: 120px;"class="hidden-xs hidden-sm">
+                {# Column: Filesize #}
+                <td style="min-width: 120px;" class="hidden-xs hidden-sm">
                     {{ file.filesize }}.
                     {% if file.imagesize is defined %}
                        <br> {{ file.imagesize }} px.
                     {% endif %}
                 </td>
+                {# Column: Modified #}
                 <td style="min-width: 140px;" class="hidden-xs hidden-sm">
-                    <time class="moment"
-                          datetime="{{ file.modified|date("c") }}"
-                          title="{{ file.modified }}">
+                    <time class="moment" datetime="{{ file.modified|date("c") }}" title="{{ file.modified }}">
                         {{ file.modified }}
                     </time>
                 </td>
+                {# Column: Thumbnail #}
                 <td class="listthumb">
                     {% if file.imagesize is defined %}
-                        {{ file.newpath|showimage(54, 40, 'c') }}
+                        {% set thumb = file.newpath|showimage(54, 40, 'c') %}{# Hack to add alt attribute #}
+                        <img {{ thumb|slice(5, thumb|length - 6)|raw }} alt="{{ __('Thumbnail')|e('html_attr') }}">
                     {% endif %}
                 </td>
+                {# Column: Actions #}
                 <td class="actions" style="min-width: 16px;">
 
                     <div class="btn-group">

app/view/twig/files/_upload.twig

@@ -1,4 +1,4 @@
-<form action="" method="post" id="filescreenuploader" {{ form_enctype(context.form) }}>
+<form method="post" id="filescreenuploader" {{ form_enctype(context.form) }}>
     <fieldset>
         {{ form_widget(context.form) }}
         <div>
@@ -11,7 +11,7 @@
     </fieldset>
 </form>
 
-<script type="text/javascript">
+<script>
     $(function() {
         $('input[type=file]').addClass('btn-secondary').bootstrapFileInput();
 

app/view/twig/firstuser/firstuser.twig

@@ -12,7 +12,7 @@
         {{ __('There are no users present in the system. Please create the first user, which will be granted root privileges.') }}
     </p>
 
-    <form action="#" method="post" class="form-horizontal" role="form" autocomplete="off">
+    <form method="post" class="form-horizontal" role="form" autocomplete="off">
         {{ form_widget(context.form) }}
         <input type="submit" value="{{ __('Create the first user') }}" name="submit" class="btn btn-primary">
     </form>

app/view/twig/login/login.twig

@@ -13,7 +13,7 @@
             <label for="username" class="control-label">{{ __('page.login.label.username') }}</label>
             <div class="input-group">
                 <label for="username" class="input-group-addon"><i class="fa fa-fw fa-user"></i></label>
-                <input id="username" class="form-control" type="text" autofocus="true" name="username" placeholder="{{ __('page.login.placeholder.password') }} …" {% if username is defined %}value="{{ username }}"{% endif %} required>
+                <input id="username" class="form-control" type="text" autofocus name="username" placeholder="{{ __('page.login.placeholder.password') }} …" {% if username is defined %}value="{{ username }}"{% endif %} required>
             </div>
         </div>
 

app/view/twig/omnisearch/omnisearch.twig

@@ -8,7 +8,7 @@
 
     <div class="row">
         <div class="col-md-8">
-            <form action="" method="get">
+            <form method="get">
                 <div class="form-group">
                     <div class="input-group">
                     <input class="form-control" name="q" type="text" value="{{ context.query }}">

app/view/twig/roles/roles.twig

@@ -11,13 +11,13 @@
             {% for permissionName, roles in context.global_permissions %}
                 <dl style="display: inline-block; vertical-align: top; margin-right: 2em; width: 9em;">
                     <dt>{{ permissionName }}:</dt>
-                    <dt style="font-weight: normal">
+                    <dd style="font-weight: normal">
                         <ul style="padding-left: 1.3em;">
                             {% for role in roles %}
                                 <li>{{ role }}</li>
                             {% endfor %}
                         </ul>
-                    </dt>
+                    </dd>
                 </dl>
             {% endfor %}
         </div>
@@ -37,13 +37,13 @@
                     {% for permissionName, roles in permissions %}
                         <dl style="display: inline-block; vertical-align: top; margin-right: 2em; width: 9em;">
                             <dt>{{ permissionName }}:</dt>
-                            <dt style="font-weight: normal">
+                            <dd style="font-weight: normal">
                                 <ul style="padding-left: 1.3em;">
                                     {% for role in roles %}
                                         <li>{{ role }}</li>
                                     {% endfor %}
                                 </ul>
-                            </dt>
+                            </dd>
                         </dl>
                     {% endfor %}
                 </div>