optimize home page style (#4052)

Co-authored-by: wxq <[email protected]> Co-authored-by: Jason Song <[email protected]>
apolloconfig · Oct 24, 2021 · 2b25529 · 2b25529
1 parent 3901bb4
commit 2b25529
Show file tree

Hide file tree

Showing 5 changed files with 59 additions and 47 deletions.
diff --git a/CHANGES.md b/CHANGES.md
@@ -19,6 +19,7 @@ Apollo 2.0.0
 * [Extend the gray release capability to support dimensions other than IP](https://github.com/apolloconfig/apollo/pull/4013)
 * [public namespace basic function](https://github.com/apolloconfig/apollo/pull/3850)
 * [Bump version to 2.0.0 and drop java 1.7 support](https://github.com/apolloconfig/apollo/pull/4015)
+* [Optimize home page style](https://github.com/apolloconfig/apollo/pull/4052)
 
 ------------------
-All issues and pull requests are [here](https://github.com/ctripcorp/apollo/milestone/8?closed=1)
+All issues and pull requests are [here](https://github.com/ctripcorp/apollo/milestone/8?closed=1)
diff --git a/apollo-portal/src/main/resources/static/i18n/zh-CN.json b/apollo-portal/src/main/resources/static/i18n/zh-CN.json
@@ -314,8 +314,8 @@
   "Index.FavoriteItems": "收藏的应用",
   "Index.Topping": "置顶",
   "Index.FavoriteCancel": "取消收藏",
-  "Index.FavoriteTip": "您还没有收藏过任何项目，在项目主页可以收藏项目哟~",
-  "Index.RecentlyViewedItems": "最近浏览的项目",
+  "Index.FavoriteTip": "您还没有收藏过任何应用，在项目主页可以收藏应用哟~",
+  "Index.RecentlyViewedItems": "最近浏览的应用",
   "Index.GetCreateAppRoleFailed": "获取创建应用权限信息失败",
   "Index.Topped": "置顶成功",
   "Index.CancelledFavorite": "取消收藏成功",

diff --git a/apollo-portal/src/main/resources/static/index.html b/apollo-portal/src/main/resources/static/index.html
@@ -56,6 +56,15 @@ <h5>{{'Index.FavoriteItems' | translate }}</h5>
                 <h5>{{'Index.FavoriteItems' | translate }}</h5>
             </div>
 
+            <div class="visited-list-show" ng-click="changeContent('4')" ng-show="visitedApps && visitedApps.length  && whichContent==='4'">
+                <i class="iconfont icon-liulan"></i>
+                <h5>{{'Index.RecentlyViewedItems' | translate }}</h5>
+            </div>
+            <div class="visited-list-choose" ng-click="changeContent('4')" ng-show="visitedApps && visitedApps.length  && whichContent!=='4'">
+                <i class="iconfont icon-liulan" style="color: #666"></i>
+                <h5>{{'Index.RecentlyViewedItems' | translate }}</h5>
+            </div>
+
             <div class="public-namespace-list-show" ng-click="changeContent('3')" ng-show="whichContent==='3'">
                 <i class="iconfont icon-gonggongziliao"></i>
                 <h5>{{'Index.PublicNamespace' | translate }}</h5>
@@ -65,24 +74,15 @@ <h5>{{'Index.PublicNamespace' | translate }}</h5>
                 <h5>{{'Index.PublicNamespace' | translate }}</h5>
             </div>
 
-            <div class="visited-list-show" ng-click="changeContent('4')" ng-show="visitedApps && visitedApps.length  && whichContent==='4'">
-                <i class="iconfont icon-liulan"></i>
-                <h5>{{'Index.RecentlyViewedItems' | translate }}</h5>
-            </div>
-            <div class="visited-list-choose" ng-click="changeContent('4')" ng-show="visitedApps && visitedApps.length  && whichContent!=='4'">
-                <i class="iconfont icon-liulan" style="color: #666"></i>
-                <h5>{{'Index.RecentlyViewedItems' | translate }}</h5>
-            </div>
         </div>
         <div class="main-table">
             <div class="create-app-list" ng-show="whichContent==='1'">
-                <div style="width: 180px;margin-left: 30px" ng-click="goToCreateAppPage()"
-                     ng-if="hasCreateApplicationPermission">
-                    <div href="#" class="thumbnail create-btn hover cursor-pointer"
-                         style="display: flex;justify-content: center;align-items: center">
-                        <div><img src="img/plus-white.png" /></div>
-                        <div style="margin-left: 5px"><h5>{{'Index.CreateProject' | translate }}</h5></div>
-                    </div>
+                <div class="text-right create-btn-panel">
+                    <button class="btn btn-primary btn-md create-btn" ng-if="hasCreateApplicationPermission"
+                            ng-click="goToCreateAppPage()">
+                        <img src="img/plus.png"/>
+                        {{'Index.CreateProject' | translate }}
+                    </button>
                 </div>
                 <div class="display-table" ng-show="createdApps.length > 0">
                     <table>
@@ -103,7 +103,7 @@ <h5>{{'Index.RecentlyViewedItems' | translate }}</h5>
                     </table>
                 </div>
                 <div ng-show="!hasMoreCreatedApps" style="height: 15px"></div>
-                <div style="width: 180px;margin-left: 30px;margin-top: 20px" ng-show="hasMoreCreatedApps"
+                <div class="homepage-loading-more-panel" ng-show="hasMoreCreatedApps"
                      ng-click="getUserCreatedApps()">
                     <div href="#" class="thumbnail hover cursor-pointer"
                          style="display: flex;justify-content: center;align-items: center">
@@ -148,7 +148,7 @@ <h5>{{'Index.RecentlyViewedItems' | translate }}</h5>
                     <h4>{{'Index.FavoriteTip' | translate }}</h4>
                 </div>
                 <div ng-show="!hasMoreFavorites" style="height: 15px"></div>
-                <div style="width: 180px;margin-left: 30px;margin-top: 20px" ng-show="hasMoreFavorites"
+                <div class="homepage-loading-more-panel" ng-show="hasMoreFavorites"
                      ng-click="getUserFavorites()">
                     <div href="#" class="thumbnail hover cursor-pointer"
                          style="display: flex;justify-content: center;align-items: center">
@@ -184,7 +184,7 @@ <h4>{{'Index.FavoriteTip' | translate }}</h4>
                     <h4>{{'Index.PublicNamespaceTip' | translate }}</h4>
                 </div>
                 <div ng-show="!hasMorePublicNamespaces" style="height: 15px"></div>
-                <div style="width: 180px;margin-left: 30px;margin-top: 20px" ng-show="hasMorePublicNamespaces"
+                <div class="homepage-loading-more-panel" ng-show="hasMorePublicNamespaces"
                      ng-click="morePublicNamespace()">
                     <div href="#" class="thumbnail hover cursor-pointer"
                          style="display: flex;justify-content: center;align-items: center">
@@ -268,4 +268,4 @@ <h4>{{'Index.PublicNamespaceTip' | translate }}</h4>
 
 </body>
 
-</html>
+</html>
diff --git a/apollo-portal/src/main/resources/static/scripts/controller/IndexController.js b/apollo-portal/src/main/resources/static/scripts/controller/IndexController.js
@@ -52,13 +52,13 @@ function IndexController($scope, $window, $translate, toastr, AppUtil, AppServic
 
         $scope.createdAppPage = 0;
         $scope.createdApps = [];
-        $scope.hasMoreCreatedApps = true;
+        $scope.hasMoreCreatedApps = false;
         $scope.favoritesPage = 0;
         $scope.favorites = [];
-        $scope.hasMoreFavorites = true;
+        $scope.hasMoreFavorites = false;
         $scope.publicNamespacePage = 0;
         $scope.publicNamespaces = [];
-        $scope.hasMorePublicNamespaces = true;
+        $scope.hasMorePublicNamespaces = false;
         $scope.allPublicNamespaces = [];
         $scope.visitedApps = [];
 
@@ -228,6 +228,7 @@ function IndexController($scope, $window, $translate, toastr, AppUtil, AppServic
             for (var j = 0; j < 10; j++) {
                 $scope.publicNamespaces.push($scope.allPublicNamespaces[$scope.publicNamespacePage * 10 + j])
             }
+            $scope.hasMorePublicNamespaces = true;
         }
         $scope.publicNamespacePage += 1;
     }

diff --git a/apollo-portal/src/main/resources/static/styles/common-style.css b/apollo-portal/src/main/resources/static/styles/common-style.css
@@ -780,8 +780,8 @@ table th {
 }
 
 #app-list .more-img {
-    width: 30px;
-    height: 30px;
+    width: 20px;
+    height: 20px;
 }
 
 #app-list .app-panel {
@@ -834,15 +834,18 @@ table th {
     color: #409EFF;
     display: flex;
     align-items: center;
-    justify-content: center;
+    justify-content: left;
+    padding-left: 25px;
     border-right: 1px solid #DCDFE6;
     cursor: pointer;
 }
+
 .left-bar .app-list-choose {
     height: 60px;
     display: flex;
     align-items: center;
-    justify-content: center;
+    justify-content: left;
+    padding-left: 25px;
     border-right: 1px solid #DCDFE6;
     cursor: pointer;
 }
@@ -855,15 +858,17 @@ table th {
     color: #409EFF;
     display: flex;
     align-items: center;
-    justify-content: center;
+    justify-content: left;
+    padding-left: 25px;
     border-right: 1px solid #DCDFE6;
     cursor: pointer;
 }
 .left-bar .favorite-list-choose {
     height: 60px;
     display: flex;
     align-items: center;
-    justify-content: center;
+    justify-content: left;
+    padding-left: 25px;
     border-right: 1px solid #DCDFE6;
     cursor: pointer;
 }
@@ -876,15 +881,17 @@ table th {
     color: #409EFF;
     display: flex;
     align-items: center;
-    justify-content: center;
+    justify-content: left;
+    padding-left: 25px;
     border-right: 1px solid #DCDFE6;
     cursor: pointer;
 }
 .left-bar .public-namespace-list-choose {
     height: 60px;
     display: flex;
     align-items: center;
-    justify-content: center;
+    justify-content: left;
+    padding-left: 25px;
     border-right: 1px solid #DCDFE6;
     cursor: pointer;
 }
@@ -897,15 +904,17 @@ table th {
     color: #409EFF;
     display: flex;
     align-items: center;
-    justify-content: center;
+    justify-content: left;
+    padding-left: 25px;
     border-right: 1px solid #DCDFE6;
     cursor: pointer;
 }
 .left-bar .visited-list-choose {
     height: 60px;
     display: flex;
     align-items: center;
-    justify-content: center;
+    justify-content: left;
+    padding-left: 25px;
     border-right: 1px solid #DCDFE6;
     cursor: pointer;
 }
@@ -1003,28 +1012,23 @@ table th {
 .create-app-list .media-left {
     background: #a9d96c;
 }
-
-.create-app-list .create-btn {
-    background: #a9d96c;
-    color: #fff;
-}
-
-.create-app-list .create-btn:hover {
-    background: #81AB56;
+.create-app-list .create-btn-panel {
+    padding-right: 35px;
+    padding-bottom: 15px;
 }
 
 .create-app-list .create-btn img {
-    width: 26px;
-    height: 26px;
-    margin-top: 4px;
+    width: 16px;
+    height: 16px;
 }
 
 .favorites-app-list .media-left {
     background: #57c8f2;
 }
 
 .favorites-app-list .no-favorites {
-    padding-bottom: 15px;
+    padding-top: 75px;
+
 }
 
 .public-namespace-list .media-left {
@@ -1039,6 +1043,12 @@ table th {
     background: #41cac0;
 }
 
+.homepage-loading-more-panel {
+    margin-top: 20px;
+    padding-right: 30px;
+    padding-left: 30px;
+}
+
 #rulesModal .rules-ip-selector {
     width: 500px;
     height: 50px;