Skip to content

Commit

Permalink
Merge pull request #746 from R-Sourabh/#742-job-card-elevation
Browse files Browse the repository at this point in the history
Improved: Added CSS to highlight the selected job card(#742)
ymaheshwari1 authored Nov 26, 2024

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.
2 parents 2d85b8d + 111eaa5 commit 4a8bcc6
Showing 1 changed file with 15 additions and 3 deletions.
18 changes: 15 additions & 3 deletions src/views/Pipeline.vue
Original file line number Diff line number Diff line change
@@ -45,7 +45,7 @@
</div>

<div v-else>
<ion-card v-for="job in pendingJobs" :key="job.jobId" @click="viewJobConfiguration(job)" :button="isDesktop">
<ion-card v-for="job in pendingJobs" :key="job.jobId" @click="viewJobConfiguration(job)" :button="isDesktop" :class="{ 'selected-job': selectedJobId === job.jobId }">
<ion-card-header>
<ion-card-title>{{ job.enumName }}</ion-card-title>
<ion-badge v-if="job.runTime" color="dark">{{ timeFromNow(job.runTime)}}</ion-badge>
@@ -180,7 +180,7 @@
</div>

<div v-else>
<ion-card v-for="job in jobHistory" :key="job.jobId" @click="viewJobConfiguration(job)" :button="isDesktop">
<ion-card v-for="job in jobHistory" :key="job.jobId" @click="viewJobConfiguration(job)" :button="isDesktop" :class="{ 'selected-job': selectedJobId === job.jobId }">
<ion-card-header>
<div>
<ion-card-subtitle class="overline">{{ job.parentJobId }}</ion-card-subtitle>
@@ -360,7 +360,8 @@ export default defineComponent({
isDesktop: isPlatform('desktop'),
isRetrying: false,
queryString: '' as any,
isScrollingEnabled: false
isScrollingEnabled: false,
selectedJobId: '' as any
}
},
computed: {
@@ -602,6 +603,7 @@ export default defineComponent({
return alert.present();
},
async viewJobConfiguration(job: any) {
this.selectedJobId = job.jobId
this.currentJobStatus = job.tempExprId
const id = Object.entries(this.jobEnums).find((enums) => enums[1] == job.systemJobEnumId) as any
const appFreqType = id && (Object.entries(this.jobFrequencyType).find((freq) => freq[0] == id[0]) as any)
@@ -685,6 +687,16 @@ export default defineComponent({
</script>

<style scoped>
.selected-job {
box-shadow: 0px 8px 10px 0px rgba(0, 0, 0, 0.14), 0px 3px 14px 0px rgba(0, 0, 0, 0.12), 0px 4px 5px 0px rgba(0, 0, 0, 0.20);
scale: 1.03;
margin-block: var(--spacer-sm);
}
ion-card {
transition: .5s all ease;
}
ion-card-header {
display: flex;
flex-direction: row;

0 comments on commit 4a8bcc6

Please sign in to comment.