浏览代码

HUE-7883 [jb] Restyle queries side panel to look like the other sections

Enrico Berti 7 年之前
父节点
当前提交
c48baa6

+ 1 - 1
apps/jobbrowser/src/jobbrowser/static/jobbrowser/css/jobbrowser-embeddable.css

@@ -14,4 +14,4 @@ distributed under the License is distributed on an "AS IS" BASIS,
 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 See the License for the specific language governing permissions and
 limitations under the License.
 limitations under the License.
- */.jobbrowser-mini .span12.no-margin{margin-left:0 !important}.jobbrowser-full .content-panel-inner{padding:10px}.jobbrowser-full .jb-breadcrumbs{margin-bottom:0}.jobbrowser-full .jb-panel{padding-left:10px;padding-right:10px}.jobbrowser-components .hue-uncheck::before{padding-left:2px}.jobbrowser-components .tab-content{padding:10px;border:none !important}.jobbrowser-components .hue-breadcrumbs-bar{padding:0}.jobbrowser-components .hue-breadcrumbs-bar li{padding:12px}.jobbrowser-components .hue-breadcrumbs-bar li:first-child{padding-left:0;padding-right:0}.jobbrowser-components .hue-breadcrumbs-bar a{color:#0B7FAD !important;display:inline !important}.jobbrowser-components .divider{color:#C8C8C8;padding-right:12px}.jobbrowser-components .app-icon{vertical-align:text-top}.jobbrowser-components .sidebar-nav .progress{margin-bottom:0}.jobbrowser-components .sidebar-nav .nav-list>li>a{margin-top:0 !important;margin-bottom:0 !important}.jobbrowser-components .sidebar-nav .nav-list li:not(.nav-header){text-overflow:ellipsis;overflow-x:hidden;white-space:nowrap}.jobbrowser-components .query-plan{border:1px solid #DCDCDC}.jobbrowser-components .node rect{stroke:#424242;fill:#FFFFFF}.jobbrowser-components .edgePath path{stroke:#424242;fill:#424242;stroke-width:1.5px}.jobbrowser-components .data-list{padding-left:0}.jobbrowser-components .data-list .data-header{float:left;width:65px;text-align:right;padding:0;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.jobbrowser-components .nav-list>li>a,.jobbrowser-components .data-list .nav-header.data-header{padding:0;margin:0 7px 0 0 !important}
+ */.jobbrowser-mini .span12.no-margin{margin-left:0 !important}.jobbrowser-full .content-panel-inner{padding:10px}.jobbrowser-full .jb-breadcrumbs{margin-bottom:0}.jobbrowser-full .jb-panel{padding-left:10px;padding-right:10px}.jobbrowser-components .hue-uncheck::before{padding-left:2px}.jobbrowser-components .tab-content{padding:10px;border:none !important}.jobbrowser-components .hue-breadcrumbs-bar{padding:0}.jobbrowser-components .hue-breadcrumbs-bar li{padding:12px}.jobbrowser-components .hue-breadcrumbs-bar li:first-child{padding-left:0;padding-right:0}.jobbrowser-components .hue-breadcrumbs-bar a{color:#0B7FAD !important;display:inline !important}.jobbrowser-components .divider{color:#C8C8C8;padding-right:12px}.jobbrowser-components .app-icon{vertical-align:text-top}.jobbrowser-components .sidebar-nav .progress{margin-bottom:0}.jobbrowser-components .sidebar-nav .nav-list>li>a{margin-top:0 !important;margin-bottom:0 !important}.jobbrowser-components .sidebar-nav .nav-list li:not(.nav-header){text-overflow:ellipsis;overflow-x:hidden;white-space:nowrap}.jobbrowser-components .query-plan{border:1px solid #DCDCDC}.jobbrowser-components .node rect{stroke:#424242;fill:#FFFFFF}.jobbrowser-components .edgePath path{stroke:#424242;fill:#424242;stroke-width:1.5px}

+ 0 - 19
apps/jobbrowser/src/jobbrowser/static/jobbrowser/less/jobbrowser-embeddable.less

@@ -103,23 +103,4 @@
     fill: @cui-gray-800;
     fill: @cui-gray-800;
     stroke-width: 1.5px;
     stroke-width: 1.5px;
   }
   }
