Skip to content

Commit

Permalink
AMP-2880: fix some CSS issues after Node upgrade
Browse files Browse the repository at this point in the history 
- fix container col (for homepage and all components using container
col-12)
- fix filter buttons
  • Loading branch information
@yingfeng-iu
yingfeng-iu committed Apr 18, 2024
1 parent 3676c0a commit e386a73
Show file tree
Hide file tree
Showing 15 changed files with 147 additions and 143 deletions.
5 changes: 4 additions & 1 deletion public/css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -385,7 +385,9 @@ a:hover {
fill: #F4871E; }

.filter-btns .dropdown {
margin: 0.25rem 0.5rem; }
margin: 0.25rem 0.5rem;
height: fit-content;
}

#myTable {
font-size: .8em; }
Expand Down Expand Up @@ -714,6 +716,7 @@ svg.icon-user {
border: 4px solid #F4871E;
transition: all 0.5s ease;
height:64px;
width: auto;
}
#help a:link {
color: #153c4d;
Expand Down
6 changes: 3 additions & 3 deletions src/App.vue
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<template>
<div class="container col-12 dataTables_wrapper">
<div class="container-fluid dataTables_wrapper">
<div class="row">
<Sidebar />

Expand Down Expand Up @@ -60,5 +60,5 @@ export default {
};
</script>
<style lang="css">
/* @import '../../styles/style.css'; */
</style>
@import './styles/style.css';
</style>
Binary file added src/assets/home.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion src/components/batch/BatchIngest.vue
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<template>
<div class="batch-ingest w-100">
<loader :show="inProgress" />
<div class="container col-12">
<div class="container-fluid">
<div class="row expand-h">
<!-- <Sidebar/> -->
<div class="col-12 bg-light-gray-1">
Expand Down
2 changes: 1 addition & 1 deletion src/components/collections/CollectionDetails.vue
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<template>
<div class="collection">
<div class="container col-12">
<div class="container-fluid">
<div class="row expand-h">
<Sidebar />
<div class="col-10 bg-light-gray-1">
Expand Down
2 changes: 1 addition & 1 deletion src/components/collections/Collections.vue
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<template>
<div class="collection dataTables_wrapper">
<div class="container col-12">
<div class="container-fluid">
<div class="row expand-h">
<Sidebar />
<div class="col-10 bg-light-gray-1">
Expand Down
257 changes: 129 additions & 128 deletions src/components/dashboard/Dashboard.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<div class="collections w-100">
<!-- <loader :show="!isFilterApiLoaded"/> -->
<div
class="container col-12"
class="container-fluid"
:class="{
'p-0': parent === 'NewTest' || parent === 'TestResults',
}"
Expand Down Expand Up @@ -544,136 +544,137 @@

<div class="container-fluid">
<div class="row filter-btns">
<b-button
class="btn btn-info dropdown"
v-b-modal.modal-lg
@click="onOpenModal('unit')"
>Unit</b-button
>
<b-button
class="btn btn-info dropdown"
v-b-modal.modal-lg
@click="onOpenModal('collection')"
>Collection</b-button
>
<b-button
class="btn btn-info dropdown"
v-b-modal.modal-lg
@click="onOpenModal('workflow')"
>Workflow</b-button
>
<b-button
v-if="parent !== 'NewTest'"
class="btn btn-info dropdown"
v-b-modal.modal-lg
@click="onOpenModal('output')"
>Output</b-button
>
<DateFilter
:parent="parent"
v-if="parent === 'TestResults'"
label="Test Date"
@displayChanged="
changeDisplayedFilter(
workflowDashboard.filtersEnabled.dateFilter
)
"
/>
<DateFilter
:parent="parent"
@displayChanged="
changeDisplayedFilter(
workflowDashboard.filtersEnabled.dateFilter
)
"
/>
<b-button
class="btn btn-info dropdown"
v-b-modal.modal-lg
@click="onOpenModal('submitter')"
>Submitter</b-button
>
<b-button
class="btn btn-info dropdown"
v-b-modal.modal-lg
@click="onOpenModal('item')"
>Item</b-button
>
<b-button
class="btn btn-info dropdown"
v-b-modal.modal-lg
@click="onOpenModal('primaryfile')"
>Content File</b-button
>
<b-button
class="btn btn-info dropdown"
v-b-modal.modal-lg
@click="onOpenModal('step')"
>Step</b-button
>
<b-button
v-if="parent !== 'NewTest' && parent !== 'TestResults'"
class="btn btn-info dropdown"
v-b-modal.modal-lg
@click="onOpenModal('status')"
>Status</b-button
>
<div class="col d-flex">
<b-button
class="btn btn-info dropdown"
v-b-modal.modal-lg
@click="onOpenModal('unit')"
>Unit</b-button
>
<b-button
class="btn btn-info dropdown"
v-b-modal.modal-lg
@click="onOpenModal('collection')"
>Collection</b-button
>
<b-button
class="btn btn-info dropdown"
v-b-modal.modal-lg
@click="onOpenModal('workflow')"
>Workflow</b-button
>
<b-button
v-if="parent !== 'NewTest'"
class="btn btn-info dropdown"
v-b-modal.modal-lg
@click="onOpenModal('output')"
>Output</b-button
>
<DateFilter
:parent="parent"
v-if="parent === 'TestResults'"
label="Test Date"
@displayChanged="
changeDisplayedFilter(
workflowDashboard.filtersEnabled.dateFilter
)
"
/>
<DateFilter
:parent="parent"
@displayChanged="
changeDisplayedFilter(
workflowDashboard.filtersEnabled.dateFilter
)
"
/>
<b-button
class="btn btn-info dropdown"
v-b-modal.modal-lg
@click="onOpenModal('submitter')"
>Submitter</b-button
>
<b-button
class="btn btn-info dropdown"
v-b-modal.modal-lg
@click="onOpenModal('item')"
>Item</b-button
>
<b-button
class="btn btn-info dropdown"
v-b-modal.modal-lg
@click="onOpenModal('primaryfile')"
>Content File</b-button
>
<b-button
class="btn btn-info dropdown"
v-b-modal.modal-lg
@click="onOpenModal('step')"
>Step</b-button
>
<b-button
v-if="parent !== 'NewTest' && parent !== 'TestResults'"
class="btn btn-info dropdown"
v-b-modal.modal-lg
@click="onOpenModal('status')"
>Status</b-button
>

