From ed3c4d8b8f82da98b7b534bb3e3c892ace752fea Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Mon, 30 Aug 2021 23:37:11 -0400
Subject: [PATCH] Remove unused divs in markdown components, slightly increase
 padding for pages to improve scolling and navigation

---
 .../CollectionDisplay.vue                     |  98 ++++++-----
 .../Elements/HistoryDatasetDisplay.vue        | 153 +++++++++---------
 .../Markdown/Elements/JobMetrics.vue          |   8 +-
 .../Markdown/Elements/JobParameters.vue       |   8 +-
 .../components/Markdown/Elements/ToolStd.vue  |  12 +-
 .../Markdown/Elements/Visualization.vue       |  12 +-
 .../Elements/Workflow/WorkflowDisplay.vue     |  84 +++++-----
 client/src/components/Markdown/Markdown.vue   |   2 +-
 client/src/style/scss/markdown.scss           |   7 +
 9 files changed, 186 insertions(+), 198 deletions(-)

diff --git a/client/src/components/Markdown/Elements/HistoryDatasetCollection/CollectionDisplay.vue b/client/src/components/Markdown/Elements/HistoryDatasetCollection/CollectionDisplay.vue
index 6b69dc66870..077e7b77536 100644
--- a/client/src/components/Markdown/Elements/HistoryDatasetCollection/CollectionDisplay.vue
+++ b/client/src/components/Markdown/Elements/HistoryDatasetCollection/CollectionDisplay.vue
@@ -1,54 +1,52 @@
 <template>
-    <div class="w-100 p-2">
-        <b-card body-class="p-0">
-            <b-card-header>
-                <span class="float-right">
-                    <b-button
-                        :href="downloadUrl"
-                        variant="link"
-                        size="sm"
-                        role="button"
-                        title="Download Collection"
-                        type="button"
-                        class="py-0 px-1"
-                        v-b-tooltip.hover
-                    >
-                        <span class="fa fa-download" />
-                    </b-button>
-                    <CurrentUser v-slot="{ user }">
-                        <UserHistories v-if="user" :user="user" v-slot="{ currentHistoryId }">
-                            <b-button
-                                v-if="currentHistoryId"
-                                @click="onCopyCollection(currentHistoryId)"
-                                href="#"
-                                role="button"
-                                variant="link"
-                                title="Import Collection"
-                                type="button"
-                                class="py-0 px-1"
-                                v-b-tooltip.hover
-                            >
-                                <span class="fa fa-file-import" />
-                            </b-button>
-                        </UserHistories>
-                    </CurrentUser>
-                </span>
-                <span>
-                    <span>Dataset Collection:</span>
-                    <span class="font-weight-light">{{ collectionName }}</span>
-                </span>
-            </b-card-header>
-            <b-card-body>
-                <LoadingSpan v-if="loading" message="Loading Collection" />
-                <div v-else class="content-height">
-                    <b-alert v-if="!!messageText" :variant="messageVariant" show>
-                        {{ messageText }}
-                    </b-alert>
-                    <CollectionTree :node="itemContent" :skip-head="true" />
-                </div>
-            </b-card-body>
-        </b-card>
-    </div>
+    <b-card body-class="p-0">
+        <b-card-header>
+            <span class="float-right">
+                <b-button
+                    :href="downloadUrl"
+                    variant="link"
+                    size="sm"
+                    role="button"
+                    title="Download Collection"
+                    type="button"
+                    class="py-0 px-1"
+                    v-b-tooltip.hover
+                >
+                    <span class="fa fa-download" />
+                </b-button>
+                <CurrentUser v-slot="{ user }">
+                    <UserHistories v-if="user" :user="user" v-slot="{ currentHistoryId }">
+                        <b-button
+                            v-if="currentHistoryId"
+                            @click="onCopyCollection(currentHistoryId)"
+                            href="#"
+                            role="button"
+                            variant="link"
+                            title="Import Collection"
+                            type="button"
+                            class="py-0 px-1"
+                            v-b-tooltip.hover
+                        >
+                            <span class="fa fa-file-import" />
+                        </b-button>
+                    </UserHistories>
+                </CurrentUser>
+            </span>
+            <span>
+                <span>Dataset Collection:</span>
+                <span class="font-weight-light">{{ collectionName }}</span>
+            </span>
+        </b-card-header>
+        <b-card-body>
+            <LoadingSpan v-if="loading" message="Loading Collection" />
+            <div v-else class="content-height">
+                <b-alert v-if="!!messageText" :variant="messageVariant" show>
+                    {{ messageText }}
+                </b-alert>
+                <CollectionTree :node="itemContent" :skip-head="true" />
+            </div>
+        </b-card-body>
+    </b-card>
 </template>
 
 <script>
