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

diff --git a/templates/base/head_navbar.tmpl b/templates/base/head_navbar.tmpl
index efab76f33c0f4edcb417ae0acf7d2d12855bf2a2..def83d972620e24344a07c800125802d76751551 100644 (file)
--- a/templates/base/head_navbar.tmpl
+++ b/templates/base/head_navbar.tmpl
@@ -173,7 +173,7 @@
                                                <div class="divider"></div>
 
                                                <a class="{{if .PageIsAdmin}}active{{end}} item" href="{{AppSubUrl}}/admin">
-                                                       <i class="icon settings"></i>
+                                                       {{svg "octicon-server"}}
                                                        {{.i18n.Tr "admin_panel"}}<!-- Admin Panel -->
                                                </a>
                                        {{end}}

diff --git a/templates/user/dashboard/repolist.tmpl b/templates/user/dashboard/repolist.tmpl
index 9115c62ecdf92c562b01fa8dc85fe6a62471336e..1f619ea83306674cd328673bc26f26a27079ce67 100644 (file)
--- a/templates/user/dashboard/repolist.tmpl
+++ b/templates/user/dashboard/repolist.tmpl
@@ -123,9 +123,9 @@
                                <ul class="repo-owner-name-list">
                                        <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">
-                                                       <div class="f1">
+                                                       <div class="text truncate item-name f1">
                                                                <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">
                                                                        {{svg "octicon-archive" 16 "ml-2"}}
                                                                </span>
@@ -175,9 +175,9 @@
                                <ul class="repo-owner-name-list">
                                        <li v-for="org in organizations">
                                                <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"}}
-                                                               <strong class="text truncate item-name">${org.name}</strong>
+                                                               <strong>${org.name}</strong>
                                                        </div>
                                                        <div class="text light grey df ac">
                                                                ${org.num_repos}

diff --git a/web_src/less/_base.less b/web_src/less/_base.less
index 74455cee06207cf4c3ffa18688e52f4b992298ba..8c99fa4349e5629238d61bb199f4c5c673e72e0d 100644 (file)
--- a/web_src/less/_base.less
+++ b/web_src/less/_base.less
@@ -603,10 +603,6 @@ a.ui.card:hover,
     margin-right: 0;
   }
 
-  .svg {
-    margin-right: .75em;
-  }
-
   .searchbox {
     background-color: #f4f4f4 !important;
 

diff --git a/web_src/less/_dashboard.less b/web_src/less/_dashboard.less
index d5fac494f199c07028dd8d22f07076665aa3e8cc..c8659a92a161ee2ff072e4c79e02c87dabaa2ea2 100644 (file)
--- a/web_src/less/_dashboard.less
+++ b/web_src/less/_dashboard.less
@@ -98,8 +98,6 @@
       margin-left: .35rem;
     }
 
-    line-height: 1.2;
-
     > .ui.grid {
       margin-left: auto;
       margin-right: auto;
@@ -181,23 +179,8 @@
       margin-right: .25rem;
     }
 
-    .repo-owner-name-list {
-      .item-name {
-        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;
-      }
+    .repo-owner-name-list .item-name {
+      max-width: 70%;
     }
   }
 }

diff --git a/web_src/less/_repository.less b/web_src/less/_repository.less
index 88a1a38bb679b801c1209b5d41c1c22724bb8646..7273f5718d63dd7bd7a02d5e9bd6a9e659f280ab 100644 (file)
--- a/web_src/less/_repository.less
+++ b/web_src/less/_repository.less
@@ -383,7 +383,7 @@
             padding: 5px;
             margin-left: 5px;
             line-height: 1;
-            color: #767676;
+            color: var(--color-text);
             vertical-align: middle;
             background: transparent;
             border: 0;
@@ -399,7 +399,8 @@
           }
 
           .btn-octicon.disabled {
-            color: #bbbbbb;
+            color: inherit;
+            opacity: var(--opacity-disabled);
             cursor: default;
           }