Info overlay for templates.

NOTE: This would be way nicer if template preview images were a
      bit larger (just like media db thumbnails), but I guess
      were going to have to discuss how to implement that first.

templates/2k11/admin/serendipity_editor.js.tpl

@@ -720,7 +720,7 @@ function highlightComment(id, checkvalue) {
     });
 
     // Show media file info
-    $('.media_show_info').click(function(e) {
+    $('.media_show_info, .template_show_info').click(function(e) {
         $($(this).attr('href')).toggleClass('additional_info');
         e.preventDefault();
     });

templates/2k11/admin/style.css

@@ -1156,11 +1156,8 @@ main {
 
 #edit_entry_category label { vertical-align: top; }
 
-
-.template_info,
 .plugin_info { margin: 0 0 1em;}
 
-.template_info dl,
 fieldset p,
 .media_file_meta > ul,
 .image_resize_hint p { margin: 0; }
@@ -1242,18 +1239,6 @@ form > .button_link:first-of-type { margin-top: 0; }
 
 #serendipityScaleImg img { max-width: 99%; }
 
-#template_select .preview_image {
-    float: left;
-    margin: 0 1em 1em 0;
-}
-
-#template_select .preview_image {
-    /* TESTING */
-    overflow: hidden;
-    height: 100px;
-    width: 100px;
-}
-
 .zebra_list,
 #categories .odd,
 #categories .even,
@@ -1427,15 +1412,22 @@ form > .button_link:first-of-type { margin-top: 0; }
     margin: 0 2% 1em 0;
 }
 
-.no-js .media_file_preview img {
+.no-js .media_file_preview img,
+.js .template_wrap {
     margin: 0 0 1em;
 }
 
-.js .media_file_preview {
+.js .template_info > dl {
+    margin: 0;
+}
+
+.js .media_file_preview,
+.js .template_preview {
     position: relative;
 }
 
-.js .media_file_meta {
+.js .media_file_meta,
+.js .template_info {
     background: #000;
     background: rgba(0,0,0,.6);
     -webkit-box-sizing: border-box;
@@ -1609,8 +1601,6 @@ input:checked + .media_selector {
     #uploadform .form_select select,
     #uploadform .form_field input { max-width: 48%; }
 
-    .template_info dl { font-size: .65em; }
-
     .configuration_group .form_select,
     .configuration_group .form_multiselect,
     .configuration_group .form_field,
@@ -1760,8 +1750,6 @@ input:checked + .media_selector {
         font-size: 2em;
         margin: .75em 0;
     }
-
-    .template_info dl { font-size: .8125em; }
 }
 
 

templates/2k11/admin/templates.inc.tpl

@@ -29,17 +29,14 @@
         <article class="clearfix current_template">
             <h3>{$cur_tpl.info.name}</h3>
 
-            <div class="clearfix">
+            <div class="clearfix equal_heights template_wrap">
+                <div class="template_preview">
                 {if $cur_tpl.fullsize_preview || $cur_tpl.preview}
-                <div class="preview_image">
                     {if $cur_tpl.fullsize_preview}<a href="{$cur_tpl.fullsize_preview}">{/if}
                     {if $cur_tpl.preview}<img src="{$cur_tpl.preview}" alt="{$CONST.PREVIEW}" >{/if}
                     {if $cur_tpl.fullsize_preview}</a>{/if}
-                </div>
                 {/if}
-                <details class="template_info">
+                    <footer id="template_info_cur" class="template_info additional_info">
-                    <summary>Template info</summary> {* i18n *}
-
                         <dl class="clearfix">
                             <dt class="template_author">{$CONST.AUTHOR}:</dt>
                             <dd>{$cur_tpl.info.author}</dd>
@@ -48,8 +45,11 @@
                             <dt class="template_admin">Admin theme:</dt> {* i18n *}
                             <dd>{$cur_tpl.info.custom_admin_interface}</dd>
                         </dl>
-                </details>
+                    </footer>
                 </div>
+            </div>
+
+            <a class="template_show_info button_link" href="#template_info_cur" title="Show template info"><span class="icon-info-circle"></span><span class="visuallyhidden"> Show template info</span></a>
 
              <a class="button_link state_submit" href="?serendipity[adminModule]=templates&amp;serendipity[adminAction]=editConfiguration">{$CONST.CONFIGURATION}</a>
         </article>
@@ -62,35 +62,34 @@
             {if !empty($template)}
             <li><article class="clearfix {cycle values="odd,even"}">
                     <h3>{$info.info.name}</h3>
-                    <div class="clearfix equal_heights">
+                    <div class="clearfix equal_heights template_wrap">
+                        <div class="template_preview">
                         {if $info.fullsize_preview || $info.preview}
-                        <div class="preview_image">
+                        
                             {if $info.fullsize_preview}<a href="{$info.fullsize_preview}">{/if}
                             {if $info.preview}<img src="{$info.preview}" alt="{$CONST.PREVIEW}" >{/if}
                             {if $info.fullsize_preview}</a>{/if}
-                        </div>
                         {/if}
-                        <details class="template_info">
+                            <footer id="template_info_{$info@key}" class="template_info additional_info">
-                            <summary>Template info</summary> {* i18n *}
-
                                 <dl class="clearfix">
                                     <dt class="template_author">{$CONST.AUTHOR}:</dt>
-                                <dd>{$info.info.author}</dd>
+                                    <dd>{$cur_tpl.info.author}</dd>
                                     <dt class="template_date">{$CONST.LAST_UPDATED}:</dt>
-                                <dd>{$info.info.date}</dd>
+                                    <dd>{$cur_tpl.info.date}</dd>
                                     <dt class="template_admin">Admin theme:</dt> {* i18n *}
-                                <dd>{$info.info.custom_admin_interface}</dd>
+                                    <dd>{$cur_tpl.info.custom_admin_interface}</dd>
                                 </dl>
-                        </details>
+                            </footer>
+                        </div>
                     </div>
 
-                    <div class="template_status">
+                    <a class="template_show_info button_link" href="#template_info_{$info@key}" title="Show template info"><span class="icon-info-circle"></span><span class="visuallyhidden"> Show template info</span></a>
+
                 {if !$info.unmetRequirements}
                     <a class="state_submit button_link" href="?serendipity[adminModule]=templates&amp;serendipity[adminAction]=install&amp;serendipity[theme]={$template}{$info.info.customURI}">{$CONST.SET_AS_TEMPLATE}</a>
                 {else}
                     <span class="unmet_requirements msg_error"><span class="icon-attention"></span> {$info.unmetRequirements}></span>
                 {/if}
-                    </div>
                 </article>
             </li>
             {/if}