Merge pull request #6848 from ic4f/dev

Indicate language in client docs to enable syntax highlighting.

client/README.md

@@ -65,8 +65,8 @@ Changing Styles/CSS
 ===================
 
 The CSS and styling used by Galaxy is also controlled from this directory.
-Galaxy uses LESS, a superset of CSS that compiles to CSS, for its styling. LESS
-files are kept in client/galaxy/style/less. Compiled CSS is in
+Galaxy uses Sass for its styling, a superset of CSS that compiles to CSS. Sass
+files are kept in client/galaxy/style/scss. Compiled CSS is in
 static/style/blue.
 
 As mentioned above, 'make client' will also rebuild styles.  If you *only* want

client/galaxy/docs/README.md

@@ -0,0 +1,5 @@
+The \*.md files in this directory are rendered as a style guide generated when
+running ```yarn run styleguide```.
+
+For more details see [Vue
+Styleguidist](https://github.com/vue-styleguidist/vue-styleguidist).

client/galaxy/docs/bootstrap.md

@@ -2,7 +2,7 @@
 
 Regular buttons
 
-```
+```vue
 <div>
    <button type="button" class="btn btn-primary">Primary</button>
    <button type="button" class="btn btn-secondary">Secondary</button>
@@ -16,7 +16,7 @@ Regular buttons
 
 Disabled
 
-```
+```vue
 <div>
    <button type="button" class="btn btn-primary disabled">Primary</button>
    <button type="button" class="btn btn-secondary disabled">Secondary</button>
@@ -28,7 +28,7 @@ Disabled
 </div>
 ```
 
-```
+```vue
 <div>
    <button type="button" class="btn btn-outline-primary">Primary</button>
    <button type="button" class="btn btn-outline-secondary">Secondary</button>
@@ -39,7 +39,7 @@ Disabled
 </div>
 ```
 
-```
+```vue
  <div class="btn-group" role="group" aria-label="Button group with nested dropdown">
    <button type="button" class="btn btn-primary">Primary</button>
    <div class="btn-group" role="group">
@@ -52,7 +52,7 @@ Disabled
  </div>
 ```
 
-```
+```vue
  <div class="btn-group" role="group" aria-label="Button group with nested dropdown">
    <button type="button" class="btn btn-success">Success</button>
    <div class="btn-group" role="group">
@@ -65,7 +65,7 @@ Disabled
  </div>
 ```
 
-```
+```vue
  <div class="btn-group" role="group" aria-label="Button group with nested dropdown">
    <button type="button" class="btn btn-info">Info</button>
    <div class="btn-group" role="group">
@@ -78,7 +78,7 @@ Disabled
  </div>
 ```
 
-```
+```vue
    <div class="btn-group" role="group" aria-label="Button group with nested dropdown">
      <button type="button" class="btn btn-danger">Danger</button>
      <div class="btn-group" role="group">
@@ -92,7 +92,7 @@ Disabled
  </div>
 ```
 
-```
+```vue
  <div>
    <button type="button" class="btn btn-primary btn-lg">Large button</button>
    <button type="button" class="btn btn-primary">Default button</button>
@@ -102,7 +102,7 @@ Disabled
 
 ## Alerts
 
-```
+```vue
 <div class="alert alert-dismissable alert-warning">
   <button type="button" class="close" data-dismiss="alert">&times;</button>
   <h4>Warning!</h4>
@@ -110,21 +110,21 @@ Disabled
 </div>
 ```
 
-```
+```vue
 <div class="alert alert-dismissable alert-danger">
   <button type="button" class="close" data-dismiss="alert">&times;</button>
   <strong>Oh snap!</strong> <a href="#" class="alert-link">Change a few things up</a> and try submitting again.
 </div>
 ```
 
-```
+```vue
 <div class="alert alert-dismissable alert-success">
   <button type="button" class="close" data-dismiss="alert">&times;</button>
   <strong>Well done!</strong> You successfully read <a href="#" class="alert-link">this important alert message</a>.
 </div>
 ```
 
-```
+```vue
 <div class="alert alert-dismissable alert-info">
   <button type="button" class="close" data-dismiss="alert">&times;</button>
   <strong>Heads up!</strong> This <a href="#" class="alert-link">alert needs your attention</a>, but it's not super important.
@@ -133,7 +133,7 @@ Disabled
 
 ## Badges
 
-```
+```vue
 <div>
   <span class="badge badge-primary">Primary</span>
   <span class="badge badge-secondary">Secondary</span>
@@ -144,7 +144,7 @@ Disabled
 </div>
 ```
 
-```
+```vue
 <div class="">
   <ul class="nav nav-pills">
     <li class="active"><a href="#">Home <span class="badge">42</span></a></li>
@@ -156,7 +156,7 @@ Disabled
 
 ## Tables
 
-```
+```vue
 <div class="">
   <table class="table table-striped table-bordered table-hover">
     <thead>
@@ -217,7 +217,7 @@ Disabled
 
 ## Cards
 
-```
+```vue
 <div class="row">
   <div class="col-lg-4">
     <div class="bs-component">

client/galaxy/docs/galaxy-buttons.md

@@ -1,24 +1,24 @@
 ## Buttons
 
-```
+```vue
 <button>Just a default button</button>
 ```
 
-```
+```vue
 <a href="#" class="action-button">An anchor with .action-button</a>
 ```
 
 All the crazy permutations of menu button...
 
-```
+```vue
 <a href="#" class="menubutton">An anchor with .menu-button</a>
 ```
 
-```
+```vue
 <a href="#" class="menubutton popup">An anchor with .menu-button.popup</a>
 ```
 
-```
+```vue
 <a href="#" class="menubutton popup split">
   <a class="menubutton-label">An anchor with .menu-button.popup.split</a>
 </a>
@@ -28,7 +28,7 @@ All the crazy permutations of menu button...
 
 As generated by mvc.ui.ui-options
 
-```
+```vue
 <div class="btn-group btn-group-toggle" data-toggle="buttons">
   <label class="btn btn-secondary active">
     <input type="radio" name="options" id="option1" autocomplete="off" checked> Active
@@ -44,6 +44,6 @@ As generated by mvc.ui.ui-options
 
 ## Pagination
 
-```
+```vue
 <ul class="pagination"><li class="page-item disabled"><a class="page-link" href="#page/1"><span class="fa fa-angle-double-left"></span></a></li><li class="page-item disabled"><a class="page-link" href="#page/1">0</a></li><li class="page-item active"><a class="page-link" href="#page/1">1</a></li><li class="page-item"><a class="page-link" href="#page/2">2</a></li><li class="page-item"><a class="page-link" href="#page/4"><span class="fa fa-angle-double-right"></span></a></li></ul>
 ```

client/galaxy/docs/galaxy-forms.md

@@ -2,7 +2,7 @@
 
 Manually crafted "tool" form class, this is broken in the BS4 branch I think.
 
-```
+```vue
 <div class="tool-form">
   <form name="foo">
      <div class="form-row">
@@ -18,7 +18,7 @@ Manually crafted "tool" form class, this is broken in the BS4 branch I think.
 
 Portlet variant generated by mvc.form.form-view
 
-```
+```vue
 <div class="ui-portlet-limited" id="uid-8">
   <div class="portlet-header">
   <div class="portlet-operations"></div>

client/galaxy/docs/galaxy-masthead.md

@@ -4,7 +4,7 @@ As generated by layout.masthead.js
 
 Default height:
 
-```
+```vue
 <nav id="masthead" class="navbar navbar-expand justify-content-center navbar-dark bg-dark">
   <a class="navbar-brand">
     <img class="navbar-brand-image"/>
@@ -26,7 +26,7 @@ Default height:
 
 Override height with "height: 80px;"
 
-```
+```vue
 <nav id="masthead" class="navbar navbar-expand justify-content-center navbar-dark bg-dark" style="height: 80px;">
   <a class="navbar-brand">
     <img class="navbar-brand-image"/>
@@ -48,7 +48,7 @@ Override height with "height: 80px;"
 
 Override height with "height: 4rem;"
 
-```
+```vue
 <nav id="masthead" class="navbar navbar-expand justify-content-center navbar-dark bg-dark" style="height: 4rem;">
   <a class="navbar-brand">
     <img class="navbar-brand-image"/>

client/galaxy/docs/galaxy-menus.md

@@ -3,17 +3,17 @@
 These are the classes for the menu itself, normally floating, so placed inside
 a relative element.
 
-```
+```vue
 <div style="position: relative; height: 12rem;">
-<div class="popmenu-wrapper" style="top: 0;">
-  <ul class="dropdown-menu">
-    <li class="head"><a>Heading one</a></li>
-    <li><a>An item</a></li>
-    <li><a>Another item</a></li>
-    <li class="head"><a>Heading two</a></li>
-    <li><a>Third item</a></li>
-    <li><a>Last item</a></li>
-  </ul>
-</div>
+  <div class="popmenu-wrapper" style="top: 0;">
+    <ul class="dropdown-menu">
+      <li class="head"><a>Heading one</a></li>
+      <li><a>An item</a></li>
+      <li><a>Another item</a></li>
+      <li class="head"><a>Heading two</a></li>
+      <li><a>Third item</a></li>
+      <li><a>Last item</a></li>
+    </ul>
+  </div>
 </div>
 ```

client/galaxy/docs/galaxy-messages.md

@@ -2,7 +2,7 @@
 
 Messages that appear across the top of the panel view below the masthead.
 
-```
+```vue
 <div>
   <div v-for="type in ['done', 'info', 'warning', 'error']">
     <div v-bind:class="'panel-' + type + '-message'">I'm a panel-{{type}}-message</div>
@@ -14,7 +14,7 @@ Messages that appear across the top of the panel view below the masthead.
 
 Used for providing feedback inline.
 
-```
+```vue
 <div>
   <div v-for="type in ['done', 'info', 'warning', 'error']">
     <div v-bind:class="type + 'messagelarge'">I'm a {{type}}messagelarge</div>
@@ -24,7 +24,7 @@ Used for providing feedback inline.
 
 ### Small Messages
 
-```
+```vue
 <div>
   <div v-for="type in ['done', 'info', 'warning', 'error']">
     <div v-bind:class="type + 'message'">I'm a {{type}}message</div>

client/galaxy/docs/galaxy-panels.md

@@ -1,6 +1,6 @@
 ## Panel (toolMenuContainer)
 
-```
+```vue
 <div style="height: 200px;">
   <div style="position: absolute; width: 250px; height: 200px; border: dotted gray 1px">
     <div class="unified-panel-header">

client/galaxy/docs/galaxy-tables.md

@@ -2,7 +2,7 @@
 
 Tables using the .grid class
 
-```
+```vue
 <table class="grid">
   <thead class="grid-table-header">
     <tr><th>One</th><th>Two</th></tr>

client/galaxy/docs/galaxy-tabs.md

@@ -2,7 +2,7 @@
 
 Tabs as generated by mvc.ui.ui-tabs
 
-```
+```vue
 <ul style="display: flex;" class="tab-navigation nav nav-tabs">
 	<li class="tab-element nav-item" id="tab-attribute" style="display: list-item;" data-original-title="" title="">
 		<a class="nav-link active" id="tab-title-link-attribute">