opensource/galaxy
3
0
Fork 0
mirror of https://github.com/galaxyproject/galaxy.git synced 2026-09-24 16:30:27 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #14622 from ElectronicBlueberry/headings

Browse Source 
Headings Changes and Heading Component
This commit is contained in:
Aysam Guerler
2022-10-25 18:04:27 -04:00
committed by GitHub
parent e4ba866759 c98f0c4ce3
commit f730750323
80 changed files with 548 additions and 397 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/docs/headings.md
+52
View File
@@ -0,0 +1,52 @@
# Heading Levels and Sizing
Heading Levels are used by screen readers, and other software, to get a rough idea of the document structure, so it is important to keep this structure in mind when deciding on a headings level.
[Further reading on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements)
## Heading Level best practices
- Make sure every route has exactly one `<h1>` element, which best describes the content of the current page.
- When increasing a heading level, do not skip Levels.
- Do not use a headings level to determine it's size. Use one of the heading utility classes (e.g. `h-lg`) instead.
- Do not use a heading tag to make a non-heading text large. Use a heading utility class on a `<span>` instead.
## Sizing Headings
There are several utility classes which size headings:
- `h-xl` - Extra large headings
- `h-lg` - Large headings (most main headings should have this size)
- `h-md` - Medium headings
- `h-sm` - Small headings (many sub-headings have this size)
- `h-text` - Text sized headings
Galaxy uses `h-lg` for most top-level (`<h1>`) headings.
These sizes are purely visual, and do not necessarily have to follow the document structure.
It is fine to use several headings on the same page with the same heading level, and different sizes. An example for this would be the heading of an error message, which has a heading level of 2 (`<h2>`) in most cases, but is visually smaller than other sub-headings.
## Styling Headings with the `<Heading>` component
For more visually distinct headings, there is an `Heading` component, found under [`components/Common/Heading.vue`](https://github.com/galaxyproject/galaxy/blob/dev/client/src/components/Common/Heading.vue)
Make use of this component to break up flat layouts and add better separation to a page with multiple sections.
### Usage
Set the headings level, by setting aa `h1 ... h6` prop:
```vue
<Heading h1>Top Level Heading</Heading>
```
Following properties allow for further styling the component:
- `size=["xl", "lg", "md", "sm", "text"]` - sets the headings size class
- `bold` - makes a heading bold
- `inline` - displays the heading inline
- `separator` - draws a separating line, to better distinguish sections
- `icon="..."` - adds a font-awesome icon decoration to the left of the heading. Make sure to also load the icon with `library.add(...)`.
client/src/components/Collections/common/ChangeDatatypeTab.vue
+1 -1
View File
@@ -1,7 +1,7 @@
<template>
<div>
<div>
<h4 class="float-left">Change Datatype/Extension of all elements in collection</h4>
<span class="float-left h-sm">Change Datatype/Extension of all elements in collection</span>
<div class="text-right">
<button
class="save-datatype-edit btn btn-primary"
client/src/components/Collections/common/CollectionEditView.vue
+2 -2
View File
@@ -1,6 +1,6 @@
<template>
<div>
<h4>{{ l("Edit Collection Attributes") }}</h4>
<div aria-labelledby="collection-edit-view-heading">
<h1 id="collection-edit-view-heading" class="h-lg">{{ l("Edit Collection Attributes") }}</h1>
<b-alert show variant="info" dismissible>
{{ l(newCollectionInfoMessage) }}
</b-alert>
client/src/components/Collections/common/DatabaseEditTab.vue
+1 -1
View File
@@ -1,7 +1,7 @@
<template>
<div>
<div>
<h4 class="float-left">Change Database/Build of all elements in collection</h4>
<span class="float-left h-sm">Change Database/Build of all elements in collection</span>
<div class="text-right">
<button
class="save-dbkey-edit btn btn-primary"
client/src/components/Collections/common/SuitableConvertersTab.vue
+1 -1
View File
@@ -1,7 +1,7 @@
<template>
<div>
<div>
<h4 class="float-left">Convert all datasets to new format</h4>
<span class="float-left h-sm">Convert all datasets to new format</span>
<div class="text-right">
<button
class="run-tool-collection-edit btn btn-primary"
client/src/components/Common/Heading.vue
+91
View File
@@ -0,0 +1,91 @@
<script setup>
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
let element = "h1";
let sizeClass = "h-lg";
const props = defineProps({
h1: Boolean,
h2: Boolean,
h3: Boolean,
h4: Boolean,
h5: Boolean,
h6: Boolean,
bold: Boolean,
separator: Boolean,
inline: Boolean,
// acceptable sizes are "xl", "lg", "md", "sm", and "text"
size: String,
icon: String,
});
// apply heading element
for (const key of ["h1", "h2", "h3", "h4", "h5", "h6"]) {
if (props[key]) {
element = key;
break;
}
}
// apply size class
if (props.size) {
sizeClass = "h-" + props.size;
}
</script>
<template>
<div v-if="props.separator" class="separator heading">
<div class="stripe"></div>
<component :is="element" :class="[sizeClass, props.bold ? 'font-weight-bold' : '']">
<slot />
</component>
<div class="stripe"></div>
</div>
<component
v-else
:is="element"
class="heading"
:class="[sizeClass, props.bold ? 'font-weight-bold' : '', props.inline ? 'inline' : '']">
<FontAwesomeIcon v-if="props.icon" :icon="props.icon" />
<slot />
</component>
</template>
<style lang="scss" scoped>
@import "scss/theme/blue.scss";
.heading:deep(svg) {
font-size: 0.75em;
}
// prettier-ignore
h1, h2, h3, h4, h5, h6 {
display: flex;
align-items: center;
gap: 0.4em;
&.inline {
display: inline-flex;
margin-bottom: 0;
}
}
.separator {
display: grid;
grid-template-columns: 1rem auto 1fr;
gap: 1rem;
align-items: center;
margin-bottom: 0.5rem;
// prettier-ignore
h1, h2, h3, h4, h5, h6 {
margin: 0;
}
.stripe {
display: block;
height: 1px;
background-color: $brand-secondary;
}
}
</style>
client/src/components/Common/Published.vue
+4 -4
View File
@@ -10,14 +10,14 @@
<div id="right">
<div class="m-3">
<div v-if="modelTitle">
<h4>About this {{ modelTitle }}</h4>
<h3>{{ details.title || details.name }}</h3>
<h1 class="h-sm">About this {{ modelTitle }}</h1>
<h2 class="h-md">{{ details.title || details.name }}</h2>
<StatelessTags v-if="details.tags" class="tags mt-2" :value="details.tags" :disabled="true" />
<br />
<h4>Author</h4>
<h2 class="h-sm">Author</h2>
<div>{{ owner }}</div>
<hr />
<h4>Related Pages</h4>
<h2 class="h-sm">Related Pages</h2>
<div>
<router-link :to="urlAll">All published {{ plural }}.</router-link>
</div>
client/src/components/Dataset/DatasetStorage/DatasetStorage.test.js
+3 -3
View File
@@ -79,7 +79,7 @@ describe("Dataset Storage", () => {
await mountWithResponse(TEST_STORAGE_API_RESPONSE_WITHOUT_ID);
expect(wrapper.findAll("loading-span-stub").length).toBe(0);
expect(wrapper.vm.descriptionRendered).toBeNull();
const header = wrapper.findAll("h3");
const header = wrapper.findAll("h2");
expect(header.length).toBe(1);
expect(header.at(0).text()).toBe("Dataset Storage");
const byIdSpan = wrapper.findAll(".display-os-by-id");
@@ -95,7 +95,7 @@ describe("Dataset Storage", () => {
expect(wrapper.findAll("loading-span-stub").length).toBe(0);
expect(wrapper.vm.storageInfo.object_store_id).toBe("foobar");
expect(wrapper.vm.descriptionRendered).toBeNull();
const header = wrapper.findAll("h3");
const header = wrapper.findAll("h2");
expect(header.length).toBe(1);
expect(header.at(0).text()).toBe("Dataset Storage");
const byIdSpan = wrapper.findAll(".display-os-by-id");
@@ -109,7 +109,7 @@ describe("Dataset Storage", () => {
expect(wrapper.findAll("loading-span-stub").length).toBe(0);
expect(wrapper.vm.storageInfo.object_store_id).toBe("foobar");
expect(wrapper.vm.descriptionRendered).toBe(TEST_RENDERED_MARKDOWN_AS_HTML);
const header = wrapper.findAll("h3");
const header = wrapper.findAll("h2");
expect(header.length).toBe(1);
expect(header.at(0).text()).toBe("Dataset Storage");
const byIdSpan = wrapper.findAll(".display-os-by-id");
client/src/components/Dataset/DatasetStorage/DatasetStorage.vue
+1 -1
View File
@@ -1,6 +1,6 @@
<template>
<div>
<h3 v-if="includeTitle">Dataset Storage</h3>
<h2 v-if="includeTitle" class="h-md">Dataset Storage</h2>
<div v-if="errorMessage" class="error">{{ errorMessage }}</div>
<loading-span v-else-if="storageInfo == null"> </loading-span>
<div v-else-if="discarded">
client/src/components/DatasetInformation/DatasetAttributes.vue
+2 -2
View File
@@ -1,6 +1,6 @@
<template>
<div>
<h4 v-localize>Edit Dataset Attributes</h4>
<div aria-labelledby="dataset-attributes-heading">
<h1 id="dataset-attributes-heading" class="h-lg" v-localize>Edit Dataset Attributes</h1>
<b-alert v-if="messageText" :variant="messageVariant" show>
{{ messageText | l }}
</b-alert>
client/src/components/DatasetInformation/DatasetDetails.vue
+21 -25
View File
@@ -3,7 +3,8 @@
<DatasetProvider
:id="datasetId"
v-slot="{ result: dataset, loading: isDatasetLoading, error: datasetLoadingError }">
<div>
<div aria-labelledby="dataset-details-heading">
<h1 id="dataset-details-heading" class="hide-element">Dataset Details</h1>
<LoadingSpan v-if="isDatasetLoading" />
<Alert v-else-if="datasetLoadingError" :message="datasetLoadingError" variant="error" />
<CurrentUser v-else v-slot="{ user }">
@@ -12,33 +13,26 @@
v-slot="{ result: job, loading: isJobLoading }"
:job-id="dataset.creating_job"
auto-refresh>
<div v-if="!isJobLoading">
<dataset-information class="detail" :hda_id="datasetId" />
<job-parameters class="detail" dataset_type="hda" :dataset-id="datasetId" />
<job-information class="detail" :job_id="dataset.creating_job" />
<dataset-storage class="detail" :dataset-id="datasetId" />
<inheritance-chain class="detail" :dataset-id="datasetId" :dataset-name="dataset.name" />
<job-metrics
v-if="config"
class="detail"
:aws_estimate="config.aws_estimate"
:dataset-id="datasetId" />
<job-destination-params
v-if="user.is_admin"
class="detail"
:job-id="dataset.creating_job" />
<job-dependencies class="detail" :dependencies="job.dependencies"></job-dependencies>
<div v-if="dataset.peek" class="detail">
<h3>Dataset Peek:</h3>
<div v-if="!isJobLoading" class="details">
<dataset-information :hda_id="datasetId" />
<job-parameters dataset_type="hda" :dataset-id="datasetId" />
<job-information :job_id="dataset.creating_job" />
<dataset-storage :dataset-id="datasetId" />
<inheritance-chain :dataset-id="datasetId" :dataset-name="dataset.name" />
<job-metrics v-if="config" :aws_estimate="config.aws_estimate" :dataset-id="datasetId" />
<job-destination-params v-if="user.is_admin" :job-id="dataset.creating_job" />
<job-dependencies :dependencies="job.dependencies"></job-dependencies>
<div v-if="dataset.peek">
<h2 class="h-md">Dataset Peek</h2>
<div v-html="dataset.peek" />
</div>
</div>
</JobDetailsProvider>
<div v-else-if="!isDatasetLoading">
<dataset-information class="detail" :hda_id="datasetId" />
<dataset-storage class="detail" :dataset-id="datasetId" />
<div v-else-if="!isDatasetLoading" class="details">
<dataset-information :hda_id="datasetId" />
<dataset-storage :dataset-id="datasetId" />
<div>
<h3>Job Not Found</h3>
<h2 class="h-md">Job Not Found</h2>
<p>
No job associated with this dataset is recorded in Galaxy. Galaxy cannot determine full
dataset provenance and history for this dataset.
@@ -97,7 +91,9 @@ export default {
.tool-title {
text-align: center;
}
.detail {
padding-top: 0.6rem;
.details {
display: flex;
flex-direction: column;
gap: 1rem;
}
</style>
client/src/components/DatasetInformation/DatasetError.vue
+5 -5
View File
@@ -1,7 +1,7 @@
<template>
<div>
<b-alert v-if="errorMessage" variant="danger" show>
<h4 class="alert-heading">Failed to access Dataset details.</h4>
<h2 class="alert-heading h-sm">Failed to access Dataset details.</h2>
{{ errorMessage }}
</b-alert>
<DatasetProvider :id="datasetId" v-slot="{ result: dataset, loading: datasetLoading }">
@@ -14,7 +14,7 @@
<div class="page-container edit-attr">
<div class="response-message"></div>
</div>
<h2>Dataset Error Report</h2>
<h3 class="h-lg">Dataset Error Report</h3>
<p>
An error occurred while running the tool
<b id="dataset-error-tool-id" class="text-break">{{ jobDetails.tool_id }}</b
@@ -29,7 +29,7 @@
:job-id="dataset.creating_job"
@error="onError">
<div v-if="jobProblems && (jobProblems.has_duplicate_inputs || jobProblems.has_empty_inputs)">
<h3 class="common_problems mt-3">Detected Common Potential Problems</h3>
<h4 class="common_problems mt-3 h-md">Detected Common Potential Problems</h4>
<p v-if="jobProblems.has_empty_inputs" id="dataset-error-has-empty-inputs">
The tool was started with one or more empty input datasets. This frequently results in
tool errors due to problematic input choices.
@@ -40,7 +40,7 @@
</p>
</div>
</JobProblemProvider>
<h3 class="mt-3">Troubleshooting</h3>
<h4 class="mt-3 h-md">Troubleshooting</h4>
<p>
There are a number of helpful resources to self diagnose and correct problems.
<br />
@@ -53,7 +53,7 @@
</a>
</b>
</p>
<h3 class="mb-3">Issue Report</h3>
<h4 class="mb-3 h-md">Issue Report</h4>
<b-alert
v-for="(resultMessage, index) in resultMessages"
:key="index"
client/src/components/DatasetInformation/DatasetErrorDetails.vue
+1 -1
View File
@@ -1,6 +1,6 @@
<template>
<div v-if="hasDetails">
<h3>Details</h3>
<h4 class="h-md">Details</h4>
<div v-if="hasMessages" id="dataset-error-job-messages">
<p>Execution resulted in the following messages:</p>
<div v-for="(jobMessage, index) in jobMessages" :key="index">
client/src/components/DatasetInformation/DatasetInformation.vue
+1 -1
View File
@@ -1,7 +1,7 @@
<template>
<DatasetProvider :id="hda_id" v-slot="{ result: dataset, loading }">
<div v-if="!loading">
<h3>Dataset Information</h3>
<h2 class="h-md">Dataset Information</h2>
<table id="dataset-details" class="tabletip info_data_table">
<tbody>
<tr>
client/src/components/History/Content/Collection/CollectionDescription.vue
+10 -2
View File
@@ -1,8 +1,8 @@
<template>
<div>
<h6 class="description mt-1">
<span class="description mt-1 mb-1">
a {{ collectionLabel }} with {{ elementCount }}<b>{{ homogeneousDatatype }}</b> {{ pluralizedItem }}
</h6>
</span>
<CollectionProgress v-if="jobStateSummary.size != 0" :summary="jobStateSummary" />
</div>
</template>
@@ -68,3 +68,11 @@ export default {
},
};
</script>
<style lang="scss" scoped>
@import "scss/theme/blue.scss";
.description {
font-size: $h6-font-size;
}
</style>
client/src/components/History/CurrentCollection/CollectionDetails.vue
+1 -1
View File
@@ -7,7 +7,7 @@
@save="$emit('update:dsc', $event)">
<template v-slot:name>
<!-- eslint-disable-next-line vuejs-accessibility/heading-has-content -->
<h3 v-short="dsc.name || 'Collection'" data-description="collection name display" />
<h2 class="h-md" v-short="dsc.name || 'Collection'" data-description="collection name display" />
<CollectionDescription
:job-state-summary="jobState"
:collection-type="dsc.collection_type"
client/src/components/History/CurrentHistory/HistoryNavigation.vue
+1 -1
View File
@@ -4,7 +4,7 @@
<template>
<div>
<nav class="d-flex justify-content-between mx-3 my-2">
<h4 class="m-1">History</h4>
<h2 class="m-1 h-sm">History</h2>
<b-button-group>
<b-button
v-b-tooltip.bottom.hover
client/src/components/HistoryExport/Index.vue
+1 -1
View File
@@ -1,6 +1,6 @@
<template>
<span class="history-export-component">
<h2>Export history archive</h2>
<h1 class="h-lg">Export history archive</h1>
<span v-if="initializingFileSources">
<loading-span :message="initializeFileSourcesMessage" />
</span>
client/src/components/HistoryExport/ToRemoteFile.vue
+1 -1
View File
@@ -13,7 +13,7 @@
</div>
<div v-else-if="jobComplete">
<b-alert show variant="success" dismissible @dismissed="reset">
<h4>Done!</h4>
<h2 class="h-sm">Done!</h2>
<p>History successfully exported.</p>
</b-alert>
</div>
client/src/components/HistoryImport.vue
+5 -2
View File
@@ -1,5 +1,8 @@
<template>
<b-card body-class="history-import-component" title="Import a history from an archive">
<b-card body-class="history-import-component" aria-labelledby="history-import-heading">
<template slot="header">
<h1 id="history-import-heading" class="mb-0 h-sm">Import a history from an archive</h1>
</template>
<b-alert v-if="errorMessage" variant="danger" dismissible show @dismissed="errorMessage = null">
{{ errorMessage }}
<JobError
@@ -16,7 +19,7 @@
</div>
<div v-else-if="complete">
<b-alert :show="complete" variant="success" dismissible @dismissed="complete = false">
<h4>Done!</h4>
<span class="mb-1 h-sm">Done!</span>
<p>History imported, check out <a :href="historyLink">your histories</a>.</p>
</b-alert>
</div>
client/src/components/InheritanceChain/InheritanceChain.vue
+1 -1
View File
@@ -1,6 +1,6 @@
<template>
<div>
<h3>Inheritance Chain</h3>
<h2 class="h-md">Inheritance Chain</h2>
<div class="current-dataset chain-box">{{ datasetName }}</div>
<div v-if="inherit_chain && inherit_chain.length > 0">
<div v-for="({ name, dep }, i) in inherit_chain" :key="i">
client/src/components/InteractiveTools/InteractiveTools.vue
+2 -2
View File
@@ -1,7 +1,7 @@
<template>
<div>
<div aria-labelledby="interactive-tools-heading">
<b-alert v-for="(message, index) in messages" :key="index" :show="3" variant="danger">{{ message }}</b-alert>
<h2>Active Interactive Tools</h2>
<h1 id="interactive-tools-heading" class="h-lg">Active Interactive Tools</h1>
<b-row class="mb-3">
<b-col cols="6">
<b-input
client/src/components/JobDependencies/JobDependencies.vue
+1 -1
View File
@@ -1,7 +1,7 @@
<template>
<CurrentUser v-if="dependencies && dependencies.length > 0" v-slot="{ user }">
<div>
<h3>Job Dependencies</h3>
<h2 class="h-md">Job Dependencies</h2>
<table class="tabletip">
<thead>
<tr>
client/src/components/JobDestinationParams/JobDestinationParams.vue
+1 -1
View File
@@ -1,7 +1,7 @@
<template>
<CurrentUser v-slot="{ user }">
<div v-if="user.is_admin">
<h3>Destination Parameters</h3>
<h2 class="h-md">Destination Parameters</h2>
<table id="destination_parameters" class="tabletip info_data_table">
<tbody>
<tr v-for="(value, title) in jobDestinationParams" :key="title">
client/src/components/JobInformation/JobDetails.vue
+2 -2
View File
@@ -21,10 +21,10 @@
</tr>
</job-information>
<br />
<h3>Job Parameters</h3>
<h2 class="h-md">Job Parameters</h2>
<job-parameters :job-id="id" :include-title="false" />
<br />
<h3>Job Metrics</h3>
<h2 class="h-md">Job Metrics</h2>
<job-metrics :job-id="id" :include-title="false" />
</b-card>
</template>
client/src/components/JobInformation/JobInformation.vue
+1 -1
View File
@@ -1,7 +1,7 @@
<template>
<div>
<job-details-provider auto-refresh :job-id="job_id" @update:result="updateJob" />
<h3>Job Information</h3>
<h2 class="h-md">Job Information</h2>
<table id="job-information" class="tabletip info_data_table">
<tbody>
<tr v-if="job && job.tool_id">
client/src/components/JobInformation/JobOutputs.test.js
+4 -4
View File
@@ -17,7 +17,7 @@ describe("JobInformation/JobOutputs.vue", () => {
});
jobOutputsTable = wrapper.find("#job-outputs");
// header should exist
expect(wrapper.find("h3").text()).toBe("my cool title");
expect(wrapper.find("h2").text()).toBe("my cool title");
// table should exist
expect(jobOutputsTable).toBeTruthy();
// title should be set
@@ -38,7 +38,7 @@ describe("JobInformation/JobOutputs.vue", () => {
propsData,
});
// no title
expect(wrapper.find("h3").exists()).toBeFalsy();
expect(wrapper.find("h2").exists()).toBeFalsy();
jobOutputsTable = wrapper.find("#job-outputs");
// table should exist
expect(jobOutputsTable).toBeTruthy();
@@ -74,7 +74,7 @@ describe("JobInformation/JobOutputs.vue", () => {
});
// ---- Before all remaining outputs are paginated: ----
// heading should exist and include count (due to pagination)
expect(wrapper.find("h3").text()).toContain("(showing 10 of " + Object.keys(propsData.jobOutputs).length + ")");
expect(wrapper.find("h2").text()).toContain("(showing 10 of " + Object.keys(propsData.jobOutputs).length + ")");
jobOutputsTable = wrapper.find("#job-outputs");
// table should exist
expect(jobOutputsTable).toBeTruthy();
@@ -90,6 +90,6 @@ describe("JobInformation/JobOutputs.vue", () => {
expect(rows.length).toBe(16);
expect(wrapper.find("#paginate-btn").exists()).toEqual(false);
// heading reverts to original value of title (as all ouputs are paginated)
expect(wrapper.find("h3").text()).toBe("Job Outputs");
expect(wrapper.find("h2").text()).toBe("Job Outputs");
});
});
client/src/components/JobInformation/JobOutputs.vue
+2 -2
View File
@@ -1,9 +1,9 @@
<template>
<div>
<h3 v-if="title">
<h2 v-if="title" class="h-md">
{{ title }}
<span v-if="paginate && totalLength > firstN"> (showing {{ firstN }} of {{ totalLength }}) </span>
</h3>
</h2>
<table id="job-outputs" class="tabletip info_data_table">
<thead>
<tr>
client/src/components/JobMetrics/JobMetrics.vue
+2 -2
View File
@@ -1,8 +1,8 @@
<template>
<div v-if="orderedPlugins.length > 0">
<h3 v-if="includeTitle">Job Metrics</h3>
<h2 v-if="includeTitle" class="h-md">Job Metrics</h2>
<div v-for="plugin in orderedPlugins" :key="plugin" class="metrics_plugin">
<h4 class="metrics_plugin_title">{{ plugin }}</h4>
<h3 class="metrics_plugin_title m-sm">{{ plugin }}</h3>
<table class="tabletip info_data_table">
<tbody>
<tr v-for="(metricValue, metricTitle) in metricsByPlugins[plugin]" :key="metricTitle">
client/src/components/JobParameters/JobParameters.vue
+1 -1
View File
@@ -1,7 +1,7 @@
<template>
<div>
<div v-if="!isSingleParam" class="tool-parameters">
<h3 v-if="includeTitle">Tool Parameters</h3>
<h2 v-if="includeTitle" class="h-md">Tool Parameters</h2>
<table id="tool-parameters" class="tabletip info_data_table">
<thead>
<tr>
client/src/components/Libraries/LibraryFolder/FolderDetails/FolderDetails.vue
+4 -4
View File
@@ -27,9 +27,9 @@
thead-class="d-none"
data-testid="library-table">
<template v-slot:table-caption>
<h4>
<h2 class="h-sm">
<b>{{ libraryHeader }}</b>
</h4>
</h2>
</template>
</b-table-lite>
</div>
@@ -43,9 +43,9 @@
thead-class="d-none"
data-testid="folder-table">
<template v-slot:table-caption>
<h4>
<h2 class="h-sm">
<b>{{ folderHeader }}</b>
</h4>
</h2>
</template>
<template v-slot:cell(value)="row">
<div v-if="row.item.name === libraryFieldTitles.create_time_pretty">
client/src/components/Libraries/LibraryFolder/TopToolbar/FolderTopBar.vue
+1 -1
View File
@@ -38,7 +38,7 @@
from User Directory
</a>
<div v-if="library_import_dir || allow_library_path_paste">
<h5 class="dropdown-header cursor-pointer">Admins only</h5>
<h2 class="dropdown-header cursor-pointer h-text">Admins only</h2>
<a
v-if="library_import_dir"
class="dropdown-item cursor-pointer"
client/src/components/Libraries/LibraryPermissions/LibraryPermissions.vue
+1 -1
View File
@@ -2,7 +2,7 @@
<div>
<b-button variant="link" @click="onGoBack">Go back to Libraries</b-button>
<PermissionsHeader v-if="library" :name="library.name" />
<h2 class="text-center">Library permissions</h2>
<h1 class="text-center h-lg">Library permissions</h1>
<PermissionsInputField
v-if="access_library_role_list"
:id="library_id"
client/src/components/Libraries/LibraryPermissions/PermissionsInputField.vue
+2 -2
View File
@@ -1,8 +1,8 @@
<template>
<div>
<h4>
<h2 class="h-sm">
{{ title }}
</h4>
</h2>
<b-row>
<b-col>
<div v-if="options && value" :class="permission_type">
client/src/components/Markdown/Markdown.vue
+2 -2
View File
@@ -20,7 +20,7 @@
@click="$emit('onEdit')">
<font-awesome-icon icon="edit" />
</b-button>
<h3 class="float-right align-middle mr-1 mt-2">Galaxy {{ markdownConfig.model_class }}</h3>
<h1 class="float-right align-middle mr-1 mt-2 h-md">Galaxy {{ markdownConfig.model_class }}</h1>
<span class="float-left font-weight-light mb-3">
<small>Title: {{ markdownConfig.title || markdownConfig.model_class }}</small>
<br />
@@ -34,7 +34,7 @@
<div>
<b-alert v-if="markdownErrors.length > 0" variant="warning" show>
<div v-for="(obj, index) in markdownErrors" :key="index" class="mb-1">
<h5>{{ obj.error || "Error" }}</h5>
<h2 class="h-text">{{ obj.error || "Error" }}</h2>
{{ obj.line }}
</div>
</b-alert>
client/src/components/Markdown/MarkdownSelector.vue
+1 -1
View File
@@ -2,7 +2,7 @@
<span>
<b-modal v-model="modalShow" :title="title" ok-title="Continue" @ok="onOk" @cancel="onCancel">
<div class="ml-2">
<h5 class="mb-3">Select {{ labelTitle }} Label:</h5>
<h2 class="mb-3 h-text">Select {{ labelTitle }} Label:</h2>
<div v-if="hasLabels">
<b-form-radio
v-for="(label, index) in labels"
client/src/components/NewUserWelcome/components/Slides.vue
+3 -3
View File
@@ -6,13 +6,13 @@
<hr />
<b-carousel indicators controls :interval="0" no-animation align="center" position="float">
<b-carousel-slide v-for="(slide, idx) in slides" :key="idx">
<h3 class="carousel-caption">
<h2 class="carousel-caption h-md">
{{ slide.text | localize }}
</h3>
</h2>
<img class="carousel-fig" :src="imgUrl(slide.file)" :class="slide.size" :alt="slide.alt" />
</b-carousel-slide>
<b-carousel-slide>
<h3>{{ "Enjoy using Galaxy!" | localize }}</h3>
<h2 class="h-md">{{ "Enjoy using Galaxy!" | localize }}</h2>
<img class="large-img" :src="imgUrl('sections/galaxy_logo.png')" alt="Galaxy logo" />
</b-carousel-slide>
</b-carousel>
client/src/components/NewUserWelcome/components/Subtopics.vue
+1 -1
View File
@@ -2,7 +2,7 @@
<div>
<header class="main-header">
<h1 class="text-center my-3">{{ title | localize }}</h1>
<h4 class="text-center my-3">{{ intro | localize }}</h4>
<h2 class="text-center my-3 h-sm">{{ intro | localize }}</h2>
</header>
<b-row class="justify-content-md-center mb-3">
<b-card-group v-for="(subject, idx) in topics" :key="idx">
client/src/components/NewUserWelcome/components/Topics.vue
+1 -1
View File
@@ -2,7 +2,7 @@
<div>
<header class="main-header">
<h1 class="text-center my-3">{{ title | localize }}</h1>
<h4 class="text-center my-3">{{ intro | localize }}</h4>
<h2 class="text-center my-3 h-sm">{{ intro | localize }}</h2>
</header>
<b-row class="justify-content-md-center mb-3">
<b-card-group v-for="(subject, idx) in topics" :key="idx">
client/src/components/Panels/Common/ToolAdvancedSearch.vue
+1 -5
View File
@@ -2,11 +2,7 @@
<ToolsProvider v-slot="{ loading, result: itemsLoaded }" :filter-settings="filterSettings">
<section class="overflow-auto h-100" @scroll="onScroll">
<div class="mb-2">
<span class="row mb-1">
<span class="col">
<h4 class="d-inline-block">Advanced Tool Search Results</h4>
</span>
</span>
<h1 class="h-lg mb-2">Advanced Tool Search Results</h1>
<span v-if="itemsLoaded.length !== 0 && hasFilters" class="row">
<span class="col d-inline-block">
Found {{ itemsLoaded.length }} tools for
client/src/components/Panels/ToolBox.vue
+4 -3
View File
@@ -1,10 +1,11 @@
<template>
<div class="unified-panel">
<div class="unified-panel" aria-labelledby="toolbox-heading">
<div unselectable="on">
<div class="unified-panel-header-inner">
<nav class="d-flex justify-content-between mx-3 my-2">
<h4 v-if="!showAdvanced" v-localize class="m-1">Tools</h4>
<h4 v-else v-localize class="m-1">Advanced Tool Search</h4>
<h2 v-if="!showAdvanced" v-localize id="toolbox-heading" class="m-1 h-sm">Tools</h2>
<h2 v-else v-localize id="toolbox-heading" class="m-1 h-sm">Advanced Tool Search</h2>
<div v-if="!showAdvanced" class="panel-header-buttons">
<b-button-group>
<favorites-button :query="query" @onFavorites="onQuery" />
client/src/components/Panels/ToolBoxWorkflow.vue
+1 -1
View File
@@ -3,7 +3,7 @@
<div unselectable="on">
<div class="unified-panel-header-inner">
<nav class="d-flex justify-content-between mx-3 my-2">
<h4 v-localize class="m-1">Tools</h4>
<h2 v-localize class="m-1 h-sm">Tools</h2>
<div class="panel-header-buttons">
<panel-view-button
v-if="panelViews && Object.keys(panelViews).length > 1"
client/src/components/RuleCollectionBuilder.vue
+160 -158
View File
@@ -1,5 +1,5 @@
<template>
<state-div v-if="state == 'build'">
<state-div v-if="state == 'build'" class="rule-collection-builder">
<!-- Different instructions if building up from individual datasets vs.
initial data import.-->
<rule-modal-header v-if="ruleView == 'source'"
@@ -529,7 +529,7 @@
</b-row>
</rule-modal-footer>
</state-div>
<state-div v-else-if="state == 'wait'">
<state-div v-else-if="state == 'wait'" class="rule-collection-builder">
<rule-modal-header v-if="importType == 'datasets'">
{{
l(
@@ -548,7 +548,7 @@
<b-button class="creator-cancel-btn" tabindex="-1" @click="cancel">{{ l("Close") }}</b-button>
</rule-modal-footer>
</state-div>
<state-div v-else-if="state == 'error'">
<state-div v-else-if="state == 'error'" class="rule-collection-builder">
<!-- TODO: steal styling from paired collection builder warning... -->
<rule-modal-header>A problem was encountered.</rule-modal-header>
<rule-modal-middle>
@@ -1757,160 +1757,162 @@ export default {
</script>
<style src="../../node_modules/handsontable/dist/handsontable.full.css"></style>
<style>
.table-column {
width: 100%;
overflow: hidden;
}
.select2-container {
min-width: 60px;
}
.vertical #hot-table {
width: 100%;
overflow: hidden;
height: 400px;
}
.horizontal #hot-table {
width: 100%;
overflow: hidden;
height: 250px;
}
.rule-builder-body {
height: 400px;
}
.rule-column.vertical {
height: 400px;
}
.rule-column.horizontal {
height: 150px;
}
.rules-container-full {
width: 100%;
height: 400px;
}
.rules-container {
border: 1px dashed #ccc;
padding: 5px;
}
.rules-container-vertical {
width: 300px;
height: 400px;
}
.rules-container-horizontal {
width: 100%;
height: 150px;
}
.rules-container .title {
font-weight: bold;
}
.rule-summary {
height: 100%;
display: flex;
flex-direction: column;
}
.rule-edit-buttons {
margin: 5px;
}
.rules {
flex-grow: 1;
overflow-y: scroll;
padding: 0px;
}
.rule-source {
height: 400px;
}
.rules li {
list-style-type: circle;
list-style-position: inside;
padding: 5px;
padding-top: 0px;
padding-bottom: 0px;
}
.rule-column-selector li {
list-style-type: circle;
list-style-position: inside;
padding: 5px;
padding-top: 0px;
padding-bottom: 0px;
}
.rules .rule-error {
display: block;
margin-left: 10px;
font-style: italic;
color: red;
}
.rule-warning {
display: block;
margin-left: 10px;
font-style: italic;
color: #e28809;
}
.rule-summary .title {
font-size: 1.1em;
}
.rule-highlight {
font-style: italic;
font-weight: bold;
}
.rules-buttons {
}
.rule-footer-inputs label {
padding-left: 20px;
align-self: baseline;
}
.rule-footer-inputs .select2-container {
align-self: baseline;
}
.rule-footer-inputs {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
align-items: baseline;
}
.rule-footer-inputs input {
align-self: baseline;
}
.extension-select {
flex: 1;
max-width: 120px;
min-width: 60px;
}
.genome-select {
flex: 1;
max-width: 300px;
min-width: 120px;
}
.collection-name {
flex: 1;
min-width: 120px;
max-width: 500px;
}
.rule-footer-genome-group {
flex: 2;
display: flex;
}
.rule-footer-extension-group {
flex: 1;
display: flex;
}
.rule-footer-name-group {
flex: 3;
display: flex;
flex-direction: row-reverse;
}
.fa-edit,
.fa-times,
.fa-wrench {
cursor: pointer;
}
.fa-history {
cursor: pointer;
}
.menu-option {
padding-left: 5px;
}
.alert-area li {
list-style: circle;
margin-left: 32px;
<style lang="scss">
.rule-collection-builder {
.table-column {
width: 100%;
overflow: hidden;
}
.select2-container {
min-width: 60px;
}
.vertical #hot-table {
width: 100%;
overflow: hidden;
height: 400px;
}
.horizontal #hot-table {
width: 100%;
overflow: hidden;
height: 250px;
}
.rule-builder-body {
height: 400px;
}
.rule-column.vertical {
height: 400px;
}
.rule-column.horizontal {
height: 150px;
}
.rules-container-full {
width: 100%;
height: 400px;
}
.rules-container {
border: 1px dashed #ccc;
padding: 5px;
}
.rules-container-vertical {
width: 300px;
height: 400px;
}
.rules-container-horizontal {
width: 100%;
height: 150px;
}
.rules-container .title {
font-weight: bold;
}
.rule-summary {
height: 100%;
display: flex;
flex-direction: column;
}
.rule-edit-buttons {
margin: 5px;
}
.rules {
flex-grow: 1;
overflow-y: scroll;
padding: 0px;
}
.rule-source {
height: 400px;
}
.rules li {
list-style-type: circle;
list-style-position: inside;
padding: 5px;
padding-top: 0px;
padding-bottom: 0px;
}
.rule-column-selector li {
list-style-type: circle;
list-style-position: inside;
padding: 5px;
padding-top: 0px;
padding-bottom: 0px;
}
.rules .rule-error {
display: block;
margin-left: 10px;
font-style: italic;
color: red;
}
.rule-warning {
display: block;
margin-left: 10px;
font-style: italic;
color: #e28809;
}
.rule-summary .title {
font-size: 1.1em;
}
.rule-highlight {
font-style: italic;
font-weight: bold;
}
.rules-buttons {
}
.rule-footer-inputs label {
padding-left: 20px;
align-self: baseline;
}
.rule-footer-inputs .select2-container {
align-self: baseline;
}
.rule-footer-inputs {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
align-items: baseline;
}
.rule-footer-inputs input {
align-self: baseline;
}
.extension-select {
flex: 1;
max-width: 120px;
min-width: 60px;
}
.genome-select {
flex: 1;
max-width: 300px;
min-width: 120px;
}
.collection-name {
flex: 1;
min-width: 120px;
max-width: 500px;
}
.rule-footer-genome-group {
flex: 2;
display: flex;
}
.rule-footer-extension-group {
flex: 1;
display: flex;
}
.rule-footer-name-group {
flex: 3;
display: flex;
flex-direction: row-reverse;
}
.fa-edit,
.fa-times,
.fa-wrench {
cursor: pointer;
}
.fa-history {
cursor: pointer;
}
.menu-option {
padding-left: 5px;
}
.alert-area li {
list-style: circle;
margin-left: 32px;
}
}
</style>
client/src/components/Sharing/Sharing.vue
+2 -2
View File
@@ -1,8 +1,8 @@
<template>
<div>
<h3>
<h1 class="h-lg">
Share or Publish {{ modelClass }} <span v-if="ready">`{{ item.title }}`</span>
</h3>
</h1>
<div v-for="error in errors" :key="error">
<b-alert show variant="danger" dismissible @dismissed="errors = errors.filter((e) => e !== error)">
<ErrorMessage :message="error" :root="root()"> </ErrorMessage>
client/src/components/Tool/ToolCard.vue
+5 -14
View File
@@ -5,7 +5,7 @@ import ToolVersionsButton from "components/Tool/Buttons/ToolVersionsButton.vue";
import ToolOptionsButton from "components/Tool/Buttons/ToolOptionsButton.vue";
import ToolFooter from "components/Tool/ToolFooter";
import ToolHelp from "components/Tool/ToolHelp";
import ToolCardSection from "./ToolCardSection";
import Heading from "components/Common/Heading";
import { computed, ref, watch } from "vue";
import { useCurrentUser } from "composables/user";
@@ -81,7 +81,7 @@ const showVersions = computed(() => props.options.versions?.length > 1);
<div class="py-1 d-flex flex-wrap flex-gapx-1">
<span>
<icon icon="wrench" class="fa-fw" />
<h1 itemprop="name">{{ props.title }}</h1>
<Heading h1 inline bold size="text" itemprop="name">{{ props.title }}</Heading>
</span>
<span itemprop="description">{{ props.description }}</span>
<span>(Galaxy Version {{ props.version }})</span>
@@ -114,9 +114,10 @@ const showVersions = computed(() => props.options.versions?.length > 1);
<slot name="buttons" />
<div>
<ToolCardSection title="Help">
<div class="mt-2 mb-4">
<Heading h2 separator bold size="sm"> Help </Heading>
<ToolHelp :content="props.options.help" />
</ToolCardSection>
</div>
<ToolFooter
:id="props.id"
@@ -132,16 +133,6 @@ const showVersions = computed(() => props.options.versions?.length > 1);
<style lang="scss" scoped>
@import "scss/theme/blue.scss";
.tool-header {
h1 {
font-size: 1em;
line-height: 1em;
font-weight: 700;
margin: 0;
display: inline;
}
}
.underlay::after {
content: "";
display: block;
client/src/components/Tool/ToolCardSection.vue
-43
View File
@@ -1,43 +0,0 @@
<script setup>
const props = defineProps({
title: {
type: String,
required: true,
},
});
</script>
<template>
<div class="mt-2 mb-4">
<div class="title-bar my-2">
<div class="stripe"></div>
<h2>{{ props.title }}</h2>
<div class="stripe"></div>
</div>
<slot />
</div>
</template>
<style scoped lang="scss">
@import "scss/theme/blue.scss";
.title-bar {
display: grid;
grid-template-columns: 1rem auto 1fr;
align-items: center;
gap: 1rem;
h2 {
font-size: $h4-font-size;
margin: 0;
font-weight: 700;
}
}
.stripe {
display: block;
height: 1px;
background-color: $brand-secondary;
}
</style>
client/src/components/Tool/ToolForm.vue
+9 -7
View File
@@ -44,18 +44,20 @@
itemtype="https://schema.org/CreativeWork"
@onChangeVersion="onChangeVersion">
<template v-slot:body>
<ToolCardSection title="Tool Parameters">
<div class="mt-2 mb-4">
<Heading h2 separator bold size="sm"> Tool Parameters </Heading>
<FormDisplay
:id="toolId"
:inputs="formConfig.inputs"
:validation-scroll-to="validationScrollTo"
@onChange="onChange"
@onValidation="onValidation" />
</ToolCardSection>
</div>
<ToolCardSection
<div
v-if="emailAllowed(config, user) || remapAllowed || reuseAllowed(user)"
title="Additional Options">
class="mt-2 mb-4">
<Heading h2 separator bold size="sm"> Additional Options </Heading>
<FormElement
v-if="emailAllowed(config, user)"
id="send_email_notification"
@@ -77,7 +79,7 @@
title="Attempt to re-use jobs with identical parameters?"
help="This may skip executing jobs that you have already run."
type="boolean" />
</ToolCardSection>
</div>
</template>
<template v-slot:header-buttons>
<ButtonSpinner
@@ -117,10 +119,10 @@ import FormDisplay from "components/Form/FormDisplay";
import FormElement from "components/Form/FormElement";
import ToolEntryPoints from "components/ToolEntryPoints/ToolEntryPoints";
import ToolSuccess from "./ToolSuccess";
import ToolCardSection from "./ToolCardSection";
import ToolRecommendation from "../ToolRecommendation";
import UserHistories from "components/providers/UserHistories";
import Webhook from "components/Common/Webhook";
import Heading from "components/Common/Heading";
export default {
components: {
@@ -136,7 +138,7 @@ export default {
ToolRecommendation,
UserHistories,
Webhook,
ToolCardSection,
Heading,
},
props: {
id: {
client/src/components/ToolRecommendation.vue
+3 -2
View File
@@ -1,13 +1,14 @@
<template>
<div>
<div aria-labelledby="tool-recommendation-heading">
<div v-if="!deprecated && showMessage" class="infomessagelarge">
<h4>Tool recommendation</h4>
<h2 id="tool-recommendation-heading" class="h-sm">Tool recommendation</h2>
You have used {{ getToolId }} tool. For further analysis, you could try using the following/recommended
tools. The recommended tools are shown in the decreasing order of their scores predicted using machine
learning analysis on workflows. Therefore, tools at the top may be more useful than the ones at the bottom.
Please click on one of the following/recommended tools to open its definition.
</div>
<div v-else-if="deprecated" class="warningmessagelarge">
<h2 id="tool-recommendation-heading" class="h-sm">Tool deprecated</h2>
You have used {{ getToolId }} tool. {{ deprecatedMessage }}
</div>
<div id="tool-recommendation" class="ui-tool-recommendation"></div>
client/src/components/Toolshed/InstalledList/Monitor.vue
+1 -1
View File
@@ -4,7 +4,7 @@
{{ error }}
</b-alert>
<b-card v-if="showItems" no-body class="my-2">
<h5 class="m-3">Currently installing...</h5>
<h2 class="m-3 h-text">Currently installing...</h2>
<b-table
class="mx-3 mb-0"
sticky-header
client/src/components/Toolshed/RepositoryDetails/InstallationSettings.vue
+2 -2
View File
@@ -1,9 +1,9 @@
<template>
<b-modal id="repo-install-settings" v-model="modalShow" :static="modalStatic" @ok="onOk" @hide="onHide">
<template v-slot:modal-header>
<h4 class="title m-0">
<h2 class="title m-0 h-sm">
{{ modalTitle }}
</h4>
</h2>
</template>
<div class="description mb-1">
{{ repo.long_description || repo.description }}
client/src/components/Tour/TourList.vue
+2 -2
View File
@@ -1,11 +1,11 @@
<template>
<div class="ui-thumbnails">
<h2>Galaxy Tours</h2>
<h1 class="h-lg">Galaxy Tours</h1>
<p>
This page presents a list of interactive tours available on this Galaxy server. Select any tour to get
started (and remember, you can click 'End Tour' at any time).
</p>
<h4>Tours</h4>
<h2 class="h-sm">Tours</h2>
<div v-if="error" class="alert alert-danger">{{ error }}</div>
<div v-else>
<DelayedInput class="mb-3" :query="search" :placeholder="searchTours" :delay="0" @change="onSearch" />
client/src/components/Upload/UploadModal.vue
+1 -1
View File
@@ -16,7 +16,7 @@ Provides user and current history to modal because it currently has initializati
no-enforce-focus
hide-footer>
<template v-slot:modal-header>
<h4 class="title" tabindex="0">{{ title | localize }}</h4>
<h2 class="title h-sm" tabindex="0">{{ title | localize }}</h2>
</template>
<UploadModalContent
client/src/components/User/APIKey/APIKey.vue
+1 -1
View File
@@ -32,7 +32,7 @@ getAPIKey();
<template>
<section class="api-key d-flex flex-column">
<h2 v-localize>Manage API Key</h2>
<h1 class="h-lg" v-localize>Manage API Key</h1>
<span v-localize class="mb-2">
An API key will allow you to access via web API. Please note that this key acts as an alternate means to
client/src/components/User/CloudAuth/CloudAuth.vue
+1 -1
View File
@@ -6,7 +6,7 @@
</b-alert>
<hgroup class="cloud-auth-title">
<h1 v-localize>Manage Cloud Authorization</h1>
<h1 class="h-lg" v-localize>Manage Cloud Authorization</h1>
<nav class="operations">
<ul>
<li class="cloudKeyHelp">
client/src/components/User/CloudAuth/CloudAuthItem.vue
+1 -1
View File
@@ -2,7 +2,7 @@
<b-list-group-item class="cloud-auth-key" :class="statusClasses" :variant="variant" :button="!expanded">
<header>
<hgroup>
<h4 @click.prevent="expand()">{{ credential.title }}</h4>
<h2 class="h-sm" @click.prevent="expand()">{{ credential.title }}</h2>
<nav class="operations">
<ul>
<transition name="fade">
client/src/components/User/CustomBuilds.vue
+5 -5
View File
@@ -2,7 +2,7 @@
<b-container>
<b-row>
<b-col>
<h4>Current Custom Builds</h4>
<h1 class="h-sm">Current Custom Builds</h1>
</b-col>
</b-row>
<b-row>
@@ -23,7 +23,7 @@
<template v-if="installedBuilds.length > 0">
<b-row class="mt-2">
<b-col>
<h4>System Installed Builds</h4>
<h2 class="h-sm">System Installed Builds</h2>
</b-col>
</b-row>
<b-row>
@@ -42,7 +42,7 @@
</template>
<b-row>
<b-col>
<h4>Add a Custom Build</h4>
<h2 class="h-sm">Add a Custom Build</h2>
</b-col>
</b-row>
<b-row>
@@ -107,7 +107,7 @@
</b-col>
<b-col>
<b-card v-if="selectedDataSource === 'fasta'" class="alert-info">
<h4>FASTA format</h4>
<h2 class="h-sm">FASTA format</h2>
<p class="card-text">
This is a multi-fasta file from your current history that provides the genome sequences for each
chromosome/contig in your build.
@@ -124,7 +124,7 @@ GGCGGCCGCGGCGATATAGAACTACTCATTATATATA...
>
</b-card>
<b-card v-else class="alert-info">
<h4>Length Format</h4>
<h2 class="h-sm">Length Format</h2>
<p class="card-text">The length format is two-column, separated by whitespace, of the form:</p>
<pre class="card-text">chrom/contig length of chrom/contig</pre>
<p class="card-text">For example, the first few entries of <em>mm9.len</em> are as follows:</p>
client/src/components/User/DiskUsage/DiskUsageSummary.vue
+1 -1
View File
@@ -3,7 +3,7 @@
<CurrentUser v-slot="{ user }">
<div>
<b-alert v-if="errorMessage" variant="danger" show>
<h4 class="alert-heading">{{ errorMessageTitle }}</h4>
<h2 class="alert-heading h-sm">{{ errorMessageTitle }}</h2>
{{ errorMessage }}
</b-alert>
<b-container v-if="user">
client/src/components/User/DiskUsage/Management/Cleanup/CleanupOperationSummary.vue
+1 -1
View File
@@ -7,7 +7,7 @@
<template v-slot:footer>
<div v-if="!loading">
<b-alert v-if="errorMessage" variant="danger" show data-test-id="error-alert">
<h4 class="alert-heading">Failed to retrieve details.</h4>
<h2 class="alert-heading h-sm">Failed to retrieve details.</h2>
{{ errorMessage }}
</b-alert>
<b-link
client/src/components/User/DiskUsage/Quota/QuotaUsageSummary.vue
+3 -3
View File
@@ -3,16 +3,16 @@
<div class="text-center my-5">
<div v-if="allSourcesUnlimited">
<h2>You've got <b>unlimited</b> disk quota</h2>
<h4 v-localize>All your storage sources have unlimited disk space. Enjoy!</h4>
<h3 class="h-sm" v-localize>All your storage sources have unlimited disk space. Enjoy!</h3>
</div>
<div v-else>
<h2>
You've got <b> {{ niceTotalQuota }} </b> of total disk quota
</h2>
<h4 v-localize>
<h3 class="h-sm" v-localize>
This is the maximum disk space that you can use across all your storage sources. Unlimited storage
sources are not taken into account
</h4>
</h3>
</div>
</div>
client/src/components/User/DiskUsage/StorageDashboard.vue
+1 -1
View File
@@ -4,7 +4,7 @@
<h1 class="text-center my-3">
<b>{{ title }}</b>
</h1>
<h4 class="text-center my-3">{{ subtitle }}</h4>
<h2 class="text-center my-3 h-sm">{{ subtitle }}</h2>
</header>
<DiskUsageSummary class="m-3" />
<IconCard
client/src/components/User/ExternalIdentities/ExternalIdentities.vue
+3 -3
View File
@@ -11,7 +11,7 @@
>
<hgroup class="external-id-title">
<h1>Manage External Identities</h1>
<h1 class="h-lg">Manage External Identities</h1>
</hgroup>
<p>
@@ -29,7 +29,7 @@
</header>
<div v-if="items.length" class="external-subheading">
<h3>Connected External Identities</h3>
<h2 class="h-md">Connected External Identities</h2>
<b-button
v-for="item in items"
:key="item.email"
@@ -75,7 +75,7 @@
</div>
<div v-if="enable_oidc" class="external-subheading">
<h3>Connect Other External Identities</h3>
<h2 class="h-md">Connect Other External Identities</h2>
<external-login :login_page="false" />
</div>
</section>
client/src/components/User/UserPreferences.vue
+1 -1
View File
@@ -1,6 +1,6 @@
<template>
<b-container fluid class="p-0">
<h2 v-localize>User preferences</h2>
<h1 class="h-lg" v-localize>User preferences</h1>
<b-alert :variant="messageVariant" :show="!!message">
{{ message }}
</b-alert>
client/src/components/Workflow/Editor/Forms/FormTool.vue
+8 -6
View File
@@ -27,7 +27,8 @@
:area="true"
help="Add an annotation or notes to this step. Annotations are available when a workflow is viewed."
@input="onAnnotation" />
<ToolCardSection title="Tool Parameters">
<div class="mt-2 mb-4">
<Heading h2 separator bold size="sm"> Tool Parameters </Heading>
<FormDisplay
:id="id"
:inputs="inputs"
@@ -36,8 +37,9 @@
text-disable="Set at Runtime"
:workflow-building-mode="true"
@onChange="onChange" />
</ToolCardSection>
<ToolCardSection title="Additional Options">
</div>
<div class="mt-2 mb-4">
<Heading h2 separator bold size="sm"> Additional Options </Heading>
<FormSection
:id="nodeId"
:node-inputs="nodeInputs"
@@ -46,7 +48,7 @@
:datatypes="datatypes"
:post-job-actions="postJobActions"
@onChange="onChangePostJobActions" />
</ToolCardSection>
</div>
</template>
</ToolCard>
</CurrentUser>
@@ -56,20 +58,20 @@
import CurrentUser from "components/providers/CurrentUser";
import FormDisplay from "components/Form/FormDisplay";
import ToolCard from "components/Tool/ToolCard";
import ToolCardSection from "components/Tool/ToolCardSection";
import FormSection from "./FormSection";
import FormElement from "components/Form/FormElement";
import { checkLabels } from "components/Workflow/Editor/modules/utilities";
import Utils from "utils/utils";
import Heading from "components/Common/Heading";
export default {
components: {
CurrentUser,
FormDisplay,
ToolCard,
ToolCardSection,
FormElement,
FormSection,
Heading,
},
props: {
nodeId: {
client/src/components/Workflow/Editor/Recommendations.vue
+1 -1
View File
@@ -1,7 +1,7 @@
<template>
<div class="workflow-recommendations">
<div class="header-background">
<h4>{{ popoverHeaderText }}</h4>
<h2 class="h-sm">{{ popoverHeaderText }}</h2>
</div>
<LoadingSpan v-if="showLoading" message="Loading recommendations" />
<div v-if="compatibleTools.length > 0 && !isDeprecated">
client/src/components/Workflow/Editor/ReportHelp.vue
+4 -4
View File
@@ -1,13 +1,13 @@
<template>
<div class="p-4">
<h3>Workflow Reports</h3>
<h2 class="h-md">Workflow Reports</h2>
<p>
The <b>Markdown</b> document you see will be used to generate a workflow invocation report. You can use
Markdown with embedded commands for extracting and displaying parts of the workflow, its invocation
metadata, its inputs and outputs, etc..
</p>
<div v-html="markdownGeneralHelpHtml" />
<h3>Workflow Commands</h3>
<h2 class="h-md">Workflow Commands</h2>
<p>
These commands do not take any arguments and do reference the whole workflow. For instance, the following
example would display a representation of the workflow in the resulting report:
@@ -26,7 +26,7 @@ workflow_display()
<dt><tt>invocation_outputs</tt></dt>
<dd>Embed the labeled workflow outputs in the resulting report.</dd>
</dl>
<h3>Step Commands</h3>
<h2 class="h-md">Step Commands</h2>
<p>
These commands reference a workflow step label and refer to job corresponding to that step. A current
limitation is the report will break if these refer to a collection mapping step, these must identify a
@@ -55,7 +55,7 @@ job_parameters(step="qc", param="parameter_text")
<dd>Embed the job metrics for this step in the resulting report (if user has permission).</dd>
<dt><tt>job_parameters</tt></dt>
<dd>Embed the tool parameters for this step in the resulting report.</dd>
<h3>Input/Output Commands</h3>
<h2 class="h-md">Input/Output Commands</h2>
<p>
These commands reference a workflow input or output by label. For instance, the following example would
display the dataset collection corresponding to output "Merged BAM":
client/src/components/Workflow/Import/FromFileOrUrl.vue
+1 -1
View File
@@ -48,7 +48,7 @@ const submit = (ev) => {
<template>
<b-form class="mt-4" @submit="submit">
<h4>Import from a Galaxy workflow export URL or a workflow file</h4>
<h2 class="h-sm">Import from a Galaxy workflow export URL or a workflow file</h2>
<b-form-group label="Archived Workflow URL">
<b-form-input
id="workflow-import-url-input"
client/src/components/Workflow/Invocations.vue
+4 -4
View File
@@ -1,8 +1,8 @@
<template>
<div class="invocations-list">
<h2 class="mb-3">
<span id="invocations-title">{{ title }}</span>
</h2>
<div class="invocations-list" aria-labelledby="invocations-title">
<h1 id="invocations-title" class="mb-3 h-lg">
{{ title }}
</h1>
<b-alert v-if="headerMessage" variant="info" show>
{{ headerMessage }}
</b-alert>
client/src/components/Workflow/Run/WorkflowRun.vue
+1 -1
View File
@@ -1,7 +1,7 @@
<template>
<span>
<b-alert v-if="error" variant="danger" show>
<h5>Workflow cannot be executed. Please resolve the following issue:</h5>
<h2 class="h-text">Workflow cannot be executed. Please resolve the following issue:</h2>
{{ error }}
</b-alert>
<span v-else>
client/src/components/Workflow/WorkflowExport.vue
+1 -1
View File
@@ -1,7 +1,7 @@
<template>
<div>
<div v-if="workflow">
<h3 class="mb-4">Workflow Export of `{{ workflow.name }}`</h3>
<h1 class="mb-4 h-lg">Workflow Export of `{{ workflow.name }}`</h1>
<div v-if="workflow.importable && workflow.slug">
<a :href="importUrl">{{ importUrl }}</a>
<div>
client/src/components/Workflow/WorkflowImport.vue
+3 -3
View File
@@ -6,20 +6,20 @@ import FromFileOrUrl from "./Import/FromFileOrUrl";
<template>
<section>
<h3>Import workflow</h3>
<h1 class="h-lg">Import workflow</h1>
<b-tabs fill>
<b-tab title="Archived file or url" active>
<FromFileOrUrl />
</b-tab>
<b-tab title="GA4GH servers">
<div class="mt-4">
<h4>Import a Workflow from Configured GA4GH Tool Registry Servers (e.g. Dockstore)</h4>
<h2 class="h-sm">Import a Workflow from Configured GA4GH Tool Registry Servers (e.g. Dockstore)</h2>
<TrsSearch />
</div>
</b-tab>
<b-tab title="TRS ID">
<div class="mt-4">
<h4>Import from a TRS ID</h4>
<h2 class="h-sm">Import from a TRS ID</h2>
<TrsImport />
</div>
</b-tab>
client/src/components/admin/AdminPanel.vue
+1 -1
View File
@@ -12,7 +12,7 @@
v-for="(section, sectionIndex) in sections"
:key="sectionIndex"
class="toolSectionTitle pt-1 px-3">
{{ section.title }}
<h2 class="font-weight-bold h-text mb-0">{{ section.title }}</h2>
<div class="toolSectionBody">
<div v-for="(item, itemIndex) in section.items" :key="itemIndex" class="toolTitle">
<router-link v-if="!item.disabled" :id="item.id" class="title-link" :to="item.route">
client/src/components/admin/DataManager/DataManager.vue
+1 -1
View File
@@ -5,7 +5,7 @@
<Alert v-else-if="loading" message="Waiting for data" variant="info" />
<div v-else-if="dataManagers && !dataManagers.length">
<Alert variant="primary">
<h4 class="alert-heading">None installed</h4>
<span class="alert-heading h-sm">None installed</span>
You do not currently have any Data Managers installed.
</Alert>
</div>
client/src/components/admin/DataManager/DataManagerJobs.vue
+1 -1
View File
@@ -60,7 +60,7 @@
</template>
<template v-slot:row-details="row">
<b-card>
<h5>Command Line</h5>
<h2 class="h-text">Command Line</h2>
<pre class="code"><code class="command-line">{{ row.item.commandLine }}</code></pre>
<template v-slot:footer>
<b-button class="mt-3" @click="row.toggleDetails">Hide Info</b-button>
client/src/components/admin/DataManager/DataManagerView.vue
+2 -2
View File
@@ -1,7 +1,7 @@
<template>
<div>
<div aria-labelledby="data-managers-title">
<span class="mb-3">
<h2 id="data-managers-title">Local Data</h2>
<h1 id="data-managers-title" class="h-lg">Local Data</h1>
<p>
Data Managers are used to manage Galaxy's local data. They can be installed manually, or via the
<b-link :href="toolShedLink">ToolShed</b-link>. For more comprehensive information
client/src/components/admin/DataTables.vue
+2 -1
View File
@@ -1,5 +1,6 @@
<template>
<div>
<div aria-labelledby="data-tables-heading">
<h1 id="data-tables-heading" class="h-lg">Data Tables</h1>
<message :message="message" :status="status"></message>
<component
:is="currentView"
client/src/components/admin/DataTypes.vue
+2 -1
View File
@@ -1,5 +1,6 @@
<template>
<div>
<div aria-labelledby="data-types-heading">
<h1 id="data-types-heading" class="h-lg">Data Types</h1>
<Message :message="message" :status="status" />
<BaseGrid
v-if="status !== 'error'"
client/src/components/admin/DisplayApplications.vue
+11 -8
View File
@@ -1,12 +1,15 @@
<template>
<BaseList
:fields="fields"
icon="fa fa-sync"
tooltip="Refresh"
plural="display applications"
success="reloaded"
:getter="getter"
:setter="setter" />
<div aria-labelledby="display-applications-heading">
<h1 id="display-applications-heading" class="h-lg">Display Applications</h1>
<BaseList
:fields="fields"
icon="fa fa-sync"
tooltip="Refresh"
plural="display applications"
success="reloaded"
:getter="getter"
:setter="setter" />
</div>
</template>
<script>
import BaseList from "./BaseList";
client/src/components/admin/Home.vue
+17 -7
View File
@@ -1,12 +1,15 @@
<template>
<div>
<h2>Administration</h2>
Please visit
<h1>Administration</h1>
<a href="https://galaxyproject.org/admin" target="_blank">the Galaxy administration hub</a> to learn how to keep
your Galaxy in best shape.
<p>
Please visit
<h4>Server</h4>
<a href="https://galaxyproject.org/admin" target="_blank">the Galaxy administration hub</a> to learn how to
keep your Galaxy in best shape.
</p>
<Heading h2 icon="fa-server" size="md">Server</Heading>
<ul>
<li>
<strong>
@@ -42,7 +45,7 @@
</li>
</ul>
<h4>User Management</h4>
<Heading h2 icon="fa-user" size="md">User Management</Heading>
<ul>
<li>
<strong>
@@ -82,7 +85,7 @@
</li>
</ul>
<h4>Tool Management</h4>
<Heading h2 icon="fa-wrench" size="md">Tool Management</Heading>
<ul>
<li>
<strong>
@@ -116,7 +119,14 @@
</template>
<script>
import Heading from "components/Common/Heading.vue";
import { library } from "@fortawesome/fontawesome-svg-core";
import { faServer, faUser, faWrench } from "@fortawesome/free-solid-svg-icons";
library.add(faServer, faUser, faWrench);
export default {
components: { Heading },
props: {
isToolshedInstalled: {
type: Boolean,
client/src/components/admin/Jobs.vue
+8 -7
View File
@@ -1,12 +1,12 @@
<template>
<div>
<h2 id="jobs-title">Jobs</h2>
<div aria-labelledby="jobs-title">
<h1 id="jobs-title" class="h-lg">Jobs</h1>
<b-alert v-if="message" :variant="status" show>
{{ message }}
</b-alert>
<h3>Job Lock</h3>
<Heading h2 size="md" separator>Job Lock</Heading>
<job-lock />
<h3>Job Overview</h3>
<Heading h2 size="md" separator>Job Overview</Heading>
<p>
Below unfinished jobs are displayed (in the 'new', 'queued', 'running', or 'upload' states) and recently
completed jobs (in 'error' or 'ok' states).
@@ -55,7 +55,7 @@
</b-form-group>
</b-form>
</transition>
<h4>Unfinished Jobs</h4>
<h3 class="mb-0 h-sm">Unfinished Jobs</h3>
<jobs-table
v-model="jobsItemsModel"
:fields="unfinishedJobFields"
@@ -81,7 +81,7 @@
</jobs-table>
<template v-if="!showAllRunning">
<h4>Finished Jobs</h4>
<h3 class="mb-0 h-sm">Finished Jobs</h3>
<jobs-table
:table-caption="finishedTableCaption"
:fields="finishedJobFields"
@@ -104,6 +104,7 @@ import JOB_STATES_MODEL from "utils/job-states-model";
import { commonJobFields } from "./JobFields";
import { errorMessageAsString } from "utils/simple-error";
import { jobsProvider } from "components/providers/JobProvider";
import Heading from "components/Common/Heading";
function cancelJob(jobId, message) {
const url = `${getAppRoot()}api/jobs/${jobId}`;
@@ -111,7 +112,7 @@ function cancelJob(jobId, message) {
}
export default {
components: { JobLock, JobsTable },
components: { JobLock, JobsTable, Heading },
data() {
return {
jobs: [],
client/src/style/scss/ui.scss
+33
View File
@@ -477,3 +477,36 @@ $ui-margin-horizontal-large: $margin-v * 2;
.flex-gapx-1 {
column-gap: 0.25rem;
}
/* Heading Sizes */
.h-xl {
font-size: $h1-font-size;
}
.h-lg {
font-size: $h2-font-size;
}
.h-md {
font-size: $h3-font-size;
}
.h-sm {
font-size: $h4-font-size;
}
.h-text {
font-size: $font-size-base;
}
/* hides element in a way where it can still be read by screen-readers */
.hide-element {
border: 0;
clip: rect(1px, 1px, 1px, 1px);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}