Limit label tree info length

biigle · Oct 15, 2024 · 71cd59b · 71cd59b
1 parent ec08fe9
commit 71cd59b
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 11 deletions.
diff --git a/resources/assets/js/projects/components/labelTreeListItem.vue b/resources/assets/js/projects/components/labelTreeListItem.vue
@@ -1,18 +1,16 @@
 <template>
-    <li class="list-group-item" @mouseenter="emitEnter">
+    <li class="list-group-item limit-text" @mouseenter="emitEnter">
         <h4 class="list-group-item-heading">
             <button v-if="editable" v-show="editing" type="button" class="btn btn-default btn-sm pull-right" title="Detach this label tree" @click="emitRemove"><i class="fa fa-trash"></i></button>
             <a :href="url" v-text="tree.name"></a>
         </h4>
-        <p v-if="tree.description" class="list-group-item-text limit-description" v-text="tree.description"></p>
+        <p v-if="tree.description" class="list-group-item-text" v-text="tree.description"></p>
     </li>
 </template>
 
 <style>
-.limit-description {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
+.limit-text {
+    word-wrap: break-word;
 }
 </style>
 

diff --git a/resources/assets/sass/_search.scss b/resources/assets/sass/_search.scss
@@ -46,3 +46,7 @@
 .federated-search-button {
     margin: 20px 0;
 }
+
+.limit-text {
+    word-wrap: break-word;
+}
diff --git a/resources/assets/sass/bootstrap/_labels.scss b/resources/assets/sass/bootstrap/_labels.scss
@@ -56,3 +56,7 @@ h3, .h3 {
     font-size: 65%;
   }
 }
+
+.limit-text {
+  word-wrap: break-word;
+}
diff --git a/resources/views/label-trees/show/title.blade.php b/resources/views/label-trees/show/title.blade.php
@@ -48,22 +48,26 @@
                 <input class="hidden" type="submit" name="submit">
             </div>
         </form>
-        <h2 v-else>
+        <div v-else class="limit-text">
+            <h2>
             <span v-text="name">{{$tree->name}}</span>
             <small class="label label-default label-hollow" @if(!$private) v-cloak @endif title="This label tree is private" v-if="isPrivate">Private</small>
             <span v-if="hasDescription" @if(!$tree->description) v-cloak @endif>
                 <br><small v-text="description">{{$tree->description}}</small>
             </span>
-        </h2>
+            </h2>
+        </div>
     @else
-        <h2>
+        <div class="limit-text">
+            <h2>
             {{$tree->name}}
             @if ($private)
                 <small class="label label-default label-hollow" title="This label tree is private">Private</small>
             @endif
             @if ($tree->description)
                 <br><small>{{$tree->description}}</small>
             @endif
-        </h2>
+            </h2>
+        </div>
     @endcan
 </div>
diff --git a/resources/views/search/label-trees-content.blade.php b/resources/views/search/label-trees-content.blade.php
@@ -3,7 +3,7 @@
     @include('search.partials.federated-search-toggle')
     <h2 class="lead">{{number_format($labelTreeResultCount)}} label tree results</h2>
 </div>
-<ul class="search-results">
+<ul class="search-results limit-text">
     @foreach ($results as $tree)
         <li>
             <small class="pull-right text-muted">Updated on {{$tree->updated_at->toFormattedDateString()}}</small>