feat: Add desktop version of theme page (fix #2559)

src/amo/components/Addon/index.js

@@ -1,4 +1,5 @@
 /* eslint-disable react/no-danger */
+import classNames from 'classnames';
 import React from 'react';
 import PropTypes from 'prop-types';
 import { compose } from 'redux';
@@ -107,7 +108,7 @@ export class AddonBase extends React.Component {
         >
           {installStatus !== ENABLED ? (
             <Button
-              className="Addon-theme-header-label Button--neutral"
+              className="Addon-theme-header-label Button--action"
               disabled={!compatible}
               htmlFor="Addon-theme-header"
             >
@@ -181,9 +182,10 @@ export class AddonBase extends React.Component {
     const authorList = addon.authors.map(
       (author) => `<a href="${author.url}">${author.name}</a>`);
     const description = addon.description ? addon.description : addon.summary;
-    const descriptionSanitized = sanitizeHTML(
-      nl2br(description), allowedDescriptionTags);
-    const summarySanitized = sanitizeHTML(addon.summary, ['a']);
+    // Themes lack a summary so we do the inverse :-/
+    // TODO: We should file an API bug about this...
+    const summary = addon.summary ? addon.summary : addon.description;
+
     const title = i18n.sprintf(
       // L10n: Example: The Add-On <span>by The Author</span>
       i18n.gettext('%(addonName)s %(startSpan)sby %(authorList)s%(endSpan)s'), {
@@ -199,35 +201,34 @@ export class AddonBase extends React.Component {
 
     // eslint-disable react/no-danger
     return (
-      <div className="Addon">
+      <div className={classNames('Addon', `Addon-${addon.type}`)}>
         <Card className="" photonStyle>
           <header className="Addon-header">
-            <section className="Addon-title-section">
-              <h1
-                className="Addon-title"
-                dangerouslySetInnerHTML={sanitizeHTML(title, ['a', 'span'])}
-              />
-
-              <p className="Addon-summary"
-                dangerouslySetInnerHTML={summarySanitized} />
-
-              <InstallButton
-                {...this.props}
-                className="Button--action Button--small"
-                disabled={!compatible}
-                ref={(ref) => { this.installButton = ref; }}
-                status={installStatus}
-              />
-            </section>
-
-            <section className="Addon-metadata">
-              {this.headerImage({ compatible })}
-
-              <h2 className="visually-hidden">
-                {i18n.gettext('Extension Metadata')}
-              </h2>
-              <AddonMeta addon={addon} />
-            </section>
+            <h1
+              className="Addon-title"
+              dangerouslySetInnerHTML={sanitizeHTML(title, ['a', 'span'])}
+            />
+
+            <p
+              className="Addon-summary"
+              dangerouslySetInnerHTML={sanitizeHTML(summary, ['a'])}
+            />
+
+            <InstallButton
+              {...this.props}
+              className="Button--action Button--small"
+              disabled={!compatible}
+              ref={(ref) => { this.installButton = ref; }}
+              status={installStatus}
+            />
+
+            {this.headerImage({ compatible })}
+
+            <h2 className="visually-hidden">
+              {i18n.gettext('Extension Metadata')}
+            </h2>
+
+            <AddonMeta addon={addon} />
           </header>
 
           {!compatible ? (
@@ -251,7 +252,10 @@ export class AddonBase extends React.Component {
           )} className="AddonDescription">
             <div className="AddonDescription-contents"
               ref={(ref) => { this.addonDescription = ref; }}
-              dangerouslySetInnerHTML={descriptionSanitized} />
+              dangerouslySetInnerHTML={
+                sanitizeHTML(nl2br(description), allowedDescriptionTags)
+              }
+            />
           </ShowMoreCard>
 
           {this.renderRatingsCard()}

src/amo/components/Addon/styles.scss

@@ -6,12 +6,6 @@
   padding: 20px 10px;
 }
 
-.Addon-header {
-  display: flex;
-  flex-flow: column;
-  justify-content: space-between;
-}
-
 .Addon-icon-image {
   height: 48px;
   width: 48px;
@@ -22,17 +16,6 @@
   }
 }
 
-.Addon-title-section {
-  display: flex;
-  flex: auto;
-  flex-flow: row wrap;
-  order: 2;
-
-  .InstallButton {
-    @include margin-start(auto);
-  }
-}
-
 .Addon-title {
   color: $black;
   font-size: $font-size-l;
@@ -63,22 +46,80 @@
   }
 }
 
-.Addon-summary {
-  @include respond-to(medium) {
-    margin-bottom: 0;
-    max-width: 550px;
-  }
-}
-
-.Addon-metadata {
+.Addon-header {
   display: flex;
-  flex-direction: row;
+  flex-flow: row wrap;
   justify-content: space-between;
+}
+
+.Addon-theme-header {
+  border-radius: $border-radius-default;
+  max-height: 90px;
+  min-height: 45px;
+  overflow-y: hidden;
+  order: -1;
+  position: relative;
+  width: 100%;
+}
+
+.Addon-theme-header-label {
+  bottom: 10px;
+  left: 10px;
+  position: absolute;
+}
+
+.Addon-theme-header-image {
+  display: block;
+  height: 100px;
+  object-fit: cover;
+  object-position: top right;
+  width: 100%;
+}
+
+.Addon-title {
   order: 1;
+
+  @include respond-to(medium) {
+    width: 90%;
+  }
 }
 
 .Addon .AddonMeta {
-  text-align: right;
+  order: 2;
+
+  @include respond-to(medium) {
+    @include margin-start(auto);
+
+    margin: 10px 0;
+    order: 0;
+    text-align: right;
+  }
+}
+
+.Addon-persona .AddonMeta {
+  @include respond-to(medium) {
+    order: 1;
+  }
+}
+
+.Addon .AddonMeta-item {
+  @include margin-start(auto);
+}
+
+.Addon-summary {
+  order: 2;
+}
+
+.Addon .InstallButton {
+  margin-top: auto;
+  order: 3;
+}
+
+.Addon-summary {
+  @include respond-to(medium) {
+    margin-bottom: 0;
+    max-width: 550px;
+  }
 }
 
 .Addon .InstallButton {
@@ -89,15 +130,15 @@
   }
 }
 
-// Details section with lots of flexbox stuff, on all but mobile displays.
-@include respond-to(medium) {
+// Details section with lots of grid stuff, on larger displays.
+@include respond-to(large) {
   .Addon-details {
     @include margin-end(10px);
 
     display: grid;
     grid-auto-flow: column dense;
     grid-gap: 10px;
-    grid-template-columns: 35% 65%;
+    grid-template-columns: minmax(300px, 35%) auto;
 
     .AddonDescription {
       grid-column: 2;

src/amo/components/RatingManager/index.js

@@ -145,7 +145,7 @@ export class RatingManagerBase extends React.Component {
       <div className="RatingManager-log-in-to-rate">
         <AuthenticateButton
           noIcon
-          className="RatingManager-log-in-to-rate-button Button--action"
+          className="RatingManager-log-in-to-rate-button Button--action Button--small"
           location={location}
           logInText={this.getLogInPrompt({ addonType: addon.type })}
         />

src/ui/components/Rating/vars.scss

@@ -1,7 +1,7 @@
 $rating-top-margin: 15px;
 
 $rating-l-star-size: 46px;
-$rating-l-star-gutter: 10px;
+$rating-l-star-gutter: 5px;
 
 $rating-s-star-size: 13px;
 $rating-s-star-gutter: 4px;