Merge pull request #1190 from lvuch/appspage

apps page and details

app/components/page-numbers/template.hbs

@@ -3,7 +3,7 @@
     <div class="btn-group btn-group-sm">
       <a class="arrow prev enabled-arrow btn bg-default" disabled={{unless (gte content.page 2) 'disabled'}} {{action "pageClicked" 1}}><span class="icon icon-chevron-beginning"></span></a>
       <a class="arrow prev enabled-arrow btn bg-default" disabled={{unless canStepBackward 'disabled'}} {{action "incrementPage" -1}}><span class="icon icon-chevron-left"></span></a>
-      <div class="overview-text inline-block ml-5 mr-5">{{t textLabel pages=content.totalPages to=indexTo from=indexFrom count=totalCount}}</div>
+      <div class="overview-text btn ml-5 mr-5">{{t textLabel pages=content.totalPages to=indexTo from=indexFrom count=totalCount}}</div>
       <a class="arrow next enabled-arrow btn bg-default" disabled={{unless canStepForward 'disabled'}} {{action "incrementPage" 1}}><span class="icon icon-chevron-right"></span></a>
       <a class="arrow prev enabled-arrow btn bg-default" disabled={{if (gte content.page content.totalPages) 'disabled'}} {{action "pageClicked" content.totalPages}}><span class="icon icon-chevron-end"></span></a>
     </div>

app/components/stack-app/template.hbs

@@ -2,14 +2,15 @@
   <div class="catalog-icon">
     <img src="{{app.baseAssets}}assets/images/generic-catalog.svg" data-src={{model.catalogTemplateInfo.links.icon}}/>
   </div>
-  <div class="stack-info-row">
-    <div class="stack-info-top box-borderless">
+  <div class="stack-info-row box">
+    <div class="stack-info-top">
       {{action-menu model=model classNames="pull-right"}}
