Merge pull request #383 from nobodyiam/portal-responsive

apollo-portal/src/main/resources/static/config.html

@@ -20,7 +20,7 @@
     <div class="row config-info-container">
 
         <!--tag导航-->
-        <div class="col-md-3" ng-controller="ConfigBaseInfoController">
+        <div class="col-md-3 col-xs-3 col-sm-3" ng-controller="ConfigBaseInfoController">
             <div id="treeview"></div>
             <!--app info-->
             <section class="panel">
@@ -66,22 +66,19 @@
                 </div>
             </section>
             <a class="list-group-item" ng-show="missEnvs.length > 0" ng-click="createAppInMissEnv()">
-                <div class="row">
-                    <div class="col-md-2"><img src="img/plus-orange.png" class="i-20"></div>
-                    <div class="col-md-10 hidden-xs">
-                        <p class="btn-title">补缺环境</p>
-                    </div>
+                <div class="row icon-text icon-plus-orange">
+                    <p class="btn-title ng-binding">补缺环境</p>
                 </div>
             </a>
 
-            <apolloentrance apollo-title="'添加集群'" apollo-img-src="'img/plus-orange.png'"
+            <apolloentrance apollo-title="'添加集群'" apollo-img-src="'plus-orange'"
                             apollo-href="'cluster.html?#/appid=' + pageContext.appId"></apolloentrance>
 
-            <apolloentrance apollo-title="'添加Namespace'" apollo-img-src="'img/plus-orange.png'"
+            <apolloentrance apollo-title="'添加Namespace'" apollo-img-src="'plus-orange'"
                             apollo-href="'namespace.html?#/appid=' + pageContext.appId"
                             ng-show="hasCreateNamespacePermission"></apolloentrance>
 
-            <apolloentrance apollo-title="'项目权限'" apollo-img-src="'img/user_manage.png'"
+            <apolloentrance apollo-title="'项目权限'" apollo-img-src="'user-manage'"
                             apollo-href="'/app/role.html?#/appid=' + pageContext.appId"
                             ng-show="hasAssignUserPermission"></apolloentrance>
             </section>
@@ -90,7 +87,7 @@
         </div>
 
         <!--namespaces-->
-        <div class="col-md-9 config-item-container hide" ng-controller="ConfigNamespaceController">
+        <div class="col-md-9 col-xs-9 col-sm-9 config-item-container hide" ng-controller="ConfigNamespaceController">
             <div ng-repeat="namespace in namespaces">
                 <apollonspanel namespace="namespace" app-id="pageContext.appId"
                                env="pageContext.env" cluster="pageContext.clusterName"

apollo-portal/src/main/resources/static/styles/common-style.css

@@ -166,6 +166,15 @@ table th {
     font-weight: 300;
 }
 
+.panel-heading .header-namespace {
+    min-width: 415px;
+}
+
+.panel-heading .header-buttons {
+    float: right;
+    min-width: 405px;
+}
+
 .project-info th {
     text-align: right;
     padding: 4px 6px;
@@ -339,8 +348,24 @@ table th {
     color: gray;
     font-family: "Apple Color Emoji";
     font-size: 16px;
+    margin: 0;
+}
+
+.list-group-item .icon-plus-orange {
+    background: url(../img/plus-orange.png) no-repeat;
 }
 
+.list-group-item .icon-user-manage {
+    background: url(../img/user_manage.png) no-repeat;
+}
+
+.list-group-item .icon-text {
+    background-size: 20px;
+    background-position: 5% 50%;
+    padding: 5px 0 5px 50px;
+}
+
+
 /*搜索框*/
 ::-webkit-scrollbar {
     width: 0;

apollo-portal/src/main/resources/static/views/component/entrance.html

 <a class="list-group-item" href="{{href}}">
-    <div class="row">
-        <div class="col-md-2"><img src="{{imgSrc}}" class="i-20"></div>
-        <div class="col-md-10 hidden-xs">
-            <p class="btn-title">{{title}}</p>
-        </div>
-
+    <div class="row icon-text icon-{{imgSrc}}">
+        <p class="btn-title">{{title}}</p>
     </div>
 </a>

apollo-portal/src/main/resources/static/views/component/namespace-panel.html

@@ -11,7 +11,7 @@
     <header class="panel-heading">
         <div class="row">
 
-            <div class="col-md-6">
+            <div class="col-md-6 header-namespace">
                 <b ng-bind="namespace.viewName" style="font-size: 20px;" data-tooltip="tooltip" data-placement="bottom"
                    title="{{namespace.comment}}"></b>
                 <span class="label label-info no-radius" ng-bind="namespace.format"></span>
@@ -20,7 +20,7 @@
                 <span class="label label-warning no-radius"
                       ng-show="namespace.lockOwner">当前修改者:{{namespace.lockOwner}}</span>
             </div>
-            <div class="col-md-6 text-right">
+            <div class="col-md-6 text-right header-buttons">
                 <button type="button" class="btn btn-success btn-sm J_tableview_btn"
                         data-tooltip="tooltip" data-placement="bottom" title="发布配置"
                         ng-show="namespace.hasReleasePermission || namespace.hasModifyPermission"