From 336436dfb43162016eebb2b111e4d4b3ad474f8a Mon Sep 17 00:00:00 2001
From: Joe <33972521+hnb-ku@users.noreply.github.com>
Date: Fri, 23 Nov 2018 22:04:42 +0800
Subject: [PATCH] UX: better handling of logo size

---
 app/assets/javascripts/discourse/widgets/home-logo.js.es6 | 3 +--
 app/assets/stylesheets/common/base/header.scss            | 2 --
 app/assets/stylesheets/desktop/header.scss                | 4 +++-
 app/assets/stylesheets/mobile/header.scss                 | 3 +++
 app/views/application/_header.html.erb                    | 2 +-
 5 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/app/assets/javascripts/discourse/widgets/home-logo.js.es6 b/app/assets/javascripts/discourse/widgets/home-logo.js.es6
index 37bb69a031c..5c7454df117 100644
--- a/app/assets/javascripts/discourse/widgets/home-logo.js.es6
+++ b/app/assets/javascripts/discourse/widgets/home-logo.js.es6
@@ -46,7 +46,6 @@ export default createWidget("home-logo", {
           attributes: {
             src: Discourse.getURL(logoSmallUrl),
             width: 36,
-            height: 36,
             alt: title
           }
         });
@@ -61,7 +60,7 @@ export default createWidget("home-logo", {
     } else if (logoUrl.length) {
       return h("img#site-logo.logo-big", {
         key: "logo-big",
-        attributes: { src: Discourse.getURL(logoUrl), height: 36, alt: title }
+        attributes: { src: Discourse.getURL(logoUrl), alt: title }
       });
     } else {
       return h("h1#site-text-logo.text-logo", { key: "logo-text" }, title);
diff --git a/app/assets/stylesheets/common/base/header.scss b/app/assets/stylesheets/common/base/header.scss
index 6ed5598e163..1099e43cd36 100644
--- a/app/assets/stylesheets/common/base/header.scss
+++ b/app/assets/stylesheets/common/base/header.scss
@@ -33,8 +33,6 @@
     }
   }
 
-  // the logo height is set in the home-logo widget. This ensures we get a scaled
-  // width that respects the aspect ratio of the image
   #site-logo {
     width: auto;
   }
diff --git a/app/assets/stylesheets/desktop/header.scss b/app/assets/stylesheets/desktop/header.scss
index 3f53844ff4e..74cffe0a5c7 100644
--- a/app/assets/stylesheets/desktop/header.scss
+++ b/app/assets/stylesheets/desktop/header.scss
@@ -6,7 +6,9 @@
   left: 0;
   height: 4.2858em;
   margin-bottom: 15px;
-
+  #site-logo {
+    height: 2.57em;
+  }
   #site-text-logo {
     font-size: $font-up-3;
     margin: 0;
diff --git a/app/assets/stylesheets/mobile/header.scss b/app/assets/stylesheets/mobile/header.scss
index 49971d56da1..af8d268cff3 100644
--- a/app/assets/stylesheets/mobile/header.scss
+++ b/app/assets/stylesheets/mobile/header.scss
@@ -17,6 +17,9 @@
       display: block;
     }
   }
+  #site-logo {
+    height: 2.4em;
+  }
   #site-text-logo {
     margin: 0;
     font-size: $font-up-1;
diff --git a/app/views/application/_header.html.erb b/app/views/application/_header.html.erb
index 24f6cb6b930..23c75aa9e7f 100644
--- a/app/views/application/_header.html.erb
+++ b/app/views/application/_header.html.erb
@@ -6,7 +6,7 @@
           <div class="logo-wrapper">
             <a href="<%= path "/" %>">
               <%- if application_logo_url.present? %>
-                <img src="<%= application_logo_url %>" height="36" alt="<%= SiteSetting.title %>" id="site-logo">
+                <img src="<%= application_logo_url %>" alt="<%= SiteSetting.title %>" id="site-logo">
               <%- else %>
                 <h2 id='site-text-logo'><%= SiteSetting.title %></h2>
               <%- end %>