diff --git a/client/src/components/Markdown/Elements/HistoryDatasetDisplay.vue b/client/src/components/Markdown/Elements/HistoryDatasetDisplay.vue
index c725d313abc..138e9e9a002 100644
--- a/client/src/components/Markdown/Elements/HistoryDatasetDisplay.vue
+++ b/client/src/components/Markdown/Elements/HistoryDatasetDisplay.vue
@@ -1,86 +1,79 @@
 <template>
-    <div class="w-100 p-2">
-        <b-card body-class="p-0">
-            <b-card-header v-if="!embedded">
-                <span class="float-right">
-                    <b-button
-                        :href="downloadUrl"
-                        variant="link"
-                        size="sm"
-                        role="button"
-                        title="Download Dataset"
-                        type="button"
-                        class="py-0 px-1"
-                        v-b-tooltip.hover
-                    >
-                        <span class="fa fa-download" />
-                    </b-button>
-                    <b-button
-                        :href="importUrl"
-                        role="button"
-                        variant="link"
-                        title="Import Dataset"
-                        type="button"
-                        class="py-0 px-1"
-                        v-b-tooltip.hover
-                    >
-                        <span class="fa fa-file-import" />
-                    </b-button>
-                </span>
-                <span>
-                    <span>Dataset:</span>
-                    <span class="font-weight-light">{{ datasetName }}</span>
-                </span>
-            </b-card-header>
-            <b-card-body>
-                <UrlDataProvider :url="itemUrl" v-slot="{ result: itemContent, loading, error }">
-                    <LoadingSpan v-if="loading" message="Loading Dataset" />
-                    <div v-else-if="error">{{ error }}</div>
-                    <div v-else class="embedded-dataset content-height">
-                        <UrlDataProvider
-                            :url="datatypesUrl"
-                            v-slot="{ result: datatypesModel, loading: datatypesLoading }"
-                        >
-                            <LoadingSpan v-if="datatypesLoading" message="Loading Datatypes" />
-                            <div v-else>
-                                <b-embed
-                                    v-if="isSubTypeOfAny(datasetType, ['pdf', 'html'], datatypesModel)"
-                                    type="iframe"
-                                    aspect="16by9"
-                                    :src="displayUrl"
-                                />
-                                <div v-else-if="itemContent.item_data">
-                                    <div v-if="isSubTypeOfAny(datasetType, ['tabular'], datatypesModel)">
-                                        <UrlDataProvider
-                                            :url="metaUrl"
-                                            v-slot="{ result: metaData, loading: metaLoading, error: metaError }"
-                                        >
-                                            <LoadingSpan v-if="metaLoading" message="Loading Metadata" />
-                                            <div v-else-if="metaError">{{ metaError }}</div>
-                                            <b-table
-                                                v-else
-                                                striped
-                                                hover
-                                                :fields="getFields(metaData)"
-                                                :items="getItems(itemContent.item_data, metaData)"
-                                            />
-                                        </UrlDataProvider>
-                                    </div>
-                                    <pre v-else>
-                                        <code class="text-normalwrap">{{ itemContent.item_data }}</code>
-                                    </pre>
+    <b-card body-class="p-0">
+        <b-card-header v-if="!embedded">
+            <span class="float-right">
+                <b-button
+                    :href="downloadUrl"
+                    variant="link"
+                    size="sm"
+                    role="button"
+                    title="Download Dataset"
+                    type="button"
+                    class="py-0 px-1"
+                    v-b-tooltip.hover
+                >
+                    <span class="fa fa-download" />
+                </b-button>
+                <b-button
+                    :href="importUrl"
+                    role="button"
+                    variant="link"
+                    title="Import Dataset"
+                    type="button"
+                    class="py-0 px-1"
+                    v-b-tooltip.hover
+                >
+                    <span class="fa fa-file-import" />
+                </b-button>
+            </span>
+            <span>
+                <span>Dataset:</span>
+                <span class="font-weight-light">{{ datasetName }}</span>
+            </span>
+        </b-card-header>
+        <b-card-body>
+            <UrlDataProvider :url="itemUrl" v-slot="{ result: itemContent, loading, error }">
+                <LoadingSpan v-if="loading" message="Loading Dataset" />
+                <div v-else-if="error">{{ error }}</div>
+                <div v-else class="embedded-dataset content-height">
+                    <UrlDataProvider :url="datatypesUrl" v-slot="{ result: datatypesModel, loading: datatypesLoading }">
+                        <LoadingSpan v-if="datatypesLoading" message="Loading Datatypes" />
+                        <div v-else>
+                            <b-embed
+                                v-if="isSubTypeOfAny(datasetType, ['pdf', 'html'], datatypesModel)"
+                                type="iframe"
+                                aspect="16by9"
+                                :src="displayUrl"
+                            />
+                            <div v-else-if="itemContent.item_data">
+                                <div v-if="isSubTypeOfAny(datasetType, ['tabular'], datatypesModel)">
+                                    <UrlDataProvider
+                                        :url="metaUrl"
+                                        v-slot="{ result: metaData, loading: metaLoading, error: metaError }"
+                                    >
+                                        <LoadingSpan v-if="metaLoading" message="Loading Metadata" />
+                                        <div v-else-if="metaError">{{ metaError }}</div>
+                                        <b-table
+                                            v-else
+                                            striped
+                                            hover
+                                            :fields="getFields(metaData)"
+                                            :items="getItems(itemContent.item_data, metaData)"
+                                        />
+                                    </UrlDataProvider>
                                 </div>
