rakadu1
/
visualizer
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

style(overview): resize visual map and hide scrollbars 

- Expanded Visual Navigation Map to utilize full width and increased height by 30%.
- Removed visible scrollbar from the Project Files panel.
- Adjusted padding in the file tree view for better alignment.
refactor/sync-centralize
RUSHIL AMBARISH KADU 2 months ago
parent
78fb576da6
commit
c5c7069f74
2 changed files with 19 additions and 9 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 26
      steps/annex/code-base-overview.html
  2. 2
      steps/index.html

26
steps/annex/code-base-overview.html
View File

@ -690,6 +690,16 @@
.dark .file-tree ul li::before { .dark .file-tree ul li::before {
background-color: #475569; background-color: #475569;
} }
/* Hide scrollbar for Chrome, Safari and Opera */
.no-scrollbar::-webkit-scrollbar {
display: none;
}
/* Hide scrollbar for IE, Edge and Firefox */
.no-scrollbar {
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
</style> </style>
<script> <script>
@ -719,7 +729,7 @@
<body class="antialiased pb-20"> <body class="antialiased pb-20">
<!-- Header --> <!-- Header -->
<header class="bg-white/90 backdrop-blur-md sticky top-0 z-50 border-b border-slate-200 shadow-sm py-4"> <header class="bg-white/90 backdrop-blur-md sticky top-0 z-50 border-b border-slate-200 shadow-sm py-4">
<div class="container mx-auto px-4">
<div class="w-full px-6 lg:px-8">
<div class="flex flex-col xl:flex-row items-center justify-between gap-4"> <div class="flex flex-col xl:flex-row items-center justify-between gap-4">
<div class="flex items-center gap-3"> <div class="flex items-center gap-3">
<span class="text-3xl">🛠️</span> <span class="text-3xl">🛠️</span>
@ -757,7 +767,7 @@
</div> </div>
</header> </header>
<div class="container mx-auto px-4 space-y-12 mt-8">
<div class="w-full px-6 lg:px-8 space-y-12 mt-8">
@ -767,18 +777,18 @@
<div class="flex flex-col lg:flex-row gap-8 mb-12 items-start relative"> <div class="flex flex-col lg:flex-row gap-8 mb-12 items-start relative">
<!-- LEFT: INTERACTIVE VISUAL MAP --> <!-- LEFT: INTERACTIVE VISUAL MAP -->
<div id="visual-nav-placeholder" class="flex-grow w-full lg:w-3/4 transition-all duration-500">
<div id="visual-nav-placeholder" class="flex-grow w-full lg:w-auto transition-all duration-500">
<div id="visual-nav-wrapper" class="rounded-xl p-4 md:p-6 mb-8"> <div id="visual-nav-wrapper" class="rounded-xl p-4 md:p-6 mb-8">
<div class="flex justify-between items-center mb-4"> <div class="flex justify-between items-center mb-4">
<h2 class="text-sm font-bold text-slate-400 uppercase tracking-widest m-0">Visual Navigation Map</h2> <h2 class="text-sm font-bold text-slate-400 uppercase tracking-widest m-0">Visual Navigation Map</h2>
<span class="text-xs text-slate-400 italic">Click a UI element to see its code</span> <span class="text-xs text-slate-400 italic">Click a UI element to see its code</span>
</div> </div>
<div id="visual-nav-content" class="max-w-4xl mx-auto">
<div id="visual-nav-content" class="w-full">
<!-- Core Architecture Wrapper --> <!-- Core Architecture Wrapper -->
<div class="core-wrapper" onclick="scrollToSection('architecture')">
<div class="core-wrapper w-full" onclick="scrollToSection('architecture')">
<!-- Main Grid Layout (Matches App Interface) --> <!-- Main Grid Layout (Matches App Interface) -->
<div class="flex gap-4 h-[380px]">
<div class="flex gap-4 h-[625px] w-full">
<!-- Left: App Ecosystem Rectangle --> <!-- Left: App Ecosystem Rectangle -->
<div class="flex-grow flex flex-col gap-4"> <div class="flex-grow flex flex-col gap-4">
@ -877,8 +887,8 @@
</div> </div>
<!-- RIGHT: FILE STRUCTURE PANEL (Disappears on scroll) --> <!-- RIGHT: FILE STRUCTURE PANEL (Disappears on scroll) -->
<div id="file-structure-panel" class="w-full lg:w-1/4 h-full pt-4 transition-opacity duration-300 overflow-y-auto custom-scrollbar" style="max-height: 80vh;">
<div class="bg-white rounded-xl shadow-sm border border-slate-200 p-5 sticky top-0">
<div id="file-structure-panel" class="w-full lg:w-1/5 h-full pt-4 transition-opacity duration-300 overflow-y-auto no-scrollbar" style="max-height: 80vh;">
<div class="bg-white rounded-xl shadow-sm border border-slate-200 p-5 pl-10 sticky top-0">
<h3 class="text-xs font-bold text-slate-400 uppercase tracking-widest mb-4 border-b pb-2 flex justify-between"> <h3 class="text-xs font-bold text-slate-400 uppercase tracking-widest mb-4 border-b pb-2 flex justify-between">
<span>Project Files</span> <span>Project Files</span>
<span class="text-[10px] opacity-60">steps</span> <span class="text-[10px] opacity-60">steps</span>

2
steps/index.html
View File

@ -626,7 +626,7 @@
</div> </div>
</div> </div>
<button id="guide-modal-close-btn" <button id="guide-modal-close-btn"
class="px-6 py-2 rounded-lg bg-green-600 text-white hover:bg-green-700 font-semibold text-lg">Next</button>
class="px-6 py-2 rounded-lg bg-green-600 text-white hover:bg-green-700 font-semibold text-lg">Skip</button>
</div> </div>
<!-- Iframe Content --> <!-- Iframe Content -->

Write Preview
Loading…
Cancel
Save