<div
v-if="parent !== 'NewTest'"
id="btn-show-hide"
class="dropdown"
>
<b-dropdown id="dropdown-form">
<template #button-content>
<span>Show/Hide Columns</span>
<span
><svg
aria-hidden="true"
focusable="false"
class="svg-inline"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 48 48"
<div
v-if="parent !== 'NewTest'"
id="btn-show-hide"
class="dropdown"
>
<b-dropdown id="dropdown-form">
<template #button-content>
<span>Show/Hide Columns</span>
<span
><svg
aria-hidden="true"
focusable="false"
class="svg-inline"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 48 48"
>
<g id="Layer_2" class="icon-white">
<path d="M14 20l10 10 10-10z"></path>
</g></svg
></span>
</template>
<b-dropdown-form>
<b-form-checkbox
v-for="column in dashboardColumns.filter(
(item) => {
if (parent === 'TestResults')
return (
// item.field !== 'dateCreated' &&
item.field !== 'status' &&
item.field !== 'actions' &&
item.field !== 'addToTest'
);
else
return (
item.field !== 'testDate' &&
// item.field !== 'dateCreated' &&
item.field !== 'groundTruth' &&
item.field !== 'scores' &&
item.field !== 'addToTest'
);
}
)"
:key="column.field"
:value="column"
:checked="column"
v-model="columns"
@change="onChange($event.target, column)"
class="mb-3"
>{{ column.label }}</b-form-checkbox
>
<g id="Layer_2" class="icon-white">
<path d="M14 20l10 10 10-10z"></path>
</g></svg
></span>
</template>
<b-dropdown-form>
<b-form-checkbox
v-for="column in dashboardColumns.filter(
(item) => {
if (parent === 'TestResults')
return (
// item.field !== 'dateCreated' &&
item.field !== 'status' &&
item.field !== 'actions' &&
item.field !== 'addToTest'
);
else
return (
item.field !== 'testDate' &&
// item.field !== 'dateCreated' &&
item.field !== 'groundTruth' &&
item.field !== 'scores' &&
item.field !== 'addToTest'
);
}
)"
:key="column.field"
:value="column"
:checked="column"
v-model="columns"
@change="onChange($event.target, column)"
class="mb-3"
>{{ column.label }}</b-form-checkbox
>
</b-dropdown-form>
</b-dropdown>
</b-dropdown-form>
</b-dropdown>
</div>
</div>

<div
v-if="parent !== 'NewTest' && parent !== 'TestResults'"
class="relevant-togggle"
Expand Down
2 changes: 1 addition & 1 deletion src/components/deliverables/Deliverables.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<div class="deliverables w-100">
<loader :show="loading" />
<div
class="container col-12"
class="container-fluid"
v-bind:class="[{ modalOpen: showModal }, 'container', 'col-12']"
>
<div class="row">
Expand Down
2 changes: 1 addition & 1 deletion src/components/entity/EntityList.vue
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<template>
<div
class="container col-12 dataTables_wrapper"
class="container-fluid dataTables_wrapper"
:class="baseUrl == 'unit' ? 'units' : 'collection'"
>
<loader :show="showLoader" />
Expand Down
2 changes: 1 addition & 1 deletion src/components/entity/ItemSearch.vue
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<template>
<div class="item-search">
<loader :show="loading" />
<div class="container col-12">
<div class="container-fluid">
<div class="row expand-h">
<div class="col-12 bg-light-gray-1 item-search-container">
<main class="m-0">
Expand Down
2 changes: 1 addition & 1 deletion src/components/evaluation/MGMevaluation.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
<main class="m-0">
<b-card class="w-100">
<loader :show="loading" />
<div class="container col-12 p-0">
<div class="container-fluid p-0">
<div class="row expand-h">
<div class="col-12 p-0">
<main>
Expand Down
2 changes: 1 addition & 1 deletion src/components/evaluation/TestResultsVisualiz.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<div class="col-12 bg-light-gray-1">
<main class="m-0">
<loader :show="loading" />
<div class="container col-12 p-0">
<div class="container-fluid p-0">
<div class="row expand-h">
<div class="col-12 p-0">
<main class="ml-5 mr-5">
Expand Down
2 changes: 1 addition & 1 deletion src/components/home/index.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -83,7 +83,7 @@ body,
margin-top: 3px;
}
.tech-bg {
background-image: url("/assets/img/home.jpg");
background-image: url("../../assets/home.jpg");
background-repeat: no-repeat;
}
.home-body {
Expand Down
2 changes: 1 addition & 1 deletion src/components/supplement/SupplementList.vue
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<template>
<div
class="container col-12 dataTables_wrapper"
class="container-fluid dataTables_wrapper"
:class="baseUrl == 'unit' ? 'units' : 'collection'"
>
<loader :show="showLoader" />
Expand Down
Loading

0 comments on commit e386a73

Please sign in to comment.