Add information details to list and grid view in additions to detail view, a=chris

diff --git a/src/css/search.css b/src/css/search.css
index 141d19476..7c7471b61 100755
--- a/src/css/search.css
+++ b/src/css/search.css
@@ -667,6 +667,27 @@ h2.resource-field button,
 {
     display: none;
 }
+#info-item
+{
+    background-color: white;
+    border: 2px solid gray;
+    border-radius: 15px;
+    display: none;
+    height: calc(100% - 2in);
+    left:0.5in;
+    opacity: 1.0;
+    padding: 5px;
+    position: fixed;
+    top: 1.25in;
+    width: calc(100% - 2in);
+    z-index: 100;
+}
+.mobile #info-item
+{
+    height: calc(100% - 30px);
+    left: 10px;
+    width: calc(100% - 30px);
+}
 #detail-item
 {
     border: 1px solid black;
@@ -679,6 +700,13 @@ h2.resource-field button,
     display: block;
     height: 3.8in;
 }
+#info-item iframe
+{
+    border-radius: 15px;
+    height: calc(100% - 0.5in);
+    margin-left:0.2in;
+    width: calc(100% - 0.4in);
+}
 #detail-item iframe
 {
     height: 100%;
@@ -789,7 +817,7 @@ h2.resource-field input
     border:0;
     color:black;
     padding:2px;
-    width:calc(max(100% - 8px, 2in));
+    width:calc(max(100% - 50px, 1.8in));
 }
 .resource-field input:hover
 {
@@ -797,6 +825,18 @@ h2.resource-field input
     border-radius:5px;
     text-decoration:underline;
 }
+.info-link
+{
+    padding: 5px;
+    text-decoration:none;
+}
+.info-link:hover
+{
+    border: 1px solid blue;
+    background-color:#ECECEC;
+    border-radius: 5px;
+    color:blue;
+}
 .resource-field:focus-within input
 {
     border:1px gray solid;
diff --git a/src/views/elements/WikiElement.php b/src/views/elements/WikiElement.php
index 2c44daf66..cfe0556a5 100644
--- a/src/views/elements/WikiElement.php
+++ b/src/views/elements/WikiElement.php
@@ -1069,10 +1069,26 @@ class WikiElement extends Element implements CrawlConstants
                 if (empty($data['CURRENT_LAYOUT']) ||
                     $data['CURRENT_LAYOUT'] == 'list') {
                     $is_list = true;
-                    ?><table><thead><?php
+                    ?><div id='info-item'>
+                        <div class="float-opposite" ><?=
+                        $this->view->helper('close')->render(
+                            "javascript:setDisplay('info-item', false);"
+                        );
+                        ?></div>
+                        <iframe id="info-frame" src='about:blank'></iframe>
+                    </div><table><thead><?php
                 } else if ($data['CURRENT_LAYOUT'] == 'grid') {
                     $is_grid = true;
-                    ?><div class="grid-container"><?php
+                    ?>
+                    <div id='info-item'>
+                    <div class="float-opposite" ><?=
+                    $this->view->helper('close')->render(
+                        "javascript:setDisplay('info-item', false);"
+                    );
+                    ?></div>
+                    <iframe id="info-frame" src='about:blank'></iframe>
+                    </div>
+                    <div class="grid-container"><?php
                 } else {
                     $is_detail = true;
                     $read_mode = empty($read_mode) ? "media" : $read_mode;
@@ -1084,7 +1100,7 @@ class WikiElement extends Element implements CrawlConstants
                 if (empty($read_mode) && $data['MODE'] != 'source' &&
                     $data['CURRENT_LAYOUT'] == 'list') {
                     ?><tr><th colspan="2"></th>
-                        <th class="resizable" ><a href='<?=
+                        <th class="resizable"  style='width:2.6in;'><a href='<?=
                         $sub_path_folder_prefix?>&amp;default_sort=name'><?=
                         tl('wiki_element_name')
                     ?></a></th><?php
@@ -1342,7 +1358,11 @@ class WikiElement extends Element implements CrawlConstants
         }
         $is_seen = !empty($_SESSION['seen_media']) &&
             in_array($hash_id, $_SESSION['seen_media']);
-        $current_media_url = $current_url;
+        $media_detail = ($data['MODE'] == 'edit') ?
+            "arg=media-detail-edit&amp;page_id=" . $data["PAGE_ID"]:
+            "arg=media-detail-read";
+        $current_media_url = preg_replace('/arg=(media|edit|source)/',
+            $media_detail, $current_url);
         $first_resource = "";
         if ($is_list) {
             $tr = "tr";
@@ -1362,13 +1382,8 @@ class WikiElement extends Element implements CrawlConstants
             $td = "div";
             $td_img = "div";
             $data['original_MODE'] = $data['MODE'];
-            $media_detail = ($data['MODE'] == 'edit') ?
-                "arg=media-detail-edit&amp;page_id=" . $data["PAGE_ID"]:
-                "arg=media-detail-read";
             $data['MODE'] == 'read';
             $double_click_url = $current_url;
-            $current_media_url = preg_replace('/arg=(media|edit|source)/',
-                $media_detail, $current_url);
             if ($is_first) {
                 $is_first = false;
                 $detail_id = $data['PAGE_ID'];
@@ -1424,6 +1439,10 @@ class WikiElement extends Element implements CrawlConstants
             ?>
             <div id='<?= $hash2_id ?>' class='detail-resource' ><?php
         }
+        $info_link = ($is_detail) ? "" : "&nbsp;<a class='info-link' ".
+            "onclick='toggleDisplay(\"info-item\");elt(\"info-frame\").src=".
+            "\"$current_media_url\";window.event.stopPropagation();".
+            "return false;' href='$current_media_url'>&#9432;</a>";
         if ($is_seen && $is_list) {
             e("<$td class='view-indicator huge-font'><span " .
                 "id='$hash2_id' class='marked' onclick='" .
@@ -1465,14 +1484,14 @@ class WikiElement extends Element implements CrawlConstants
         e("</a>$first_resource</$td>");
         if (!empty($read_mode)) {
             e("<$td><a href='$current_url'>".
-                "$written_name</a></$td>");
+                "$written_name</a>$info_link</$td>");
         } else {
             // need tabindex to allow focus-within to work Safari
             e("<$td class='resource-field' tabindex='0'
                 ><input type='text' ".
                 "id='resource-$i' aria-label='".tl('wiki_element_name')."' ".
                 "value='".str_replace("'", "&#39;", $name).
-                "' $disabled ><br>");
+                "' $disabled >$info_link<br>");
             if (!$disabled) {
                 ?><script>
                 res = document.getElementById('resource-<?=$i?>');