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
+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 } ?>