Skip to content

Conversation

@Bibo-Joshi
Copy link
Member

@Bibo-Joshi Bibo-Joshi commented Jan 5, 2023

As suggested in https://t.me/c/1494805131/32133. I kept the version number in a new line though … build should be up soonish on rtd.
Build at https://docs.python-telegram-bot.org/en/doc-logo-adjustments/

Preview:
image

@Bibo-Joshi Bibo-Joshi added the ⚙️ documentation affected functionality: documentation label Jan 5, 2023
Copy link
Member

@Poolitzer Poolitzer left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Huge improvement on mobile! Thanks!

Copy link
Member

@clot27 clot27 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Finally some more space :)

.sidebar-sticky .sidebar-brand {
flex-direction: row;
}

Copy link
Member

@lemontree210 lemontree210 Jan 7, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
.sidebar-container {
width: 24rem;
}

It sort of vexes me that many class names are split over 2 lines in the sidebar. Increasing the width from default 15rem to 24rem makes sure even the longest class fits on one line. This may have to be checked on mobile, though

Also, I do realize it's sort of off topic in this PR

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

On my display with that setting there are still classes that have a linebreak - even on the doc-no-prefixes branch. Plus, the right hand side tree gets so wide that it overlaps the actual content …

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The first bit probably depends on screen resolution. When I make my browser window smaller, I see that the line breaks return. This width must be some maximum width and the screen resolution overrides that.

The second bit is especially weird because I'm changing the width of the container, not its content. In my browser, the right-hand-side tree simply disappears if the window is not wide enough to display it.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

BTW increasing the container width makes the logo bigger again (because there are percentages there) :)

Copy link
Member

@lemontree210 lemontree210 Jan 7, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

How will the following work with you? I tried resizing the browser and it looks fine.

.sidebar-sticky .sidebar-brand {
      flex-direction: row;
}

.sidebar-sticky .sidebar-brand .sidebar-logo-container {
      align-self: center;
      width: 30%;
}

.sidebar-sticky .sidebar-brand .sidebar-brand-text {
      align-self: center;
}

.content {
      width: 60%;
}

.sidebar-drawer {
      width: 30%;
}

.sidebar-container {
      width: 100%;
}

(you can adjust the percentages of content and sidebar-drawer slightly)

Obviously, the content setting may need to go into a different file or the file should be renamed

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

the right hand side tree gets so wide that it overlaps the actual content …

I see that if you e.g. open the page for telegram.BotCommandScopeAllChatAdministrators, the end of the title will be hidden under the right sidebar. But it happens no matter what settings we put in the new CSS file.

I guess we have to add overflow-wrap: anywhere to h1 tag.

Copy link
Member Author

@Bibo-Joshi Bibo-Joshi Jan 8, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

How will the following work with you? I tried resizing the browser and it looks fine.

this somewhat works on my desktop screen, but the main content column becomes really narrow and unless you expand the tree on the LHS there's a lot of dead space. TBH, I'd rather like to keep these settings as-is. I can live with the the linbreaks in the navigation tree …

I guess we have to add overflow-wrap: anywhere to h1 tag.

That sounds reasonable. Will add.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, tampering with CSS can be really annoying :) It is to me, at least :)

Copy link
Member

@harshil21 harshil21 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

good change!

@Bibo-Joshi Bibo-Joshi merged commit 0362005 into doc-fixes Jan 10, 2023
@Bibo-Joshi Bibo-Joshi deleted the doc-logo-adjustments branch January 10, 2023 16:49
@Bibo-Joshi Bibo-Joshi mentioned this pull request Jan 10, 2023
9 tasks
@github-actions github-actions bot locked and limited conversation to collaborators Jan 17, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

⚙️ documentation affected functionality: documentation

Projects

None yet

Development

Successfully merging this pull request may close these issues.

6 participants