Add a widget for small controls

templates/css.widget

@@ -115,19 +115,6 @@ body {
   margin-top: 20px;
 }
 
-.item-info {
-  padding: 10px 15px;
-}
-
-.item-info .controls {
-  float: right;
-}
-
-.item-info .controls img {
-  opacity: 0.4;
-  height: 23px;
-}
-
 .category-info .controls {
   margin-right: 0.5em;
   vertical-align: -1px;

templates/item-info.widget

@@ -38,6 +38,13 @@ HTML
   </div>
 </div>
 
+CSS
+------------------------------------------------------------
+.item-info {
+  padding: 10px 15px;
+}
+
+
 
 HTML: item-info-title
 ------------------------------------------------------------
@@ -72,6 +79,16 @@ HTML: item-info-controls
         action = [| deleteItem("{{item.uid}}"); |] }}
 </span>
 
+CSS
+------------------------------------------------------------
+.item-info .controls {
+  float: right;
+}
+.item-info .controls img {
+  opacity: 0.4;
+  height: 23px;
+}
+
 JS
 ------------------------------------------------------------
 function moveItem(dir, itemUid) {

templates/trait.widget

@@ -23,22 +23,22 @@ HTML
 
   <div class="section editable">
     <div class="trait-controls">
-      {{> img-button
+      {{> small-control
             src    = "/arrow-thick-top.svg"
             title  = "move trait up"
             action = [| moveTrait("up","{{item.uid}}","{{trait.uid}}"); |] }}
-      {{> img-button
+      {{> small-control
             src    = "/arrow-thick-bottom.svg"
             title  = "move trait down"
             action = [| moveTrait("down","{{item.uid}}","{{trait.uid}}"); |] }}
       {{> space px=16}}
-      {{> img-button
+      {{> small-control
             src    = "/pencil.svg"
             title  = "edit trait"
             action = [| editTrait("{{item.uid}}", "{{trait.uid}}",
                                   "{{trait.content.text}}"); |] }}
       {{> space px=16}}
-      {{> img-button
+      {{> small-control
             src    = "/x.svg"
             title  = "delete trait"
             action = [| deleteTrait("{{item.uid}}","{{trait.uid}}"); |] }}
@@ -54,20 +54,14 @@ HTML
 
 CSS
 ============================================================
-
 .trait-controls {
-  margin-left: -7px;
-}
-
-.trait-controls img {
-  opacity: 0.5;
-  width: 12px;
+  margin-left: -8px;
 }
 
 /* increase the clickable area */
 .trait-controls a {
   display: inline-block;
-  padding: 5px;
+  padding: 7px;
 }
 
 

templates/utils/img-button.widget

@@ -1,15 +0,0 @@
-Description
-============================================================
-
-This is an “image button” (an image that is a link). 
-
-It takes the following arguments:
-
-  * src    – link to the image
-  * title  – title text
-  * action – the JS action to execute on click, must end with a ';'
-
-
-HTML
-============================================================
-<a href="#" onclick="{{action}} return false;"><img src="{{src}}" alt="{{title}}" title="{{title}}"></a>

templates/utils/img-controls.widget

@@ -0,0 +1,31 @@
+Description
+============================================================
+
+Various controls:
+
+  * img-button – an image that is a link
+  * small-control – one of small image buttons used for traits and so on
+
+Both take the following arguments:
+
+  * src    – link to the image
+  * title  – title text
+  * action – the JS action to execute on click, must end with a ';'
+
+img-button also takes an optional "class" argument.
+
+
+HTML: img-button
+============================================================
+<a href="#" {{# class}}class="{{.}}"{{/ class}} onclick="{{action}} return false;"><img src="{{src}}" alt="{{title}}" title="{{title}}"></a>
+
+HTML: small-control
+============================================================
+{{> img-button class="small-control" }}
+
+CSS
+============================================================
+.small-control img {
+  opacity: 0.5;
+  width: 12px;
+}

tests/Main.hs

@@ -41,10 +41,14 @@ main :: IO ()
 main = run $ do
   mainPageTests
   categoryTests
-  -- TODO: noscript tests
-  -- TODO: test on mobile
-  -- TODO: test that there are no repetitive searches on the admin page
-  -- TODO: test that admin CSS hasn't creeped into main CSS and vice-versa
+  {- TODO
+  * noscript tests
+  * test on mobile
+  * test that there are no repetitive searches on the admin page
+  * test that admin CSS hasn't creeped into main CSS and vice-versa
+  * test that the server is throwing no errors whatsoever during the
+    execution of tests
+  -}
 
 mainPageTests :: Spec
 mainPageTests = session "main page" $ using Firefox $ do