-      <h2>
+      <div>
         {{#link-to "stack" projects.current.id model.id}}{{model.displayName}}{{/link-to}}
-      </h2>
+      </div>
     </div>
-    <div class="stack-info-bottom box-borderless">
+    <hr>
+    <div class="stack-info-bottom">
       <div class="multi-bar">
         {{progress-bar-multi
             labelKey="state"
@@ -30,4 +31,4 @@
   </div>
 </div>
 {{#if expanded}}
-{{/if}}
+{{/if}}

app/container/template.hbs

@@ -21,13 +21,13 @@
 <section>
   <div class="row banner bg-info pl-10 pr-10">
     <div class="col">
-      <label class="inline-label">{{t 'generic.image'}}:</label>
+      <label class="acc-label p-0">{{t 'generic.image'}}:</label>
       {{#copy-inline clipboardText=model.container.displayImage}}
         {{model.container.displayImage}}
       {{/copy-inline}}
     </div>
     <div class="col">
-      <label class="inline-label">{{t 'generic.ipAddress'}}:</label>
+      <label class="acc-label p-0">{{t 'generic.ipAddress'}}:</label>
       {{#if model.container.displayIp}}
         {{#copy-inline clipboardText=model.container.displayIp}}
           {{model.container.displayIp}}
@@ -38,19 +38,19 @@
     </div>
     {{#if model.container.stack}}
       <div class="col">
-        <label class="inline-label">{{t 'generic.stack'}}:</label>
+        <label class="acc-label p-0">{{t 'generic.stack'}}:</label>
         {{#link-to "stack" projects.current.id model.container.stack.id}}{{model.container.stack.displayName}}{{/link-to}}
       </div>
     {{/if}}
     {{#if model.container.primaryHost}}
       <div class="col">
-        <label class="inline-label">{{t 'generic.host'}}:</label>
+        <label class="acc-label p-0">{{t 'generic.host'}}:</label>
         {{#link-to "host" model.container.primaryHost.id}}{{model.container.primaryHost.displayName}}{{/link-to}}
       </div>
     {{/if}}
     {{#if model.container.displayExternalId}}
       <div class="col">
-        <label class="inline-label">{{t 'generic.dockerId'}}:</label>
+        <label class="acc-label p-0">{{t 'generic.dockerId'}}:</label>
         {{#copy-inline clipboardText=model.container.externalId}}
           {{model.container.displayExternalId}}
         {{/copy-inline}}

app/host/template.hbs

@@ -32,13 +32,13 @@
 <section>
   <div class="row banner bg-info pl-10 pr-10">
     <div class="col">
-      <label class="inline-label">{{t 'hostsPage.hostPage.infoMultiStats.ip'}}</label>
+      <label class="acc-label p-0">{{t 'hostsPage.hostPage.infoMultiStats.ip'}}</label>
       {{#copy-inline clipboardText=host.displayIp}}
         {{host.displayIp}}
       {{/copy-inline}}
     </div>
     <div class="col">
-      <label class="inline-label">{{t 'hostsPage.hostPage.infoMultiStats.docker'}}</label>
+      <label class="acc-label p-0">{{t 'hostsPage.hostPage.infoMultiStats.docker'}}</label>
       {{#if host.dockerEngineVersion}}
         {{host.dockerEngineVersion}}
       {{else}}
@@ -46,7 +46,7 @@
       {{/if}}
     </div>
     <div class="col">
-      <label class="inline-label">{{t 'hostsPage.hostPage.infoMultiStats.provider.labelText'}}</label>
+      <label class="acc-label p-0">{{t 'hostsPage.hostPage.infoMultiStats.provider.labelText'}}</label>
       {{#if host.driver}}
         {{host.driver}}
       {{else}}
@@ -70,7 +70,7 @@
     }}
       <div class="row">
         <div class="col span-6">
-          <label>{{t 'hostsPage.hostPage.infoMultiStats.os'}}</label>
+          <label class="acc-label">{{t 'hostsPage.hostPage.infoMultiStats.os'}}</label>
           <div>
             {{#if host.osDetail}}
               {{host.osDetail}}
@@ -80,7 +80,7 @@
           </div>
         </div>
         <div class="col span-6">
-          <label>{{t 'hostsPage.hostPage.infoMultiStats.kernel'}}</label>
+          <label class="acc-label">{{t 'hostsPage.hostPage.infoMultiStats.kernel'}}</label>
           <div>
             {{host.info.osInfo.kernelVersion}}
           </div>
@@ -88,10 +88,10 @@
       </div>
       <hr/>
       <div class="row">
-        <div class="col span-6">
+        <div class="col span-6 box">
           <h2>{{t 'generic.hardware'}}: </h2>
-          <div class="col span-12">
-            <label>{{t 'hostsPage.hostPage.infoMultiStats.cpu'}}</label>
+          <div>
+            <label class="acc-label">{{t 'hostsPage.hostPage.infoMultiStats.cpu'}}</label>
             <div>
               {{host.cpuBlurb}}
             </div>
@@ -101,8 +101,8 @@
               {{/if}}
             </div>
           </div>
-          <div class="col span-12">
-            <label>{{t 'hostsPage.hostPage.infoMultiStats.memory'}}</label>
+          <div>
+            <label class="acc-label pt-20">{{t 'hostsPage.hostPage.infoMultiStats.memory'}}</label>
             <div>
               {{#if host.memoryBlurb}}
                 {{host.memoryBlurb}}
@@ -111,8 +111,8 @@
               {{/if}}
             </div>
           </div>
-          <div class="col span-12">
-            <label>{{t 'hostsPage.hostPage.infoMultiStats.storage'}}</label>
+          <div>
+            <label class="acc-label pt-20">{{t 'hostsPage.hostPage.infoMultiStats.storage'}}</label>
             <div>
               {{#if host.diskBlurb}}
                 {{#if host.diskDetail}}
@@ -129,22 +129,22 @@
             </div>
           </div>
         </div>
-        <div class="col span-6">
+        <div class="col span-6 box">
           <h2>{{t 'generic.limits'}}: </h2>
-          <div class="col span-12">
-            <label>{{t 'hostsPage.hostPage.limits.cpu'}}</label>
+          <div>
+            <label class="acc-label">{{t 'hostsPage.hostPage.limits.cpu'}}</label>
             <div>
               {{host.milliCpu}} {{t 'hostsPage.hostPage.infoMultiStats.milliCpu.labelText'}}
             </div>
           </div>
-          <div class="col span-12">
-            <label>{{t 'hostsPage.hostPage.limits.memory'}}</label>
+          <div>
+            <label class="acc-label pt-20">{{t 'hostsPage.hostPage.limits.memory'}}</label>
             <div>
               {{host.memoryLimitBlurb}}
             </div>
           </div>
-          <div class="col span-12">
-            <label>{{t 'hostsPage.hostPage.limits.storage'}}</label>
+          <div>
+            <label class="acc-label pt-20">{{t 'hostsPage.hostPage.limits.storage'}}</label>
             <div>
               {{host.localStorageBlurb}}
             </div>

app/styles/abstracts/_mixins.scss

@@ -6,11 +6,11 @@
 ///Sets base color and darkens bg on hover
 @mixin bg-color($bg) {
   background: $bg;
-  &.btn:hover, a:hover {
+  &.btn:hover{
     background:darken($bg,10%);
     transition: all 0.3s ease;
   }
-  &.btn:active, a:focus {
+  &.btn:active {
     background:darken($bg,25%);
   }
 }

app/styles/components/_accordion.scss

@@ -63,10 +63,6 @@ $accordion-header-border: $bg-default;
 
 .physical-attrs {
   .accordion-content {
-    label,
-    h2 {
-      @extend .text-muted;
-    }
     > .row > .col.span-6 > .col.span-12 {
       padding: 10px;
       border-bottom: 1px solid $accent-border;

app/styles/components/_stack-app.scss

@@ -1,6 +1,5 @@
 .stack-app {
   margin-bottom: 20px;
-  border: 2px solid $table-border-color;
   position: relative;
   float: left;
   width: calc(50% - 15px);
@@ -15,17 +14,19 @@
   }
   .catalog-icon {
     @include catalog-img(transparent);
-    border-right: 1px solid $border;
+    border: 1px solid $accent-border;
     display: table-cell;
     vertical-align: middle;
-    width: 105px;
+    width: 120px;
+    padding: 0 10px;
   }
   .stack-info-row {
     display: table-cell;
+    margin: 0 10px;
+    padding: 0 20px;
     .stack-info-top,
     .stack-info-bottom {
       height: calc(105px/2);
-      padding: 10px;
     }
     .stack-info-bottom {
       .multi-bar {
@@ -36,7 +37,6 @@
     }
     .stack-info-top {
       padding-top: 20px;
-      border-bottom: 1px solid $border;
     }
   }
 }

app/styles/pages/_host.scss

@@ -200,6 +200,7 @@ ol > li {
     padding: 10px 20px;
     list-style: none;
     background: $accent-bg;
+    border: solid $accent-border 1px;
 }
 ol > li::before {
     content: counter(li);

translations/en-us.yaml

@@ -792,9 +792,9 @@ hostsPage:
       provider:
         labelText: 'Provider:'
         noHost: Custom
-      kernel: 'Kernel:'
+      kernel: 'Kernel'
       docker: 'Docker:'
-      os: 'OS:'
+      os: 'OS'
       description: 'Description:'
       milliCpu:
         labelText: mCPU