diff --git a/app/assets/stylesheets/application/learning_objects.scss b/app/assets/stylesheets/application/learning_objects.scss index 3bd1088cb20b2c238acaa5a5fa7f382891d3eb69..0d1853fada60b2752c6c44c9519982900878e027 100644 --- a/app/assets/stylesheets/application/learning_objects.scss +++ b/app/assets/stylesheets/application/learning_objects.scss @@ -3,19 +3,6 @@ $background-grey: #e7e7e8; .learning-object-horizontal, .learning-object-vertical { margin-bottom: 20px; - .panel-body { - padding: 0 !important; - margin-top: 3px; - overflow: hidden; - text-overflow: ellipsis; - } - - .media-heading { - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - } - .author-label { white-space: nowrap; text-overflow: ellipsis; @@ -30,6 +17,8 @@ $background-grey: #e7e7e8; a > img { width: 250px; height: 141px; + border: 0; + padding: 2px; } .learning-object-actions { @@ -40,12 +29,47 @@ $background-grey: #e7e7e8; } } +.learning-object-horizontal { + .learning-object-thumbnail { + float:left; + } + + .learning-object-body { + width: calc(100% - 250px); + padding: 0px; + padding-left: 5px; + float:left; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + + .learning-object-heading { + font-weight: 400; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + } + + .learning-object-text { + white-space: normal; + text-align: justify; + } + } +} + .learning-object-vertical { width: 250px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; + .panel-body { + padding: 0 !important; + margin-top: 3px; + overflow: hidden; + text-overflow: ellipsis; + } + .learning-object-thumbnail { max-width: 250px; height: 150px !important; diff --git a/app/views/learning_objects/_learning_object_horizontal.erb b/app/views/learning_objects/_learning_object_horizontal.erb index fe14b673882bbeffb8482e780954a21570008931..ad258652c78a01e81f6e08ee4e3a68ec37876f11 100644 --- a/app/views/learning_objects/_learning_object_horizontal.erb +++ b/app/views/learning_objects/_learning_object_horizontal.erb @@ -1,7 +1,7 @@ -<% link = learning_object_path(id: learning_object.id) %> -<div class="learning-object-horizontal"> - <div class="media"> - <div class="media-left media-top"> + + <% link = learning_object_path(id: learning_object.id) %> + <div class="learning-object-horizontal row"> + <!-- <div class="col-md-5"> --> <div class="learning-object-thumbnail"> <%= link_to link do learning_object_thumbnail learning_object @@ -11,12 +11,10 @@ <%= render 'learning_objects/actions_buttons', learning_object: learning_object %> <% end %> </div> - </div> - - <div class="media-body"> - + <!-- </div> --> + <div class="learning-object-body"> <%= link_to link do %> - <h4 class="media-heading"><%= learning_object_title learning_object %></h4> + <h4 class="learning-object-heading"><%= learning_object_title learning_object %></h4> <% end %> <span class="author-label">Por <%= learning_object.get_metadata_value_of("dc.contributor.author") %></span><br/> @@ -24,9 +22,18 @@ <span class="glyphicon glyphicon-star votes-count" data-id="<%= learning_object.id %>"><%= learning_object.likes %></span><br> <% unless learning_object.description.nil? %> - <%= learning_object.description %> - <br/> + <div class="learning-object-text"> + <%= + if learning_object.description.length > 150 + d = learning_object.description[0..150] + d = d[0...d.rindex(' ')] + d << "..." + else + learning_object.description + end + %> + </div> + <br/> <% end %> </div> </div> -</div>