Add basic support for package long descriptions

Author: nlhkabu

warehouse/static/sass/components/_callout-block.scss

@@ -0,0 +1,9 @@
+/*
+  A styled div used for highlighting important content on the site.
+*/
+
+.callout-block {
+  padding: 10px;
+  border: 1px solid $border-color;
+  border-left-color: $brand-color;
+}

warehouse/static/sass/components/_release-description.scss

@@ -0,0 +1,92 @@
+/*
+  Styles the main description panel for an individual package.
+  Needs to deal with anything a user could include in a project description file...
+*/
+
+.release-description {
+  margin-bottom: 40px;
+  line-height: 1.5;
+
+  > :first-child,
+  > div:first-child > :first-child {
+    margin-top: 0 !important;
+  }
+
+  h1, h2, h3, h4, h5, h6 {
+    margin: 20px 0;
+  }
+
+  strong, b {
+    font-weight: 600;
+  }
+
+  em, i {
+    font-style: italic
+  }
+
+  pre,
+  code,
+  tt {
+    font-family: $code-font;
+    background-color: lighten($base-grey, 5);
+    border: 1px solid $border-color;
+    padding: 0 3px 1px 3px;
+    font-size: 85%;
+    color: lighten($text-color, 15);
+  }
+
+  pre {
+    display: block;
+    padding: 15px;
+    margin-bottom: 15px;
+  }
+
+  ol, ul {
+    margin: 15px 0 15px 30px;
+
+    @media only screen and (max-width: 400px){
+      margin-left: 15px;
+    }
+
+    ul, ol {
+      margin: 0 0 0 30px;
+
+      @media only screen and (max-width: 400px){
+        margin-left: 15px;
+      }
+    }
+  }
+
+  ul {
+    list-style-type: disc;
+  }
+
+  li {
+    padding: 2px 0;
+  }
+
+  blockquote {
+    margin: 15px 0 15px 15px;
+    border-left: 3px solid $border-color;
+    font-style: italic;
+    padding-left: 15px;
+    color: lighten($text-color, 20);
+  }
+
+  dl {
+    margin: 15px 0 5px 0;
+
+    dt {
+      font-weight: $bold-font-weight;
+    }
+
+    dd {
+      margin: 0 0 10px 20px;
+    }
+  }
+
+  hr {
+    margin: 15px 0;
+    border: 1px solid $border-color;
+  }
+}

warehouse/static/sass/components/_vertical-tabs.scss

@@ -23,9 +23,8 @@
       float: left;
       width: 25%;
     }
-    border-right: 2px solid $base-grey;
     display: none;
-    padding: 0 30px 0 0;
+    padding: 0 15px 0 0;
   }
 
   .vertical-tab {
@@ -78,11 +77,6 @@
       padding: 20px 10px;
     }
 
-    p {
-      color: $base-font-color;
-      line-height: $base-line-height;
-    }
-
     @include media($vertical-tab-mode) {
       border: none;
       display: none;

warehouse/static/sass/main.scss

@@ -66,6 +66,7 @@
 @import "components/author-profile"; // Move this?
 @import "components/brand-logo";
 @import "components/button-set";
+@import "components/callout-block";
 @import "components/card-style";
 @import "components/checkbox-tree";
 @import "components/dark-overlay";
@@ -88,6 +89,7 @@
 @import "components/package-list";
 @import "components/package-status";
 @import "components/panel-overlay";
+@import "components/release-description";
 @import "components/search-form";
 @import "components/sidebar-section";
 @import "components/site-header"; // refactor

warehouse/templates/accounts/profile.html

@@ -31,11 +31,9 @@ <h1>{{ user.name|default(user.username, true) }}{% if user.name %}({{ user.usern
       {% for release in projects %}
         <div class="package-snippet">
           <h3 class="title"><a href="{{ request.route_path('packaging.project', name=release.project.normalized_name) }}">{{ release.project.name }}</a></h3>
-
           <p class="meta">
             <em {{ l20n("lastReleasedOn", when=release.created|format_date()) }}>Last released on {{ release.created|format_date() }}</em>
           </p>
-
           <p class="description">{{ release.summary }}</p>
         </div>
       {% endfor %}

warehouse/templates/packaging/detail.html

@@ -45,10 +45,9 @@ <h1>{{ release.project.name }} {{ release.version }}</h1>
       <span>pip install {{ release.project.normalized_name }}</span>
       <a href="clicking-here-copies-text">
         <i class="fa fa-copy"></i>
-        <span class="sr-only">Copy PIP instructions/<span>
+        <span class="sr-only">Copy PIP instructions<span>
       </a>
     </p>
-
     <p class="help-link"><a href="#" {{ l20n("howToInstall") }}>How do I install this?</a></p>
   </div>
 </section>
@@ -128,7 +127,13 @@ <h3 {{ l20n("projectMeta") }}>Meta</h3>
         <a class="js-vertical-tab-accordion-heading vertical-tab-accordion-heading is-active" rel="tab1" {{ l20n("projectDescription") }}>Project Description</a>
         <div id="tab1" class="js-vertical-tab-content vertical-tab-content">
           {% if release.description %}
+          <div class="release-description">
             {{ release.description|readme(format="rst") }}
+          </div>
+          {% else %}
+          <div class="callout-block">
+            <p>The author of this package has not provided a project description.</p>
+          </div>
           {% endif %}
         </div>