Skip to content

Commit

Permalink
fix layout
Browse files Browse the repository at this point in the history
  • Loading branch information
@zhuohaoyu
zhuohaoyu committed Aug 1, 2024
1 parent 3f0dba8 commit 86aa9fb
Show file tree
Hide file tree
Showing 2 changed files with 128 additions and 71 deletions.
112 changes: 64 additions & 48 deletions visualizer/app/templates/base.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,58 +15,42 @@

<body class="bg-gray-50 dark:bg-gray-900">
<nav class="fixed top-0 z-50 w-full bg-white border-b border-gray-200 dark:bg-gray-800 dark:border-gray-700">
<div class="px-3 py-3 lg:px-5 lg:pl-3">
<div class="flex items-center justify-between">
<div class="flex items-center justify-start">
<button data-drawer-target="logo-sidebar" data-drawer-toggle="logo-sidebar"
aria-controls="logo-sidebar" type="button"
class="inline-flex items-center p-2 text-sm text-gray-500 rounded-lg sm:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600">
<span class="sr-only">Open sidebar</span>
<svg class="w-6 h-6" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg">
<path clip-rule="evenodd" fill-rule="evenodd"
d="M2 4.75A.75.75 0 012.75 4h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 4.75zm0 10.5a.75.75 0 01.75-.75h7.5a.75.75 0 010 1.5h-7.5a.75.75 0 01-.75-.75zM2 10a.75.75 0 01.75-.75h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 10z">
</path>
<div class="px-3 py-3 lg:px-5 lg:pl-3">
<div class="flex items-center justify-between">
<div class="flex items-center justify-start">
<button data-drawer-target="logo-sidebar" data-drawer-toggle="logo-sidebar" aria-controls="logo-sidebar" type="button" class="inline-flex items-center p-2 text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600">
<span class="sr-only">Open sidebar</span>
<svg class="w-6 h-6" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path clip-rule="evenodd" fill-rule="evenodd" d="M2 4.75A.75.75 0 012.75 4h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 4.75zm0 10.5a.75.75 0 01.75-.75h7.5a.75.75 0 010 1.5h-7.5a.75.75 0 01-.75-.75zM2 10a.75.75 0 01.75-.75h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 10z"></path>
</svg>
</button>
<a href="{{ url_for('main.dashboard') }}" class="flex ml-2 md:mr-24">
<img src="{{ url_for('static', filename='png/freeeval-logo.png') }}" class="h-8 mr-3" alt="FreeEval Logo" />
<span class="self-center text-xl font-semibold sm:text-2xl whitespace-nowrap dark:text-white">FreeEval Visualizer</span>
</a>
</div>
<div class="flex items-center">
<form id="navbar-search-form" class="flex items-center">
<label for="navbar-search" class="sr-only">Search</label>
<div class="relative">
<div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
<svg aria-hidden="true" class="w-5 h-5 text-gray-500 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd"></path>
</svg>
</div>
<input type="text" id="navbar-search" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full pl-10 p-2 pr-20 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="Search Cases..." required>
</div>
<button type="submit" class="p-2 ml-2 text-sm font-medium text-white bg-blue-700 rounded-lg border border-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
</svg>
<span class="sr-only">Search</span>
</button>
<a href="{{ url_for('main.dashboard') }}" class="flex ml-2 md:mr-24">
<img src="{{ url_for('static', filename='png/freeeval-logo.png') }}" class="h-8 mr-3" alt="FlowBite Logo" />
<span
class="self-center text-xl font-semibold sm:text-2xl whitespace-nowrap dark:text-white">FreeEval
Visualizer</span>
</a>
</div>
<div class="flex items-center">
<form id="navbar-search-form" class="flex items-center">
<label for="navbar-search" class="sr-only">Search</label>
<div class="relative w-full">
<div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
<svg aria-hidden="true" class="w-5 h-5 text-gray-500 dark:text-gray-400"
fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd"
d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
clip-rule="evenodd"></path>
</svg>
</div>
<input type="text" id="navbar-search"
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full pl-10 p-2 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
placeholder="Search Cases..." required style="width: 200px;">
</div>
<button type="submit"
class="p-2 ml-2 text-sm font-medium text-white bg-blue-700 rounded-lg border border-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
</svg>
<span class="sr-only">Search</span>
</button>
</form>
</form>
</div>
</form>
</div>
</div>
</nav>
</div>
</nav>

<aside id="logo-sidebar"
class="fixed top-0 left-0 z-40 w-64 h-screen pt-20 transition-transform -translate-x-full bg-white border-r border-gray-200 sm:translate-x-0 dark:bg-gray-800 dark:border-gray-700"
Expand Down Expand Up @@ -143,6 +127,38 @@

<script src="https://cdnjs.cloudflare.com/ajax/libs/flowbite/1.6.5/flowbite.min.js"></script>
<script src="{{ url_for('static', filename='js/main.js') }}"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
const searchInput = document.getElementById('navbar-search');
const expandedWidth = '250px';
const collapsedWidth = '150px';

searchInput.addEventListener('focus', function() {
this.style.width = expandedWidth;
});

searchInput.addEventListener('blur', function() {
if (this.value === '') {
this.style.width = collapsedWidth;
}
});

// Check screen size and adjust search bar accordingly
function adjustSearchBar() {
if (window.innerWidth >= 768) { // md breakpoint
searchInput.style.width = 'auto';
} else {
searchInput.style.width = collapsedWidth;
}
}

// Initial adjustment
adjustSearchBar();

// Adjust on window resize
window.addEventListener('resize', adjustSearchBar);
});
</script>
</body>

