responsive design, show/hide permalinks for small/print

Author: stain

src/main/resources/templates/workflow.html

@@ -121,9 +121,9 @@ <h4 class="modal-title" id="fullScreenGraphLabel">Workflow Graph</h4>
     </div>
 </div>
 
-<div class="container">
+<div class="container" role="main" id="main">
     <div class="row">
-        <div class="col-md-12" role="main" id="main">
+        <div class="col-md-12" >
             <h2>Workflow: <span th:text="${workflow.label}">Workflow Name</span></h2>
         </div>
         <div class="col-md-6">
@@ -132,7 +132,7 @@ <h2>Workflow: <span th:text="${workflow.label}">Workflow Name</span></h2>
                 <img th:unless="${workflow.retrievedFrom.getType().name() == 'GITHUB'}" id="gitLogo" src="../static/img/gitlogo.png" th:src="@{/img/gitlogo.png}" width="30" height="30" />
             </a>
         <i>Fetched <span th:text="${{workflow.retrievedOn}}">01/12/16 at 21:00</span></i>
-          <span class="hidden-print">
+          <span class="hidden-print hidden-sm hidden-xs">
                 <span th:if="${workflow.roBundlePath == null}" id="ajaxRequired"></span>
             <span th:class="${workflow.roBundlePath != null} ? hide : ''" id="generating"> - Generating download link <img alt="loading" src="../static/img/loading.svg" th:src="@{/img/loading.svg}" width="20" height="20" /></span>
             <span th:class="${workflow.roBundlePath == null} ? hide : ''" id="generated">
@@ -141,23 +141,25 @@ <h2>Workflow: <span th:text="${workflow.label}">Workflow Name</span></h2>
                 </span>
           </span>
         </div>
-        <div class="col-md-6 text-right">
+        <div class="col-md-6 text-right hidden-xs">
             <img class="verification_icon" src="../static/img/tick.svg" th:src="@{/img/tick.svg}" width="20" height="22" /> Verified with cwltool version <span th:text="${workflow.cwltoolVersion}">1.0.20170622090721</span>
         </div>
+        
         <div class="col-md-12" style="margin-top:5px;" th:if="${workflow.doc != null}">
             <p th:text="${workflow.doc}">Workflow Doc</p>
         </div>
     </div>
     <div class="row">
         <div class="col-lg-9 col-md-8 col-sm-6">
-                <div class="permalink hidden-xs-down" th:unless="${workflow.packed}">
+                <div class="permalink hidden-sm hidden-xs hidden-print" th:unless="${workflow.packed}">
                         Permalink:
                           <a href="https://w3id.org/cwl/view/" rel="noopener" class="help" target="_blank">[?]</a>
-                          <a id="permalink" th:href="${workflow.permalink}" th:text="${workflow.permalink}"
-                                    href="#">https://w3id.org/cwl/view/git/933bf2a1a1cce32d88f88f136275535da9df0954/workflows/larger/test-hello.cwl</a>
+                          <code><a id="permalink" th:href="${workflow.permalink}" th:text="${workflow.permalink}"
+                                    href="#">https://w3id.org/cwl/view/git/933bf2a1a1cce32d88f88f136275535da9df0954/workflows/larger/test-hello.cwl</a></code>
                 </div>
+            
         </div>    
-        <div class="col-lg-3 col-md-4 col-sm-6">
+        <div class="col-lg-3 col-md-4 col-sm-6 hidden-xs">
             <div id="graph-menu hidden-print" class="pull-right">
                 <button id="view-dot" class="hidden-print hidden-sm-down btn btn-primary" type="button" data-toggle="modal" data-target="#dotGraph">View DOT</button>
                 <div class="btn-group hidden-print">
@@ -299,6 +301,11 @@ <h2>Outputs</h2>
            </span>
         </div>
     </div>
+    <div class="visible-print-block" th:unless="${workflow.packed}">
+      <address>Permalink:
+      	<code th:text="${workflow.permalink}">https://w3id.org/cwl/view/git/933bf2a1a1cce32d88f88f136275535da9df0954/workflows/larger/test-hello.cwl</code>
+      </address>
+    </div>        
 </div>
 
 <div th:replace="fragments/footer :: copy"></div>