apps/workbench/app/views/getting_started/_getting_started_popup.html.erb

   1 <style>
   2 .style_image {
   3   border: 10px solid #ddd;
   4 }
   5 </style>
   6
   7 <div id="getting-started-modal-window" class="modal">
   8   <div class="modal-dialog modal-with-loading-spinner" style="width:80%">
   9     <div class="modal-content">
  10       <div class="modal-header">
  11         <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
  12         <div>
  13           <div class="col-sm-8"> <h4 class="modal-title"> Getting Started with Arvados </h4> </div>
  14           <div class="spinner spinner-32px spinner-h-center col-sm-1" hidden="true"></div>
  15         </div>
  16         <br/>
  17       </div>
  18
  19            <div class="modal-body" style="height: 38em; overflow-y: scroll">
  20
  21
  22 <div class="container">
  23     <div class="row">
  24         <div class="col-md-6">
  25   <strong>How does this work?</strong> What you're looking at right now is Workbench, the graphical interface to the Arvados system.
  26 <br><br>
  27 Click the <span class="btn btn-sm btn-primary">Next &gt;</span> button below for a quick tour of Arvados.
  28 <br><br>
  29 <strong>OR</strong>
  30           <br><br>Get started by running your first pipeline in 3 quick steps:<br><br>
  31 <ol><li> Go to the <span class="btn btn-sm btn-default"><i class="fa fa-lg fa-fw fa-dashboard"></i> Dashboard</span> &gt; <span class="btn btn-sm btn-primary"><i class="fa fa-fw fa-gear"></i> Run a pipeline...</span> <br><br>
  32 <%= image_tag "mouse-move.gif", :class => "style_image" %>.
  33 </li><br>
  34   <li>  <span class="btn btn-sm btn-default"><i class="fa fa-fw fa-gear"></i>Mason Lab -- Ancestry Mapper (public)</span> &gt; <span class="btn btn-sm btn-primary">Next: choose inputs <i class="fa fa-fw fa-arrow-circle-right"></i></span></li><br>
  35   <li> <span class="btn btn-sm btn-primary">Run <i class="fa fa-fw fa-play"></i></span></li>
  36 </ol>
  37       </div>        <div class="col-md-6" style="border-left: solid; border-width: 1px">
  38             <br>
  39 <i class="fa fa-flag fa-flip-horizontal" style="color: green"></i> <i class="fa fa-child"></i>
  40 <strong>Voila!</strong> <i class="fa fa-child"></i> <i class="fa fa-flag" style="color: green"></i>
  41 Your pipeline is now spooling up and getting ready to run!
  42             <br><br>
  43
  44   <br><br>
  45   Go ahead, try it for yourself right now. <span class="glyphicon glyphicon-thumbs-up"></span>
  46 <br><br>
  47 <%= image_tag "pipeline-running.gif", :class => "style_image" %>
  48
  49   <br><br>
  50   <em><strong>Note:</strong> You can always come back to this Getting Started guide by clicking the <span class="fa fa-lg fa-question-circle"></span> in the upper-right corner.</em>
  51   <br><br>
  52 </div> </div> </div>
  53
  54
  55
  56       </div>
  57       <div class="modal-body" style="height: 38em; overflow-y: scroll">
  58         Page 2
  59       </div>
  60       <div class="modal-body" style="height: 38em; overflow-y: scroll">
  61         Page 3
  62       </div>
  63       <div class="modal-body" style="height: 38em; overflow-y: scroll">
  64         Page 4
  65       </div>
  66
  67       <div class="modal-footer">
  68         <div style="text-align:center">
  69           <button class="btn btn-default pager-prev"><i class="fa fa-fw fa-chevron-left"></i><span style="font-weight: bold;"> Prev</span></button>
  70           <button class="btn btn-default pager-next"><span style="font-weight: bold;">Next </span><i class="fa fa-fw fa-chevron-right"></i></button>
  71           <div class="pager-count pull-right"><span style="margin:5px"></span></div>
  72         </div>
  73       </div>
  74     </div>
  75   </div>
  76 </div>