forked from enviPath/enviPy
Add basic index redesign
This commit is contained in:
@ -4,6 +4,34 @@
|
||||
|
||||
This project is using the **Strangler Fig Pattern** to incrementally migrate from Bootstrap 3.3.7 to Tailwind CSS v4 + DaisyUI v5.
|
||||
|
||||
## Layout Architecture
|
||||
|
||||
### Paper-over-Background Design
|
||||
|
||||
The modern framework uses a "paper hovering over background" design:
|
||||
|
||||
- **Background**: `bg-base-300` (slightly darker gray)
|
||||
- **Content Area**: `bg-base-100` (white/light) with shadow and rounded corners on medium+ screens
|
||||
- **Responsive**: Full width on mobile, centered with visible background on larger screens
|
||||
|
||||
### Two Layout Modes
|
||||
|
||||
**1. Standard Paper Layout** (default)
|
||||
```django
|
||||
{% block content %}
|
||||
<!-- Your content here with NO enforced styles -->
|
||||
<!-- Automatically wrapped in paper container -->
|
||||
{% endblock content %}
|
||||
```
|
||||
|
||||
**2. Full-Width Layout** (for landing pages, special layouts)
|
||||
```django
|
||||
{% block main_content %}
|
||||
<!-- Complete control over layout -->
|
||||
<!-- Overrides paper container entirely -->
|
||||
{% endblock main_content %}
|
||||
```
|
||||
|
||||
## Architecture
|
||||
|
||||
### Two Base Templates
|
||||
|
||||
@ -9,26 +9,26 @@
|
||||
default: true;
|
||||
color-scheme: light;
|
||||
|
||||
--color-base-100: blue;
|
||||
--color-base-200: oklch(95% 0.03 240);
|
||||
--color-base-300: oklch(92% 0.04 240);
|
||||
--color-base-content: oklch(20% 0.05 240);
|
||||
--color-primary: oklch(55% 0.3 240);
|
||||
--color-primary-content: oklch(98% 0.01 240);
|
||||
--color-secondary: oklch(70% 0.25 200);
|
||||
--color-secondary-content: oklch(98% 0.01 200);
|
||||
--color-accent: oklch(65% 0.25 160);
|
||||
--color-accent-content: oklch(98% 0.01 160);
|
||||
--color-neutral: oklch(50% 0.05 240);
|
||||
--color-neutral-content: oklch(98% 0.01 240);
|
||||
--color-info: oklch(70% 0.2 220);
|
||||
--color-info-content: oklch(98% 0.01 220);
|
||||
--color-success: oklch(65% 0.25 140);
|
||||
--color-success-content: oklch(98% 0.01 140);
|
||||
--color-warning: oklch(80% 0.25 80);
|
||||
--color-warning-content: oklch(20% 0.05 80);
|
||||
--color-error: oklch(65% 0.3 30);
|
||||
--color-error-content: oklch(98% 0.01 30);
|
||||
--color-base-100: var(--color-neutral-50);
|
||||
--color-base-200: var(--color-neutral-100);
|
||||
--color-base-300: var(--color-neutral-200);
|
||||
--color-base-content: var(--color-neutral-900);
|
||||
--color-primary: var(--color-primary-500);
|
||||
--color-primary-content: var(--color-primary-950);
|
||||
--color-secondary: var(--color-secondary-500);
|
||||
--color-secondary-content: var(--color-secondary-950);
|
||||
--color-accent: var(--color-accent-500);
|
||||
--color-accent-content: var(--color-accent-950);
|
||||
--color-neutral: var(--color-neutral-500);
|
||||
--color-neutral-content: var(--color-neutral-950);
|
||||
--color-info: var(--color-info-500);
|
||||
--color-info-content: var(--color-info-950);
|
||||
--color-success: var(--color-success-500);
|
||||
--color-success-content: var(--color-success-950);
|
||||
--color-warning: var(--color-warning-500);
|
||||
--color-warning-content: var(--color-warning-950);
|
||||
--color-error: var(--color-error-500);
|
||||
--color-error-content: var(--color-error-950);
|
||||
|
||||
/* border radius */
|
||||
--radius-selector: 1rem;
|
||||
@ -61,7 +61,7 @@
|
||||
--color-accent-content: var(--color-neutral-950);
|
||||
--color-neutral: var(--color-neutral-300);
|
||||
--color-neutral-content: var(--color-neutral-900);
|
||||
--color-base-100: blue;
|
||||
--color-base-100: var(--color-neutral-900);
|
||||
--color-base-200: var(--color-neutral-800);
|
||||
--color-base-300: var(--color-neutral-700);
|
||||
--color-base-content: var(--color-neutral-50);
|
||||
|
||||
@ -12,22 +12,3 @@
|
||||
}
|
||||
|
||||
@import "./daisyui-theme.css";
|
||||
|
||||
/* Bootstrap compatibility layer - prevent Bootstrap from overriding Tailwind */
|
||||
@layer base {
|
||||
/* Ensure Tailwind's preflight takes precedence in non-legacy sections */
|
||||
body:not(.legacy-bootstrap *) {
|
||||
@apply antialiased;
|
||||
}
|
||||
}
|
||||
|
||||
@layer utilities {
|
||||
/* Add important utilities for overriding Bootstrap where needed */
|
||||
.tw-flex {
|
||||
display: flex !important;
|
||||
}
|
||||
|
||||
.tw-grid {
|
||||
display: grid !important;
|
||||
}
|
||||
}
|
||||
|
||||
@ -59,22 +59,23 @@
|
||||
<!-- End Matomo Code -->
|
||||
{% endif %}
|
||||
</head>
|
||||
<body class="min-h-screen flex flex-col">
|
||||
<body class="min-h-screen bg-base-300">
|
||||
{% include "includes/navbar.html" %}
|
||||
|
||||
{# Main Content Area #}
|
||||
<main class="flex-1">
|
||||
<div id="docContent" class="container mx-auto">
|
||||
<main class="w-full">
|
||||
{% block main_content %}
|
||||
{# Breadcrumbs - outside main content, optional #}
|
||||
{% if breadcrumbs %}
|
||||
<div id="bread" class="py-4">
|
||||
<div id="bread" class="max-w-7xl mx-auto px-4 py-4">
|
||||
<div class="text-sm breadcrumbs">
|
||||
<ul>
|
||||
{% for elem in breadcrumbs %}
|
||||
{% for name, url in elem.items %}
|
||||
{% if forloop.parentloop.last %}
|
||||
<li class="font-semibold">{{ name }}</li>
|
||||
<li>{{ name }}</li>
|
||||
{% else %}
|
||||
<li><a href="{{ url }}" class="link link-hover">{{ name }}</a></li>
|
||||
<li><a href="{{ url }}">{{ name }}</a></li>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
@ -83,17 +84,22 @@
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{# Main content container - paper effect on medium+ screens #}
|
||||
<div id="docContent" class="w-full xl:w-xl md:mx-auto md:my-8 bg-base-100 md:shadow-2xl md:rounded-lg border-2">
|
||||
{# Messages - inside paper #}
|
||||
{% if message %}
|
||||
<div id="message" class="alert alert-info my-4">
|
||||
<div id="message" class="alert alert-info m-4">
|
||||
{{ message }}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{# Page content - no enforced styles #}
|
||||
{% block content %}
|
||||
{% endblock content %}
|
||||
|
||||
{# License - inside paper if present #}
|
||||
{% if meta.url_contains_package and meta.current_package.license %}
|
||||
<div class="collapse collapse-arrow bg-base-200 my-8">
|
||||
<div class="collapse collapse-arrow bg-base-200 m-8">
|
||||
<input type="checkbox" checked />
|
||||
<div class="collapse-title text-xl font-medium">
|
||||
License
|
||||
@ -106,6 +112,7 @@
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endblock main_content %}
|
||||
</main>
|
||||
|
||||
{% include "includes/footer.html" %}
|
||||
|
||||
@ -1,74 +1,75 @@
|
||||
{% extends "framework_modern.html" %}
|
||||
{% load static %}
|
||||
{% block content %}
|
||||
<!-- Modal for Found Matching Pathways - TODO: Convert to DaisyUI modal -->
|
||||
<div class="modal fade" tabindex="-1" id="foundMatching" role="dialog" aria-labelledby="foundModal"
|
||||
aria-hidden="true">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal">
|
||||
<span aria-hidden="true">×</span>
|
||||
<span class="sr-only">Close</span>
|
||||
</button>
|
||||
<h4 class="modal-title" id="newPackMod">Found Pathway in Database</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>We found at least one pathway in the database with the given root
|
||||
compound. Do you want to open any of the existing pathways or
|
||||
predict a new one? To open an existing pathway, simply click
|
||||
on the pathway, to predict a new one, click Predict. The predicted
|
||||
pathway might differ from the ones in the database due to the
|
||||
settings used in the prediction.</p>
|
||||
<div id="foundPathways"></div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<a id="modal-predict" class="btn btn-primary" href="#">Predict</a>
|
||||
<button type="button" id="cancel-predict" class="btn btn-default" data-dismiss="modal">Cancel
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% block main_content %}
|
||||
|
||||
<!-- Hero Section with Logo and Search -->
|
||||
<section class="relative min-h-screen flex flex-col items-center justify-center overflow-hidden">
|
||||
<!-- Blurred Background -->
|
||||
<div class="absolute inset-0 bg-gradient-to-br from-blue-50 via-white to-teal-50 backdrop-blur-3xl"></div>
|
||||
<section>
|
||||
<div
|
||||
class="hero min-h-screen w-full mx-auto"
|
||||
>
|
||||
|
||||
<!-- Logo - Full width, centered -->
|
||||
<div class="relative z-10 w-full max-w-5xl px-4 mb-12 text-center">
|
||||
<img id="image-logo-long"
|
||||
class="w-full h-auto"
|
||||
alt="enviPath"
|
||||
src='{% static "/images/logo-long.svg" %}'/>
|
||||
</div>
|
||||
<div class="hero-content flex-col lg:flex-row-reverse w-full">
|
||||
<div class="card bg-base-100 shrink-0 shadow-2xl p-8 w-1/2">
|
||||
<div class="card-body">
|
||||
<fieldset class="fieldset">
|
||||
|
||||
<label class="toggle text-base-content toggle-xl justify-self-end mb-6">
|
||||
<input type="checkbox" />
|
||||
<svg aria-label="smiles mode" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" class="size-5">
|
||||
<g
|
||||
stroke-linejoin="round"
|
||||
stroke-linecap="round"
|
||||
stroke-width="2"
|
||||
fill="currentColor"
|
||||
stroke="none"
|
||||
>
|
||||
<path fill-rule="evenodd" d="M8 2.75A.75.75 0 0 1 8.75 2h7.5a.75.75 0 0 1 0 1.5h-3.215l-4.483 13h2.698a.75.75 0 0 1 0 1.5h-7.5a.75.75 0 0 1 0-1.5h3.215l4.483-13H8.75A.75.75 0 0 1 8 2.75Z" clip-rule="evenodd" />
|
||||
</g>
|
||||
</svg>
|
||||
<svg
|
||||
aria-label="draw mode"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
stroke="none"
|
||||
class="size-5"
|
||||
>
|
||||
<path d="m2.695 14.762-1.262 3.155a.5.5 0 0 0 .65.65l3.155-1.262a4 4 0 0 0 1.343-.886L17.5 5.501a2.121 2.121 0 0 0-3-3L3.58 13.419a4 4 0 0 0-.885 1.343Z" />
|
||||
|
||||
</svg>
|
||||
</label>
|
||||
|
||||
<!-- Search Component - Center of Hero -->
|
||||
<div class="relative z-10 w-full max-w-4xl px-4">
|
||||
<form id="index-form" action="{{ meta.current_package.url }}/pathway" method="POST">
|
||||
{% csrf_token %}
|
||||
<input type="text" placeholder="Type here" class="input" />
|
||||
|
||||
<div class="join w-full mx-auto">
|
||||
<input type="text" id="index-form-text-input" placeholder="cannonical SMILES string" class="input grow input-lg join-item" />
|
||||
<button class="btn btn-lg bg-primary-950 text-primary-50 join-item">Predict!</button>
|
||||
</div>
|
||||
<span class="label"><a href="#"> Example 1</a><a href="#"> Example 2</a></span>
|
||||
<span class="label justify-self-end"><a href="#"> Advanced </a></span>
|
||||
<input type="hidden" id="index-form-smiles" name="smiles" value="smiles">
|
||||
<input type="hidden" id="index-form-predict" name="predict" value="predict">
|
||||
<input type="hidden" id="current-action" value="predict">
|
||||
</form>
|
||||
</fieldset>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Learn More Link -->
|
||||
<div class="relative z-10 mt-8">
|
||||
<a class="btn btn-ghost btn-lg" role="button" target="_blank"
|
||||
href="https://wiki.envipath.org/index.php/Main_Page">
|
||||
Learn more »
|
||||
</a>
|
||||
<div class="hero-overlay"></div>
|
||||
<div class="hero-content text-neutral-content text-center">
|
||||
<div class="max-w-md">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Community News Section -->
|
||||
<section class="py-16 bg-base-200">
|
||||
<div class="max-w-7xl mx-auto px-4">
|
||||
<h2 class="text-4xl font-bold text-center mb-12">Community Updates</h2>
|
||||
<h2 class="text-3xl font-bold text-center mb-8">Community Updates</h2>
|
||||
|
||||
<div id="community-news-container" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
<!-- News cards will be populated here -->
|
||||
@ -90,17 +91,17 @@
|
||||
</section>
|
||||
|
||||
<!-- Mission Statement Section -->
|
||||
<section class="py-20 bg-white">
|
||||
<div class="max-w-5xl mx-auto px-4">
|
||||
<div class="prose prose-lg mx-auto text-center">
|
||||
<h2 class="text-4xl font-bold mb-8">About enviPath</h2>
|
||||
<p class="text-xl text-gray-700 leading-relaxed mb-6">
|
||||
<section class="py-16 bg-base-100">
|
||||
<div class="max-w-4xl mx-auto px-4">
|
||||
<h2 class="text-3xl font-bold text-center mb-8">About enviPath</h2>
|
||||
<div class="space-y-4 text-center">
|
||||
<p class="text-lg">
|
||||
enviPath is a database and prediction system for the microbial
|
||||
biotransformation of organic environmental contaminants. The
|
||||
database provides the possibility to store and view experimentally
|
||||
observed biotransformation pathways.
|
||||
</p>
|
||||
<p class="text-xl text-gray-700 leading-relaxed">
|
||||
<p class="text-lg">
|
||||
The pathway prediction system provides different relative reasoning models
|
||||
to predict likely biotransformation pathways and products. Explore our tools
|
||||
and contribute to advancing environmental biotransformation research.
|
||||
@ -180,4 +181,4 @@
|
||||
processDiscourseTopics();
|
||||
});
|
||||
</script>
|
||||
{% endblock content %}
|
||||
{% endblock main_content %}
|
||||
|
||||
Reference in New Issue
Block a user