Skip to content

Commit

Permalink
optimize mobile look
Browse files Browse the repository at this point in the history
  • Loading branch information
@jan4kretschmer
jan4kretschmer committed May 21, 2024
1 parent 5749270 commit 89b2856
Show file tree
Hide file tree
Showing 3 changed files with 72 additions and 22 deletions.
66 changes: 45 additions & 21 deletions docs/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,30 +11,24 @@
<body class="min-h-screen bg-gray-100 text-gray-900">
<header class="flex border-b py-4 px-4 sm:px-10 bg-white font-sans min-h-[70px] tracking-wide sticky top-0 z-50">
<div class="flex flex-wrap items-center gap-5 w-full">
<a href="javascript:void(0)">
<a href="#">
<img src="https://avatars.githubusercontent.com/u/71889336?v=4" alt="logo" class="w-12 h-12 rounded-full" />
</a>
<div id="collapseMenu" class="lg:!block w-full lg:w-auto">
<button id="toggleClose" class="lg:hidden fixed top-2 right-4 z-[100] rounded-full bg-white p-3">
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 fill-black" viewBox="0 0 320.591 320.591">
<path d="M30.391 318.583a30.37 30.37 0 0 1-21.56-7.288c-11.774-11.844-11.774-30.973 0-42.817L266.643 10.665c12.246-11.459 31.462-10.822 42.921 1.424 10.362 11.074 10.966 28.095 1.414 39.875L51.647 311.295a30.366 30.366 0 0 1-21.256 7.288z" data-original="#000000"></path>
<path d="M287.9 318.583a30.37 30.37 0 0 1-21.257-8.806L8.83 51.963C-2.078 39.225-.595 20.055 12.143 9.146c11.369-9.736 28.136-9.736 39.504 0l259.331 257.813c12.243 11.462 12.876 30.679 1.414 42.922-.456.487-.927.958-1.414 1.414a30.368 30.368 0 0 1-23.078 7.288z" data-original="#000000"></path>
</svg>
</button>
<ul class="lg:flex lg:ml-14 lg:gap-x-5 max-lg:space-y-3 lg:space-y-0 max-lg:fixed max-lg:bg-white max-lg:w-1/2 max-lg:min-w-[300px] max-lg:top-0 max-lg:left-0 max-lg:p-6 max-lg:h-full max-lg:shadow-md max-lg:overflow-auto z-50">
<li class="max-lg:border-b max-lg:py-3 px-3">
<div id="collapseMenu" class="lg:!block w-full lg:w-auto hidden lg:block">
<ul class="lg:flex lg:ml-14 lg:gap-x-5">
<li>
<button onclick="addValues()" class="lg:hover:text-[#007bff] text-[#007bff] block font-semibold text-[15px]">Add Values</button>
</li>
<li class="max-lg:border-b max-lg:py-3 px-3">
<li>
<button onclick="deleteValue()" class="lg:hover:text-[#007bff] text-gray-500 block font-semibold text-[15px]">Delete Value</button>
</li>
<li class="max-lg:border-b max-lg:py-3 px-3">
<li>
<button onclick="searchValue()" class="lg:hover:text-[#007bff] text-gray-500 block font-semibold text-[15px]">Search Value</button>
</li>
<li class="max-lg:border-b max-lg:py-3 px-3">
<li>
<button onclick="resetTree()" class="lg:hover:text-[#007bff] text-gray-500 block font-semibold text-[15px]">Reset Tree</button>
</li>
<li class="max-lg:border-b max-lg:py-3 px-3">
<li>
<button onclick="undoLastOperation()" class="lg:hover:text-[#007bff] text-gray-500 block font-semibold text-[15px]">Undo Last Operation</button>
</li>
</ul>
Expand All @@ -47,7 +41,7 @@
</div>
</header>
<div class="container mx-auto p-4 lg:flex lg:space-x-4">
<div class="lg:w-1/4 mb-4 lg:mb-0 p-4 border border-gray-300 rounded">
<div class="lg:w-1/4 mb-4 lg:mb-0 p-4 border border-gray-300 rounded hidden lg:block">
<h2 class="text-xl font-bold mb-2">Rotations</h2>
<ul class="list-disc pl-5">
<li>Left Rotations: <span id="left-rotations">0</span></li>
Expand All @@ -67,30 +61,60 @@ <h2 class="text-xl font-bold mb-2 mt-4">Tree Stats</h2>
</ul>
</div>
<div class="flex-1">
<div class="flex justify-center mb-4">
<div class="flex justify-center mb-4 sticky top-[70px] bg-gray-100 z-10 p-4">
<input id="valueInput" type="text" placeholder="Enter values..." class="p-2 border border-gray-300 rounded w-full max-w-md">
</div>
<div id="tree-container" class="border border-gray-300 rounded p-4 mb-4" style="height: 400px;"></div>
<div class="mb-4">
<textarea id="resultBox" rows="5" class="w-full p-2 border border-gray-300 rounded" readonly></textarea>
</div>
<div class="lg:hidden mb-4 p-4 border border-gray-300 rounded">
<h2 class="text-xl font-bold mb-2">Rotations</h2>
<ul class="list-disc pl-5">
<li>Left Rotations: <span id="left-rotations">0</span></li>
<li>Right Rotations: <span id="right-rotations">0</span></li>
<li>Left-Right Rotations: <span id="left-right-rotations">0</span></li>
<li>Right-Left Rotations: <span id="right-left-rotations">0</span></li>
</ul>
<h2 class="text-xl font-bold mb-2 mt-4">Metrics</h2>
<ul class="list-disc pl-5">
<li>Comparisons: <span id="comparisons">0</span></li>
<li>Operation Time (ms): <span id="operation-time">0.00</span></li>
</ul>
<h2 class="text-xl font-bold mb-2 mt-4">Tree Stats</h2>
<ul class="list-disc pl-5">
<li>Tree Depth: <span id="tree-depth">0</span></li>
<li>Tree Complexity: <span id="tree-complexity">0</span></li>
</ul>
</div>
</div>
<div class="lg:w-1/4 p-4 border border-gray-300 rounded overflow-y-auto" style="max-height: 600px;">
<h2 class="text-xl font-bold mb-2">History</h2>
<ul id="history-list" class="space-y-2"></ul>
</div>
</div>
<script src="https://kit.fontawesome.com/a076d05399.js" defer></script>
<!-- Breadcrumb Navigation for Mobile -->
<div class="fixed bottom-4 right-4 lg:hidden">
<div id="breadcrumb-buttons" class="flex flex-col space-y-2 mb-2">
<button onclick="addValues()" class="px-4 py-2 font-bold text-white bg-blue-500 hover:bg-blue-600 rounded shadow-md">Add</button>
<button onclick="deleteValue()" class="px-4 py-2 font-bold text-white bg-blue-500 hover:bg-blue-600 rounded shadow-md">Delete</button>
<button onclick="searchValue()" class="px-4 py-2 font-bold text-white bg-blue-500 hover:bg-blue-600 rounded shadow-md">Search</button>
<button onclick="undoLastOperation()" class="px-4 py-2 font-bold text-white bg-blue-500 hover:bg-blue-600 rounded shadow-md">Undo</button>
<button onclick="resetTree()" class="px-4 py-2 font-bold text-white bg-red-500 hover:bg-red-600 rounded shadow-md">Reset Tree</button>
</div>
<button id="toggleBreadcrumb" class="w-12 h-12 bg-blue-500 text-white rounded-full flex items-center justify-center shadow-md">
<i class="fas fa-bars"></i>
</button>
</div>
<!-- Updated to use Cloudflare CDN for Font Awesome -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/js/all.min.js" defer></script>
<script src="https://d3js.org/d3.v6.min.js" defer></script>
<script src="script.js" defer></script>
</body>
<footer class="fixed bottom-4 left-4 flex items-center space-x-2">
<footer class="fixed bottom-4 left-4 flex items-center space-x-2 lg:hidden">
<a href="https://github.com/VileEnd/avlTreeExam" target="_blank">
<img src="github-mark.png" alt="GitHub" class="w-8 h-8 opacity-70">
</a>
<span>Made by <a href="https://github.com/VileEnd/avlTreeExam" target="_blank" class="text-blue-500 font-bold">Vileend</a></span>
</footer>
<div class="fixed bottom-4 right-4">
<button onclick="resetTree()" class="px-4 py-2 font-bold text-white bg-red-500 hover:bg-red-600 rounded shadow-md">Reset</button>
</div>
</html>
17 changes: 16 additions & 1 deletion docs/script.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -605,12 +605,27 @@ function handleClick() {
}

