Fix : improve darkmode

[alexbelgium]

Fix https://github.com/Nachtzuster/BirdNET-Pi/pull/85#issuecomment-2177587300

• [x] background of weekly report
• [x] sort buttons in recordings
• [x] drop down settings is white
• [x] minigraph

[Hiemstra87]

Hi,

For issue 1:background of weekly report Try setting the position of .chartdiv to "static" instead of "fixed"

.chartdiv {
  position: static;
  top: 0%;
  left: 50%;
  width: calc(40% - 2px);
  height: calc(25% - 2px);
  background-color: #fff;
  z-index: 9999;
  overflow: auto;
  border-radius: 5px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);

[Hiemstra87]

For point 2: Sorting buttons:

I found in my search (see discusion 101, with myself) that these are hardcoded in Play.php & Stats.php. They do have the class "sortbutton" declared (found in the style.css on 636). I've tried to make the 'active' button style determined by the css, but not with any luck as it depends on the isset get request defined there. I am fiddling around to see if I have a simple solution for that.

[Hiemstra87]

For point 2: Sorting buttons:

I found in my search (see discusion 101, with myself) that these are hardcoded in Play.php & Stats.php. They do have the class "sortbutton" declared (found in the style.css on 623). I've tried to make the 'active' button style determined by the css, but not with any luck as it depends on the isset get request defined there. I am fiddling around to see if I have a simple solution for that.

==============================================

I have been fiddling wih the sorting buttons, and came with the following changes to reflect the needed changes:

Play.php line 396 - 416 https://github.com/Nachtzuster/BirdNET-Pi/blob/d3b6ccf65df4fe1d5d539b9dbd01f35c6a17896c/scripts/play.php#L396-L416

New:

<?php
#If no specific species
if(!isset($_GET['species']) && !isset($_GET['filename'])){
?>
<div class="play">
<?php if($view == "byspecies" || $view == "date") { ?>
<div style="width: auto; text-align: center" class="sortbutton">
   <form action="views.php" method="GET">
      <input type="hidden" name="view" value="Recordings">
      <input type="hidden" name="<?php echo $view; ?>" value="<?php echo $_GET['date']; ?>">
      <button <?php if(!isset($_GET['sort']) || $_GET['sort'] == "alphabetical"){ echo "class='active !important;'"; }?> type="submit" name="sort" value="alphabetical">
         <img src="images/sort_abc.svg" title="Sort by alphabetical" alt="Sort by alphabetical">
      </button>
      <button <?php if(isset($_GET['sort']) && $_GET['sort'] == "occurrences"){ echo "class='active !important;'"; }?> type="submit" name="sort" value="occurrences">
         <img src="images/sort_occ.svg" title="Sort by occurrences" alt="Sort by occurrences">
      </button>
   </form>
</div>
<br>
<?php } ?>

Play.php line 514 - 529 https://github.com/Nachtzuster/BirdNET-Pi/blob/d3b6ccf65df4fe1d5d539b9dbd01f35c6a17896c/scripts/play.php#L514-L529

New:

<div style="width: auto; text-align: center" class="sortbutton">
   <form action="views.php" method="GET">
      <input type="hidden" name="view" value="Recordings">
      <input type="hidden" name="species" value="<?php echo $_GET['species']; ?>">
      <input type="hidden" name="sort" value="<?php echo $_GET['sort']; ?>">
      <button <?php if(!isset($_GET['sort']) || $_GET['sort'] == "" || $_GET['sort'] == "date"){ echo "class='active !important;'"; }?> type="submit" name="sort" value="date">
         <img width=35px src="images/sort_date.svg" title="Sort by date" alt="Sort by date">
      </button>
      <button <?php if(isset($_GET['sort']) && $_GET['sort'] == "confidence"){ echo "class='active !important;'"; }?> type="submit" name="sort" value="confidence">
         <img src="images/sort_occ.svg" title="Sort by confidence" alt="Sort by confidence">
      </button><br>
      <input style="margin-top:10px" <?php if(isset($_GET['only_excluded'])){ echo "checked"; }?> type="checkbox" name="only_excluded" onChange="submit()">
      <label for="onlyverified">Only Show Purge Excluded</label>
   </form>
</div>

Stats.php line 63 - 75 https://github.com/Nachtzuster/BirdNET-Pi/blob/d3b6ccf65df4fe1d5d539b9dbd01f35c6a17896c/scripts/stats.php#L63-L75

New:

  <div style="width: auto; text-align: center" class="sortbutton">
   <form action="views.php" method="GET">
    <input type="hidden" name="sort" value="<?php if(isset($_GET['sort'])){echo $_GET['sort'];}?>">
      <input type="hidden" name="view" value="Species Stats">
      <button <?php if(!isset($_GET['sort']) || $_GET['sort'] == "alphabetical"){ echo "class='active !important;'"; }?> type="submit" name="sort" value="alphabetical">
         <img src="images/sort_abc.svg" title="Sort by alphabetical" alt="Sort by alphabetical">
      </button>
      <button <?php if(isset($_GET['sort']) && $_GET['sort'] == "occurrences"){ echo "class='active !important;'"; }?> type="submit" name="sort" value="occurrences">
         <img src="images/sort_occ.svg" title="Sort by occurrences" alt="Sort by occurrences">
      </button>
   </form>
</div>

Style.css line 623 - 639 https://github.com/Nachtzuster/BirdNET-Pi/blob/d3b6ccf65df4fe1d5d539b9dbd01f35c6a17896c/homepage/style.css#L623-L629

New:

.sortbutton {
  margin-top:10px;
  font-size:x-large;
  background: #363636;
  padding:5px;
  box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.10);
}