-                                <div v-else>No content found.</div>
-                                <b-link v-if="itemContent.truncated" :href="itemContent.item_url">
-                                    Show More...
-                                </b-link>
+                                <pre v-else>
+                                    <code class="text-normalwrap">{{ itemContent.item_data }}</code>
+                                </pre>
                             </div>
-                        </UrlDataProvider>
-                    </div>
-                </UrlDataProvider>
-            </b-card-body>
-        </b-card>
-    </div>
+                            <div v-else>No content found.</div>
+                            <b-link v-if="itemContent.truncated" :href="itemContent.item_url"> Show More... </b-link>
+                        </div>
+                    </UrlDataProvider>
+                </div>
+            </UrlDataProvider>
+        </b-card-body>
+    </b-card>
 </template>
 
 <script>
diff --git a/client/src/components/Markdown/Elements/JobMetrics.vue b/client/src/components/Markdown/Elements/JobMetrics.vue
index 66d17bc0397..46af304a0a7 100644
--- a/client/src/components/Markdown/Elements/JobMetrics.vue
+++ b/client/src/components/Markdown/Elements/JobMetrics.vue
@@ -1,9 +1,7 @@
 <template>
-    <div class="w-100 p-2">
-        <b-card nobody>
-            <JobMetrics class="job-metrics" :job-id="args.job_id" />
-        </b-card>
-    </div>
+    <b-card nobody>
+        <JobMetrics class="job-metrics" :job-id="args.job_id" />
+    </b-card>
 </template>
 
 <script>
diff --git a/client/src/components/Markdown/Elements/JobParameters.vue b/client/src/components/Markdown/Elements/JobParameters.vue
index f3d48790d11..3560a6e443a 100644
--- a/client/src/components/Markdown/Elements/JobParameters.vue
+++ b/client/src/components/Markdown/Elements/JobParameters.vue
@@ -1,9 +1,7 @@
 <template>
-    <div class="w-100 p-2">
-        <b-card nobody>
-            <JobParameters class="job-parameters" :job-id="args.job_id" :param="args.param" :include-title="false" />
-        </b-card>
-    </div>
+    <b-card nobody>
+        <JobParameters class="job-parameters" :job-id="args.job_id" :param="args.param" :include-title="false" />
+    </b-card>
 </template>
 
 <script>
diff --git a/client/src/components/Markdown/Elements/ToolStd.vue b/client/src/components/Markdown/Elements/ToolStd.vue
index ddb47974030..0a819c29f58 100644
--- a/client/src/components/Markdown/Elements/ToolStd.vue
+++ b/client/src/components/Markdown/Elements/ToolStd.vue
@@ -1,11 +1,9 @@
 <template>
-    <div class="w-100 p-2">
-        <b-card nobody class="content-height">
-            <div :class="name" :job_id="args.job_id">
-                <pre><code class="text-normalwrap">{{ jobContent }}</code></pre>
-            </div>
-        </b-card>
-    </div>
+    <b-card nobody class="content-height">
+        <div :class="name" :job_id="args.job_id">
+            <pre><code class="text-normalwrap">{{ jobContent }}</code></pre>
+        </div>
+    </b-card>
 </template>
 
 <script>
diff --git a/client/src/components/Markdown/Elements/Visualization.vue b/client/src/components/Markdown/Elements/Visualization.vue
index abe938955ef..0f500b9efa2 100644
--- a/client/src/components/Markdown/Elements/Visualization.vue
+++ b/client/src/components/Markdown/Elements/Visualization.vue
@@ -1,11 +1,9 @@
 <template>
-    <div class="w-100 p-2">
-        <b-card body-class="embed-responsive embed-responsive-4by3">
-            <LoadingSpan v-if="loading" class="m-2" message="Loading Visualization" />
-            <div v-else-if="error" class="m-2">{{ error }}</div>
-            <iframe v-else class="embed-responsive-item" :src="visualizationUrl" />
-        </b-card>
-    </div>
+    <b-card body-class="embed-responsive embed-responsive-4by3">
+        <LoadingSpan v-if="loading" class="m-2" message="Loading Visualization" />
+        <div v-else-if="error" class="m-2">{{ error }}</div>
+        <iframe v-else class="embed-responsive-item" :src="visualizationUrl" />
+    </b-card>
 </template>
 
 <script>
