Skip to content

Commit

Permalink
stats css revision
Browse files Browse the repository at this point in the history
  • Loading branch information
@mikeTWC1984
mikeTWC1984 committed Apr 20, 2024
1 parent cde3fcb commit 40554d4
Show file tree
Hide file tree
Showing 3 changed files with 60 additions and 36 deletions.
81 changes: 51 additions & 30 deletions htdocs/css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -815,34 +815,59 @@ td.table_label {

.stats.grid-container {
display: grid;
background-color: var(--box-background-color);
border: 1px solid var(--border-color);
border-right: 0px;
/* grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); */
grid-template-columns: repeat(10, auto);
align-items: center;
gap: 14px;
padding: 4px;
gap: 0px;
padding: 0px;
direction: ltr;
/* background-color: #80808005; */
border-radius: 12px;
/* border-radius: 6px; */

}

.stats.grid-item {
border: 1px solid #ccccccde;
border: 0px;
border-right: 1px solid var(--border-color);
/* border-top: 1px solid var(--border-color); */
/* border-bottom: 1px solid var(--border-color); */
background-color: var(--box-background-color);
/* background-color: #FAFAFA; */
/* transition: border-width 0.3s; */
padding: 4px;
border-radius: 12px;
padding: 6px;
border-radius: 0px;
/* border-top-left-radius: 6px; */
/* border-bottom-left-radius: 6px; */
word-wrap: break-word;
white-space: wrap;
overflow: hidden;
/* white-space: normal; */
direction: ltr;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
/* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); */
/* vertical-align: middle; */
}

/* body.dark .stats.grid-item {
border: 1px solid #cccccc26;
}
body.dark .stats.grid-item {
box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.75);
} */

body.dark .stats.grid-item:hover {
color: #FFF;
background-color: var(--background-color);
}

.stats.grid-item:hover {
/* border: 1px solid #cccccc26; */
background-color: #cccccc26;
}

/* body.dark .stats.grid-item {
background-color: initial;
}
body.dark .stats.grid-item:hover {
Expand All @@ -851,7 +876,7 @@ td.table_label {
}
.stats.grid-item:hover {
background-color: rgba(128,128,128, 0.1);
}
} */

@media (max-width: 1200px) {
.stats.grid-container {
Expand All @@ -864,17 +889,19 @@ td.table_label {
/* grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); */
grid-template-columns: repeat(7, auto);
align-items: center;
gap: 6px;
gap: 0px;
padding: 0px;
padding-bottom: 12px;
/* padding-bottom: 12px; */
margin-top: 12px;
/* background-color: var(--box-background-color); */
background-color: initial;
border: 0px solid var( --border-color);
border-radius: 6px;
margin-bottom: 12px;
background-color: var(--background-color);
border: 1px solid var( --border-color);
border-bottom: 0px;
border-left: 0px;
border-radius: 0px;
}

.job-details.running.grid-container {
.job-details.grid-container.running {
grid-template-columns: repeat(6, auto);
}

Expand All @@ -886,11 +913,12 @@ td.table_label {
display: flex;
align-items: baseline;
justify-content: space-evenly;
border: 1px solid var( --border-color);
background-color: var(--box-background-color);
border-bottom: 1px solid var( --border-color);
border-left: 1px solid var( --border-color);
background-color: var(--background-color);
flex-wrap: wrap;
padding-top: 8px;
border-radius: 6px;
/* border-radius: 6px; */
}

body.dark .job-details.grid-item:hover div.info_value {
Expand All @@ -908,7 +936,7 @@ td.table_label {
overflow: hidden;
/* white-space: normal; */
direction: ltr;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
/* vertical-align: middle; */
}

Expand All @@ -918,12 +946,13 @@ td.table_label {


body.dark .upcoming.schedule.grid-item {
background-color: #44444444
background-color: #44444444
/* color: #fff */
}

.upcoming.schedule.grid-item {
background-color: #fafafa
/* background-color: #fafafa */
background-color: var(--box-background-color);
/* color: #fff */
}

Expand Down Expand Up @@ -960,10 +989,6 @@ td.table_label {
box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.75);
}

body.dark .stats.grid-item {
box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.75);
}

.upcoming.minute.grid-item {
background-color: #b7ffb770
}
Expand Down Expand Up @@ -1012,7 +1037,7 @@ td.table_label {
}

.upcoming.grid-item:hover {
border-color: rgba(46, 38, 12, 0.4);
border-color: rgba(128,128,128,0.5)
/* background-color:rgb(0, 255, 0) */
}

Expand Down Expand Up @@ -1049,10 +1074,6 @@ td.table_label {
border: 1px solid #cccccc26;
}

body.dark .stats.grid-item {
border: 1px solid #cccccc26;
}

.upcoming.grid-title {
/* font-weight: bold; */
font-size: 1.2em;
Expand Down
2 changes: 1 addition & 1 deletion htdocs/js/pages/History.class.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -378,7 +378,7 @@ Class.subclass( Page.Base, "Page.History", {
}

html += `
<div class="job-details running grid-container" style="padding:12px">
<div class="job-details grid-container running" style="margin:8px">
<div class="job-details grid-item"><div class="info_label">EVENT NAME:</div><div class="info_value">${eventTitle}</div></div>
<div class="job-details grid-item"><div class="info_label">CATEGORY:</div><div class="info_value">${this.getNiceCategory(cat, col_width) }</div></div>
<div class="job-details grid-item"><div class="info_label">PLUGIN:</div><div class="info_value">${this.getNicePlugin(plugin, col_width)}</div></div>
Expand Down
13 changes: 8 additions & 5 deletions htdocs/js/pages/JobDetails.class.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -209,7 +209,7 @@ Class.subclass(Page.Base, "Page.JobDetails", {
html += 'Completed Job';

if (event.id && !event.multiplex) html += '<div class="subtitle_widget" style="margin-left:2px;"><span class="link" onMouseUp="$P().run_again()"><i class="fa fa-repeat">&nbsp;</i><b>Run Again</b></span></div>';
if (event.id) html += `<div class="subtitle_widget" style="margin-left:5px;"><a href="#History?sub=event_history&id=${event.id}"><i class="fa fa-arrow-circle-right">&nbsp;</i><b>Jump to History</b></a></div>`;
let jumpToHist = `<div><a href="#History?sub=event_history&id=${event.id}"><i class="fa fa-arrow-circle-right">&nbsp;</i><b>Jump to History</b></a></div>`;
//adding edit button on job detail page
if (event.id) html += '<div class="subtitle_widget" style="margin-left:2px;"><a href="#Schedule?sub=edit_event&id=' + event.id + '" target="_self"><span class="link"><i class="fa fa-edit">&nbsp;</i><b>Edit</b></span></a></div>';
if (app.isAdmin()) html += '<div class="subtitle_widget"><span class="link abort" onMouseUp="$P().delete_job()"><i class="fa fa-trash-o">&nbsp;</i><b>Delete Job</b></span></div>';
Expand Down Expand Up @@ -254,7 +254,7 @@ Class.subclass(Page.Base, "Page.JobDetails", {
<div class="job-details grid-item"><div class="info_label">JOB ID:</div><div class="info_value">${job.id}</div></div>
<div class="job-details grid-item"><div class="info_label">PID:</div><div class="info_value">${(job.detached_pid || job.pid || '(Unknown)')}</div></div>
<div class="job-details grid-item"><div class="info_label">CAT:</div><div class="info_value">${jobCategory}</div></div>
<div class="job-details grid-item"><div class="info_label">SOURCE:</div><div class="info_value">${job.source || 'Scheduler'}</div></div>
<div class="job-details grid-item"><div class="info_label">SOURCE:</div><div title="${timing}" class="info_value">${job.source || 'Scheduler'}</div></div>
<div class="job-details grid-item"><div class="info_label">TARGET:</div><div class="info_value">${jobTarget}</div></div>
<div class="job-details grid-item"><div class="info_label">START:</div><div class="info_value">${jobStarted}</div></div>
<div class="job-details grid-item"><div class="info_label">ELAPSED:</div><div class="info_value">${get_text_from_seconds(job.elapsed, false, false)}</div></div>
Expand All @@ -266,13 +266,16 @@ Class.subclass(Page.Base, "Page.JobDetails", {
<div class="job-details grid-item"><div class="info_label">MEMO:</div><div class="info_value">${job.memo || '(none)'}</div></div>
<div class="job-details grid-item"><div class="info_label">HOST:</div><div class="info_value">${this.getNiceGroup(null, job.hostname, col_width)}</div></div>
<div class="job-details grid-item"><div class="info_label">END:</div><div class="info_value">${get_nice_date_time(job.time_end, false, true)}</div></div>
<div class="job-details grid-item"><div class="info_value ellip" title="${timing}"style="max-width:300px"><i class="fa fa-clock-o" aria-hidden="true"></i> ${timing}</div></div>
<div class="job-details grid-item"><div class="info_value">${jumpToHist }</div></div>
</div>
<div class="clear"></div>
`

// <div class="job-details grid-item"><div class="info_value ellip" title="${timing}"style="max-width:300px"><i class="fa fa-clock-o" aria-hidden="true"></i> ${timing}</div></div>

// pies
html += '<div style="position:relative; margin-top:15px;">';
html += '<div style="position:relative; margin-top:25px;">';

html += '<div class="pie-column column-left">';
html += '<div class="pie-title">Performance Metrics</div>';
Expand Down Expand Up @@ -809,7 +812,7 @@ Class.subclass(Page.Base, "Page.JobDetails", {
}

html += `
<div class="job-details running grid-container">
<div class="job-details grid-container running">
<div class="job-details grid-item"><div class="info_label">JOB ID:</div><div class="info_value">${job.id}</div></div>
<div class="job-details grid-item"><div class="info_label">PID:</div><div id="d_live_pid" class="info_value">${(job.detached_pid || job.pid || '(Unknown)')}</div></div>
<div class="job-details grid-item"><div class="info_label">CAT:</div><div class="info_value">${this.getNiceCategory(cat, col_width)}</div></div>
Expand Down

0 comments on commit 40554d4

Please sign in to comment.