Skip to content

Commit ce1829b

Browse files
jakubkozerajakubkozera
authored
Feature/Adjust Styles to Master (#4)
1 parent 7165ab9 commit ce1829b

File tree

8 files changed

+84
-45
lines changed

8 files changed

+84
-45
lines changed

‎src/core/css/sidebar-animations.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -103,7 +103,7 @@
103103
}
104104

105105
/* Content shift animations when sidebars open/close */
106-
@media (max-width: 1279px) {
106+
@media (max-width: 1023px) {
107107
/* Ensure smooth content transitions on mobile */
108108
#api-main-content {
109109
transition: filter 0.3s ease;

‎src/core/css/styles.css‎

Lines changed: 43 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
/* Global Inter font application */
44
*:not(.monaco-editor div) {
5-
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif !important;
5+
/* font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif !important; */
66
}
77

88
/* Smooth scrolling for the entire page */
@@ -277,6 +277,34 @@ pre::-webkit-scrollbar-thumb {
277277
border-bottom-left-radius: 0 !important;
278278
}
279279

280+
/* Deprecated endpoint styling */
281+
.deprecated-endpoint {
282+
text-decoration: line-through;
283+
opacity: 0.6;
284+
}
285+
286+
/* Deprecated badge in main content */
287+
.deprecated-badge {
288+
display: inline-flex;
289+
align-items: center;
290+
padding: 0.25rem 0.75rem;
291+
background-color: #fef3c7;
292+
color: #92400e;
293+
border: 1px solid #fcd34d;
294+
border-radius: 0.375rem;
295+
font-size: 0.75rem;
296+
font-weight: 600;
297+
text-transform: uppercase;
298+
letter-spacing: 0.05em;
299+
}
300+
301+
body[data-theme="dark"] .deprecated-badge {
302+
background-color: #78350f;
303+
color: #fef3c7;
304+
border-color: #92400e;
305+
}
306+
307+
280308
/* Make folder names stand out */
281309
.path-segment .font-medium {
282310
padding: 4px 0;
@@ -918,29 +946,33 @@ section[class*="method-border-"] {
918946
display: inline-flex;
919947
align-items: center;
920948
justify-content: center;
921-
padding: 0.125rem 0.5rem;
949+
padding: 0;
922950
margin-left: 0.5rem;
923951
font-size: 0.75rem;
924952
font-weight: 500;
925-
border-radius: 9999px;
926-
background-color: #E5E7EB;
927-
color: #4B5563;
928-
min-width: 1.5rem;
929-
height: 1.5rem;
953+
border-radius: 0;
954+
background-color: transparent;
955+
color: #9CA3AF;
956+
min-width: auto;
957+
height: auto;
930958
white-space: nowrap;
931959
}
932960

933961
.endpoint-count-title {
934962
background-color: #EBF5FF;
935963
color: #3182CE;
964+
padding: 0.125rem 0.5rem;
965+
border-radius: 9999px;
936966
}
937967

938968
/* Sidebar endpoint count badge */
939969
#api-navigation .endpoint-count {
940970
font-size: 0.7rem;
941-
padding: 0.1rem 0.4rem;
942-
background-color: #F3F4F6;
943-
color: #6B7280;
971+
padding: 0;
972+
background-color: transparent;
973+
color: #9CA3AF;
974+
min-width: auto;
975+
height: auto;
944976
}
945977

946978
/* Right panel parameter count badges - smaller and circular */
@@ -1145,12 +1177,11 @@ body[data-theme="dark"] .endpoint-link.text-blue-800 {
11451177

11461178
/* Endpoint count badges dark mode */
11471179
body[data-theme="dark"] #api-navigation .endpoint-count {
1148-
background-color: #4b5563 !important; /* gray-600 */
11491180
color: #d1d5db !important; /* gray-300 */
11501181
}
11511182

11521183
body[data-theme="dark"] .endpoint-count-title {
1153-
background-color: #1e40af !important; /* blue-800 */
1184+
background-color: transparent !important; /* blue-800 */
11541185
color: #dbeafe !important; /* blue-100 */
11551186
}
11561187

‎src/core/js/collectionRunnerUI.js‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1889,7 +1889,7 @@ window.CollectionRunnerUI = class CollectionRunnerUI {
18891889
label.className = "flex items-center w-full justify-between";
18901890
label.innerHTML = `<span class="font-bold">${param.name}${
18911891
param.required ? '<span class="text-red-400 ml-0.5">*</span>' : ""
1892-
}</span> <code class="text-sm text-blue-800 bg-blue-100 px-1 py-0.5 rounded font-mono">${
1892+
}</span> <code class="text-sm text-gray-700 bg-gray-200 px-1 py-0.5 rounded font-mono">${
18931893
window.formatTypeDisplay
18941894
? window.formatTypeDisplay(param.schema)
18951895
: param.schema.type
@@ -1971,7 +1971,7 @@ window.CollectionRunnerUI = class CollectionRunnerUI {
19711971
// Add count to path parameters header
19721972
const pathParamHeader = pathParametersSection.querySelector("h3");
19731973
if (pathParamHeader) {
1974-
pathParamHeader.innerHTML = `Path Parameters <span class="endpoint-count ml-2">${pathParams.length}</span>`;
1974+
pathParamHeader.innerHTML = `Path Parameters`;
19751975
}
19761976

19771977
// Add each path parameter
@@ -2001,7 +2001,7 @@ window.CollectionRunnerUI = class CollectionRunnerUI {
20012001
// Add count to query parameters header
20022002
const queryParamHeader = queryParametersSection.querySelector("h3");
20032003
if (queryParamHeader) {
2004-
queryParamHeader.innerHTML = `Query Parameters <span class="endpoint-count ml-2">${queryParams.length}</span>`;
2004+
queryParamHeader.innerHTML = `Query Parameters`;
20052005
}
20062006

20072007
// Extract existing query parameters from request
@@ -2046,7 +2046,7 @@ window.CollectionRunnerUI = class CollectionRunnerUI {
20462046
// Add count to headers header
20472047
const headersParamHeader = headersSection.querySelector("h3");
20482048
if (headersParamHeader) {
2049-
headersParamHeader.innerHTML = `Headers <span class="endpoint-count ml-2">${headerParams.length}</span>`;
2049+
headersParamHeader.innerHTML = `Headers`;
20502050
}
20512051

20522052
// Add each header parameter
@@ -3488,7 +3488,7 @@ window.CollectionRunnerUI = class CollectionRunnerUI {
34883488
: fieldSchema.type || "string";
34893489
label.innerHTML = `<span class="font-bold">${fieldName}${
34903490
isRequired ? '<span class="text-red-400 ml-0.5">*</span>' : ""
3491-
}</span> <code class="text-sm text-blue-800 bg-blue-100 px-1 py-0.5 rounded font-mono">${typeDisplay}</code>`;
3491+
}</span> <code class="text-sm text-gray-700 bg-gray-200 px-1 py-0.5 rounded font-mono">${typeDisplay}</code>`;
34923492

34933493
// Add description as tooltip if available
34943494
if (fieldSchema.description) {

‎src/core/js/mainContentBuilder.js‎

Lines changed: 19 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,7 @@ function buildSchemaDetails(schema, components) {
7272
if (!resolvedSchema.properties && resolvedSchema.type !== "object") {
7373
// For primitive types, show basic type information
7474
let typeInfo = `<div class="text-sm text-gray-600">
75-
<span class="font-mono bg-blue-100 text-blue-800 px-2 py-1 rounded">${formatTypeDisplay(
75+
<span class="font-mono bg-gray-200 text-gray-700 px-2 py-1 rounded">${formatTypeDisplay(
7676
resolvedSchema
7777
)}</span>`;
7878

@@ -148,17 +148,18 @@ function buildSchemaDetails(schema, components) {
148148
<div class="p-4 border-b border-gray-200 last:border-b-0">
149149
<div class="flex items-start">
150150
<div class="w-1/3">
151-
<span class="text-sm font-medium text-gray-700">${propName}</span>
152-
${
151+
<span class="text-sm font-medium text-gray-700">${propName}${
153152
isRequired
154-
? '<span class="text-xs text-red-500 ml-1">required</span>'
153+
? '<span class="text-red-500 ml-0.5">*</span>'
155154
: ""
156-
} </div> <div class="w-2/3">
157-
<code class="text-sm text-blue-800 bg-blue-100 px-1 py-0.5 rounded font-mono">
155+
}</span>
156+
<code class="text-sm text-gray-700 bg-gray-200 px-1 py-0.5 rounded font-mono ml-2">
158157
${formatTypeDisplay(resolvedPropSchema)}${
159158
resolvedPropSchema?.format ? `(${resolvedPropSchema.format})` : ""
160159
}
161-
</code><br>`;
160+
</code>
161+
</div>
162+
<div class="w-2/3">`;
162163
// Add description
163164
if (resolvedPropSchema?.description) {
164165
schemaHTML += `<span class="text-sm text-gray-700">${resolvedPropSchema.description}</span><br>`;
@@ -396,7 +397,8 @@ function buildMainContent() {
396397
section.id = sectionId;
397398
const methodBorderClass = `method-border-${method.toLowerCase()}`;
398399
const methodShadowClass = `method-shadow-${method.toLowerCase()}`;
399-
section.className = `main-content-section mb-5 p-3 bg-white flex items-start gap-4 border-l-4 ${methodBorderClass} ${methodShadowClass}`;
400+
const deprecatedClass = operation.deprecated ? 'deprecated-section' : '';
401+
section.className = `main-content-section mb-5 p-3 bg-white flex items-start gap-4 border-l-4 ${methodBorderClass} ${methodShadowClass} ${deprecatedClass}`;
400402
endpointsContainer.appendChild(section);
401403

402404
const authSchemes =
@@ -425,6 +427,7 @@ function buildMainContent() {
425427
</button>
426428
427429
<div class="ml-auto flex gap-2 items-center">
430+
${operation.deprecated ? '<span class="deprecated-badge">DEPRECATED</span>' : ''}
428431
<button class="main-try-it-out-btn ${getMethodButtonClass(
429432
method
430433
)} text-sm flex items-center font-bold py-1 px-3 rounded hover:text-white border shadow transition" data-path="${path}" data-method="${method}">
@@ -975,7 +978,7 @@ function buildParametersSection(title, params) {
975978
let sectionHTML = `
976979
<div class="mb-4">
977980
<h3 class="param-section-header text-gray-700 font-semibold mb-2 text-lg">
978-
${title} <span class="endpoint-count ml-2">${params.length}</span>
981+
${title}
979982
</h3>
980983
<div class="bg-gray-50 border border-gray-200 rounded-md param-section-path">
981984
`;
@@ -1024,17 +1027,18 @@ function buildParametersSection(title, params) {
10241027
<div class="w-1/3">
10251028
<span class="text-sm font-medium text-gray-700">${
10261029
param.name
1027-
}</span>
1028-
${
1030+
}${
10291031
param.required
1030-
? '<span class="text-xs text-red-500 ml-1">required</span>'
1032+
? '<span class="text-red-500 ml-0.5">*</span>'
10311033
: ""
1032-
} </div> <div class="w-2/3">
1033-
<code class="text-sm text-blue-800 bg-blue-100 px-1 py-0.5 rounded font-mono">${
1034+
}</span>
1035+
<code class="text-sm text-gray-700 bg-gray-200 px-1 py-0.5 rounded font-mono ml-2">${
10341036
param.schema ? formatTypeDisplay(param.schema) : ""
10351037
}${
10361038
param.schema && param.schema.format ? "(" + param.schema.format + ")" : ""
1037-
}</code><br>
1039+
}</code>
1040+
</div>
1041+
<div class="w-2/3">
10381042
<span class="text-sm text-gray-700">${
10391043
param.description || ""
10401044
}</span>`;

‎src/core/js/rightPanel.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -308,7 +308,7 @@ async function updateRightPanelDynamically(path, method) {
308308
label.className = "flex items-center w-full justify-between";
309309
label.innerHTML = `<span class="font-bold">${param.name}${
310310
param.required ? '<span class="text-red-400 ml-0.5">*</span>' : ""
311-
}</span> <code class="text-sm text-blue-800 bg-blue-100 px-1 py-0.5 rounded font-mono">${
311+
}</span> <code class="text-sm text-gray-700 bg-gray-200 px-1 py-0.5 rounded font-mono">${
312312
window.formatTypeDisplay
313313
? window.formatTypeDisplay(param.schema)
314314
: param.schema.type
@@ -390,7 +390,7 @@ async function updateRightPanelDynamically(path, method) {
390390
const pathParamHeader = document.querySelector(
391391
"#right-panel-path-parameters-section h3"
392392
);
393-
pathParamHeader.innerHTML = `Path Parameters <span class="endpoint-count ml-2">${pathParams.length}</span>`;
393+
pathParamHeader.innerHTML = `Path Parameters`;
394394

395395
// Add path parameters
396396
pathParams.forEach((param) => {
@@ -409,7 +409,7 @@ async function updateRightPanelDynamically(path, method) {
409409
const queryParamHeader = document.querySelector(
410410
"#right-panel-query-parameters-section h3"
411411
);
412-
queryParamHeader.innerHTML = `Query Parameters <span class="endpoint-count ml-2">${queryParams.length}</span>`;
412+
queryParamHeader.innerHTML = `Query Parameters`;
413413

414414
// Add query parameters
415415
queryParams.forEach((param) => {
@@ -531,7 +531,7 @@ async function updateRightPanelDynamically(path, method) {
531531
label.className = "flex items-center w-full justify-between";
532532
label.innerHTML = `<span class="font-bold">${fieldName}${
533533
isRequired ? '<span class="text-red-400 ml-0.5">*</span>' : ""
534-
}</span> <code class="text-sm text-blue-800 bg-blue-100 px-1 py-0.5 rounded font-mono">${
534+
}</span> <code class="text-sm text-gray-700 bg-gray-200 px-1 py-0.5 rounded font-mono">${
535535
window.formatTypeDisplay
536536
? window.formatTypeDisplay(fieldSchema)
537537
: fieldSchema.type

‎src/core/js/sidebarHandler.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -163,6 +163,7 @@ function buildSidebar() {
163163
path,
164164
method,
165165
summary: operation.summary || path,
166+
deprecated: operation.deprecated || false,
166167
});
167168
}
168169
}
@@ -189,9 +190,9 @@ function buildSidebar() {
189190
tagHeader.innerHTML = `
190191
<div class="flex items-center flex-grow">
191192
<span class="ml-1">${tag}</span>
192-
<span class="endpoint-count ml-2">${sectionCount}</span>
193193
</div>
194-
<span class="ml-auto">
194+
<span class="ml-auto flex items-center gap-1">
195+
<span class="endpoint-count">${sectionCount}</span>
195196
<svg class="w-4 h-4 text-gray-400 transform sidebar-arrow" fill="currentColor" viewBox="0 0 20 20">
196197
<path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
197198
</svg>

‎src/core/js/viewModes.js‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -79,7 +79,7 @@ function createEndpointElement(op) {
7979
"endpoint endpoint-link bg-opacity-50 pr-2 pl-0 py-2 text-sm mb-2 cursor-pointer border-l-[3px] border-transparent";
8080
endpointDiv.dataset.path = op.path;
8181
endpointDiv.dataset.method = op.method;
82-
endpointDiv.dataset.tooltip = `${op.method.toUpperCase()} ${op.path}`;
82+
endpointDiv.dataset.tooltip = `${op.method.toUpperCase()} ${op.path}${op.deprecated ? ' [DEPRECATED]' : ''}`;
8383

8484
// Apply the method-specific text color and hover border color
8585
const methodClass = getMethodClass(op.method);
@@ -96,7 +96,7 @@ function createEndpointElement(op) {
9696
? op.method.substring(0, 3).toUpperCase()
9797
: op.method.toUpperCase()
9898
}</span>
99-
<span class="w-[80%] truncate text-left pl-1">${op.summary}</span>
99+
<span class="w-[80%] truncate text-left pl-1 ${op.deprecated ? 'deprecated-endpoint' : ''}">${op.summary}</span>
100100
</div>
101101
`;
102102

@@ -258,7 +258,7 @@ function renderEndpointTree(tree, container, basePath = "") {
258258
endpointEl.dataset.path = op.path;
259259
endpointEl.dataset.method = method;
260260
// Store tooltip data for custom tooltip
261-
endpointEl.dataset.tooltip = `${op.path} ${method.toUpperCase()}`; // Create wrapper div for flexbox layout
261+
endpointEl.dataset.tooltip = `${op.path} ${method.toUpperCase()}${op.deprecated ? ' [DEPRECATED]' : ''}`; // Create wrapper div for flexbox layout
262262
const wrapperDiv = document.createElement("div");
263263
wrapperDiv.className = "flex items-center w-full";
264264

@@ -272,7 +272,7 @@ function renderEndpointTree(tree, container, basePath = "") {
272272

273273
// Add segment name (path) on the right, taking 85% of space
274274
const pathText = document.createElement("span");
275-
pathText.className = "w-[85%] text-left truncate";
275+
pathText.className = `w-[85%] text-left truncate ${op.deprecated ? 'deprecated-endpoint' : ''}`;
276276
pathText.textContent = segment;
277277
wrapperDiv.appendChild(pathText);
278278

@@ -316,7 +316,7 @@ function renderEndpointTree(tree, container, basePath = "") {
316316
endpointEl.dataset.path = op.path;
317317
endpointEl.dataset.method = method;
318318
// Store tooltip data for custom tooltip
319-
endpointEl.dataset.tooltip = `${method.toUpperCase()} ${op.path}`; // Create wrapper div for flexbox layout
319+
endpointEl.dataset.tooltip = `${method.toUpperCase()} ${op.path}${op.deprecated ? ' [DEPRECATED]' : ''}`; // Create wrapper div for flexbox layout
320320
const wrapperDiv = document.createElement("div");
321321
wrapperDiv.className = "flex items-center w-full";
322322

@@ -326,7 +326,7 @@ function renderEndpointTree(tree, container, basePath = "") {
326326

327327
// Add segment name (path) on the right, taking 85% of space
328328
const pathText = document.createElement("span");
329-
pathText.className = "w-[85%] text-left truncate";
329+
pathText.className = `w-[85%] text-left truncate ${op.deprecated ? 'deprecated-endpoint' : ''}`;
330330
pathText.textContent = segment;
331331
wrapperDiv.appendChild(pathText);
332332

‎src/core/swagger.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@
3232
"paths": {
3333
"/users": {
3434
"get": {
35+
"deprecated": true,
3536
"tags": ["Users"],
3637
"summary": "Get a list of users",
3738
"description": "Retrieves a list of all users, with optional filtering and pagination.",
@@ -331,6 +332,7 @@
331332
}
332333
},
333334
"delete": {
335+
"deprecated": true,
334336
"tags": ["Users"],
335337
"summary": "Delete a user",
336338
"description": "Deletes a user from the system by their ID.",
@@ -365,6 +367,7 @@
365367
},
366368
"/products": {
367369
"post": {
370+
"deprecated": true,
368371
"tags": ["Products"],
369372
"summary": "Add a new product",
370373
"description": "Adds a new product to the catalog, demonstrating form-urlencoded request body.",

0 commit comments

Comments
 (0)