Skip to content

Several fixes for mobile UI #25634

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.

Sign up for GitHub

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

Merged
merged 10 commits into from
Jul 4, 2023
Merged

Several fixes for mobile UI #25634

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
47dafcc
WIP
denyskon Jul 1, 2023
4567069
fixes
denyskon Jul 2, 2023
7b43aad
improvements
denyskon Jul 3, 2023
72f8bb5
Update web_src/css/repo.css
denyskon Jul 3, 2023
2e8a44d
fine tune
wxiaoguang Jul 3, 2023
972ea3e
Merge pull request #1 from wxiaoguang/fix/mobile-ui
denyskon Jul 3, 2023
3b4e054
remove arrow to avatar
denyskon Jul 3, 2023
7b9ec74
Merge branch 'fix/mobile-ui' of github.com:denyskon/gitea into fix/mo…
denyskon Jul 3, 2023
193dce5
add nowrap for admin table header
denyskon Jul 3, 2023
237232a
Merge branch 'main' into fix/mobile-ui
silverwind Jul 4, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions templates/repo/branch/list.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@
<a role="button" class="btn interact-bg gt-p-3" href="{{$.FeedURL}}/rss/branch/{{PathEscapeSegments .DefaultBranchBranch.DBBranch.Name}}">{{svg "octicon-rss"}}</a>
{{end}}
{{if not $.DisableDownloadSourceArchives}}
<div class="ui dropdown btn interact-bg gt-p-3" data-tooltip-content="{{$.locale.Tr "repo.branch.download" ($.DefaultBranchBranch.DBBranch.Name)}}">
<div class="ui dropdown btn interact-bg branch-download" data-tooltip-content="{{$.locale.Tr "repo.branch.download" ($.DefaultBranchBranch.DBBranch.Name)}}">
Copy link
Contributor

Choose a reason for hiding this comment

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

There are other buttons <button class="btn interact-bg gt-p-3..., why this "dropdown btn" needs special styles (eg: vertical-align: bottom;) ?

Copy link
Member Author

Choose a reason for hiding this comment

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

The dropdown class sets the vertical-align property for the dropdown itself, which resulted in misalignment of the download icon

Copy link
Contributor

@wxiaoguang wxiaoguang Jul 3, 2023 •
edited
Loading

Choose a reason for hiding this comment

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

That's also related to the side effect of global .svg { vertical-align: ... }

@silverwind I would suggest to make .svg { vertical-align: middle; } by default. What's the side effect of it?

Copy link
Contributor

@wxiaoguang wxiaoguang Jul 3, 2023 •
edited
Loading

Choose a reason for hiding this comment

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

Otherwise, maybe we need to make the "ui button" and "ui dropdown" (even "flex-text....") have the same "vertical-align:" as ".svg" (need to check the demo/examples on devtest page)

Copy link
Member Author

Choose a reason for hiding this comment

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

It is not svg but the button itself. I now created a combined class for this button row with vertical-align: middle for every single button.

Copy link
Contributor

Choose a reason for hiding this comment

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

I tried on try.gitea.io, it seems that the vertical-align on ".svg" is directly related.

Since it's a longstanding problem, I guess it doesn't block

Copy link
Member Author

Choose a reason for hiding this comment

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

Did you spot this kind of issue in other places? If so, I could take a look in another PR

Copy link
Member

@silverwind silverwind Jul 3, 2023 •
edited
Loading

Choose a reason for hiding this comment

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

That's also related to the side effect of global .svg { vertical-align: ... }

@silverwind I would suggest to make .svg { vertical-align: middle; } by default. What's the side effect of it?

Pretty sure this would cause regressions. FWIW, GitHub has vertical-align: text-bottom globally on all octicons. I guess you can never make it right for all situations.

