Skip to content

Commit 9c634b0

Browse files
pablomc88pablomc88
authored
Merge pull request #82 from necolab-ugr/webui-branch
fix: Template inheritance, navigation buttons, links and button design
2 parents 52a9caf + f8cb286 commit 9c634b0

File tree

5 files changed

+49
-21
lines changed

5 files changed

+49
-21
lines changed

‎webui/templates/2.1.field_potential_kernel.html‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -508,9 +508,10 @@ <h1 class="text-slate-900 dark:text-white text-4xl font-black leading-tight trac
508508
</template>
509509
<template x-if="activeTab !== 'create_kernel'">
510510
<button
511-
@click="if (activeTab === 'cdm_computation') { activeTab = 'create_kernel' } else if (activeTab === 'meeg') { activeTab = 'cdm_computation' }"
512-
class="px-5 py-2.5 text-sm font-semibold text-text-light-secondary dark:text-white/80 bg-transparent rounded-lg hover:bg-gray-100 dark:hover:bg-white/10 border border-border-light dark:border-white/20">Back
513-
step</button>
511+
@click="if (activeTab === 'cdm_computation') { activeTab = 'create_kernel' } else if (activeTab === 'meeg') { activeTab = 'create_kernel' }"
512+
class="flex items-center justify-center gap-2 h-12 px-6 w-full sm:w-auto text-primary dark:text-white font-bold text-base rounded-lg hover:bg-primary/10 dark:hover:bg-white/10 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary/50 dark:focus:ring-offset-background-dark transition-colors border border-primary dark:border-white/50">
513+
<span class="material-symbols-outlined">arrow_back</span>
514+
Back step</button>
514515
</template>
515516

516517
<!-- Next/Continue Button -->
@@ -523,8 +524,9 @@ <h1 class="text-slate-900 dark:text-white text-4xl font-black leading-tight trac
523524
</template>
524525
<template x-if="activeTab === 'cdm_computation'">
525526
<button type="submit" form="kernel-compute-form"
526-
class="px-5 py-2.5 text-sm font-semibold text-white bg-primary rounded-lg hover:bg-primary/90">
527+
class="flex items-center justify-center gap-2 py-2.5 px-5 w-full sm:w-auto bg-primary text-white font-bold text-base rounded-lg hover:bg-primary/90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary/50 dark:focus:ring-offset-background-dark transition-colors">
527528
Compute CDM/LFP
529+
<span class="material-symbols-outlined">arrow_forward</span>
528530
</button>
529531
</template>
530532
</div>

‎webui/templates/2.2.field_potential_proxy.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -179,10 +179,10 @@ <h3 class="text-lg font-bold border-b border-slate-200 dark:border-slate-800 pb-
179179
</a>
180180
<div class="flex w-full sm:w-auto gap-4">
181181
<button
182-
class="w-full sm:w-auto min-w-[160px] h-12 bg-primary text-background-dark font-black rounded-lg hover:shadow-lg hover:brightness-105 transition-all flex items-center justify-center gap-2"
182+
class="flex items-center justify-center gap-2 py-2.5 px-5 w-full sm:w-auto bg-primary text-white font-bold text-base rounded-lg hover:bg-primary/90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary/50 dark:focus:ring-offset-background-dark transition-colors"
183183
type="submit">
184-
<span class="material-symbols-outlined">calculate</span>
185184
Compute proxy
185+
<span class="material-symbols-outlined">arrow_forward</span>
186186
</button>
187187
</div>
188188
</div>

‎webui/templates/4.2.compute_predictions.html‎

Lines changed: 27 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@
3939

4040

4141
{% block content %}
42-
<div class="max-w-5xl mx-auto">
42+
<div x-data="{ useUploadedModel: false }" class="max-w-5xl mx-auto">
4343
<h1 class="text-3xl sm:text-4xl font-bold text-slate-900 dark:text-white mb-2">Compute Predictions</h1>
4444
<p class="text-slate-600 dark:text-slate-400 mb-8">Generate predictions from your pre-trained machine learning or SBI models.</p>
4545
<form class="space-y-8">
@@ -88,15 +88,22 @@ <h2 class="text-lg font-semibold text-slate-900 dark:text-white mb-4 flex items-
8888
</h2>
8989
<div class="space-y-6">
9090
<div class="flex items-center mb-6 bg-slate-50 dark:bg-slate-800/80 p-4 rounded-lg">
91-
<button aria-checked="false"
92-
class="bg-slate-200 dark:bg-slate-700 relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2"
93-
role="switch" type="button">
94-
<span class="sr-only">Use uploaded model and scaler</span>
91+
<button type="button"
92+
role="switch"
93+
:aria-checked="useUploadedModel"
94+
@click="useUploadedModel = !useUploadedModel"
95+
:class="useUploadedModel ? 'bg-primary' : 'bg-slate-200 dark:bg-slate-700'"
96+
class="relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2">
97+
<span class="sr-only">Use uploaded model and scaler</span>
9598
<span aria-hidden="true"
96-
class="translate-x-0 pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out"></span>
99+
:class="useUploadedModel ? 'translate-x-5' : 'translate-x-0'"
100+
class="pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 style-none ease-in-out">
101+
</span>
97102
</button>
98-
<span class="ml-3 text-sm font-medium text-slate-900 dark:text-slate-200">Use uploaded model and
99-
scaler</span>
103+
104+
<span class="ml-3 text-sm font-medium text-slate-900 dark:text-slate-200">
105+
Use uploaded model and scaler
106+
</span>
100107
</div>
101108
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
102109
<div>
@@ -275,5 +282,17 @@ <h3 class="text-base font-medium text-slate-900 dark:text-white">Results Output<
275282
</div>
276283
</section>
277284
</form>
285+
286+
<!-- Navigation buttons -->
287+
<div class="flex justify-between items-center gap-4 mt-10 pt-6 border-t border-border-light dark:border-[#323b67]">
288+
<!-- Previous/Return Button -->
289+
<button>
290+
<a href="{{ url_for('dashboard') }}"
291+
class="flex items-center justify-center gap-2 py-2.5 px-5 w-full sm:w-auto text-primary dark:text-white font-bold text-base rounded-lg hover:bg-primary/10 dark:hover:bg-white/10 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary/50 dark:focus:ring-offset-background-dark transition-colors border border-primary dark:border-white/50">
292+
<span class="material-symbols-outlined">arrow_back</span>
293+
Return to ncpi dashboard
294+
</a>
295+
</button>
296+
</div>
278297
</div>
279298
{% endblock %}

