Skip to content

feat(changelog):add changelog widget version comaprison #614

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
vivekv1504 wants to merge 1 commit into
base: next
Choose a base branch
from
Open

feat(changelog):add changelog widget version comaprison #614

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
203 changes: 194 additions & 9 deletions docs/changelog/assets/css/app.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,32 @@
/*
* CSS Variables for consistent theming
*
* Usage in CSS: background-color: var(--color-webex-blue);
* Usage in JS: element.style.backgroundColor = 'var(--color-success)';
*
* Available variables:
* --color-success: Success state (green)
* --color-success-hover: Success hover state
* --color-danger: Error/danger state (red)
* --color-danger-hover: Danger hover state
* --color-error-bg: Error message background (light red)
* --color-error-text: Error message text color
* --color-webex-blue: Primary brand color
* --color-webex-blue-hover: Primary brand hover color
* --color-background: Page background color (light gray)
*/
:root {
--color-success: #28a745;
--color-success-hover: #218838;
--color-danger: #dc3545;
--color-danger-hover: #c82333;
--color-error-bg: #fee;
--color-error-text: #721c24;
--color-webex-blue: #00bceb;
--color-webex-blue-hover: #0099ba;
--color-background: #f5f5f5;
}

* {
box-sizing: border-box;
}
Expand All @@ -15,7 +44,7 @@

body {
font-family: 'Roboto', sans-serif;
background-color: #f5f5f5;
background-color: var(--color-background);
margin: 0;
display: flex;
flex-direction: column;
Expand All @@ -29,7 +58,7 @@ body {
#header {
position: sticky;
top: 0;
background-color: #00bceb; /* Webex blue */
background-color: var(--color-webex-blue);
color: white;
padding: 20px;
margin: 0;
Expand All @@ -45,14 +74,14 @@ body {
}

#footer {
background-color: #f5f5f5;
background-color: var(--color-background);
text-align: center;
padding: 10px;
box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.2);
}

#footer a {
color: #00bceb; /* Webex blue */
color: var(--color-webex-blue);
text-decoration: none;
font-weight: bold;
}
Expand Down Expand Up @@ -84,7 +113,7 @@ select {
}

button {
background-color: #00bceb; /* Webex blue */
background-color: var(--color-webex-blue);
color: white;
padding: 10px 20px;
border: none;
Expand All @@ -95,7 +124,7 @@ button {
}

button:hover {
background-color: #0099ba; /* Darker Webex blue */
background-color: var(--color-webex-blue-hover);
}

table {
Expand All @@ -113,7 +142,7 @@ th, td {
}

th {
background-color: #f5f5f5;
background-color: var(--color-background);
}

.search-container {
Expand Down Expand Up @@ -264,19 +293,175 @@ footer .copyright {

.alert-info {
background-color: #f0f9ff;
border-left: 6px solid #00bceb;
border-left: 6px solid var(--color-webex-blue);
color: #333;
padding: 10px;
margin-bottom: 20px;
}

.alert-info p.note {
font-weight: bold;
color: #00bceb;
color: var(--color-webex-blue);
}

.alert-info p.warning {
font-weight: bold;
color: #ff7f0e;
display: inline;
}

/* ============================================
VERSION COMPARISON STYLES
============================================ */

/* Mode Toggle Buttons */
.mode-toggle {
display: flex;
gap: 10px;
margin-bottom: 20px;
}

.mode-toggle button {
flex: 1;
padding: 12px 20px;
border: 2px solid var(--color-webex-blue);
background-color: white;
color: var(--color-webex-blue);
cursor: pointer;
transition: all 0.3s;
border-radius: 4px;
font-weight: 500;
}

.mode-toggle button:hover {
background-color: #e6f7fb;
}

.mode-toggle button.active {
background-color: var(--color-webex-blue);
color: white;
}

/* Hide utility class */
.hide {
display: none !important;
}

/* Comparison Form */
#comparison-form {
margin-top: 20px;
}

/* Comparison Results Table */
#comparison-results .table-wrapper {
max-height: 500px;
overflow-y: auto;
overflow-x: auto;
border: 1px solid #ddd;
border-radius: 4px;
margin-top: 10px;
position: relative;
}

.comparison-table {
width: 100%;
border-collapse: collapse;
margin-top: 0;
font-size: 14px;
}

.comparison-table th,
.comparison-table td {
padding: 12px;
text-align: left;
border: 1px solid #ddd;
}

.comparison-table th {
background-color: var(--color-webex-blue);
color: white;
font-weight: bold;
position: sticky;
top: 0;
z-index: 10;
}

.comparison-table tbody tr {
transition: background-color 0.2s;
}

.comparison-table tbody tr:hover {
background-color: var(--color-background) !important;
}

/* Color Coding for Changes */
.comparison-table tr.version-changed {
background-color: #fff3cd; /* Yellow - version changed */
border-left: 4px solid #ffc107;
}

.comparison-table tr.only-in-a {
background-color: #f8d7da; /* Red - removed in B */
border-left: 4px solid #dc3545;
}

.comparison-table tr.only-in-b {
background-color: #d4edda; /* Green - added in B */
border-left: 4px solid #28a745;
}

.comparison-table tr.unchanged {
background-color: #ffffff; /* White - no change */
}

/* Comparison Summary */
.comparison-summary {
background: linear-gradient(135deg, #e7f3ff 0%, #f0f9ff 100%);
padding: 25px;
border-radius: 8px;
margin-bottom: 20px;
border-left: 5px solid var(--color-webex-blue);
}

.comparison-summary h3 {
margin-top: 0;
margin-bottom: 15px;
color: var(--color-webex-blue);
font-size: 1.5em;
}

.summary-stats {
display: flex;
flex-wrap: wrap;
gap: 15px;
margin-top: 15px;
}

.stat-item {
padding: 10px 20px;
background-color: white;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
font-size: 14px;
}

.stat-item.changed {
border-left: 4px solid #ffc107;
}

.stat-item.unchanged {
border-left: 4px solid #6c757d;
}

.stat-item.added {
border-left: 4px solid #28a745;
}

.stat-item.removed {
border-left: 4px solid #dc3545;
}

.stat-item strong {
font-size: 1.2em;
color: #333;
}
Loading