Merge pull request #65 from IzumiSy/description_ellipsis

Fixed truncating styles
IzumiSy · Apr 30, 2018 · 50d0468 · 50d0468
2 parents 0a2b74d + 25dcc6b
commit 50d0468
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 7 deletions.
diff --git a/app/assets/javascripts/bookmark.coffee b/app/assets/javascripts/bookmark.coffee
@@ -3,10 +3,12 @@
 # You can use CoffeeScript in this file: http://coffeescript.org/
 
 $(document).on 'turbolinks:load', ->
-  document.querySelectorAll('.ellipsis').forEach (q) ->
+  document.querySelectorAll('.ellipsis3').forEach (q) ->
     $clamp(q, { clamp: 3 });
-  document.querySelectorAll('.main.content > .description').forEach (q) ->
+  document.querySelectorAll('.ellipsis2').forEach (q) ->
     $clamp(q, { clamp: 2 });
+  document.querySelectorAll('.ellipsis1').forEach (q) ->
+    $clamp(q, { clamp: 1 });
 
   $('.ui.dropdown').dropdown()
 

diff --git a/app/assets/stylesheets/bookmark.css.scss b/app/assets/stylesheets/bookmark.css.scss
@@ -14,6 +14,13 @@ $lightgreen: #21BA45;
   }
 }
 
+.bookmark-list.relaxed.divided.list {
+  .description {
+    font-size: small;
+    height: 16px;
+  }
+}
+
 .bookmark-list.ui.cards .card {
   cursor: pointer;
 

diff --git a/app/views/bookmarks/shared/_card_view.html.haml b/app/views/bookmarks/shared/_card_view.html.haml
@@ -4,12 +4,12 @@
       .main.content
         %i.right.floated.remove.icon{ data: { modal: bookmark.id } }
         %i.right.floated.edit.icon{ data: { link: edit_bookmark_path(bookmark.id) } }
-        .header.ellipsis
+        .header.ellipsis3
           = image_tag favicon(bookmark.url), class: "favicon"
           = bookmark.title
         .meta
           = "#{distance_of_time_in_words(Time.now, bookmark.created_at)} ago"
-        .description
+        .description.ellipsis2
           %p= bookmark.description
       .extra.content
         = bookmark.url

diff --git a/app/views/bookmarks/shared/_list_view.html.haml b/app/views/bookmarks/shared/_list_view.html.haml
@@ -1,11 +1,11 @@
-.ui.relaxed.divided.list
+.ui.relaxed.divided.list.bookmark-list
   - bookmarks.each do |bookmark|
     .item
       %i.large.middle.aligned.icon
         = image_tag favicon(bookmark.url)
       .content
-        = link_to bookmark.title, bookmark.url, { class: "header", target: "_blank" }
-        .description= bookmark.description
+        = link_to bookmark.title, bookmark.url, { class: "header ellipsis1", target: "_blank" }
+        .description.ellipsis1= bookmark.description
 
     .ui.mini.modal{ id: "remove-modal-#{bookmark.id}" }
       .header