‎webui/templates/4.inference.html‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,4 +47,11 @@
4747
{% block option2_icon %}
4848
<span class="material-symbols-outlined text-4xl text-slate-600 dark:text-slate-300 group-hover:text-primary">query_stats</span>
4949
{% endblock %}
50-
{% block option2_title %}Compute predictions{% endblock %}
50+
{% block option2_title %}Compute predictions{% endblock %}
51+
52+
{% block scripts %}
53+
<!-- Menu tab navigation -->
54+
<script defer="" src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
55+
<!-- Handle of file uploads script -->
56+
<script defer src="{{ url_for('static', filename='js/handleFileUpload.js') }}"></script>
57+
{% endblock %}

‎webui/templates/base.html‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -68,9 +68,9 @@ <h2 class="text-lg font-bold tracking-tight">ncpi</h2>
6868
<a class="text-gray-600 hover:text-primary dark:text-gray-300 dark:hover:text-primary transition-colors"
6969
href="{{url_for('dashboard')}}">Dashboard</a>
7070
<a class="text-gray-600 hover:text-primary dark:text-gray-300 dark:hover:text-primary transition-colors"
71-
href="#">Documentation</a>
71+
href="https://github.com/necolab-ugr/ncpi">Documentation</a>
7272
<a class="text-gray-600 hover:text-primary dark:text-gray-300 dark:hover:text-primary transition-colors"
73-
href="#">Help</a>
73+
href="https://github.com/necolab-ugr/ncpi/blob/main/README.md">Help</a>
7474
</nav>
7575
<button id="darkModeToggle"
7676
class="flex h-10 w-10 cursor-pointer items-center justify-center rounded-lg text-gray-600 hover:bg-gray-200 dark:text-gray-300 dark:hover:bg-white/10">
@@ -112,15 +112,15 @@ <h2 class="text-lg font-bold tracking-tight">ncpi</h2>
112112
{% block footer %}
113113
<div class="flex flex-wrap items-center justify-center gap-x-8 gap-y-4">
114114
<a class="text-sm text-gray-500 hover:text-primary dark:text-gray-400 dark:hover:text-primary transition-colors"
115-
href="#">About</a>
115+
href="https://github.com/necolab-ugr/ncpi/tree/main/webui">About</a>
116116
<a class="text-sm text-gray-500 hover:text-primary dark:text-gray-400 dark:hover:text-primary transition-colors"
117-
href="#">Contact</a>
117+
href="https://www.ugr.es/~bcilab/personal.html">Contact</a>
118118
<a class="text-sm text-gray-500 hover:text-primary dark:text-gray-400 dark:hover:text-primary transition-colors"
119-
href="#">Privacy Policy</a>
119+
href="https://github.com/necolab-ugr/ncpi/blob/main/LICENSE">Privacy Policy</a>
120120
</div>
121121
<div class="flex justify-center gap-6">
122122
<a class="text-gray-500 hover:text-primary dark:text-gray-400 dark:hover:text-primary transition-colors"
123-
href="#">
123+
href="https://github.com/necolab-ugr/ncpi">
124124
<svg aria-hidden="true" class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24">
125125
<path clip-rule="evenodd"
126126
d="M12 2C6.477 2 2 6.477 2 12c0 4.418 2.865 8.165 6.839 9.49.5.092.682-.217.682-.482 0-.237-.009-.868-.014-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.031-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.203 2.398.1 2.651.64.7 1.03 1.595 1.03 2.688 0 3.848-2.338 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.001 10.001 0 0022 12c0-5.523-4.477-10-10-10z"

0 commit comments

Comments
 (0)