Feat : proposal to standardize behavior of click on Com_Name and Sci_Name (#116)

* Align with 3 logos : wikipedia ; info_site ; minigraph

* Add info & wiki.png

* Rename wikipedia.png to wiki.png

* Show icons on recent detections

* icons with white background

* Align icons with scientific name to center common name

* Add icons

* Not sure what this makes

* Correct link to info_site

* Restore initial cleaner layout

* Have same behavior for title than the overview

* Add icons of info and wikipedia to recordings

* Add icons

* Clean

* Improve icons size

* Add icons to species stats

* Put icons near sci_name

* Remove pictures from mobile on main page for small screens

* Other solution for mobile

* Improve visibility on smaller screen and consistency

* Improve visibility on smaller screen and consistency

* Improve readability on small screens

* Improve readability on small screens

* Set image size for smaller screens

* Make scientific name in italics

* Sci_name in italics

* Add sci_name in Italics for consistency

* Inline icons with scientific text for consistency

* Italics for todays scientific name
This commit is contained in:
Alexandre
2024-06-29 10:15:30 +02:00
committed by GitHub
parent b76f6d7412
commit b959325605
8 changed files with 51 additions and 38 deletions
Binary file not shown.

After

Width:  |  Height:  |  Size: 6.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.7 KiB

+3 -1
View File
@@ -872,7 +872,9 @@ form#views button .updatenumber {
}
#recent_detection_middle_td img{
width:unset !important;
height:75px;
max-width:50px;
max-height:50px;
padding:0px;
float:left;
}
+3 -1
View File
@@ -837,7 +837,9 @@ form#views button .updatenumber {
}
#recent_detection_middle_td img{
width:unset !important;
height:75px;
max-width:50px;
max-height:50px;
padding:0px;
float:left;
}
+7 -2
View File
@@ -128,8 +128,13 @@ if(isset($_GET['ajax_detections']) && $_GET['ajax_detections'] == "true" && isse
<?php } ?>
<form action="" method="GET">
<input type="hidden" name="view" value="Species Stats">
<button type="submit" name="species" value="<?php echo $mostrecent['Com_Name'];?>"><?php echo $mostrecent['Com_Name'];?></button><img style="width: unset !important;display: inline;height: 1em;cursor:pointer" title="View species stats" onclick="generateMiniGraph(this, '<?php echo $comname; ?>')" width=25 src="images/chart.svg"><br>
<a href="https://wikipedia.org/wiki/<?php echo $sciname;?>" target="_blank"><i><?php echo $mostrecent['Sci_Name'];?></i></a>
<button type="submit" name="species" value="<?php echo $mostrecent['Com_Name'];?>"><?php echo $mostrecent['Com_Name'];?></button>
<br>
<i><?php echo $mostrecent['Sci_Name'];?></i>
<a href="<?php $info_url = get_info_url($mostrecent['Sci_Name']); $url = $info_url['URL']; echo $url ?>" target="_blank">
<img style="width: unset !important; display: inline; height: 1em; cursor: pointer;" title="Info" src="images/info.png" width="25"></a>
<a href="https://wikipedia.org/wiki/<?php echo $sciname;?>" target="_blank"><img style="width: unset !important; display: inline; height: 1em; cursor: pointer;" title="Wikipedia" src="images/wiki.png" width="25"></a>
<img style="width: unset !important;display: inline;height: 1em;cursor:pointer" title="View species stats" onclick="generateMiniGraph(this, '<?php echo $comname; ?>')" width=25 src="images/chart.svg">
<br>Confidence: <?php echo $percent = round((float)round($mostrecent['Confidence'],2) * 100 ) . '%';?><br></div><br>
<video style="margin-top:10px" onplay='setLiveStreamVolume(0)' onended='setLiveStreamVolume(1)' onpause='setLiveStreamVolume(1)' controls poster="<?php echo $filename.".png";?>" preload="none" title="<?php echo $filename;?>"><source src="<?php echo $filename;?>"></video></td>
</form>
+10 -6
View File
@@ -562,9 +562,11 @@ $sciname = get_sci_name($name);
$info_url = get_info_url($sciname);
$url = $info_url['URL'];
echo "<table>
<tr>
<th><a href=\"$url\" target=\"top\">$name</a></th>
</tr>";
<tr><th>$name<br><span style=\"font-weight:normal;\">
<i>$sciname</i></span><br>
<a href=\"$url\" target=\"_blank\"><img title=\"$url_title\" src=\"images/info.png\" width=\"20\"></a>
<a href=\"https://wikipedia.org/wiki/$sciname\" target=\"_blank\"><img title=\"Wikipedia\" src=\"images/wiki.png\" width=\"20\"></a>
</th></tr>";
$iter=0;
while($results=$result2->fetchArray(SQLITE3_ASSOC))
{
@@ -649,9 +651,11 @@ echo "<table>
$info_url = get_info_url($sciname);
$url = $info_url['URL'];
echo "<table>
<tr>
<th><a href=\"$url\" target=\"top\">$name</a></th>
</tr>";
<tr><th>$name<br>
<i>$sciname</i><br>
<a href=\"$url\" target=\"_blank\"><img title=\"$url_title\" src=\"images/info.png\" width=\"20\"></a>
<a href=\"https://wikipedia.org/wiki/$sciname\" target=\"_blank\"><img title=\"Wikipedia\" src=\"images/wiki.png\" width=\"20\"></a>
</th></tr>";
while($results=$result2->fetchArray(SQLITE3_ASSOC))
{
$comname = preg_replace('/ /', '_', $results['Com_Name']);
+6 -5
View File
@@ -171,11 +171,12 @@ while($results=$result3->fetchArray(SQLITE3_ASSOC)){
$url_title = $info_url['TITLE'];
echo str_pad("<h3>$species</h3>
<table><tr>
<td class=\"relative\"><a target=\"_blank\" href=\"index.php?filename=".$results['File_Name']."\"><img title=\"Open in new tab\" class=\"copyimage\" width=25 src=\"images/copy.png\"></a> <a href=\"https://wikipedia.org/wiki/$dbsciname\" target=\"top\"/><i>$sciname</i></a><br>
<b>Occurrences: </b>$count<br>
<b>Max Confidence: </b>$maxconf<br>
<b>Best Recording: </b>$date $time<br>
<a href=\"$url\" target=\"top\"/>$url_title</a><br>
<td class=\"relative\"><a target=\"_blank\" href=\"index.php?filename=".$results['File_Name']."\"><img title=\"Open in new tab\" class=\"copyimage\" width=25 src=\"images/copy.png\"></a><i>$sciname</i>
<a href=\"$url\" target=\"_blank\"><img style=\"width: unset !important; display: inline; height: 1em; cursor: pointer;\" title=\"$url_title\" src=\"images/info.png\" width=\"20\"></a>
<a href=\"https://wikipedia.org/wiki/$sciname\" target=\"_blank\"><img style=\"width: unset !important; display: inline; height: 1em; cursor: pointer;\" title=\"Wikipedia\" src=\"images/wiki.png\" width=\"20\"></a><br>
Occurrences: $count<br>
Max Confidence: $maxconf<br>
Best Recording: $date $time<br><br>
<video onplay='setLiveStreamVolume(0)' onended='setLiveStreamVolume(1)' onpause='setLiveStreamVolume(1)' controls poster=\"$filename.png\" title=\"$filename\"><source src=\"$filename\"></video></td>
</tr>
</table>
+22 -23
View File
@@ -235,9 +235,12 @@ if(isset($_GET['ajax_detections']) && $_GET['ajax_detections'] == "true" ) {
<img onclick='setModalText(<?php echo $iterations; ?>,"<?php echo urlencode($image[2]); ?>", "<?php echo $image[3]; ?>", "<?php echo $image[4]; ?>", "<?php echo $image[1]; ?>", "<?php echo $image[5]; ?>")' src="<?php echo $image[1]; ?>" class="img1">
<?php } ?>
<?php echo $todaytable['Time'];?><br>
<b><a class="a2" href="<?php echo $url;?>" target="top"><?php echo $todaytable['Com_Name'];?></a></b><img style="height: 1em;cursor:pointer" title="<?php echo $url_title;?>" onclick="generateMiniGraph(this, '<?php echo $comname; ?>')" width=25 src="images/chart.svg"><br>
<a class="a2" href="https://wikipedia.org/wiki/<?php echo $sciname;?>" target="top"><i><?php echo $todaytable['Sci_Name'];?></i></a><br>
<?php echo $todaytable['Time'];?><br>
<b><a class="a2" href="<?php echo $url;?>" target="top"><?php echo $todaytable['Com_Name'];?></a></b><br>
<i><?php echo $todaytable['Sci_Name'];?></i>
<a href="<?php echo $url;?>" target="_blank"><img style="cursor:pointer;float:unset;display:inline" title=<?php echo $url_title;?> src="images/info.png" width="20"></a>
<a href="https://wikipedia.org/wiki/<?php echo $sciname;?>" target="_blank"><img style=";cursor:pointer;float:unset;display:inline" title="Wikipedia" src="images/wiki.png" width="20"></a>
<img style=";cursor:pointer;float:unset;display:inline" title="View species stats" onclick="generateMiniGraph(this, '<?php echo $comname; ?>')" width=20 src="images/chart.svg"><br>
<b>Confidence:</b> <?php echo round((float)round($todaytable['Confidence'],2) * 100 ) . '%';?><br></div><br>
<video onplay='setLiveStreamVolume(0)' onended='setLiveStreamVolume(1)' onpause='setLiveStreamVolume(1)' controls poster="<?php echo $filename.".png";?>" preload="none" title="<?php echo $filename;?>"><source preload="none" src="<?php echo $filename;?>"></video>
</td>
@@ -252,28 +255,24 @@ if(isset($_GET['ajax_detections']) && $_GET['ajax_detections'] == "true" ) {
<?php } ?>
</div>
<div>
<b><a class="a2" <?php if($_GET['kiosk'] == false){?>href="<?php echo $url;?>"<?php } else {echo "style='color:blue;'";} ?> target="top"><?php echo $todaytable['Com_Name'];?></a></b>
<?php
//If on mobile, add in a icon to link off to the recording so the user can see more info
if (isset($_GET['mobile'])) {
?>
<br>
<img style="height: 1em;cursor:pointer;float:unset;display:inline" title="View species stats" onclick="generateMiniGraph(this, '<?php echo $comname; ?>')" width=25 src="images/chart.svg">
<a target="_blank" href="index.php?filename=<?php echo $todaytable['File_Name']; ?>"><img style="height: 1em;cursor:pointer;float:unset;display:inline" class="copyimage-mobile" title="Open in new tab" width=16 src="images/copy.png"></a>'
<?php
}else{
//Else just put the species stats icon
?>
<img style="height: 1em;cursor:pointer;float:unset;display:inline" title="View species stats" onclick="generateMiniGraph(this, '<?php echo $comname; ?>')" width=25 src="images/chart.svg">
<?php
}
?>
<br>
<a class="a2" <?php if($_GET['kiosk'] == false){?>href="https://wikipedia.org/wiki/<?php echo $sciname;?>"<?php } else {echo "style='color:blue;'";} ?> target="top"><i><?php echo $todaytable['Sci_Name'];?></i></a><br>
</div>
<form action="" method="GET">
<input type="hidden" name="view" value="Species Stats">
<button class="a2" type="submit" name="species" value="<?php echo $todaytable['Com_Name'];?>"><?php echo $todaytable['Com_Name'];?></button>
<br><i>
<?php echo $todaytable['Sci_Name'];?>
<br>
<a href="<?php echo $url;?>" target="_blank"><img style="height: 1em;cursor:pointer;float:unset;display:inline" title=<?php echo $url_title;?> src="images/info.png" width="25"></a>
<?php if($_GET['kiosk'] == false){?>
<a href="https://wikipedia.org/wiki/<?php echo $sciname;?>" target="_blank"><img style="height: 1em;cursor:pointer;float:unset;display:inline" title="Wikipedia" src="images/wiki.png" width="25"></a>
<img style="height: 1em;cursor:pointer;float:unset;display:inline" title="View species stats" onclick="generateMiniGraph(this, '<?php echo $comname; ?>')" width=25 src="images/chart.svg">
<a target="_blank" href="index.php?filename=<?php echo $todaytable['File_Name']; ?>"><img style="height: 1em;cursor:pointer;float:unset;display:inline" class="copyimage-mobile" title="Open in new tab" width=16 src="images/copy.png"></a>
<?php } ?></i>
<br>
</div>
</form>
</div>
</td>
<td><b>Confidence:</b> <?php echo round((float)round($todaytable['Confidence'],2) * 100 ) . '%';?><br></td>
<td><?php if(!isset($_GET['mobile'])) { echo '<b>Confidence:</b>';} echo round((float)round($todaytable['Confidence'],2) * 100 ) . '%';?><br></td>
<?php if(!isset($_GET['mobile'])) { ?>
<td style="min-width:180px"><audio controls preload="none" src="<?php echo $filename;?>"></audio></td>
<?php } ?>