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">
<div class="section-title">CSS Example</div> <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"> <dees-dataview-codebox proglang="css">
/* Modern CSS with custom properties */ /* Modern CSS with custom properties */
:root { :root {
@ -169,6 +169,29 @@ data = await processor.process_data([{'id': 1}, {'id': 2}])
@keyframes fadeIn { @keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); } from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); } 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> </dees-dataview-codebox>
</div> </div>

View File

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