Skip to content

WISH: Sticky issue titles #10675

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
HenrikBengtsson opened this issue Mar 8, 2020 · 12 comments
Open

WISH: Sticky issue titles #10675

HenrikBengtsson opened this issue Mar 8, 2020 · 12 comments
Labels
issue/confirmed Issue has been reviewed and confirmed to be present or accepted to be implemented topic/ui Change the appearance of the Gitea UI

Comments

@HenrikBengtsson
Copy link
Contributor

HenrikBengtsson commented Mar 8, 2020

  • Git version: 1.11.2
  • Operating system: all
  • Database (use [x]):

Description

I'd like to propose an option for having issue titles be sticky when scrolling in the browser so that it is possible to always see what the title of the issue is regardless how far down you the comments you scroll. See below screenshots for behavior. This idea probably apply to other areas too, e.g. 'Pull requests'.

Screenshots

gitea_sticky_1
gitea_sticky_2

Proof-of-Concept Patch

I've implemented an ad-hoc patch myself that be in use for 3-4 months now. It is particularly useful in screen-share meetings where the moderator goes through issues and audience have no control of the interface. Using sticky issue titles avoid the question "What issue is this again?". The patch I apply for each Gitea update is:

--- view_title.tmpl 2020-03-08 14:07:39.647415337 -0700
+++ new_view_title.tmpl     2020-03-08 13:38:17.576454430 -0700
@@ -1,4 +1,4 @@
-<div class="sixteen wide column title">
+<div class="sixteen wide column title" style="position: -webkit-sticky; position: sticky; top: -10px; z-index: 10; background-color: white;">
        <div class="ui grid">
                <h1 class="twelve wide column">
                        <span class="index">#{{.Issue.Index}}</span> <span id="issue-title" class="has-emoji">{{.Issue.Title}}</span>
@@ -16,6 +16,8 @@
                        </div>
                {{end}}
        </div>
+</div>
+<div class="sixteen wide column title">
        {{if .HasMerged}}
                <div class="ui purple large label"><i class="octicon octicon-git-pull-request"></i> {{.i18n.Tr "repo.pulls.merged"}}</div>
        {{else if .Issue.IsClosed}}
@HenrikBengtsson
Copy link
Contributor Author

Fixed: I posted a patch/diff toward the wrong code base so it looked much bigger - tI've updated the patch/diff - it's really a small update

@guillep2k guillep2k added the topic/ui Change the appearance of the Gitea UI label Mar 8, 2020
@stale
Copy link

stale bot commented May 7, 2020

This issue has been automatically marked as stale because it has not had recent activity. I am here to help clear issues left open even if solved or waiting for more insight. This issue will be closed if no further activity occurs during the next 2 weeks. If the issue is still valid just add a comment to keep it alive. Thank you for your contributions.

@stale stale bot added the issue/stale label May 7, 2020
@HenrikBengtsson
Copy link
Contributor Author

unstale[human]

@stale stale bot removed the issue/stale label May 8, 2020
@lunny
Copy link
Member

lunny commented May 8, 2020

@HenrikBengtsson Could you send a PR to gitea?

@lunny lunny added the issue/confirmed Issue has been reviewed and confirmed to be present or accepted to be implemented label May 8, 2020
@HenrikBengtsson
Copy link
Contributor Author

@lunny, would the diff in my top post suffice? I'm not familiar with the Gitea template framework, so it's a bit of a good-enough hack.

@jolheiser
Copy link
Member

@HenrikBengtsson I think we would run into issues with the dark theme (e.g. white background style), as well we would want it to be optional and probably controlled by a class rather than inline styling if possible.

@silverwind
Copy link
Member

silverwind commented Aug 21, 2020

I'd oppose this. It is one of the annoyances of GH that I don't like and which I disable with userstyles.

Issue title is not important enought not warrant taking away screen estate. It's duplicating with the browser tab title and easily visible when opening the issue, which ought to be enough.

@HenrikBengtsson
Copy link
Contributor Author

I'd oppose this. ... Issue title is not important enought not warrant taking away screen estate.

Maybe it could be an optional feature?

So, the background for this feature request is to improve the Gitea experience during group meetings (in person or online) going through issues in the issue tracker. You have one person controlling the Gitea interface who share/project their screen. Since that person is in control, they also know exactly which issue they are currently on. In contrast, everyone else tends to get lost in which issue is currently discussed. This happens because the transition to the next issue is often too quick, or people tend to keep chatting with attention elsewhere when moving to the next issue. The issue title provides everyone with minimal, necessary info to catch up without having to ask the host to scroll back up to show the title and so on. We have used "stick issue titles" for 6+ months now and it helped us a lot.

@silverwind
Copy link
Member

Yeah sticky headers are certainly something to consider having a option for. Some people like them, some don't and they can be very distracting, especially on small screens.

I guess we need to introduce a "UI Options" section, can probably be localStorage-backed only.

@HenrikBengtsson
Copy link
Contributor Author

Your and my "use case" made me realize that this type of feature then might belong to whoever is currently browsing Gitea, rather than the repos owner or Gitea admin. (I deploy my hack throughout Gitea at each update)

