forked from enviPath/enviPy
Frontpage update (#179)
This PR introduces an overhaul for the front page and login features while keeping the rest of the application intact. ## Major Changes - TailwindCSS + DaisyUI Integration: Add modern CSS framework for component-based utility styling - Build System: Added pnpm for CSS building; can be extended for updated frontend builds in the future - Navbar + Footer: Redesigned and includable; old version retained for unstyled elements - Optimized Assets: Added minified and CSS-stylable logos ## New Features - Static Pages: Added comprehensive mockups of static pages (legal, privacy policy, terms of use, contact, etc.). **Note:** These have to be fixed before a public release, as their content is largely unreviewed and incorrect. Probably best to do in a separate PR that only contains updates to these. - Discourse API: Implement minimal features based on RestAPI for controllable results. ## Current bugs - [x] The static pages include the default navbar and footer on the login page. This will likely not work, as users need to access it before logging in; no good workaround so far (problem with Django templating system). - [ ] The front page predict link is currently non-functional; the redesigned page is almost ready but better done in a separate PR as it also touches Django code. - [x] Visual bug with the news cards. Still intend to fix for this PR Co-authored-by: Tim Lorsbach <tim@lorsba.ch> Reviewed-on: enviPath/enviPy#179 Reviewed-by: jebus <lorsbach@envipath.com> Co-authored-by: Tobias O <tobias.olenyi@envipath.com> Co-committed-by: Tobias O <tobias.olenyi@envipath.com>
This commit is contained in:
69
templates/includes/footer.html
Normal file
69
templates/includes/footer.html
Normal file
@ -0,0 +1,69 @@
|
||||
{% load static %}
|
||||
<div class="lg:max-w-5xl mt-10 mx-auto bg-base-300 text-base-content">
|
||||
|
||||
<footer class="footer sm:footer-horizontal p-10">
|
||||
{% if not public_mode %}
|
||||
<nav>
|
||||
<h6 class="footer-title">Services</h6>
|
||||
<a class="link link-hover" href="/">Predict</a>
|
||||
<a class="link link-hover" href="/search">Search</a>
|
||||
<a class="link link-hover" href="/package">Browse</a>
|
||||
{% if user.is_authenticated %}
|
||||
<a class="link link-hover" href="/model">Your Collections</a>
|
||||
{% endif %}
|
||||
<a href="https://wiki.envipath.org/" target="_blank" class="link link-hover">Documentation</a>
|
||||
</nav>
|
||||
{% endif %}
|
||||
<nav>
|
||||
<h6 class="footer-title">Company</h6>
|
||||
<a class="link link-hover" href="/about">About us</a>
|
||||
<a class="link link-hover" href="/contact">Contact us</a>
|
||||
<a class="link link-hover" href="/careers">Careers</a>
|
||||
<a class="link link-hover" href="/legal">Legal</a>
|
||||
</nav>
|
||||
<nav>
|
||||
<h6 class="footer-title">Legal</h6>
|
||||
<a class="link link-hover" href="/terms">Terms of use</a>
|
||||
<a class="link link-hover" href="/privacy">Privacy policy</a>
|
||||
<a class="link link-hover" href="/cookie-policy">Cookie policy</a>
|
||||
<a class="link link-hover" href="/cite">Cite enviPath</a>
|
||||
</nav>
|
||||
</footer>
|
||||
<footer class="footer border-neutral-300 border-t-2 px-10 py-4">
|
||||
<div class="flex flex-row justify-between w-full items-start">
|
||||
<aside class="grid-flow-col items-center">
|
||||
<svg class="fill-neutral-content flex-shrink-0 h-14 m-2" viewbox="0 0 65 65" >
|
||||
<use
|
||||
href="{% static "/images/logo-square.svg" %}#ep-logo-square"
|
||||
>
|
||||
</use>
|
||||
</svg>
|
||||
|
||||
enviPath Ltd.
|
||||
<br />
|
||||
Biodegredation prediction since 2015.
|
||||
</p>
|
||||
</aside>
|
||||
<aside class="text-sm text-base-200 mt-2"><span class="text-xs tracking-tight">Version</span> <span class="text-base font-bold">{{ meta.version }}</span></aside>
|
||||
</div>
|
||||
<nav class="md:place-self-center md:justify-self-end">
|
||||
<div class="grid grid-flow-col gap-4">
|
||||
<a href="https://www.youtube.com/@envipath7231" target="_blank">
|
||||
<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 fill-current">
|
||||
<title>YouTube</title>
|
||||
<path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/>
|
||||
</svg>
|
||||
</a>
|
||||
<a href="https://community.envipath.org/" target="_blank">
|
||||
<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 fill-current">
|
||||
<title>Discourse</title>
|
||||
<path d="M12.103 0C18.666 0 24 5.485 24 11.997c0 6.51-5.33 11.99-11.9 11.99L0 24V11.79C0 5.28 5.532 0 12.103 0zm.116 4.563c-2.593-.003-4.996 1.352-6.337 3.57-1.33 2.208-1.387 4.957-.148 7.22L4.4 19.61l4.794-1.074c2.745 1.225 5.965.676 8.136-1.39 2.17-2.054 2.86-5.228 1.737-7.997-1.135-2.778-3.84-4.59-6.84-4.585h-.008z"/>
|
||||
</svg>
|
||||
</a>
|
||||
<a href="https://www.linkedin.com/company/envipath/" target="_blank">
|
||||
<img src="{% static "/images/linkedin.png" %}" alt="LinkedIn" class="w-6 h-6">
|
||||
</a>
|
||||
</div>
|
||||
</nav>
|
||||
</footer>
|
||||
</div>
|
||||
71
templates/includes/navbar.html
Normal file
71
templates/includes/navbar.html
Normal file
@ -0,0 +1,71 @@
|
||||
{% load static %}
|
||||
{# Modern DaisyUI Navbar #}
|
||||
<div class="navbar bg-neutral-50 text-neutral-950 shadow-lg x-50">
|
||||
<div class="navbar-start">
|
||||
<a href="{{ meta.server_url }}" class="btn btn-ghost normal-case text-xl">
|
||||
<svg class="h-8 fill-base-content" viewBox="0 0 104 26" role="img">
|
||||
<use href='{% static "/images/logo-name.svg" %}#ep-logo-name' />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{% if not public_mode %}
|
||||
<div class="navbar-center hidden lg:flex">
|
||||
<a href="#" role="button" class="btn btn-ghost" id="predictLink">Predict</a>
|
||||
<!-- <li><a href="{{ meta.server_url }}/package" id="packageLink">Package</a></li> -->
|
||||
<!--<li><a href="{{ meta.server_url }}/browse" id="browseLink">Browse</a></li>-->
|
||||
<div class="dropdown dropdown-center">
|
||||
<div tabindex="0" role="button" class="btn btn-ghost">Browse</div>
|
||||
<ul tabindex="-1" class="dropdown-content menu bg-base-100 rounded-box z-1 w-52 p-2 shadow-sm">
|
||||
<li><a href="{{ meta.server_url }}/pathway" id="pathwayLink">Pathway</a></li>
|
||||
<li><a href="{{ meta.server_url }}/rule" id="ruleLink">Rule</a></li>
|
||||
<li><a href="{{ meta.server_url }}/compound" id="compoundLink">Compound</a></li>
|
||||
<li><a href="{{ meta.server_url }}/reaction" id="reactionLink">Reaction</a></li>
|
||||
<li><a href="{{ meta.server_url }}/model" id="relative-reasoningLink">Model</a></li>
|
||||
<li><a href="{{ meta.server_url }}/scenario" id="scenarioLink">Scenario</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<div class="navbar-end">
|
||||
{% if not public_mode %}
|
||||
<a href="/search" role="button" >
|
||||
<div class="flex items-center badge badge-dash space-x-1 bg-base-200 text-base-content/50 p-2 m-1">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-search-icon lucide-search"><path d="m21 21-4.34-4.34"/><circle cx="11" cy="11" r="8"/></svg>
|
||||
<span id="search-shortcut">⌘K</span>
|
||||
</div>
|
||||
</a>
|
||||
{% endif %}
|
||||
{% if meta.user.username == 'anonymous' or public_mode %}
|
||||
<a href="{% url 'login' %}" id="loginButton" class="p-2">Login</a>
|
||||
{% else %}
|
||||
<div class="dropdown dropdown-end">
|
||||
<div tabindex="0" role="button" class="btn btn-ghost m-1 btn-circle" id="loggedInButton">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-circle-user-icon lucide-circle-user"><circle cx="12" cy="12" r="10"/><circle cx="12" cy="10" r="3"/><path d="M7 20.662V19a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v1.662"/></svg>
|
||||
</div>
|
||||
<ul tabindex="-1" class="dropdown-content menu bg-base-100 rounded-box z-50 w-52 p-2 shadow-sm">
|
||||
<li><a href="{{ meta.user.url }}" id="accountbutton">Settings</a></li>
|
||||
<li>
|
||||
<form id="logoutForm" action="{% url 'logout' %}" method="post" style="display: none;">
|
||||
{% csrf_token %}
|
||||
<input type="hidden" name="logout" value="true">
|
||||
</form>
|
||||
<a href="#" id="logoutButton" onclick="event.preventDefault(); document.getElementById('logoutForm').submit();">Logout</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// OS-aware search shortcut display
|
||||
(function() {
|
||||
const isMac = /Mac/.test(navigator.platform);
|
||||
const shortcutElement = document.getElementById('search-shortcut');
|
||||
if (shortcutElement) {
|
||||
shortcutElement.textContent = isMac ? '⌘K' : 'Ctrl+K';
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
Reference in New Issue
Block a user