diff --git a/src/theme.scss b/src/theme.scss index a6f2dc165..3c4ba1c74 100644 --- a/src/theme.scss +++ b/src/theme.scss @@ -245,6 +245,11 @@ h1, h2, h3 { // Apps view // ---------------------------- +.app-grid { + display: flex; + flex-wrap: wrap; +} + .grid-item { padding: 10px; min-width: 225px; @@ -260,14 +265,8 @@ h1, h2, h3 { } } -.grid-item:hover .grid-item-bottom { - @media(min-width:768px) { - opacity: 1; - right: 10px; - } -} - .grid-item-content { + position: relative; // required to make action buttons positioned absolute within the element background-color: white; box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1); border-radius: 2px; @@ -284,21 +283,10 @@ h1, h2, h3 { font-family: $font-family-heading; } -.grid-item-bottom-mobile { - padding: 10px 15px; - border-top: 1px solid #ddd; - background-color: white; - - @media(min-width:768px) { - display: none; - } -} - -.grid-item-bottom { +.grid-item-actions { display: none; position: absolute; top: 20px; - padding: 10px 15px; right: -10px; opacity: 0; background-color: transparent; @@ -310,6 +298,13 @@ h1, h2, h3 { } } +.grid-item:hover .grid-item-actions { + @media(min-width:768px) { + opacity: 1; + right: 10px; + } +} + .app-update-badge { position: absolute; right: 0; diff --git a/src/views/apps.html b/src/views/apps.html index 4623c250c..723452a0e 100644 --- a/src/views/apps.html +++ b/src/views/apps.html @@ -520,92 +520,77 @@
-
-
- -
-
-
-
- -
-
-
-
-
-
{{ app.location || app.fqdn }}
-
- {{ app | installationStateLabel }} -
-
-
-
-
-
-
-
+
+

{{ domain.domain }}

+
+
+ +
+
+
+
+
+
-
-
-
- - - - - - - - -
-
-
- - - -
+
+
+
+
+
{{ app.location || app.fqdn }}
+
+ {{ app | installationStateLabel }} +
+
+
+
+
-
-
- -
+
+
+
+
+ +
-
- -
+
+ +
-
- -
+
+ +
-
- -
+
+ +
-
- -
+
+ +
-
- -
+
+ +
-
- -
-
+
+ +
+
- -
- - - - - - -
- -
+ +
+ + + + + + +
+
+ +
+
diff --git a/src/views/apps.js b/src/views/apps.js index db4761a58..5501bd248 100644 --- a/src/views/apps.js +++ b/src/views/apps.js @@ -10,6 +10,7 @@ angular.module('Application').controller('AppsController', ['$scope', '$location $scope.config = Client.getConfig(); $scope.user = Client.getUserInfo(); $scope.domains = []; + $scope.usedDomains = []; $scope.groups = []; $scope.users = []; $scope.backupConfig = {}; @@ -657,8 +658,20 @@ angular.module('Application').controller('AppsController', ['$scope', '$location }); } + function refreshInstalledApps() { + Client.refreshInstalledApps(); + + var tmp = []; + $scope.installedApps.forEach(function (app) { + if (!tmp.find(function (d) { return d.domain === app.domain; })) tmp.push({ domain: app.domain, apps: [] }); + tmp.find(function (d) { return d.domain === app.domain; }).apps.push(app); + }); + + $scope.usedDomains = tmp; + } + Client.onReady(function () { - Client.refreshInstalledApps(); // refresh the new list immediately when switching from another view (appstore) + refreshInstalledApps(); // refresh the new list immediately when switching from another view (appstore) $scope.spacesSuffix = $scope.user.username.replace(/\./g, '-'); @@ -669,7 +682,7 @@ angular.module('Application').controller('AppsController', ['$scope', '$location if ($scope.user.admin && !$scope.config.managed) getBackupConfig(); // FIXME: detect disabled backups some other way } - var refreshAppsTimer = $interval(Client.refreshInstalledApps.bind(Client), 5000); + var refreshAppsTimer = $interval(refreshInstalledApps, 5000); $scope.$on('$destroy', function () { $interval.cancel(refreshAppsTimer);