Merge pull request pytorch#687 from shiftlab/demo-model-button

woo-kim · web-flow · commit a7c433d85e9d · 2021-05-25T23:06:26.000-07:00
Demo Model Output Button
diff --git a/_layouts/hub_detail.html b/_layouts/hub_detail.html
@@ -20,14 +20,23 @@ <h1>
         </h1>
 
         <div class="row">
-          <div class="col-md-6">
+          <div class="col-md-4">
             <p class="detail-lead">By {{ page.author }} </p>
           </div>
 
-          <div class="col-md-6">
+          <div class="col-md-8">
             <p class="detail-lead lead-summary">{{ page.summary }}</p>
-            <a href="{{ page.github-link }}"><button class="btn btn-lg with-right-white-arrow detail-github-link">View on Github</button></a>
-            <a href="https://colab.research.google.com/github/pytorch/pytorch.github.io/blob/master/{{ page.path | replace: "_hub", "assets/hub" | replace: ".md", ".ipynb" }}"><button class="btn btn-lg with-right-white-arrow detail-colab-link">Open on Google Colab</button></a>
+            <div class="detail-button-container">
+              <a href="{{ page.github-link }}"><button class="btn btn-lg with-right-white-arrow detail-github-link">View on Github</button></a>
+              <a href="https://colab.research.google.com/github/pytorch/pytorch.github.io/blob/master/{{ page.path | replace: "_hub", "assets/hub" | replace: ".md", ".ipynb" }}"><button class="btn btn-lg with-right-white-arrow detail-colab-link">Open on Google Colab</button></a>
+              {% if page.demo-model-link %}
+                {% if page.demo-model-button-text == blank or page.demo-model-button-text == nil %}
+                  <a href="{{ page.demo-model-link }}"><button class="btn btn-lg with-right-white-arrow detail-web-demo-link">Demo Model Output</button></a>
+                {% else %}
+                  <a href="{{ page.demo-model-link }}"><button class="btn btn-lg with-right-white-arrow detail-web-demo-link">{{ page.demo-model-button-text }}</button></a>
+                {% endif %}
+              {% endif %}
+            </div>
           </div>
         </div>
       </div>
diff --git a/_sass/hub.scss b/_sass/hub.scss
@@ -62,8 +62,19 @@
   color: $black;
 }
 
+.hub .detail-web-demo-link {
+  background: #4a9fb5;
+  color: $white;
+}
+
 .hub {
-  .detail-colab-link, .detail-github-link {
+  .detail-colab-link, .detail-github-link, .detail-web-demo-link {
+    margin-top: 1rem;
+  }
+}
+
+.hub {
+  .detail-button-container {
     margin-top: rem(45px);
     @include small-desktop {
       margin-top: rem(20px);