{{svg "octicon-download"}}
<div class="menu">
<a class="item archive-link" href="{{$.RepoLink}}/archive/{{PathEscapeSegments $.DefaultBranchBranch.DBBranch.Name}}.zip" rel="nofollow">{{svg "octicon-file-zip"}}&nbsp;ZIP</a>
Expand Down Expand Up @@ -153,7 +153,7 @@
<a role="button" class="btn interact-bg gt-p-3" href="{{$.FeedURL}}/rss/branch/{{PathEscapeSegments .DBBranch.Name}}">{{svg "octicon-rss"}}</a>
{{end}}
{{if and (not .DBBranch.IsDeleted) (not $.DisableDownloadSourceArchives)}}
<div class="ui dropdown btn interact-bg gt-p-3" data-tooltip-content="{{$.locale.Tr "repo.branch.download" (.DBBranch.Name)}}">
<div class="ui dropdown btn interact-bg branch-download" data-tooltip-content="{{$.locale.Tr "repo.branch.download" (.DBBranch.Name)}}">
{{svg "octicon-download"}}
<div class="menu">
<a class="item archive-link" href="{{$.RepoLink}}/archive/{{PathEscapeSegments .DBBranch.Name}}.zip" rel="nofollow">{{svg "octicon-file-zip"}}&nbsp;ZIP</a>
Expand Down
2 changes: 1 addition & 1 deletion templates/repo/commits_list.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<div class="ui attached table segment commit-table">
<table class="ui very basic striped table unstackable fixed" id="commits-table">
<table class="ui very basic striped table unstackable" id="commits-table">
<thead>
<tr>
<th class="three wide">{{.locale.Tr "repo.commits.author"}}</th>
Expand Down
2 changes: 1 addition & 1 deletion templates/repo/commits_table.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
{{.locale.Tr "repo.commits.no_commits" $.BaseBranch $.HeadBranch}} {{if .RefName}}({{.RefName}}){{end}}
{{end}}
</div>
<div class="commits-table-right gt-df gt-ac">
<div class="commits-table-right">
{{if .PageIsCommits}}
<form class="ignore-dirty" action="{{.RepoLink}}/commits/{{.BranchNameSubURL}}/search">
<div class="ui tiny search input">
Expand Down
2 changes: 1 addition & 1 deletion templates/repo/issue/labels/labels_selector_field.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<div class="ui {{if or (not .HasIssuesOrPullsWritePermission) .Repository.IsArchived}}disabled{{end}} floating jump select-label dropdown">
<span class="text gt-df gt-ac muted">
<span class="text muted flex-text-block">
<strong>{{.locale.Tr "repo.issues.new.labels"}}</strong>
{{if and .HasIssuesOrPullsWritePermission (not .Repository.IsArchived)}}
{{svg "octicon-gear" 16 "gt-ml-2"}}
Expand Down
12 changes: 6 additions & 6 deletions templates/repo/issue/new_form.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,10 +59,10 @@

<input id="milestone_id" name="milestone_id" type="hidden" value="{{.milestone_id}}">
<div class="ui {{if not .HasIssuesOrPullsWritePermission}}disabled{{end}} floating jump select-milestone dropdown">
<span class="text">
<span class="text flex-text-block">
<strong>{{.locale.Tr "repo.issues.new.milestone"}}</strong>
{{if .HasIssuesOrPullsWritePermission}}
{{svg "octicon-gear"}}
{{svg "octicon-gear" 16 "gt-ml-2"}}
{{end}}
</span>
<div class="menu">
Expand All @@ -86,10 +86,10 @@

<input id="project_id" name="project_id" type="hidden" value="{{.project_id}}">
<div class="ui {{if not .HasIssuesOrPullsWritePermission}}disabled{{end}} floating jump select-project dropdown">
<span class="text">
<span class="text flex-text-block">
<strong>{{.locale.Tr "repo.issues.new.projects"}}</strong>
{{if .HasIssuesOrPullsWritePermission}}
{{svg "octicon-gear"}}
{{svg "octicon-gear" 16 "gt-ml-2"}}
{{end}}
</span>
<div class="menu">
Expand Down Expand Up @@ -144,10 +144,10 @@
<div class="divider"></div>
<input id="assignee_ids" name="assignee_ids" type="hidden" value="{{.assignee_ids}}">
<div class="ui {{if not .HasIssuesOrPullsWritePermission}}disabled{{end}} floating jump select-assignees dropdown">
<span class="text">
<span class="text flex-text-block">
<strong>{{.locale.Tr "repo.issues.new.assignees"}}</strong>
{{if .HasIssuesOrPullsWritePermission}}
{{svg "octicon-gear"}}
{{svg "octicon-gear" 16 "gt-ml-2"}}
{{end}}
</span>
<div class="filter menu" data-id="#assignee_ids">
Expand Down
6 changes: 3 additions & 3 deletions templates/repo/issue/view_content/sidebar.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -127,7 +127,7 @@
<div class="divider"></div>

<div class="ui {{if or (not .HasIssuesOrPullsWritePermission) .Repository.IsArchived}}disabled{{end}} floating jump select-milestone dropdown">
<a class="text gt-df gt-ac muted">
<a class="text muted flex-text-block">
<strong>{{.locale.Tr "repo.issues.new.milestone"}}</strong>
{{if and .HasIssuesOrPullsWritePermission (not .Repository.IsArchived)}}
{{svg "octicon-gear" 16 "gt-ml-2"}}
Expand All @@ -153,7 +153,7 @@
<div class="divider"></div>

<div class="ui {{if or (not .HasIssuesOrPullsWritePermission) .Repository.IsArchived}}disabled{{end}} floating jump select-project dropdown">
<a class="text gt-df gt-ac muted">
<a class="text muted flex-text-block">
<strong>{{.locale.Tr "repo.issues.new.projects"}}</strong>
{{if and .HasIssuesOrPullsWritePermission (not .Repository.IsArchived)}}
{{svg "octicon-gear" 16 "gt-ml-2"}}
Expand Down Expand Up @@ -207,7 +207,7 @@