-
-  .data-list {
-    padding-left: 0;
-  }
-
-  .data-list .data-header {
-    float: left;
-    width: 65px;
-    text-align: right;
-    padding:0px;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    white-space: nowrap;
-  }
-
-  .nav-list > li > a, .data-list .nav-header.data-header {
-    padding:0px;
-    margin:0px 7px 0px 0px !important;
-  }
 }
 }

+ 9 - 9
apps/jobbrowser/src/jobbrowser/templates/job_browser.mako

@@ -1000,9 +1000,9 @@ ${ commonheader("Job Browser", "jobbrowser", user, request) | n,unicode }
     <!-- ko if: id() -->
     <!-- ko if: id() -->
     <div data-bind="css: {'span2': !$root.isMini(), 'span12': $root.isMini() }">
     <div data-bind="css: {'span2': !$root.isMini(), 'span12': $root.isMini() }">
       <div class="sidebar-nav">
       <div class="sidebar-nav">
-        <ul class="nav nav-list data-list">
+        <ul class="nav nav-list">
           <!-- ko if: doc_url -->
           <!-- ko if: doc_url -->
-          <li class="nav-header data-header">${ _('Id') }</li>
+          <li class="nav-header">${ _('Id') }</li>
           <li>
           <li>
             <a data-bind="attr: {href: doc_url}" target="_blank" title="${ _('Open in impalad') }">
             <a data-bind="attr: {href: doc_url}" target="_blank" title="${ _('Open in impalad') }">
               <span data-bind="text: id"></span>
               <span data-bind="text: id"></span>
@@ -1010,25 +1010,25 @@ ${ commonheader("Job Browser", "jobbrowser", user, request) | n,unicode }
           </li>
           </li>
           <!-- /ko -->
           <!-- /ko -->
           <!-- ko ifnot: doc_url -->
           <!-- ko ifnot: doc_url -->
-          <li class="nav-header data-header">${ _('Id') }</li>
+          <li class="nav-header">${ _('Id') }</li>
           <li class="break-word"><span data-bind="text: id"></span></li>
           <li class="break-word"><span data-bind="text: id"></span></li>
           <!-- /ko -->
           <!-- /ko -->
-          <li class="nav-header data-header">${ _('Status') }</li>
+          <li class="nav-header">${ _('Status') }</li>
           <li><span data-bind="text: status"></span></li>
           <li><span data-bind="text: status"></span></li>
-          <li class="nav-header data-header">${ _('User') }</li>
+          <li class="nav-header">${ _('User') }</li>
           <li><span data-bind="text: user"></span></li>
           <li><span data-bind="text: user"></span></li>
-          <li class="nav-header data-header">${ _('Progress') }</li>
+          <li class="nav-header">${ _('Progress') }</li>
           <li>
           <li>
           <span data-bind="text: progress"></span>%
           <span data-bind="text: progress"></span>%
           </li>
           </li>
           <li>
           <li>
-            <div class="progress-job progress" style="background-color: #FFF; width: calc(100% - 72px); margin-left: 72px" data-bind="css: {'progress-danger': apiStatus() === 'FAILED', 'progress-warning': isRunning(), 'progress-success': apiStatus() === 'SUCCEEDED' }">
+            <div class="progress-job progress" style="background-color: #FFF; width: 100%" data-bind="css: {'progress-danger': apiStatus() === 'FAILED', 'progress-warning': isRunning(), 'progress-success': apiStatus() === 'SUCCEEDED' }">
               <div class="bar" data-bind="style: {'width': progress() + '%'}"></div>
               <div class="bar" data-bind="style: {'width': progress() + '%'}"></div>
             </div>
             </div>
           </li>
           </li>
-          <li class="nav-header data-header">${ _('Duration') }</li>
+          <li class="nav-header">${ _('Duration') }</li>
           <li><span data-bind="text: duration() && duration().toHHMMSS()"></span></li>
           <li><span data-bind="text: duration() && duration().toHHMMSS()"></span></li>
-          <li class="nav-header data-header">${ _('Submitted') }</li>
+          <li class="nav-header">${ _('Submitted') }</li>
           <li><span data-bind="moment: {data: submitted, format: 'LLL'}"></span></li>
           <li><span data-bind="moment: {data: submitted, format: 'LLL'}"></span></li>
         </ul>
         </ul>
       </div>
       </div>