From 1da265db11b0894f9712ec3fa40f4bb5ed155ec4 Mon Sep 17 00:00:00 2001 From: Vinoth Kannan Date: Tue, 27 Nov 2018 06:10:06 +0530 Subject: [PATCH] UX: category images have no sizes (#6662) --- .../components/categories-boxes-with-topics.hbs | 5 ++++- .../templates/components/categories-boxes.hbs | 12 ++++++++++-- .../templates/components/category-title-link.hbs | 6 +++++- .../discourse/templates/components/cdn-img.hbs | 4 ++-- .../discourse/templates/navigation/category.hbs | 6 +++++- .../stylesheets/common/base/category-list.scss | 1 + app/assets/stylesheets/desktop/topic-list.scss | 1 + app/assets/stylesheets/mobile/topic-list.scss | 1 + app/serializers/category_upload_serializer.rb | 2 +- spec/serializers/category_upload_serializer_spec.rb | 13 +++++++++++++ 10 files changed, 43 insertions(+), 8 deletions(-) create mode 100644 spec/serializers/category_upload_serializer_spec.rb diff --git a/app/assets/javascripts/discourse/templates/components/categories-boxes-with-topics.hbs b/app/assets/javascripts/discourse/templates/components/categories-boxes-with-topics.hbs index aae157c5213..9c082b2c57b 100644 --- a/app/assets/javascripts/discourse/templates/components/categories-boxes-with-topics.hbs +++ b/app/assets/javascripts/discourse/templates/components/categories-boxes-with-topics.hbs @@ -4,7 +4,10 @@
{{#if c.uploaded_logo.url}} - {{cdn-img src=c.uploaded_logo.url class="logo"}} + {{cdn-img src=c.uploaded_logo.url + class="logo" + width=c.uploaded_logo.width + height=c.uploaded_logo.height}} {{/if}}

diff --git a/app/assets/javascripts/discourse/templates/components/categories-boxes.hbs b/app/assets/javascripts/discourse/templates/components/categories-boxes.hbs index 623191149b0..f133219f3a7 100644 --- a/app/assets/javascripts/discourse/templates/components/categories-boxes.hbs +++ b/app/assets/javascripts/discourse/templates/components/categories-boxes.hbs @@ -3,7 +3,11 @@
@@ -25,7 +29,11 @@ {{#each c.subcategories as |sc|}} - {{cdn-img src=sc.uploaded_logo.url class="logo"}} + {{cdn-img + src=c.uploaded_logo.url + class="logo" + width=c.uploaded_logo.width + height=c.uploaded_logo.height}} {{sc.name}} diff --git a/app/assets/javascripts/discourse/templates/components/category-title-link.hbs b/app/assets/javascripts/discourse/templates/components/category-title-link.hbs index f27eac550c9..542a9000804 100644 --- a/app/assets/javascripts/discourse/templates/components/category-title-link.hbs +++ b/app/assets/javascripts/discourse/templates/components/category-title-link.hbs @@ -8,6 +8,10 @@ {{dir-span category.name}}
{{#if category.uploaded_logo.url}} -
{{cdn-img src=category.uploaded_logo.url class="category-logo"}}
+ {{cdn-img + src=category.uploaded_logo.url + class="category-logo" + width=category.uploaded_logo.width + height=category.uploaded_logo.height}} {{/if}} diff --git a/app/assets/javascripts/discourse/templates/components/cdn-img.hbs b/app/assets/javascripts/discourse/templates/components/cdn-img.hbs index e4e4459ddbc..16d2e983b12 100644 --- a/app/assets/javascripts/discourse/templates/components/cdn-img.hbs +++ b/app/assets/javascripts/discourse/templates/components/cdn-img.hbs @@ -1,3 +1,3 @@ {{#if src}} - -{{/if}} \ No newline at end of file + +{{/if}} diff --git a/app/assets/javascripts/discourse/templates/navigation/category.hbs b/app/assets/javascripts/discourse/templates/navigation/category.hbs index 9bffcd46dc6..6a43bf28982 100644 --- a/app/assets/javascripts/discourse/templates/navigation/category.hbs +++ b/app/assets/javascripts/discourse/templates/navigation/category.hbs @@ -3,7 +3,11 @@
{{#if category.uploaded_logo.url}} - {{cdn-img src=category.uploaded_logo.url class="category-logo"}} + {{cdn-img + src=category.uploaded_logo.url + class="category-logo" + width=category.uploaded_logo.width + height=category.uploaded_logo.height}} {{#if category.description}}

{{{dir-span category.description}}}

{{/if}} diff --git a/app/assets/stylesheets/common/base/category-list.scss b/app/assets/stylesheets/common/base/category-list.scss index 0e130634b00..66234afa8a5 100644 --- a/app/assets/stylesheets/common/base/category-list.scss +++ b/app/assets/stylesheets/common/base/category-list.scss @@ -43,6 +43,7 @@ .logo { display: block; + width: auto; height: 40px; margin: 0 auto 1em auto; } diff --git a/app/assets/stylesheets/desktop/topic-list.scss b/app/assets/stylesheets/desktop/topic-list.scss index 5cbda677385..a5669500a75 100644 --- a/app/assets/stylesheets/desktop/topic-list.scss +++ b/app/assets/stylesheets/desktop/topic-list.scss @@ -222,6 +222,7 @@ button.dismiss-read { } .category-logo { + width: auto; max-height: 150px; float: left; margin: 0.25em 1em 0.5em 0; diff --git a/app/assets/stylesheets/mobile/topic-list.scss b/app/assets/stylesheets/mobile/topic-list.scss index 319c94324b0..71b0a7ae2ac 100644 --- a/app/assets/stylesheets/mobile/topic-list.scss +++ b/app/assets/stylesheets/mobile/topic-list.scss @@ -480,6 +480,7 @@ ol.category-breadcrumb { .category-logo { display: block; + width: auto; max-width: 100%; max-height: 150px; padding: 8px 0; diff --git a/app/serializers/category_upload_serializer.rb b/app/serializers/category_upload_serializer.rb index f537c1a3362..72ab9885cf7 100644 --- a/app/serializers/category_upload_serializer.rb +++ b/app/serializers/category_upload_serializer.rb @@ -1,3 +1,3 @@ class CategoryUploadSerializer < ApplicationSerializer - attributes :id, :url + attributes :id, :url, :width, :height end diff --git a/spec/serializers/category_upload_serializer_spec.rb b/spec/serializers/category_upload_serializer_spec.rb new file mode 100644 index 00000000000..478ee54b977 --- /dev/null +++ b/spec/serializers/category_upload_serializer_spec.rb @@ -0,0 +1,13 @@ +require 'rails_helper' + +describe CategoryUploadSerializer do + + let(:upload) { Fabricate(:upload) } + let(:subject) { described_class.new(upload, root: false) } + + it 'should include width and height' do + expect(subject.width).to eq(upload.width) + expect(subject.height).to eq(upload.height) + end + +end