Fix long name ui issues and label ui issue (#23541)

This PR fixes some ui problems as mentioned in the two issues below.
1. Long file path has no word break

## Before
<img width="1357" alt="截屏2023-03-17 17 49 43"
src="https://user-images.githubusercontent.com/17645053/225873491-27c7bf9a-d5d5-4065-9e4a-ff228e935abf.png">

## After
<img width="1248" alt="截屏2023-03-17 17 51 22"
src="https://user-images.githubusercontent.com/17645053/225873562-93b87af7-9c83-43f8-aa0d-36a9174d25ac.png">
on mobile
<img width="408" alt="截屏2023-03-17 17 51 15"
src="https://user-images.githubusercontent.com/17645053/225873554-1b8c8999-1dfc-4251-a7fc-20ecd3444cb0.png">


2. Texts in labels  
## Before
<img width="1219" alt="截屏2023-03-17 17 49 24"
src="https://user-images.githubusercontent.com/17645053/225873369-812b1b52-c104-4e32-988f-c3e55ad2f844.png">

## After
<img width="1259" alt="截屏2023-03-17 17 51 31"
src="https://user-images.githubusercontent.com/17645053/225873317-9717fd2c-e9e1-4a00-a27d-6bdc5933c3ca.png">
with two labels
<img width="1258" alt="截屏2023-03-17 17 51 53"
src="https://user-images.githubusercontent.com/17645053/225873323-13198192-71de-472d-8e78-6fd86ddba3d9.png">
In explore and star pages
<img width="896" alt="截屏2023-03-17 18 25 00"
src="https://user-images.githubusercontent.com/17645053/225878962-9e26e3aa-cff0-451c-9133-19f4ad1507a4.png">

<img width="913" alt="截屏2023-03-17 18 25 09"
src="https://user-images.githubusercontent.com/17645053/225878967-6adaa414-136e-43c2-87d0-7e46a0da112e.png">

3. Long name repository on creating new fork page
## Before
<img width="919" alt="截屏2023-03-17 17 50 01"
src="https://user-images.githubusercontent.com/17645053/225873723-5c4ea137-3b51-4074-a458-ef442e330ddf.png">

## After
<img width="907" alt="截屏2023-03-17 17 50 37"
src="https://user-images.githubusercontent.com/17645053/225873772-fc4a52c3-49c6-4ca6-903d-a13707f2a98b.png">

<img width="383" alt="截屏2023-03-17 17 50 48"
src="https://user-images.githubusercontent.com/17645053/225873779-6de1dfde-5c05-4ae9-89e1-85c25b3a1682.png">

Closes #23535
Closes #23534
This commit is contained in:
Hester Gong 2023-03-19 00:07:59 +08:00 committed by GitHub
parent 48f6805b0f
commit d42015e6eb
Signed by: GitHub
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 20 additions and 5 deletions

@ -10,7 +10,7 @@
<a class="name" href="{{.Link}}"> <a class="name" href="{{.Link}}">
{{if or $.PageIsExplore $.PageIsProfileStarList}}{{if .Owner}}{{.Owner.Name}} / {{end}}{{end}}{{.Name}} {{if or $.PageIsExplore $.PageIsProfileStarList}}{{if .Owner}}{{.Owner.Name}} / {{end}}{{end}}{{.Name}}
</a> </a>
<div class="labels gt-df gt-ac gt-fw"> <div class="labels gt-df gt-ac gt-fw gt-mr-3">
{{if .IsArchived}} {{if .IsArchived}}
<span class="ui basic label">{{$.locale.Tr "repo.desc.archived"}}</span> <span class="ui basic label">{{$.locale.Tr "repo.desc.archived"}}</span>
{{end}} {{end}}

@ -37,7 +37,7 @@
<div class="inline field"> <div class="inline field">
<label>{{.locale.Tr "repo.fork_from"}}</label> <label>{{.locale.Tr "repo.fork_from"}}</label>
<a href="{{.ForkRepo.Link}}">{{.ForkRepo.FullName}}</a> <a href="{{.ForkRepo.Link}}" class="gt-dib">{{.ForkRepo.FullName}}</a>
</div> </div>
<div class="inline required field {{if .Err_RepoName}}error{{end}}"> <div class="inline required field {{if .Err_RepoName}}error{{end}}">
<label for="repo_name">{{.locale.Tr "repo.repo_name"}}</label> <label for="repo_name">{{.locale.Tr "repo.repo_name"}}</label>

@ -41,6 +41,11 @@
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
} }
.ui.repository.list .repo-title .labels {
word-break: normal;
flex-shrink: 0;
}
.ui.repository.branches .info { .ui.repository.branches .info {
font-size: 12px; font-size: 12px;
color: var(--color-text-light); color: var(--color-text-light);

@ -479,7 +479,8 @@ textarea:focus,
.repository.new.repo form .selection.dropdown, .repository.new.repo form .selection.dropdown,
.repository.new.migrate form .selection.dropdown, .repository.new.migrate form .selection.dropdown,
.repository.new.fork form .selection.dropdown { .repository.new.fork form .selection.dropdown,
.repository.new.fork form .field a {
vertical-align: middle; vertical-align: middle;
width: 50% !important; width: 50% !important;
} }
@ -491,6 +492,7 @@ textarea:focus,
.repository.new.repo form input, .repository.new.repo form input,
.repository.new.migrate form input, .repository.new.migrate form input,
.repository.new.fork form input, .repository.new.fork form input,
.repository.new.fork form .field a,
.repository.new.repo form .selection.dropdown, .repository.new.repo form .selection.dropdown,
.repository.new.migrate form .selection.dropdown, .repository.new.migrate form .selection.dropdown,
.repository.new.fork form .selection.dropdown { .repository.new.fork form .selection.dropdown {
@ -500,8 +502,7 @@ textarea:focus,
.repository.new.migrate form .field button, .repository.new.migrate form .field button,
.repository.new.fork form .field button, .repository.new.fork form .field button,
.repository.new.repo form .field a, .repository.new.repo form .field a,
.repository.new.migrate form .field a, .repository.new.migrate form .field a {
.repository.new.fork form .field a {
margin-bottom: 1em; margin-bottom: 1em;
width: 100%; width: 100%;
} }

@ -214,6 +214,10 @@
font-size: 1.2em; font-size: 1.2em;
} }
.repository.file.list .repo-path {
word-break: break-word;
}
.repository.file.list .repo-path .section, .repository.file.list .repo-path .section,
.repository.file.list .repo-path .divider { .repository.file.list .repo-path .divider {
display: inline; display: inline;

@ -67,6 +67,11 @@
margin-top: 25px; margin-top: 25px;
} }
.user.profile .ui.repository.list .repo-title .labels {
word-break: normal;
flex-shrink: 0;
}
.user.profile #loading-heatmap { .user.profile #loading-heatmap {
margin-bottom: 1em; margin-bottom: 1em;
} }