fix

Author: wxiaoguang

options/locale/locale_en-US.ini

@@ -386,7 +386,7 @@ show_only_public = Showing only public
 issues.in_your_repos = In your repositories
 
 guide_title = No Activity
-guide_desc = You are currently not following any repositories or users, so there is no content to display; you can explore repositories or users of interest from the links below.
+guide_desc = You are currently not following any repositories or users, so there is no content to display. You can explore repositories or users of interest from the links below.
 explore_repos = Explore repositories
 explore_users = Explore users
 empty_org = There are no organizations yet.

templates/user/dashboard/guide.tmpl

@@ -1,14 +1,10 @@
-<div class="ui center tw-px-8 tw-py-8 guide">
-	{{svg "octicon-package" 24}}
-	<h3>{{ctx.Locale.Tr "home.guide_title"}}</h3>
-	<p>{{ctx.Locale.Tr "home.guide_desc"}}</p>
+<div class="tw-text-center tw-p-8">
+	{{svg "octicon-package" 24 "tw-text-placeholder-text"}}
+	<h3 class="tw-my-4">{{ctx.Locale.Tr "home.guide_title"}}</h3>
+	<p class="tw-text-placeholder-text">{{ctx.Locale.Tr "home.guide_desc"}}</p>
 	<div>
-		<a href="{{AppSubUrl}}/explore/repos">
-			{{ctx.Locale.Tr "home.explore_repos"}}
-		</a>
+		<a href="{{AppSubUrl}}/explore/repos">{{ctx.Locale.Tr "home.explore_repos"}}</a>
 		<span>·</span>
-		<a href="{{AppSubUrl}}/explore/users">
-			{{ctx.Locale.Tr "home.explore_users"}}
-		</a>
+		<a href="{{AppSubUrl}}/explore/users">{{ctx.Locale.Tr "home.explore_users"}}</a>
 	</div>
 </div>

templates/user/dashboard/repolist.tmpl

@@ -60,4 +60,4 @@ data.organizationId = {{.ContextUser.ID}};
 window.config.pageData.dashboardRepoList = data;
 </script>
 
-<div id="dashboard-repo-list" class="flex-container-sidebar is-loading"></div>
+<div id="dashboard-repo-list" class="flex-container-sidebar"></div>

web_src/css/dashboard.css

@@ -70,11 +70,3 @@
 .dashboard .secondary-nav .ui.dropdown {
   max-width: 100%;
 }
-
-.dashboard .guide > svg, p {
-  color: var(--color-placeholder-text);
-}
-
-.dashboard .guide h3 {
-  margin: 1rem auto !important;
-}

web_src/js/components/DashboardRepoList.vue

@@ -353,12 +353,13 @@ export default defineComponent({
           <svg-icon name="octicon-plus"/>
         </a>
       </h4>
-      <div v-if="isLoading && !reposTotalCount" class="ui attached segment" :class="{'is-loading': isLoading}"/>
-      <div v-if="!isLoading && !reposTotalCount" class="ui attached segment empty-placeholder">
-        <svg-icon name="octicon-git-branch" :size="24" class="empty-placeholder-icon"/>
-        <p>{{ textNoRepo }}</p>
+      <div v-if="!reposTotalCount" class="ui attached segment" :class="{'is-loading': isLoading}">
+        <div v-if="!isLoading" class="empty-repo-or-org">
+          <svg-icon name="octicon-git-branch" :size="24"/>
+          <p>{{ textNoRepo }}</p>
+        </div>
       </div>
-      <div v-if="reposTotalCount" class="ui attached segment repos-search">
+      <div v-else class="ui attached segment repos-search">
         <div class="ui small fluid action left icon input">
           <input type="search" spellcheck="false" maxlength="255" @input="changeReposFilter(reposFilter)" v-model="searchQuery" ref="search" @keydown="reposFilterKeyControl" :placeholder="textSearchRepos">
           <i class="icon loading-icon-3px" :class="{'is-loading': isLoading}"><svg-icon name="octicon-search" :size="16"/></i>
@@ -471,12 +472,13 @@ export default defineComponent({
           <svg-icon name="octicon-plus"/>
         </a>
       </h4>
-      <div v-if="isLoading" class="ui attached segment" :class="{'is-loading': isLoading}"/>
-      <div v-if="!isLoading && !organizations.length" class="ui attached segment empty-placeholder">
-        <svg-icon name="octicon-organization" :size="24" class="empty-placeholder-icon"/>
-        <p>{{ textNoOrg }}</p>
+      <div v-if="!organizations.length" class="ui attached segment">
+        <div class="empty-repo-or-org">
+          <svg-icon name="octicon-organization" :size="24"/>
+          <p>{{ textNoOrg }}</p>
+        </div>
       </div>
-      <div v-if="organizations.length" class="ui attached table segment tw-rounded-b">
+      <div v-else class="ui attached table segment tw-rounded-b">
         <ul class="repo-owner-name-list">
           <li class="tw-flex tw-items-center tw-py-2" v-for="org in organizations" :key="org.name">
             <a class="repo-list-link muted" :href="subUrl + '/' + encodeURIComponent(org.name)">
@@ -556,12 +558,13 @@ ul li:not(:last-child) {
   background: var(--color-hover);
 }
 
-.empty-placeholder-icon {
+.empty-repo-or-org {
+  margin-top: 1em;
+  text-align: center;
   color: var(--color-placeholder-text);
 }
 
-.empty-placeholder p {
-  margin: 1em auto !important;
-  color: var(--color-placeholder-text);
+.empty-repo-or-org p {
+  margin: 1em auto;
 }
 </style>

web_src/js/features/dashboard.ts

@@ -4,7 +4,6 @@ import DashboardRepoList from '../components/DashboardRepoList.vue';
 export function initDashboardRepoList() {
   const el = document.querySelector('#dashboard-repo-list');
   if (el) {
-    el.classList.remove('is-loading');
     createApp(DashboardRepoList).mount(el);
   }
 }