Modified image detail views

code/Image/Image.skin

@@ -1,21 +1,24 @@
 <% #main %>
-<div class="storyTitle">
-   <% image.name %>
-</div>
-<div class="storyDate">
-   <% gettext "{0} on {1}" <% image.creator link %> <% image.created short %> %>
-</div>
+<h1 class="storyTitle"><% image.name %></h1>
+<p>
+   <em><% gettext "{0} on {1}" <% image.creator link %> <% image.created short %> %></em>
+</p>
+
+<p>
+   <div><% gettext 'To insert this image into a story or comment of this site copy and paste the following code:' %></div>
+   <div>
+      <input type="text" class="macroCode" value="<% image.macro %>" />
+   </div>
+</p>
+
+<p>
+   <% image.link edit <% gettext Edit %> %>
+   <% image.link delete <% gettext Delete %> %>
+</p>
+
 <div>
    <% image.render | link <% image.url %> %>
 </div>
-<p class="small">
-   <% image.link edit <% gettext Edit %> prefix="... " %>
-   <% image.link delete <% gettext Delete %> prefix=" ... " %>
-</p>
-<p class="small">
-   <% gettext 'To insert this image into a story or comment of this site 
-         copy and paste the following code:' %> <code><% image.macro %></code>
-</p>
 
 <% #preview %>
 <p><% image.render | image.link %></p>

code/Images/$Images.skin

@@ -1,23 +1,23 @@
 <% #main %>
-<p class="storyTitle"><% response.title %></p>
+<h1 class="storyTitle"><% response.title %></h1>
 
 <div class="ample">
-   <% images.link create <% gettext "Add Image" %> prefix="... " %>
+   <% images.link create <% gettext "Add Image" %> %>
 </div>
-...
+<div>
 <% images.link main <% gettext "By {0}" <% membership.name %> %> %>
 <% images.link all <% gettext All %> prefix=" | " %>
+</div>
 
 <% response.pager %>
 <% response.list %>
 <% response.pager %>
 
 <% #layout %>
-<div class="pagelink"><% breadcrumbs %></div><br />
-<p class="storyTitle"><% response.title %></p>
+<h1 class="storyTitle"><% response.title %></h1>
 
 <div class="ample">
-   <% images.link create <% gettext "Add Layout Image" %> prefix="... " %>
+   <% images.link create <% gettext "Add Layout Image" %> %>
 </div>
 
 <% response.pager %>

code/Root/$Root.skin

@@ -158,6 +158,14 @@ header, nav, article, footer, section {display:block; margin: 0;}
         
 /* CSS for protected skins (user interface elements etc.) */
 /* Edit choice */
+input.macroCode {
+   font-family: Monaco, "Bitstream Vera Sans Mono", "Lucida Console", Terminal, monospace;
+   min-width: 200px;
+   font-size: 0.8em;
+   text-align: center;
+   padding: 3px 2px;
+}
+
 .choice input[type='text'] {
    margin-left: 10px;
    width: 180px;

code/Site/Site.skin

@@ -116,7 +116,11 @@ suffix='</h2><div class="calendarBox">' %> suffix="</div>" %>
 </html>
 
 <% #javascript %>
-
+$(document).ready(function() {
+   $("input.macroCode").focus(function() {
+        this.select();
+   });
+});
 
 <% #values %>
 <%// FIXME - do we need that? (PN) %>