<input id="assignee_id" name="assignee_id" type="hidden" value="{{.assignee_id}}">
<div class="ui {{if or (not .HasIssuesOrPullsWritePermission) .Repository.IsArchived}}disabled{{end}} floating jump select-assignees-modify dropdown">
<a class="text gt-df gt-ac muted">
<a class="text muted flex-text-block">
<strong>{{.locale.Tr "repo.issues.new.assignees"}}</strong>
{{if and .HasIssuesOrPullsWritePermission (not .Repository.IsArchived)}}
{{svg "octicon-gear" 16 "gt-ml-2"}}
Expand Down
2 changes: 1 addition & 1 deletion templates/shared/combomarkdowneditor.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ Template Attributes:
</div>
{{end}}
<div class="ui tab active" data-tab-panel="markdown-writer">
<markdown-toolbar class="gt-gap-3">
<markdown-toolbar>
<div class="markdown-toolbar-group">
<md-header class="markdown-toolbar-button" data-tooltip-content="{{.locale.Tr "editor.buttons.heading.tooltip"}}">{{svg "octicon-heading"}}</md-header>
<md-bold class="markdown-toolbar-button" data-tooltip-content="{{.locale.Tr "editor.buttons.bold.tooltip"}}">{{svg "octicon-bold"}}</md-bold>
Expand Down
2 changes: 2 additions & 0 deletions web_src/css/editor/combomarkdowneditor.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,8 @@
display: flex;
align-items: center;
padding-bottom: 10px;
gap: .5rem;
flex-wrap: wrap;
}

.combo-markdown-editor .markdown-toolbar-group {
Expand Down
41 changes: 35 additions & 6 deletions web_src/css/repo.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -655,9 +655,19 @@
.repository.view.issue .issue-title {
flex-direction: column;
}
.repository.view.issue .issue-title-buttons, .repository.view.issue .edit-buttons {
width: 100%;
justify-content: space-between;
}
.repository.view.issue .edit-buttons {
margin-top: .5rem;
}
.repository.new.issue .comment.form .comment .avatar, .repository.pull .issue-comment .comment .avatar {
display: none;
}
.repository.new.issue .comment.form .content, .repository.pull .comment.form .content {
margin-left: 0;
}
}

.repository.view.issue .issue-title {
Expand Down Expand Up @@ -1197,7 +1207,14 @@
text-align: left;
}

.repository.compare.pull .choose.branch .svg {
.repository .choose.branch {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}

.repository .choose.branch .svg {
margin-right: 10px;
}

Expand Down Expand Up @@ -1284,6 +1301,11 @@
left: 0;
}

.repository.branches .branch-download {
padding: .5rem;
vertical-align: bottom;
}

.repository.commits .header .search input {
font-weight: var(--font-weight-normal);
padding: 5px 10px;
Expand Down Expand Up @@ -2036,12 +2058,15 @@
.repository .ui.segment.sub-menu .list {
width: 100%;
display: flex;
align-items: center;
align-items: stretch;
}

.repository .ui.segment.sub-menu .list .item {
width: 100%;
color: var(--color-text);
display: flex;
align-items: center;
justify-content: center;
}

.repository .ui.segment.sub-menu .list .item:first-of-type {
Expand Down Expand Up @@ -3128,6 +3153,11 @@ tbody.commit-list {
text-wrap: balance;
}

.commits-table .commits-table-right form {
display: flex;
align-items: center;
}

@media (max-width: 767.98px) {
.repository.file.list #repo-files-table .entry,
.repository.file.list #repo-files-table .commit-list {
Expand Down Expand Up @@ -3198,7 +3228,7 @@ tbody.commit-list {
margin-bottom: 6px;
}
.commits-table .commits-table-right form {
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.commits-table .commits-table-right form > div:nth-child(1) {
Expand All @@ -3223,9 +3253,8 @@ tbody.commit-list {
.commit-table .commit-list span.message-wrapper {
max-width: none;
}
.commit-table .commit-list tr td:last-child {
display: block;
width: max-content;
.commit-table .commit-list tr td:first-child, .commit-table .commit-list tr td:last-child {
white-space: nowrap;
}
.commit-table .commit-list td.author {
display: block;
Expand Down
8 changes: 3 additions & 5 deletions web_src/js/components/RepoActionView.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -477,6 +477,8 @@ export function initRepositoryActionView() {

<style scoped>
.action-view-body {
padding-top: 12px;
padding-bottom: 12px;
display: flex;
gap: 12px;
}
Expand Down Expand Up @@ -511,11 +513,6 @@ export function initRepositoryActionView() {
margin: 5px 0 0 25px;
}

.action-view-left, .action-view-right {
padding-top: 12px;
padding-bottom: 12px;
}

/* ================ */
/* action view left */

Expand Down Expand Up @@ -729,6 +726,7 @@ export function initRepositoryActionView() {
background-color: var(--color-console-bg);
max-height: 100%;
border-radius: 0 0 var(--border-radius) var(--border-radius);
z-index: 0;
}

.job-step-container .job-step-summary {
Expand Down