Fix display of Admin module on small devices

UI/WebServerResources/js/Administration/Administration.app.js

@@ -105,6 +105,8 @@
                             name: folder.displayName });
     }
 
+    stateUser.selectedFolder = o.id;
+
     return o;
   }
 

UI/WebServerResources/js/Administration/AdministrationAclController.js

@@ -19,6 +19,7 @@
     vm.selectUser = selectUser;
     vm.removeUser = removeUser;
     vm.getTemplate = getTemplate;
+    vm.close = close;
     vm.save = save;
 
     vm.userToAdd = '';
@@ -69,6 +70,13 @@
       }
     }
 
+    function close() {
+      $state.go('administration.rights').then(function() {
+        delete vm.user.selectedFolder;
+        vm.user = null;
+      });
+    }
+
     function save() {
       stateFolder.$acl.$saveUsersRights(stateFolder.owner).then(function() {
         $mdToast.show(

UI/WebServerResources/scss/components/card/card.scss

@@ -18,6 +18,7 @@ md-card {
     }
     .md-icon-button {
       transition: $swift-linear;
+      transition-duration: 0.2s;
       transition-delay: 0.2s;
       opacity: 1;
       &.ng-hide {
@@ -49,7 +50,7 @@ md-card {
   &.sg-expanded {
     @extend .md-whiteframe-z2;
     margin: 0 0 1px 0;
-    &-remove {
+    &-remove { // ngAnimate with ngClass
       transition-delay: 0.5s;
     }
   }

UI/WebServerResources/scss/views/AdministrationUI.scss

@@ -1,20 +1,31 @@
 /// AdministrationUI.scss -*- Mode: scss; indent-tabs-mode: nil; basic-offset: 2 -*-
 
-[id="usersList"] > md-list {
-  // Since the users list doesn't use the virtual repeater, force the vertical scroll
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  overflow: hidden;
-  overflow-y: auto;
+[ui-view="administration"] {
+  [id="usersList"] > md-list {
+    // Since the users list doesn't use the virtual repeater, force the vertical scroll
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    overflow: hidden;
+    overflow-y: auto;
 
-  .sg-folder .md-button {
-    // Buttons in list-item to view the ACLs of a user's folder
-    @extend .sg-no-wrap;
-    flex: 1 1 auto;
-    text-align: left;
-    text-transform: none;
+    .sg-folder .md-button {
+      // Buttons in list-item to view the ACLs of a user's folder
+      @extend .sg-no-wrap;
+      flex: 1 1 auto;
+      text-align: left;
+      text-transform: none;
+    }
+  }
+
+  .view-detail {
+    @include from(md) {
+      .viewer {
+        // Leave space for a tall toolbar
+        top: $toolbar-tall-height;
+      }
+    }
   }
 }