.sortbutton button:hover {
  background-color: #999999;
  color: white;
}

.sortbutton button.active {
  background-color: #999999;
  color: white;
}

[alexbelgium]

For point 2: Sorting buttons:

Thanks very much! I'll add it to the PR

[alexbelgium]

Hi,

For issue 1:background of weekly report Try setting the position of .chartdiv to "static" instead of "fixed"

.chartdiv {
  position: static;
  top: 0%;
  left: 50%;
  width: calc(40% - 2px);
  height: calc(25% - 2px);
  background-color: #fff;
  z-index: 9999;
  overflow: auto;
  border-radius: 5px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);

Hi, chartdiv is used for the minicharts I don't think the weekly report page uses a div style yet - I'll look if I can use one with your proposal of position static! Thanks very much for having looked in that i'll test your proposal tomorrow

[Hiemstra87]

Hi, For issue 1:background of weekly report Try setting the position of .chartdiv to "static" instead of "fixed"

.chartdiv {
  position: static;
  top: 0%;
  left: 50%;
  width: calc(40% - 2px);
  height: calc(25% - 2px);
  background-color: #fff;
  z-index: 9999;
  overflow: auto;
  border-radius: 5px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);

Hi, chartdiv is used for the minicharts I don't think the weekly report page uses a div style yet - I'll look if I can use one with your proposal of position static! Thanks very much for having looked in that i'll test your proposal tomorrow

Haven't seen it in the code of the weekly_report.php, but inspection of the page says it uses it on the table it produces:

Looking at how it got there, I must admit I do not have a clue, there does not seem to be any logical class set for any std TBODY or the likes, in the code itself. only in the page inspection..:

[alexbelgium]

@Hiemstra87

Thanks for the code for the buttons! I have an issue : when I use your exact code I get

I've pushed an alternate code based on your principles that avoid the big bar, but then hover doesn't work... any idea?? thanks!

[alexbelgium]

Thanks to you now we only have remaining :

• hover on sortbuttons (if needed)
• drop down in settings (I'll try asking chatgpt if it has an idea but I fear it is also a question of adding css which I don't know much about)

[Hiemstra87]

@Hiemstra87

Thanks for the code for the buttons! I have an issue : when I use your exact code I get

I've pushed an alternate code based on your principles that avoid the big bar, but then hover doesn't work... any idea?? thanks!

Sorry, my bad. Not very used to Github notations. I tried making my changes bold in the code, but that (obviously) doesn't work. the ** should be deleted.

EDIT: I've removed the asterisks ** from the code example.

[Hiemstra87]

Thanks to you now we only have remaining :

• hover on sortbuttons (if needed)
• drop down in settings (I'll try asking chatgpt if it has an idea but I fear it is also a question of adding css which I don't know much about)

New try on the CSS (mind the colors, i've made them stand out a bit more):

.sortbutton {
  margin-top:10px;
  font-size:x-large;
  background:#FF0000;
  padding:5px;
  box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.10);
}

.sortbutton:hover {
  background-color: #00FFFF;
  color: green;
}

.sortbutton.active {
  background-color: #000000;
  color: yellow;
}

And Play.php (402 - 414):