@silverwind
Copy link
Member

silverwind commented Aug 21, 2020

I'd make it a browser-specific option (e.g. localStorage does that). I guess you could sticky that header with a simple Userstyle too, so no need to touch server code.

@HenrikBengtsson
Copy link
Contributor Author

Not really an option for us - too many people, computes, and browsers hosting - it's hard enough to get people to use issue trackers in the first place :p

martijndeb added a commit to martijndeb/gitea that referenced this issue Jan 14, 2022
In issue go-gitea#10675 it's requested to make the issue bar sticky upon scrolling in the issue view. The proposed change changes inline html, which is not desirable. As such I've added the position sticky option to it's container, and fix the background upon scrolling.
zeripath pushed a commit that referenced this issue Jun 5, 2022
…8271)

* Make the wiki editor bar sticky for longer wiki edits

On codeberg community it was requested to make the wiki editor toolbar sticky for longer wiki posts, so one wouldn't have to scroll to the top to use it. (Reference; https://codeberg.org/Codeberg/Community/issues/533).

In order to make this happen, the .editor-toolbar class needs to become position: sticky, and we need to fix it's transparent background and border-bottom. Because the bottom disappears, we add it. This makes the border become a double border, because the CodeMirror area defines borders for all. As such I've added a border-top: none, on the wiki write tab for the CodeMirror class.

* Make the issue bar in the issue view sticky for issue #10675

In issue #10675 it's requested to make the issue bar sticky upon scrolling in the issue view. The proposed change changes inline html, which is not desirable. As such I've added the position sticky option to it's container, and fix the background upon scrolling.

* Make linter happy on _repository.less

Fix 0px -> 0 to make the linter happy.

* Make linter happy on _editor.less

Fix 0px -> 0 to make the linter happy.

* Change z-index to the lowest boundary of 1

As per review of @silverwind change the z-index to it's lowest requirement of 1.

* Change z-index to the lowest boundary of 1

As per review of @silverwind change the z-index to it's lowest requirement of 1.

* Revert changes made to wiki editor (unsticky) and add max-height

Fixes the max-height to 85vh, on the proposed 90vh it just came out just slightly too large.
Unstickies the changes from the sticky commits.

* Revert changes for the sticky title editor

Removes the changes as done by the sticky title editor.

* Add max-height definition to CodeMirror-scroll

Add the max-height definition for the CodeMirror-scroll class in order to generalize the changes spoken about in PR #18271

* Remove CodeMirror-scroll definition

Remove the max-height in CodeMirror-scroll definition, in order to generalize it in the CodeMirror less file. As per discussion in #18271.

* fine tune CodeMirror min-height/max-height

Co-authored-by: 6543 <6543@obermui.de>
Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>
AbdulrhmnGhanem pushed a commit to kitspace/gitea that referenced this issue Aug 24, 2022
…-gitea#18271)

* Make the wiki editor bar sticky for longer wiki edits

On codeberg community it was requested to make the wiki editor toolbar sticky for longer wiki posts, so one wouldn't have to scroll to the top to use it. (Reference; https://codeberg.org/Codeberg/Community/issues/533).

In order to make this happen, the .editor-toolbar class needs to become position: sticky, and we need to fix it's transparent background and border-bottom. Because the bottom disappears, we add it. This makes the border become a double border, because the CodeMirror area defines borders for all. As such I've added a border-top: none, on the wiki write tab for the CodeMirror class.

* Make the issue bar in the issue view sticky for issue go-gitea#10675

In issue go-gitea#10675 it's requested to make the issue bar sticky upon scrolling in the issue view. The proposed change changes inline html, which is not desirable. As such I've added the position sticky option to it's container, and fix the background upon scrolling.

* Make linter happy on _repository.less

Fix 0px -> 0 to make the linter happy.

* Make linter happy on _editor.less

Fix 0px -> 0 to make the linter happy.

* Change z-index to the lowest boundary of 1

As per review of @silverwind change the z-index to it's lowest requirement of 1.

* Change z-index to the lowest boundary of 1

As per review of @silverwind change the z-index to it's lowest requirement of 1.

* Revert changes made to wiki editor (unsticky) and add max-height

Fixes the max-height to 85vh, on the proposed 90vh it just came out just slightly too large.
Unstickies the changes from the sticky commits.

* Revert changes for the sticky title editor

Removes the changes as done by the sticky title editor.

* Add max-height definition to CodeMirror-scroll

Add the max-height definition for the CodeMirror-scroll class in order to generalize the changes spoken about in PR go-gitea#18271

* Remove CodeMirror-scroll definition

Remove the max-height in CodeMirror-scroll definition, in order to generalize it in the CodeMirror less file. As per discussion in go-gitea#18271.

* fine tune CodeMirror min-height/max-height

Co-authored-by: 6543 <6543@obermui.de>
Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
issue/confirmed Issue has been reviewed and confirmed to be present or accepted to be implemented topic/ui Change the appearance of the Gitea UI
Projects
None yet
Development

No branches or pull requests

5 participants