</html>
87 changes: 64 additions & 23 deletions visualizer/app/templates/case_annotation.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
{% block title %}Case Annotation - FreeEval Visualizer{% endblock %}

{% block content %}
<div class="mx-auto p-5 bg-white rounded-lg shadow dark:bg-gray-800 mb-20">
<div class="mx-auto p-5 bg-white rounded-lg shadow dark:bg-gray-800 mb-24">
<h1 class="text-3xl font-bold text-gray-900 dark:text-white mb-4">Case Annotation</h1>
{% for key, value in case_data.items() %}
{% if not (settings.hide_scores and key in ['evaluation_result', 'evaluator_output']) %}
Expand All @@ -15,30 +15,71 @@ <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">{{ key }}</
{% endfor %}
</div>

<div id="annotation-controls" class="fixed bottom-0 left-0 right-0 bg-white dark:bg-gray-800 p-4 shadow-lg" data-session-name="{{ session_name }}" data-case-uuid="{{ case_data.uuid }}" data-is-swapped="{{ is_swapped }}">
<div class="container mx-auto flex justify-center items-center">
{% if settings.evaluation_type == 'pairwise' %}
{% for option in settings.options %}
<button class="annotation-option text-white bg-blue-700 hover:bg-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-300 font-medium rounded-full text-sm px-5 py-2.5 text-center me-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800" data-option="{{ option }}">{{ option }}</button>
{% endfor %}
{% elif settings.evaluation_type == 'scoring' %}
{% if settings.scoring_type == 'discrete' %}
{% for score in settings.allowed_scores %}
<button class="annotation-option text-white bg-blue-700 hover:bg-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-300 font-medium rounded-full text-sm px-5 py-2.5 text-center me-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">{{ score }}</button>
<div id="annotation-controls" class="fixed bottom-0 left-0 right-0 bg-white dark:bg-gray-800 p-4 shadow-lg z-50" data-session-name="{{ session_name }}" data-case-uuid="{{ case_data.uuid }}" data-is-swapped="{{ is_swapped }}">
<div class="container mx-auto px-4">
<div class="flex flex-wrap justify-center items-center -mx-2">
{% if settings.evaluation_type == 'pairwise' %}
{% for option in settings.options %}
<div class="px-2 mb-2">
<button class="annotation-option text-white bg-blue-700 hover:bg-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-300 font-medium rounded-full text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800" data-option="{{ option }}">{{ option }}</button>
</div>
{% endfor %}
{% else %}
<input type="number" id="score-input" min="{{ settings.min_score }}" max="{{ settings.max_score }}" class="border rounded-full px-4 py-2 mr-2">
<button id="submit-score" class="text-white bg-blue-700 hover:bg-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-300 font-medium rounded-full text-sm px-5 py-2.5 text-center me-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Submit Score</button>
{% elif settings.evaluation_type == 'scoring' %}
{% if settings.scoring_type == 'discrete' %}
{% for score in settings.allowed_scores %}
<div class="px-2 mb-2">
<button class="annotation-option text-white bg-blue-700 hover:bg-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-300 font-medium rounded-full text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">{{ score }}</button>
</div>
{% endfor %}
{% else %}
<div class="px-2 mb-2 flex items-center">
<input type="number" id="score-input" min="{{ settings.min_score }}" max="{{ settings.max_score }}" class="border rounded-full px-4 py-2 mr-2 w-20">
<button id="submit-score" class="text-white bg-blue-700 hover:bg-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-300 font-medium rounded-full text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Submit Score</button>
</div>
{% endif %}
{% endif %}
{% endif %}

<!-- Next button -->
<a href="{{ url_for('main.case_annotation', session_name=session_name, uuid=next_uuid) }}" class="text-white bg-green-500 hover:bg-green-600 focus:outline-none focus:ring-4 focus:ring-green-300 font-medium rounded-full text-sm px-5 py-2.5 text-center ml-4 dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800">
Next Case
<svg class="w-4 h-4 inline-block ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
</svg>
</a>

<!-- Next button -->
<div class="px-2 mb-2">
<a href="{{ url_for('main.case_annotation', session_name=session_name, uuid=next_uuid) }}" class="inline-block text-white bg-green-500 hover:bg-green-600 focus:outline-none focus:ring-4 focus:ring-green-300 font-medium rounded-full text-sm px-5 py-2.5 text-center dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800">
Next Case
<svg class="w-4 h-4 inline-block ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
</svg>
</a>
</div>
</div>
</div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
const sidebar = document.getElementById('logo-sidebar');
const annotationControls = document.getElementById('annotation-controls');
const navbar = document.querySelector('nav');

function adjustAnnotationControls() {
const sidebarWidth = sidebar.offsetWidth;
const navbarHeight = navbar.offsetHeight;
annotationControls.style.left = `${sidebarWidth}px`;
annotationControls.style.width = `calc(100% - ${sidebarWidth}px)`;
annotationControls.style.bottom = '0px';

// Ensure the controls are not covered by the navbar
const controlsHeight = annotationControls.offsetHeight;
document.body.style.paddingBottom = `${controlsHeight + 20}px`; // Add some extra padding

// Adjust max-height to ensure visibility
const maxHeight = window.innerHeight - navbarHeight - 20; // 20px buffer
annotationControls.style.maxHeight = `${maxHeight}px`;
annotationControls.style.overflowY = 'auto';
}

// Initial adjustment
adjustAnnotationControls();

// Adjust on window resize
window.addEventListener('resize', adjustAnnotationControls);
});
</script>
{% endblock %}

0 comments on commit 86aa9fb

Please sign in to comment.