<div style="width: auto;
   text-align: center"> 
   <form action="views.php" method="GET">
      <input type="hidden" name="view" value="Recordings">
      <input type="hidden" name="<?php echo $view; ?>" value="<?php echo $_GET['date']; ?>">
      <button <?php if(!isset($_GET['sort']) || $_GET['sort'] == "alphabetical"){ echo "class='sortbutton active'";} else { echo "class='sortbutton'"; }?> type="submit" name="sort" value="alphabetical">
         <img src="images/sort_abc.svg" title="Sort by alphabetical" alt="Sort by alphabetical">
      </button>
      <button <?php if(isset($_GET['sort']) && $_GET['sort'] == "occurrences"){ echo "class='sortbutton active'";} else { echo "class='sortbutton'"; }?> type="submit" name="sort" value="occurrences">
         <img src="images/sort_occ.svg" title="Sort by occurrences" alt="Sort by occurrences">
      </button>
   </form>
</div>

And Play.php (514 - 529):

<div style="width: auto;
   text-align: center">
   <form action="views.php" method="GET">
      <input type="hidden" name="view" value="Recordings">
      <input type="hidden" name="species" value="<?php echo $_GET['species']; ?>">
      <input type="hidden" name="sort" value="<?php echo $_GET['sort']; ?>">
      <button <?php if(!isset($_GET['sort']) || $_GET['sort'] == "" || $_GET['sort'] == "date"){ echo "class='sortbutton active'";} else { echo "class='sortbutton'"; }?> type="submit" name="sort" value="date">
         <img width=35px src="images/sort_date.svg" title="Sort by date" alt="Sort by date">
      </button>
      <button <?php if(isset($_GET['sort']) && $_GET['sort'] == "confidence"){ echo "class='sortbutton active'";} else { echo "class='sortbutton'"; }?> type="submit" name="sort" value="confidence">
         <img src="images/sort_occ.svg" title="Sort by confidence" alt="Sort by confidence">
      </button><br>
      <input style="margin-top:10px" <?php if(isset($_GET['only_excluded'])){ echo "checked"; }?> type="checkbox" name="only_excluded" onChange="submit()">
      <label for="onlyverified">Only Show Purge Excluded</label>
   </form>
</div>

And Stat.php (63 - 75):

  <div style="width: auto;
   text-align: center">
   <form action="views.php" method="GET">
    <input type="hidden" name="sort" value="<?php if(isset($_GET['sort'])){echo $_GET['sort'];}?>">
      <input type="hidden" name="view" value="Species Stats">
      <button <?php if(!isset($_GET['sort']) || $_GET['sort'] == "alphabetical"){ echo "class='sortbutton active'";} else { echo "class='sortbutton'"; }?> type="submit" name="sort" value="alphabetical">
         <img src="images/sort_abc.svg" title="Sort by alphabetical" alt="Sort by alphabetical">
      </button>
      <button <?php if(isset($_GET['sort']) && $_GET['sort'] == "occurrences"){ echo "class='sortbutton active'";} else { echo "class='sortbutton'"; }?> type="submit" name="sort" value="occurrences">
         <img src="images/sort_occ.svg" title="Sort by occurrences" alt="Sort by occurrences">
      </button>
   </form>
</div>

Had to build an else to the if statement to change class, not the most compact code, but alas.

[alexbelgium]

Thanks! I was thinking that pure colors like this are really different from the current dark mode palette ; so I've tried to adapt a bit in greyer tones. I've also added your code. I think the background should be the inverse, no? to have the sortbutton as dark and the active as reddish ?

Thanks very much for your updates now the button fully work :-)

[Hiemstra87]

Let me take a look tonight.

[alexbelgium]

Ok I've got the last element (drop down menus) I'll just add the css style by using an existing one

[alexbelgium]

In theory everything works now! Thanks very much @Hiemstra87 ! Please let me know if you are happy with the different improvements & color scheme and then we'll signal that the PR is open for review :-)

[Hiemstra87]

Just tested the code, and here's my opinions: Dark mode looks nice, and works properly. Did you change the button (active & hover) color to grey, or is my code not updated?

• One minor nuisance is the adminer looks are unworkable. should not be a problem for most (and they can allways refer back to the 'light-mode':
• some black icons (and the logo) are hard to see, especially on mobile (for example: menu.png, copy.png icon, Icons on recordings page for deletion/sort change, etc). We might look at alternative pictures, or set the background on them to a lighter grey.

===============================

For the light mode:

• The following needs to be adjusted for the hover to work (and please switch the colors for 'Sortbutton' and 'sortbutton.active/hover', as in my head it should 'light up' when selected): old

  
  .sortbutton {
  margin-top:10px;
  font-size:x-large;
  background:#dbffeb;
  padding:5px;
  box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.10);
  }

