Merge pull request #9970 from nextcloud/users-line-height-fix

Fixed multi line in users list
nextcloud · Jun 25, 2018 · e3be9ef · e3be9ef
2 parents 587d7cc + ab22ffa
commit e3be9ef
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 1 deletion.
diff --git a/settings/css/settings.scss b/settings/css/settings.scss
@@ -1463,10 +1463,34 @@ doesnotexist:-o-prefocus, .strengthify-wrapper {
 						display: block !important;
 					}
 				}
+				/* inputs like mail, username, password */
 				&:not(.userActions) > input:not([type='submit']) {
 					width: 100%;
 					min-width: 0;
 				}
+				&.name {
+					word-break: break-all;
+				}
+				&.displayName,
+				&.mailAddress {
+					> input {
+						text-overflow: ellipsis;
+					}
+				}
+				&.name,
+				&.storageLocation {
+					/* better multi-line visual */
+					line-height: 1.3em;
+					max-height: 2.6em;
+					overflow : hidden;
+					/* not supported by all browsers 
+					   so we keep the overflow hidden
+					   as a fallback */
+					text-overflow: ellipsis;
+					display: -webkit-box;
+					-webkit-line-clamp: 2;
+					-webkit-box-orient: vertical;
+				}
 				&.quota {
                     .multiselect--active + progress {
                         display: none;

diff --git a/settings/js/settings-vue.js.map b/settings/js/settings-vue.js.map
diff --git a/settings/src/components/userList/userRow.vue b/settings/src/components/userList/userRow.vue
@@ -39,6 +39,7 @@
 				 :srcset="generateAvatar(user.id, 64)+' 2x, '+generateAvatar(user.id, 128)+' 4x'"
 				 v-if="!loading.delete && !loading.disable">
 		</div>
+		<!-- dirty hack to ellipsis on two lines -->
 		<div class="name">{{user.id}}</div>
 		<form class="displayName" :class="{'icon-loading-small': loading.displayName}" v-on:submit.prevent="updateDisplayName">
 			<input :id="'displayName'+user.id+rand" type="text"