toggleOpen.addEventListener('click', handleClick);
toggleClose.addEventListener('click', handleClick);
window.onresize = () => {
updateDimensions();
renderTree();
};

document.getElementById('valueInput').addEventListener('keypress', function (e) {
if (e.key === 'Enter') {
e.preventDefault();
addValues();
}
});

document.getElementById('toggleBreadcrumb').addEventListener('click', function () {
const buttons = document.getElementById('breadcrumb-buttons');
if (buttons.classList.contains('hidden')) {
buttons.classList.remove('hidden');
} else {
buttons.classList.add('hidden');
}
});

function updateTreeStats() {
const treeDepth = tree.getDepth();
const treeComplexity = tree.getComplexity();
Expand Down
11 changes: 11 additions & 0 deletions docs/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,13 @@ textarea:focus {
box-shadow: 0 0 0 2px rgba(49, 130, 206, 0.5);
}

input:focus {
position: sticky;
top: 70px;
z-index: 10;
background-color: #f9fafb;
}

@media (max-width: 1024px) {
.lg\:w-1\/4 {
width: 100%;
Expand All @@ -49,4 +56,8 @@ textarea:focus {
.lg\:space-x-4 {
margin-top: 10px;
}

header ul {
display: none;
}
}

0 comments on commit 89b2856

Please sign in to comment.