.sortbutton button:hover { background-color: #77c487; color: white; }

.sortbutton button.active { background-color: #77c487; color: white; }

**new, incl. color switcheroo**

.sortbutton { margin-top:10px; font-size:x-large; background:#77c487; padding:5px; box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.10); }

.sortbutton:hover { background-color: #dbffeb; color: white; }

.sortbutton.active { background-color: #dbffeb; color: white; }

- I see you colored the dropdowns here (green), which is cool, but readability is a bit affected. Could probably do with the lighter greencolor #77c487

Checked on mobile too, looks great, only the png icons mentioned before are a bit hard to see.

This has been nice work though, haven't been coding php and css in 20 years..

[alexbelgium]

Thanks very much ! I thought I had implemented the latest palette you proposed but perhaps forgot to commit. I'll check your comments tomorrow, currently watching the euro ;)

Thanks again for all the comments and testing that's a great example of what makes github so nice in terms of collaboration!

[Hiemstra87]

Was watching to, hopefully Italy gets some action in in the second half. Have fun!

[alexbelgium]

Hi, thanks!

Status summary :

• [x] background of weekly report
• [x] sort buttons in recordings : dark mode
• [x] sort buttons in recordings : light mode
• [x] drop down settings : dark mode
• [x] drop down settings : light mode
• [x] minigraph
• [x] adminer background fixed
• [x] flickr image popup fixed
• [x] sort buttons pallette : @Hiemstra87 sorry not sure to understand if you preferred the color palette from this commit or the grey scale from this one ? From a comment you had made somewhere in the reviews I thought you wanted to go back to grayscale but the colors also look quite nice!
• [ ] black icons : it's not an issue when seen on my cell phone but we could do it Indeed. I would propose to keep the existing pictures and then make the background cleaner !

[Hiemstra87]

• [ ] sort buttons pallette: Myself i prefer the greyscale, but don't do this to please my eyes. I'll adjust the color palette later on to fit my needs. My only ask is to keep to the existing dark color scheme as much as possible.
• [ ] black icons: could be a different feature request. Would be nice to have dark & light icons in the arsenal to use later on in different color modes (as we are moving most of the color declarations to the css now, different color modes should be an easy step forwards.

I'll check the code this afternoon, but I trust you adressed my minor concerns and this is ready for the pull. Thanks for the nice coöperation, felt nice to dive in some code after all these years, I might do this more often.

[Hiemstra87]

Looking good, I think good enough for a review.

[alexbelgium]

Thanks! And indeed the grayscale is the one in the current code. And I repriprocate that it was a really nice collaborative exercise ! I'll open it for review

[alexbelgium]

• [ ] black icons: could be a different feature request. Would be nice to have dark & light icons in the arsenal to use later on in different color modes (as we are moving most of the color declarations to the css now, different color modes should be an easy step forwards.

for the dark images, perhaps if we add a white border it might do the trick ?

[alexbelgium]

Corrected filemanager too ; now only phpsysinfo is without dark mode

[Nachtzuster]

@alexbelgium I see you have actually useful commit messages, thank you!

[Nachtzuster]

@alexbelgium @Hiemstra87 you want to keep the green dot?

[Hiemstra87]

@alexbelgium @Hiemstra87 you want to keep the green dot?

How I missed that one! Nah, Let's make that inline with the rest. Lighter grey or something?

[Hiemstra87]

• [ ] black icons: could be a different feature request. Would be nice to have dark & light icons in the arsenal to use later on in different color modes (as we are moving most of the color declarations to the css now, different color modes should be an easy step forwards.

for the dark images, perhaps if we add a white border it might do the trick ?

Schould help, Let's see

[alexbelgium]

@alexbelgium @Hiemstra87 you want to keep the green dot?

How I missed that one! Nah, Let's make that inline with the rest. Lighter grey or something?

Thanks we had missed that one!

Lighter gray is nice ; I'll push a commit.

Makes me wonder if we are right to have a full greyscale, or if we should have redish highlights as you had started doing with the sortbuttons. It might look more stylish with redish highlights. Anyway I've pushed it as greyscale for the moment

[Hiemstra87]

I say grayscale for now, I did the red to see better if my coding worked properly.. Later on we could look at other colorschemes

[alexbelgium]

Thanks! Then added :-)

[Hiemstra87]

I like the glow, nice work

[alexbelgium]

I'll probably increase a bit the glow to make it more apparent

[Nachtzuster]

Some stuff in the default theme has turned green: drop-down boxes: background of some textboxes:

[alexbelgium]

Some stuff in the default theme has turned green

Thanks very much! I've corrected .testbtn to have those white