Fix dashboard UI bugs and more (#14767)

This PR fixes a few UI bugs I spontaneously encountered:

- Fixes emojis in repo titles getting head-cut and tail-cut in dashboard feed due to introduction of 1.25 em emojis at 1 em line-height, by simply using the original 1 3/7 em value of `semantic.css`
- Fixes regression (too long repo names should be capped to 70%) in #13828 due to flex children not respecting properties like `overflow: hidden;`, and removes a block of dead style code
- Follow-up to #14761, removes extraneous code for top navbar and correct right margin for Font Awesome
- Fixes color emphasis inversion in arc-green theme for top right buttons (edit, delete) on commit view boxes
This commit is contained in:
Mike L 2021-02-25 13:35:43 +01:00 committed by GitHub
parent 8f4d55452a
commit 4172b1955f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 10 additions and 30 deletions

View File

@ -173,7 +173,7 @@
<div class="divider"></div> <div class="divider"></div>
<a class="{{if .PageIsAdmin}}active{{end}} item" href="{{AppSubUrl}}/admin"> <a class="{{if .PageIsAdmin}}active{{end}} item" href="{{AppSubUrl}}/admin">
<i class="icon settings"></i> {{svg "octicon-server"}}
{{.i18n.Tr "admin_panel"}}<!-- Admin Panel --> {{.i18n.Tr "admin_panel"}}<!-- Admin Panel -->
</a> </a>
{{end}} {{end}}

View File

@ -123,9 +123,9 @@
<ul class="repo-owner-name-list"> <ul class="repo-owner-name-list">
<li v-for="repo in repos" :class="{'private': repo.private || repo.internal}"> <li v-for="repo in repos" :class="{'private': repo.private || repo.internal}">
<a class="repo-list-link df ac sb" :href="suburl + '/' + repo.full_name"> <a class="repo-list-link df ac sb" :href="suburl + '/' + repo.full_name">
<div class="f1"> <div class="text truncate item-name f1">
<component v-bind:is="repoIcon(repo)" size="16"></component> <component v-bind:is="repoIcon(repo)" size="16"></component>
<strong class="text truncate item-name">${repo.full_name}</strong> <strong>${repo.full_name}</strong>
<span v-if="repo.archived"> <span v-if="repo.archived">
{{svg "octicon-archive" 16 "ml-2"}} {{svg "octicon-archive" 16 "ml-2"}}
</span> </span>
@ -175,9 +175,9 @@
<ul class="repo-owner-name-list"> <ul class="repo-owner-name-list">
<li v-for="org in organizations"> <li v-for="org in organizations">
<a class="repo-list-link df ac sb" :href="suburl + '/' + org.name"> <a class="repo-list-link df ac sb" :href="suburl + '/' + org.name">
<div class="f1"> <div class="text truncate item-name f1">
{{svg "octicon-organization" 16 "mr-2"}} {{svg "octicon-organization" 16 "mr-2"}}
<strong class="text truncate item-name">${org.name}</strong> <strong>${org.name}</strong>
</div> </div>
<div class="text light grey df ac"> <div class="text light grey df ac">
${org.num_repos} ${org.num_repos}

View File

@ -603,10 +603,6 @@ a.ui.card:hover,
margin-right: 0; margin-right: 0;
} }
.svg {
margin-right: .75em;
}
.searchbox { .searchbox {
background-color: #f4f4f4 !important; background-color: #f4f4f4 !important;

View File

@ -98,8 +98,6 @@
margin-left: .35rem; margin-left: .35rem;
} }
line-height: 1.2;
> .ui.grid { > .ui.grid {
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
@ -181,23 +179,8 @@
margin-right: .25rem; margin-right: .25rem;
} }
.repo-owner-name-list { .repo-owner-name-list .item-name {
.item-name { max-width: 70%;
max-width: 70%;
margin-bottom: -4px;
}
}
#collaborative-repo-list {
.owner-and-repo {
max-width: 80%;
margin-bottom: -5px;
}
.owner-name {
max-width: 120px;
margin-bottom: -5px;
}
} }
} }
} }

View File

@ -383,7 +383,7 @@
padding: 5px; padding: 5px;
margin-left: 5px; margin-left: 5px;
line-height: 1; line-height: 1;
color: #767676; color: var(--color-text);
vertical-align: middle; vertical-align: middle;
background: transparent; background: transparent;
border: 0; border: 0;
@ -399,7 +399,8 @@
} }
.btn-octicon.disabled { .btn-octicon.disabled {
color: #bbbbbb; color: inherit;
opacity: var(--opacity-disabled);
cursor: default; cursor: default;
} }