diff --git a/client/src/components/Markdown/Elements/Workflow/WorkflowDisplay.vue b/client/src/components/Markdown/Elements/Workflow/WorkflowDisplay.vue
index 73b2692f755..d2ba0a814fd 100644
--- a/client/src/components/Markdown/Elements/Workflow/WorkflowDisplay.vue
+++ b/client/src/components/Markdown/Elements/Workflow/WorkflowDisplay.vue
@@ -1,48 +1,46 @@
 <template>
-    <div class="w-100 p-2">
-        <b-card body-class="p-0">
-            <b-card-header v-if="!embedded">
-                <span class="float-right">
-                    <b-button
-                        :href="downloadUrl"
-                        variant="link"
-                        size="sm"
-                        role="button"
-                        title="Download Workflow"
-                        type="button"
-                        class="py-0 px-1"
-                        v-b-tooltip.hover
-                    >
-                        <span class="fa fa-download" />
-                    </b-button>
-                    <b-button
-                        :href="importUrl"
-                        role="button"
-                        variant="link"
-                        title="Import Workflow"
-                        type="button"
-                        class="py-0 px-1"
-                        v-b-tooltip.hover
-                    >
-                        <span class="fa fa-file-import" />
-                    </b-button>
-                </span>
-                <span>
-                    <span>Workflow:</span>
-                    <span class="font-weight-light">{{ workflowName }}</span>
-                </span>
-            </b-card-header>
-            <b-card-body>
-                <LoadingSpan v-if="loading" message="Loading Workflow" />
-                <div v-else class="content-height">
-                    <div v-for="step in itemContent.steps" :key="step.order_index" class="mb-2">
-                        <div>Step {{ step.order_index + 1 }}: {{ step.label }}</div>
-                        <WorkflowTree :input="step" :skip-head="true" />
-                    </div>
+    <b-card body-class="p-0">
+        <b-card-header v-if="!embedded">
+            <span class="float-right">
+                <b-button
+                    :href="downloadUrl"
+                    variant="link"
+                    size="sm"
+                    role="button"
+                    title="Download Workflow"
+                    type="button"
+                    class="py-0 px-1"
+                    v-b-tooltip.hover
+                >
+                    <span class="fa fa-download" />
+                </b-button>
+                <b-button
+                    :href="importUrl"
+                    role="button"
+                    variant="link"
+                    title="Import Workflow"
+                    type="button"
+                    class="py-0 px-1"
+                    v-b-tooltip.hover
+                >
+                    <span class="fa fa-file-import" />
+                </b-button>
+            </span>
+            <span>
+                <span>Workflow:</span>
+                <span class="font-weight-light">{{ workflowName }}</span>
+            </span>
+        </b-card-header>
+        <b-card-body>
+            <LoadingSpan v-if="loading" message="Loading Workflow" />
+            <div v-else class="content-height">
+                <div v-for="step in itemContent.steps" :key="step.order_index" class="mb-2">
+                    <div>Step {{ step.order_index + 1 }}: {{ step.label }}</div>
+                    <WorkflowTree :input="step" :skip-head="true" />
                 </div>
-            </b-card-body>
-        </b-card>
-    </div>
+            </div>
+        </b-card-body>
+    </b-card>
 </template>
 
 <script>
diff --git a/client/src/components/Markdown/Markdown.vue b/client/src/components/Markdown/Markdown.vue
index 24b081b19c0..700a77aeaea 100644
--- a/client/src/components/Markdown/Markdown.vue
+++ b/client/src/components/Markdown/Markdown.vue
@@ -44,7 +44,7 @@
                     </div>
                 </b-alert>
             </div>
-            <div v-for="(obj, index) in markdownObjects" :key="index">
+            <div v-for="(obj, index) in markdownObjects" :key="index" class="markdown-components">
                 <p v-if="obj.name == 'default'" v-html="obj.content" class="text-justify m-2" />
                 <div v-else-if="obj.name == 'generate_galaxy_version'" class="galaxy-version">
                     <pre><code>{{ getVersion }}</code></pre>
diff --git a/client/src/style/scss/markdown.scss b/client/src/style/scss/markdown.scss
index 2e39f5bce9f..31de045c3a6 100644
--- a/client/src/style/scss/markdown.scss
+++ b/client/src/style/scss/markdown.scss
@@ -12,3 +12,10 @@
         flex: 1;
     }
 }
+
+.markdown-wrapper {
+    @extend .px-4;
+    .markdown-components {
+        @extend .py-2;
+    }
+}