This commit is contained in:
Juergen Kunz
2025-06-27 21:07:47 +00:00
parent ecad05098f
commit 296d254ba2
2 changed files with 39 additions and 10 deletions

View File

@ -141,7 +141,7 @@ data = await processor.process_data([{'id': 1}, {'id': 2}])
<div class="section">
<div class="section-title">CSS Example</div>
<div class="section-description">Modern CSS with custom properties and animations.</div>
<div class="section-description">Modern CSS with custom properties and animations. Note the shorter language label.</div>
<dees-dataview-codebox proglang="css">
/* Modern CSS with custom properties */
:root {
@ -169,6 +169,29 @@ data = await processor.process_data([{'id': 1}, {'id': 2}])
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
</dees-dataview-codebox>
</div>
<div class="section">
<div class="section-title">JSON Example</div>
<div class="section-description">JSON configuration with proper formatting.</div>
<dees-dataview-codebox proglang="json">
{
"name": "@design.estate/dees-catalog",
"version": "1.10.7",
"description": "A comprehensive catalog of web components",
"main": "dist_ts_web/index.js",
"type": "module",
"scripts": {
"build": "tsbuild tsfolders --allowimplicitany && tsbundle element --production",
"watch": "tswatch element",
"test": "tstest test/ --web --verbose"
},
"dependencies": {
"@design.estate/dees-element": "^2.0.45",
"highlight.js": "^11.9.0"
}
}
</dees-dataview-codebox>
</div>

View File

@ -82,28 +82,34 @@ export class DeesDataviewCodebox extends DeesElement {
}
.bottomBar {
position: relative;
color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
background: ${cssManager.bdTheme('#f9fafb', '#18181b')};
border-top: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
height: 28px;
font-size: 12px;
line-height: 28px;
text-align: right;
padding-right: 100px;
display: flex;
justify-content: flex-end;
align-items: stretch;
overflow: hidden;
}
.spacesLabel {
padding: 0 16px;
display: flex;
align-items: center;
}
.languageLabel {
color: ${cssManager.bdTheme('#3b82f6', '#3b82f6')};
font-size: 12px;
line-height: 28px;
z-index: 10;
background: ${cssManager.bdTheme('rgba(59, 130, 246, 0.1)', 'rgba(59, 130, 246, 0.1)')};
display: inline-block;
position: absolute;
bottom: 0px;
right: 0px;
padding: 0px 16px 0px 8px;
padding: 0px 16px;
font-weight: 500;
display: flex;
align-items: center;
}
.hljs-keyword {
@ -215,7 +221,7 @@ export class DeesDataviewCodebox extends DeesElement {
<pre><code></code></pre>
</div>
<div class="bottomBar">
Spaces: 2
<div class="spacesLabel">Spaces: 2</div>
<div class="languageLabel">${this.progLang}</div>
</div>
</div>