Merge pull request #668 from juleskers/experimenting-with-cssflex

quick-links in crate header

Author: carols10cents

app/styles/crate.scss

@@ -5,8 +5,13 @@
     margin-bottom: 20px;
     @include border-radius(5px);
     @include display-flex;
+    @include flex-wrap(wrap);
     @include align-items(center);
 
+    .wide {
+        width: 100%;
+    }
+
     .info {
         @include display-flex;
         @include flex-wrap(wrap);
@@ -129,21 +134,24 @@
     .downloads { @include display-flex; @include align-items(center); }
 
     .rev-dep-downloads {padding-left: 7px}
+}
+
+.quick-links {
+    ul {
+        @include display-flex;
+        @include flex-direction(row);
+
+        font-size: 80%;
+        list-style-type: none;
+        margin: 1em 0 0 0;
+        padding: 0;
 
-    .quick-links {
-        ul {
-            @include display-flex;
-            font-size: 80%;
-            list-style-type: none;
-            margin: 1em 0 0 0;
-            padding: 0;
 
-            li {
-                margin-right: 1em;
+        li {
+            margin-right: 1em;
 
-                &:last-child {
-                    margin-right: 0;
-                }
+            &:last-child {
+                margin-right: 0;
             }
         }
     }

app/templates/crate/version.hbs

@@ -1,34 +1,50 @@
 {{title crate.name}}
 
 <div id='crates-heading'>
-    <div class='info'>
-        <img class='logo crate' src="/assets/crate.png"/>
-        <h1>{{ crate.name }}</h1>
-        <h2>{{ currentVersion.num }}</h2>
-    </div>
+    <div class="wide">
+        <div class='info'>
+            <img class='logo crate' src="/assets/crate.png"/>
+            <h1>{{ crate.name }}</h1>
+            <h2>{{ currentVersion.num }}</h2>
+        </div>
 
-    <div class='right'>
-        {{#if session.currentUser}}
-            <button class='tan-button' {{action 'toggleFollow' this}}>
-                {{#if fetchingFollowing}}
-                    <img src="/assets/ajax-loader.gif"/>
-                {{else}}
-                    {{#if following}}
-                        Unfollow
+        <div class='right'>
+            {{#if session.currentUser}}
+                <button class='tan-button' {{action 'toggleFollow' this}}>
+                    {{#if fetchingFollowing}}
+                        <img src="/assets/ajax-loader.gif"/>
                     {{else}}
-                        Follow
+                        {{#if following}}
+                            Unfollow
+                        {{else}}
+                            Follow
+                        {{/if}}
                     {{/if}}
-                {{/if}}
-            </button>
+                </button>
+            {{/if}}
+            {{!--
+                <a class='yellow-button' download
+                   {{action 'download' currentVersion}}
+                   href='{{currentVersion.dl_path}}'>
+                    <img class="button-download" src="/assets/button-download.png"/>
+                    Download
+                </a>
+            --}}
+        </div>
+    </div>
+
+    <div class="quick-links">
+    <ul>
+        {{#if crate.homepage}}
+          <li><a href="{{crate.homepage}}">Homepage</a></li>
         {{/if}}
-        {{!--
-            <a class='yellow-button' download
-               {{action 'download' currentVersion}}
-               href='{{currentVersion.dl_path}}'>
-                <img class="button-download" src="/assets/button-download.png"/>
-                Download
-            </a>
-        --}}
+        {{#if crate.documentation}}
+          <li><a href="{{crate.documentation}}">Documentation</a></li>
+        {{/if}}
+        {{#if crate.repository}}
+          <li><a href="{{crate.repository}}">Repository</a></li>
+        {{/if}}
+    </ul>
     </div>
 </div>