diff options
| author | Yulqen <246857+yulqen@users.noreply.github.com> | 2024-09-03 12:02:00 +0100 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2024-09-03 12:02:00 +0100 |
| commit | c9677a2d2b13d156d28f01950db7670d5fe16407 (patch) | |
| tree | 78ec618c8e21e0e4fa447fd3cb7732c584ef998a /core/templates | |
| parent | afc33046439e4cec0a5de7c87cb5dc8e23606689 (diff) | |
| parent | 2cc69382c15aeed665b32aed01c701840ee80c9c (diff) | |
Merge pull request #100 from defencedigital/postgres-migration
Migrating to Tailwind
Diffstat (limited to 'core/templates')
| -rw-r--r-- | core/templates/core/base.html | 45 | ||||
| -rw-r--r-- | core/templates/core/index.html | 166 |
2 files changed, 108 insertions, 103 deletions
diff --git a/core/templates/core/base.html b/core/templates/core/base.html index 1c2bfe0..682395f 100644 --- a/core/templates/core/base.html +++ b/core/templates/core/base.html @@ -5,10 +5,11 @@ <head> <meta charset="UTF-8"/> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> - <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> +{# <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">#} + <link rel="stylesheet" href="{% static 'css/output.css' %}"> <link rel="preconnect" href="https://fonts.gstatic.com"> <link href='https://fonts.googleapis.com/css?family=Lato:400,700|Roboto+Slab:400,700' rel='stylesheet' type='text/css'/> - <link rel="stylesheet" href="{% static 'css/styles.css' %}"/> +{# <link rel="stylesheet" href="{% static 'css/styles.css' %}"/>#} <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <script src="https://unpkg.com/htmx.org@1.9.0" integrity="sha384-aOxz9UdWG0yBiyrTwPeMibmaoq07/d3a96GCbb9x60f3mOt5zwkjdbcHFnKH8qls" crossorigin="anonymous"></script> <title>{% block title %}{% endblock title %}</title> @@ -26,31 +27,29 @@ </head> <body> {% block navbar %} -<div class="w3-bar w3-border w3-blue w3-padding-16"> - <!-- <a href="/" class="w3-bar-item w3-button w3-dark-gray w3-xxlarge"><i class="fa fa-home"></i></a> --> - <a href="#" class="w3-bar-item w3-button w3-large">Home</a> - <a href="{% url 'engagements:home' %}" class="w3-bar-item w3-button w3-large">Engagement Plans</a> - <a href="{% url 'engagements:regulatedentities' %}" class="w3-bar-item w3-button w3-large">Regulated Entities</a> - <a href="#" class="w3-bar-item w3-button w3-large">Reporting</a> - <a href="#" class="w3-bar-item w3-button w3-large">Dashboards</a> - <div class="w3-dropdown-hover"> - <button class="w3-button w3-large">Teams</button> - <div class="w3-dropdown-content w3-bar-block w3-card-4"> - <a href="#" class="w3-bar-item w3-button">Submarines and Propulsion</a> - <a href="#" class="w3-bar-item w3-button">Transport</a> +<nav class="bg-blue-600 p-4"> + <div class="container mx-auto flex items-center justify-between"> + <div class="flex items-center space-x-4"> + <a href="#" class="text-white text-xl font-semibold">Home</a> + <a href="{% url 'engagements:home' %}" class="text-white hover:text-blue-200">Engagement Plans</a> + <a href="{% url 'engagements:regulatedentities' %}" class="text-white hover:text-blue-200">Regulated Entities</a> + <a href="#" class="text-white hover:text-blue-200">Reporting</a> + <a href="#" class="text-white hover:text-blue-200">Dashboards</a> + </div> + <div class="flex items-center space-x-4"> + {% if request.user.is_authenticated %} + <span class="text-white">{{ user }}</span> + <a href="{% url 'logout' %}" class="text-white hover:text-blue-200">Log Out</a> + {% else %} + <a href="{% url 'login' %}" class="text-white hover:text-blue-200">Log In</a> + {% endif %} + <a href="#" class="text-white hover:text-blue-200">Help</a> </div> </div> - {% if request.user.is_authenticated %} - <a class="w3-bar-item w3-right w3-button w3-large" href="#">{{ user }}</a> - <a class="w3-bar-item w3-right w3-button w3-large" href="{% url 'logout' %}">Log Out</a> - {% else %} - <a class="w3-bar-item w3-right w3-button w3-large" href="{% url 'login' %}">Log In</a> - {% endif %} - <a href="#" class="w3-right w3-bar-item w3-button w3-large">Help</a> -</div> +</nav> {% endblock navbar %} - <div class="w3-container"> + <div class="container mx-auto"> {% block content %} {% endblock content %} </div> diff --git a/core/templates/core/index.html b/core/templates/core/index.html index 1914c50..ae25fbd 100644 --- a/core/templates/core/index.html +++ b/core/templates/core/index.html @@ -4,97 +4,103 @@ {% block title %}DefNucSyR Engagement Database (DED) - Information Management for DefNucSyR{% endblock title %} {% block content %} + <div class="container mx-auto px-4 py-8"> + <h1 class="text-4xl font-bold mb-8">DED - Information Management for DefNucSyR</h1> -<div class="w3-container"> - <h2>DED - Information Management for DefNucSyR</h2> - <div class="w3-panel w3-leftbar w3-sand w3-xlarge w3-serif w3-display-container"> - <span onclick="this.parentElement.style.display='none'" - class="w3-button w3-display-topright">×</span> - <h3>Quote of the day</h3> - <p>This is a placeholder for some interesting test. Use of lose.</p> - </div> + <div class="bg-yellow-100 border-l-4 border-yellow-500 p-4 mb-8"> + <div class="flex justify-between items-center"> + <h3 class="text-xl font-semibold">Quote of the day</h3> + <button class="text-gray-600 hover:text-gray-800" + onclick="this.parentElement.parentElement.style.display='none'">× + </button> + </div> + <p class="mt-2">This is a placeholder for some interesting test. Use or lose.</p> + </div> - <p>{% lorem %}</p> + <p class="mb-8">{% lorem %}</p> - <div class="w3-card-2 w3-margin-top"> - <header class="w3-container w3-light-blue"> - <h3>Submarines and Propulsion</h3> + <div class="mb-12"> + <div class="bg-white shadow-md rounded-lg overflow-hidden"> + <header class="bg-blue-100 p-4"> + <h2 class="text-3xl font-bold">Submarines and Propulsion</h2> </header> - <div class="w3-container"> - - <h3>Assessments & Inspections:</h3> - <table class="w3-table w3-bordered w3-margin-bottom"> - <tr class="w3-light-blue"> - <th>Start Date</th> - <th>End Date</th> - <th>Event</th> - <th>Site</th> - <th>Inspectors</th> - </tr> - {% for s in subs_regulatory %} - <tr> - <td>{{ s.proposed_start_date|date:'j M y' }}</td> - <td>{{ s.proposed_end_date|date:'j M y' }}</td> - <td><a href="{% url 'engagements:engagement_detail' s.pk %}">{{ s }}</a></td> - <td>{{ s.external_party }}</td> - <td> - {% if s.officers.all %} - {{ s.officers.all|commalist }} - {% endif %} - </td> - </tr> - {% endfor %} + <div class="p-4"> + <h3 class="text-2xl font-semibold mb-4">Assessments & Inspections:</h3> + <table class="w-full mb-4"> + <thead> + <tr class="bg-gray-200"> + <th class="p-2 text-left">Start Date</th> + <th class="p-2 text-left">End Date</th> + <th class="p-2 text-left">Event</th> + <th class="p-2 text-left">Site</th> + <th class="p-2 text-left">Inspectors</th> + </tr> + </thead> + <tbody> + {% for s in subs_regulatory %} + <tr class="{% cycle 'bg-white' 'bg-gray-100' %}"> + <td class="p-2">{{ s.proposed_start_date|date:'j M y' }}</td> + <td class="p-2">{{ s.proposed_end_date|date:'j M y' }}</td> + <td class="p-2"><a href="{% url 'engagements:engagement_detail' s.pk %}" class="text-blue-600 hover:underline">{{ s }}</a></td> + <td class="p-2">{{ s.external_party }}</td> + <td class="p-2"> + {% if s.officers.all %} + {{ s.officers.all|commalist }} + {% endif %} + </td> + </tr> + {% endfor %} + </tbody> </table> - <div class="w3-cell-row"> - <div class="w3-cell w3-left"> - <a href="{% url 'engagements:create' 'reg' %}" class="w3-button w3-round w3-blue">Add New</a> - </div> - <div class="w3-cell w3-right"> - <small>See <a href="#">Enagements</a> for full list</small> - </div> - </div> - <hr> - <h4>Non-regulatory events:</h4> - <table class="w3-table w3-bordered w3-margin-bottom"> - <tr class="w3-light-blue"> - <th>Start Date</th> - <th>End Date</th> - <th>Summary</th> - </tr> - {% if not subs %} - <tr> - <td>None</td> - <td>None</td> - <td>None</td> - </tr> - {% else %} - {% for s in subs %} - <tr> - <td>{{ s.proposed_start_date|date:'j M y' }}</td> - <td>{{ s.proposed_end_date|date:'j M y' }}</td> - <td><a href="#">{{ s }}</a></td> - </tr> - {% endfor %} - {% endif %} - </table> - <div> - <button class="w3-button w3-round w3-blue">Add New</button> + + <div class="flex justify-between items-center mb-8"> + <a href="{% url 'engagements:create' 'reg' %}" class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded">Add New</a> + <small>See <a href="#" class="text-blue-600 hover:underline">Engagements</a> for full list</small> </div> - <p>{% lorem %}</p> + <div class="border-b border-gray-300 my-8"></div> - </div> - </div> + <h4 class="text-xl font-semibold mb-4">Non-regulatory events:</h4> + <table class="w-full mb-4"> + <thead> + <tr class="bg-gray-200"> + <th class="p-2 text-left">Start Date</th> + <th class="p-2 text-left">End Date</th> + <th class="p-2 text-left">Summary</th> + </tr> + </thead> + <tbody> + {% if not subs %} + <tr> + <td class="p-2" colspan="3">No events found</td> + </tr> + {% else %} + {% for s in subs %} + <tr class="{% cycle 'bg-white' 'bg-gray-100' %}"> + <td class="p-2">{{ s.proposed_start_date|date:'j M y' }}</td> + <td class="p-2">{{ s.proposed_end_date|date:'j M y' }}</td> + <td class="p-2"><a href="#" class="text-blue-600 hover:underline">{{ s }}</a></td> + </tr> + {% endfor %} + {% endif %} + </tbody> + </table> - <div class="w3-card-2 w3-margin-top"> - <header class="w3-container w3-light-blue"> - <h3>Transport</h3> - </header> - <div class="w3-container"> - <p>{% lorem %}</p> + <div class="mt-4"> + <button class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded">Add New</button> + </div> </div> </div> - </div> + + <div class="bg-white shadow-md rounded-lg overflow-hidden"> + <header class="bg-blue-100 p-4"> + <h3 class="text-2xl font-bold">Transport</h3> + </header> + <div class="p-4"> + <p>{% lorem %}</p> + </div> + </div> + </div> {% endblock content %} |