diff --git a/app/apps-tab/index/controller.js b/app/apps-tab/index/controller.js index 77de273d2..a015b1ffd 100644 --- a/app/apps-tab/index/controller.js +++ b/app/apps-tab/index/controller.js @@ -21,12 +21,26 @@ export default Controller.extend({ filteredApps: computed('model.apps.@each.{type,isFromCatalog,tags,state}', 'tags', function() { var needTags = get(this, 'tags'); - var out = get(this, 'model.apps').filter((ns) => !C.REMOVEDISH_STATES.includes(get(ns, 'state'))); + var apps = get(this, 'model.apps').filter((ns) => !C.REMOVEDISH_STATES.includes(get(ns, 'state'))); if ( needTags && needTags.length ) { - out = out.filter((obj) => obj.hasTags(needTags)); + apps = apps.filter((obj) => obj.hasTags(needTags)); } - return out.sortBy('displayName'); + apps = apps.sortBy('displayName'); + + const group = []; + let dataIndex = 0; + + apps.forEach((app, index) => { + if ( index % 2 === 0 ) { + group.push([app]); + dataIndex++; + } else { + group[dataIndex - 1].push(app); + } + }); + + return group; }), }); diff --git a/app/apps-tab/index/template.hbs b/app/apps-tab/index/template.hbs index c45fe71cd..cb1f73fe5 100644 --- a/app/apps-tab/index/template.hbs +++ b/app/apps-tab/index/template.hbs @@ -7,8 +7,14 @@
- {{#each filteredApps as |ns|}} - {{namespace-app model=ns}} + {{#each filteredApps as |group|}} +
+ {{#each group as |ns|}} +
+ {{namespace-app model=ns}} +
+ {{/each}} +
{{else}} {{empty-table disabled=(rbac-prevents resource="app" scope="project" permission="create") resource="container" newRoute="catalog-tab" newTranslationKey="nav.apps.launch"}} {{/each}} diff --git a/app/styles/base/_helpers.scss b/app/styles/base/_helpers.scss index 555c9a211..3e8d4c5eb 100755 --- a/app/styles/base/_helpers.scss +++ b/app/styles/base/_helpers.scss @@ -132,6 +132,9 @@ display: block !important; } +.flex { + display:flex; +} .inline-block { display: inline-block !important; diff --git a/app/styles/components/_namespace-app.scss b/app/styles/components/_namespace-app.scss index bacd3baca..65a817d06 100644 --- a/app/styles/components/_namespace-app.scss +++ b/app/styles/components/_namespace-app.scss @@ -1,9 +1,7 @@ .namespace-app { margin-bottom: 20px; position: relative; - float: left; - width: calc(50% - 15px); - margin: 15px 0 15px 15px; + height: 100%; &:last-child { margin-bottom: 0; @@ -11,6 +9,7 @@ .stack-info { display: table; width: 100%; + height: 100%; } .catalog-icon { @include catalog-img(transparent);