search

algorithm-archivists / algorithm-archive

A collaborative book on algorithms
https://www.algorithm-archive.org
MIT License
2.38k stars 356 forks source link

Issues with the top bar when using a theme other then the default (dark and sepia) #978

Open Udarthegreat opened 2 years ago

Udarthegreat commented 2 years ago

Bug Report

Description

When on mobile, and the theme is sepia or dark and you scroll up from the top the bar at the top disappears which makes the UI hard to read and interact with

Steps to Reproduce

Steps to reproduce the behavior:

  1. Go to any page
  2. Click on the big A (I have no clue what it is called)
  3. Switch theme from the default to a different one
  4. Scroll down
  5. The bar at the top disappears

Expected behavior

From what I can tell there is supposed to be be a bar behind the language selector and the A (I have no clue what it is called)

Screenshots

This first screen shot is of the default theme with what seams to be the default and correct behavior IMG_0062

Next is the sepia and dark themes in that order which have issue

IMG_0063

IMG_0064

Environment

Additional context

I am on IOS and don't have access to Android so I could not test it in those devices; I also haven't had the chance to test on desktop. Also I would like to note that this is my first issue on this project so I am sorry if I made a mistake when typing this up.

For Algorithm Archive Developers

Udarthegreat commented 2 years ago

I just checked on desktop and it has the same issues with the themes (I would link my version but I don't know how to check the version of Firefox on desktop).

light theme works sepia theme dosnt work dark theme dosnt work

ShadowMitia commented 2 years ago

Thanks for the report! You can check thr version on dedktop in Help > About firefox I think.

Udarthegreat commented 2 years ago

Thank you for the help with the menus, that means that the images for desktop(https://github.com/algorithm-archivists/algorithm-archive/issues/978#issuecomment-1000866088) are taken from Firefox 95.0.2

Amaras commented 2 years ago

I can reproduce this on Vivaldi browser version 5.0.2497.32, installed on my Ubuntu 20.04 machine.

This seems to be intentional, is in the light theme bar is opaque, while the Dark and Sepia themes have a transparent bar.

This will probably a simple CSS change (if JS doesn't mess with it), if someone can do this or point me to the themes.

Udarthegreat commented 2 years ago

question, should I mark The bug can be fixed as checked on the main post at the top or should I not since from what I can tell at this point it would be possible to do so.

also are there any other tags that should be added to this issue?

mahdisarikhani commented 2 years ago

I think this can be solved by adding these lines to styles/website.css

.book.color-theme-1 .book-header {
    color: #afa70;
    background: #f3eacb;
}

.book.color-theme-2 .book-header {
    color: #7e888b;
    background: #1c1f2b;
}

It worked on Firefox and Chromium on my Arch Linux machine.

Amaras commented 2 years ago

This should probably be solved using CSS variables, but this should be good enough, I'll look at it when I have some time

mahdisarikhani commented 2 years ago

The CSS variables of themes are written in gitbook-plugin-fontsettings. I found these two lines cause the transparent top bar, but I do not know how gitbook/honkit plugins works, so cannot go any further.

Amaras commented 2 years ago

I think we use the default gitbook themes, which makes it hard to change them.

We seem to be using those plugins, which doesn't seem to include the plugin you linked:

EDIT: Looking at the dependencies, Honkit seems to use the (now read-only) plugin you pointed to indeed. I think I can fork the plugin so we can modify it ourselves

Udarthegreat commented 2 years ago

So from what I can tell this is fixable, am I wrong here, does this mean that I can mark it The bug can be fixed on the top post

leios commented 2 years ago

I think we got caught up in the fact that the theme api plugin does not technically have a license attached to it, so we were uncomfortable modifying it. The fonts plugin is apache, so it's fine to fork and modify that.

Maybe the best course of action is to fork that one, make the changes and see if setting it as a dependency fixes the issue.