mirror of
https://github.com/elder-plinius/P4RS3LT0NGV3.git
synced 2026-07-25 05:20:49 +02:00
Redesign Transforms tab with side-by-side split layout
- Widen container from 900px to 1200px to use available screen width - Split Transforms tab into two-column grid layout: - Left column (340px, sticky): input textarea + output display - Right column (flex): scrollable transform categories/buttons - Output now appears directly below input on the left, always visible while browsing transforms — no more scrolling past categories to see results - Responsive: collapses back to single column below 900px - Shortened output section labels to be more concise https://claude.ai/code/session_01DjqbQB8WcZoGVe78sjvh72
This commit is contained in:
Claude
+66
-7
@@ -509,7 +509,7 @@ label small {
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 900px;
|
||||
max-width: 1200px;
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
padding: 24px;
|
||||
@@ -2856,7 +2856,57 @@ html {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Keep the transform input visible while scrolling */
|
||||
/* === Two-column split layout for Transforms tab === */
|
||||
.transform-split-layout {
|
||||
display: grid;
|
||||
grid-template-columns: 340px 1fr;
|
||||
gap: 20px;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.transform-left-col {
|
||||
position: sticky;
|
||||
top: 12px;
|
||||
z-index: 20;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
max-height: calc(100vh - 40px);
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.transform-left-col .input-section {
|
||||
background: var(--secondary-bg);
|
||||
border: 1px solid var(--input-border);
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
|
||||
border-radius: 6px;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.transform-left-col .input-section textarea {
|
||||
min-height: 100px;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
.transform-left-col .output-section {
|
||||
margin-top: 0;
|
||||
padding: 12px;
|
||||
border-radius: 6px;
|
||||
background: var(--main-bg-color);
|
||||
border: 1px solid rgba(100, 181, 246, 0.3);
|
||||
}
|
||||
|
||||
.transform-left-col .output-section textarea {
|
||||
min-height: 80px;
|
||||
max-height: 40vh;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
.transform-right-col {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
/* Keep the transform input visible while scrolling (single-column fallback) */
|
||||
.transform-layout .input-section {
|
||||
position: sticky;
|
||||
top: 8px;
|
||||
@@ -3411,12 +3461,21 @@ html {
|
||||
|
||||
/* Medium screens (900px) */
|
||||
@media (max-width: 900px) {
|
||||
.steg-split-layout {
|
||||
grid-template-columns: 1fr;
|
||||
.steg-split-layout {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.steg-advanced-sidebar {
|
||||
position: relative;
|
||||
top: 0;
|
||||
.steg-advanced-sidebar {
|
||||
position: relative;
|
||||
top: 0;
|
||||
}
|
||||
.transform-split-layout {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.transform-left-col {
|
||||
position: relative;
|
||||
top: 0;
|
||||
max-height: none;
|
||||
overflow-y: visible;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
+36
-30
@@ -1,14 +1,42 @@
|
||||
<div v-if="activeTab === 'transforms'" class="tab-content">
|
||||
<div class="transform-layout">
|
||||
<div class="input-section">
|
||||
<textarea
|
||||
id="transform-input"
|
||||
v-model="transformInput"
|
||||
placeholder="Enter text to transform..."
|
||||
@input="autoTransform"
|
||||
></textarea>
|
||||
<div class="transform-layout transform-split-layout">
|
||||
<!-- LEFT COLUMN: Input + Output (sticky) -->
|
||||
<div class="transform-left-col">
|
||||
<div class="input-section">
|
||||
<textarea
|
||||
id="transform-input"
|
||||
v-model="transformInput"
|
||||
placeholder="Enter text to transform..."
|
||||
@input="autoTransform"
|
||||
></textarea>
|
||||
</div>
|
||||
|
||||
<div class="output-section" v-if="transformOutput">
|
||||
<div class="output-heading">
|
||||
<h4>
|
||||
<i class="fas fa-check-circle"></i>
|
||||
Transformed
|
||||
<small v-if="activeTransform">({{ activeTransform.name }})</small>
|
||||
</h4>
|
||||
</div>
|
||||
<div class="output-container">
|
||||
<textarea
|
||||
readonly
|
||||
v-model="transformOutput"
|
||||
aria-label="Transformed text output"
|
||||
></textarea>
|
||||
<button class="copy-button" @click="copyToClipboard(transformOutput)" title="Copy to clipboard">
|
||||
<i class="fas fa-copy"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="output-instructions">
|
||||
<small><i class="fas fa-info-circle"></i> Auto-copied. Use Decoder tab to reverse.</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- RIGHT COLUMN: Transform categories (scrollable) -->
|
||||
<div class="transform-right-col">
|
||||
<div class="transform-section">
|
||||
<div class="transform-category-legend">
|
||||
<div class="legend-title">Categories:</div>
|
||||
@@ -275,28 +303,6 @@
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="output-section" v-if="transformOutput">
|
||||
<div class="output-heading">
|
||||
<h4>
|
||||
<i class="fas fa-check-circle"></i>
|
||||
Transformed Message
|
||||
<small v-if="activeTransform">({{ activeTransform.name }})</small>
|
||||
</h4>
|
||||
</div>
|
||||
<div class="output-container">
|
||||
<textarea
|
||||
readonly
|
||||
v-model="transformOutput"
|
||||
aria-label="Transformed text output"
|
||||
></textarea>
|
||||
<button class="copy-button" @click="copyToClipboard(transformOutput)" title="Copy to clipboard">
|
||||
<i class="fas fa-copy"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="output-instructions">
|
||||
<small><i class="fas fa-info-circle"></i> Copy this text and share it. Use the Decoder tab to reverse transformations.</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
Reference in New Issue
Block a user