allucanget/calminer
2
0
Fork 0
Code Pull Requests Actions Packages Releases Activity

Add form styles and update button classes for consistency

Browse Source 
- Introduced a new CSS file for form styles (forms.css) to enhance form layout and design.
- Removed deprecated button styles from imports.css and updated button classes across templates to use the new utility classes.
- Updated various templates to reflect the new button styles, ensuring a consistent look and feel throughout the application.
- Refactored form-related styles in main.css and removed redundant styles from projects.css and scenarios.css.
- Ensured responsive design adjustments for form actions in smaller viewports.
This commit is contained in:
zwitschi
2025-11-13 21:18:32 +01:00
parent 4d0e1a9989
commit fb6816de00
20 changed files with 282 additions and 214 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
templates/base.html
View File

@@ -4,8 +4,9 @@
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>{% block title %}CalMiner{% endblock %}</title>
<link rel="stylesheet" href="/static/css/main.css" />
<link rel="stylesheet" href="/static/css/imports.css" />
<link rel="stylesheet" href="/static/css/main.css" />
<link rel="stylesheet" href="/static/css/forms.css" />
<link rel="stylesheet" href="/static/css/imports.css" />
{% block head_extra %}{% endblock %}
</head>
<body>

6
templates/exports/modal.html
View File

@@ -9,7 +9,7 @@
<h5 class="modal-title">Export {{ dataset|capitalize }}</h5>
<button
type="button"
class="btn-close"
class="btn btn--ghost btn--icon"
data-dismiss="modal"
aria-label="Close"
></button>
@@ -40,10 +40,10 @@
>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">
<button type="button" class="btn btn--secondary" data-dismiss="modal">
Cancel
</button>
<button type="submit" class="btn btn-primary">Download</button>
<button type="submit" class="btn btn--primary">Download</button>
</div>
<p class="form-error hidden" data-export-error></p>
</form>

4
templates/imports/ui.html
View File

@@ -24,8 +24,8 @@
{% include "partials/import_preview_table.html" %}
<div class="import-actions hidden" data-import-actions>
<button class="btn primary" data-import-commit disabled>Commit Import</button>
<button class="btn" data-import-cancel>Cancel</button>
<button class="btn btn--primary" data-import-commit disabled>Commit Import</button>
<button class="btn btn--secondary" data-import-cancel>Cancel</button>
</div>
</div>
</section>

2
templates/login.html
View File

@@ -26,7 +26,7 @@
<label for="password">Password:</label>
<input type="password" id="password" name="password" required />
</div>
<button type="submit" class="btn primary">Login</button>
<button type="submit" class="btn btn--primary">Login</button>
</form>
<p>Don't have an account? <a href="/register">Register here</a></p>
<p><a href="/forgot-password">Forgot password?</a></p>

6
templates/partials/import_upload.html
View File

@@ -9,7 +9,7 @@
<div class="import-upload__dropzone" data-import-dropzone>
<span class="icon-upload" aria-hidden="true"></span>
<p>Drag & drop CSV/XLSX files here or</p>
<label class="btn secondary">
<label class="btn btn--secondary">
Browse
<input type="file" name="import-file" accept=".csv,.xlsx" hidden />
</label>
@@ -17,8 +17,8 @@
</div>
<div class="import-upload__actions">
<button type="button" class="btn primary" data-import-upload-trigger disabled>Upload & Preview</button>
<button type="button" class="btn" data-import-reset hidden>Reset</button>
<button type="button" class="btn btn--primary" data-import-upload-trigger disabled>Upload & Preview</button>
<button type="button" class="btn btn--secondary" data-import-reset hidden>Reset</button>
</div>
{{ feedback("import-upload-feedback", hidden=True, role="alert") }}

12
templates/projects/detail.html
View File

@@ -17,9 +17,9 @@
<p class="text-muted">{{ project.operation_type.value.replace('_', ' ') | title }}</p>
</div>
<div class="header-actions">
<a class="btn" href="{{ url_for('scenarios.project_scenario_list', project_id=project.id) }}">Manage Scenarios</a>
<a class="btn" href="{{ url_for('projects.edit_project_form', project_id=project.id) }}">Edit Project</a>
<a class="btn primary" href="{{ url_for('scenarios.create_scenario_form', project_id=project.id) }}">New Scenario</a>
<a class="btn btn--secondary" href="{{ url_for('scenarios.project_scenario_list', project_id=project.id) }}">Manage Scenarios</a>
<a class="btn btn--secondary" href="{{ url_for('projects.edit_project_form', project_id=project.id) }}">Edit Project</a>
<a class="btn btn--primary" href="{{ url_for('scenarios.create_scenario_form', project_id=project.id) }}">New Scenario</a>
</div>
</header>
@@ -99,7 +99,7 @@
<h2>Scenarios</h2>
<p class="text-muted">Project scenarios inherit pricing and provide entry points to profitability planning.</p>
</div>
<a class="btn" href="{{ url_for('scenarios.create_scenario_form', project_id=project.id) }}">Add Scenario</a>
<a class="btn btn--secondary" href="{{ url_for('scenarios.create_scenario_form', project_id=project.id) }}">Add Scenario</a>
</header>
{% if scenarios %}
<ul class="scenario-list">
@@ -126,8 +126,8 @@
</dl>
</div>
<div class="scenario-item__actions">
<a class="btn btn-link" href="{{ url_for('scenarios.view_scenario', scenario_id=scenario.id) }}">View</a>
<a class="btn btn-link" href="{{ url_for('scenarios.edit_scenario_form', scenario_id=scenario.id) }}">Edit</a>
<a class="btn btn--link" href="{{ url_for('scenarios.view_scenario', scenario_id=scenario.id) }}">View</a>
<a class="btn btn--link" href="{{ url_for('scenarios.edit_scenario_form', scenario_id=scenario.id) }}">Edit</a>
</div>
</li>
{% endfor %}

8
templates/projects/form.html
View File

@@ -26,8 +26,8 @@
<p class="text-muted">Provide core information about the mining project.</p>
</div>
<div class="header-actions">
<a class="btn" href="{{ cancel_url }}">Cancel</a>
<button class="btn primary" type="submit">Save Project</button>
<a class="btn btn--secondary" href="{{ cancel_url }}">Cancel</a>
<button class="btn btn--primary" type="submit">Save Project</button>
</div>
</header>
@@ -58,8 +58,8 @@
</div>
<div class="form-actions">
<a class="btn" href="{{ cancel_url }}">Cancel</a>
<button class="btn primary" type="submit">Save Project</button>
<a class="btn btn--secondary" href="{{ cancel_url }}">Cancel</a>
<button class="btn btn--primary" type="submit">Save Project</button>
</div>
</form>
{% endblock %}

10
templates/projects/list.html
View File

@@ -19,7 +19,7 @@
data-project-filter
aria-label="Filter projects"
/>
<a class="btn btn-primary" href="{{ url_for('projects.create_project_form') }}">New Project</a>
<a class="btn btn--primary" href="{{ url_for('projects.create_project_form') }}">New Project</a>
</div>
</section>
@@ -55,12 +55,12 @@
<footer class="project-card__footer">
<div class="project-card__links">
<a class="btn btn-link" href="{{ url_for('projects.view_project', project_id=project.id) }}">View Project</a>
<a class="btn btn-link" href="{{ url_for('scenarios.create_scenario_form', project_id=project.id) }}">Add Scenario</a>
<a class="btn btn-link" href="{{ url_for('projects.edit_project_form', project_id=project.id) }}">Edit</a>
<a class="btn btn--link" href="{{ url_for('projects.view_project', project_id=project.id) }}">View Project</a>
<a class="btn btn--link" href="{{ url_for('scenarios.create_scenario_form', project_id=project.id) }}">Add Scenario</a>
<a class="btn btn--link" href="{{ url_for('projects.edit_project_form', project_id=project.id) }}">Edit</a>
</div>
<button
class="btn btn-ghost"
class="btn btn--ghost"
data-export-trigger
data-export-target="projects"
title="Export projects dataset"

2
templates/register.html
View File

@@ -36,7 +36,7 @@ content %}
<label for="password">Password:</label>
<input type="password" id="password" name="password" required />
</div>
<button type="submit" class="btn primary">Register</button>
<button type="submit" class="btn btn--primary">Register</button>
</form>
<p>Already have an account? <a href="/login">Login here</a></p>
</div>

14
templates/scenarios/capex.html
View File

@@ -20,16 +20,16 @@
</div>
<div class="header-actions">
{% if scenario_url %}
<a class="btn" href="{{ scenario_url }}">Scenario Overview</a>
<a class="btn btn--secondary" href="{{ scenario_url }}">Scenario Overview</a>
{% elif project_url %}
<a class="btn" href="{{ project_url }}">Project Overview</a>
<a class="btn btn--secondary" href="{{ project_url }}">Project Overview</a>
{% elif cancel_url %}
<a class="btn" href="{{ cancel_url }}">Back</a>
<a class="btn btn--secondary" href="{{ cancel_url }}">Back</a>
{% endif %}
{% if scenario_portfolio_url %}
<a class="btn" href="{{ scenario_portfolio_url }}">Scenario Portfolio</a>
<a class="btn btn--secondary" href="{{ scenario_portfolio_url }}">Scenario Portfolio</a>
{% endif %}
<button class="btn primary" type="submit" form="capex-form">Save &amp; Calculate</button>
<button class="btn btn--primary" type="submit" form="capex-form">Save &amp; Calculate</button>
</div>
</header>
@@ -66,7 +66,7 @@
</header>
<div class="table-actions">
<button class="btn secondary" type="button" data-action="add-component">Add Component</button>
<button class="btn btn--secondary" type="button" data-action="add-component">Add Component</button>
</div>
{% if component_errors is defined and component_errors %}
@@ -131,7 +131,7 @@
<input type="text" name="components[{{ loop.index0 }}][notes]" value="{{ component.notes or '' }}" />
</td>
<td class="row-actions">
<button class="btn link" type="button" data-action="remove-component">Remove</button>
<button class="btn btn--link" type="button" data-action="remove-component">Remove</button>
</td>
</tr>
{% endfor %}

10
templates/scenarios/detail.html
View File

@@ -30,11 +30,11 @@
</p>
</div>
<div class="header-actions">
<a class="btn" href="{{ scenario_list_href }}">Scenario Portfolio</a>
<a class="btn" href="{{ profitability_href }}">Profitability Calculator</a>
<a class="btn" href="{{ opex_href }}">Opex Planner</a>
<a class="btn" href="{{ capex_href }}">Capex Planner</a>
<a class="btn primary" href="{{ url_for('scenarios.edit_scenario_form', scenario_id=scenario.id) }}">Edit Scenario</a>
<a class="btn btn--secondary" href="{{ scenario_list_href }}">Scenario Portfolio</a>
<a class="btn btn--secondary" href="{{ profitability_href }}">Profitability Calculator</a>
<a class="btn btn--secondary" href="{{ opex_href }}">Opex Planner</a>
<a class="btn btn--secondary" href="{{ capex_href }}">Capex Planner</a>
<a class="btn btn--primary" href="{{ url_for('scenarios.edit_scenario_form', scenario_id=scenario.id) }}">Edit Scenario</a>
</div>
</header>

8
templates/scenarios/form.html
View File

@@ -32,8 +32,8 @@
<p class="text-muted">Scenarios inherit pricing defaults from <strong>{{ project.name }}</strong>.</p>
</div>
<div class="header-actions">
<a class="btn" href="{{ cancel_url }}">Cancel</a>
<button class="btn primary" type="submit">Save Scenario</button>
<a class="btn btn--secondary" href="{{ cancel_url }}">Cancel</a>
<button class="btn btn--primary" type="submit">Save Scenario</button>
</div>
</header>
@@ -145,8 +145,8 @@
</section>
<div class="form-actions">
<a class="btn" href="{{ cancel_url }}">Cancel</a>
<button class="btn primary" type="submit">Save Scenario</button>
<a class="btn btn--secondary" href="{{ cancel_url }}">Cancel</a>
<button class="btn btn--primary" type="submit">Save Scenario</button>
</div>
</form>
{% endblock %}

16
templates/scenarios/list.html
View File

@@ -18,8 +18,8 @@
<p class="text-muted">Assumption sets and calculators for {{ project.name }}</p>
</div>
<div class="header-actions">
<a class="btn" href="{{ url_for('projects.view_project', project_id=project.id) }}">Project Overview</a>
<a class="btn primary" href="{{ url_for('scenarios.create_scenario_form', project_id=project.id) }}">New Scenario</a>
<a class="btn btn--secondary" href="{{ url_for('projects.view_project', project_id=project.id) }}">Project Overview</a>
<a class="btn btn--primary" href="{{ url_for('scenarios.create_scenario_form', project_id=project.id) }}">New Scenario</a>
</div>
</header>
@@ -91,7 +91,7 @@
<h2>Scenario Portfolio</h2>
<p class="text-muted">Each scenario below inherits pricing defaults and links directly into calculators.</p>
</div>
<a class="btn" href="{{ url_for('scenarios.create_scenario_form', project_id=project.id) }}">Add Scenario</a>
<a class="btn btn--secondary" href="{{ url_for('scenarios.create_scenario_form', project_id=project.id) }}">Add Scenario</a>
</header>
{% if scenarios %}
<ul class="scenario-list">
@@ -125,11 +125,11 @@
</dl>
</div>
<div class="scenario-item__actions">
<a class="btn btn-link" href="{{ url_for('scenarios.view_scenario', scenario_id=scenario.id) }}">View</a>
<a class="btn btn-link" href="{{ url_for('scenarios.edit_scenario_form', scenario_id=scenario.id) }}">Edit</a>
<a class="btn btn-link" href="{{ profitability_href }}">Profitability</a>
<a class="btn btn-link" href="{{ opex_href }}">Opex</a>
<a class="btn btn-link" href="{{ capex_href }}">Capex</a>
<a class="btn btn--link" href="{{ url_for('scenarios.view_scenario', scenario_id=scenario.id) }}">View</a>
<a class="btn btn--link" href="{{ url_for('scenarios.edit_scenario_form', scenario_id=scenario.id) }}">Edit</a>
<a class="btn btn--link" href="{{ profitability_href }}">Profitability</a>
<a class="btn btn--link" href="{{ opex_href }}">Opex</a>
<a class="btn btn--link" href="{{ capex_href }}">Capex</a>
</div>
</li>
{% endfor %}

14
templates/scenarios/opex.html
View File

@@ -20,16 +20,16 @@
</div>
<div class="header-actions">
{% if scenario_url %}
<a class="btn" href="{{ scenario_url }}">Scenario Overview</a>
<a class="btn btn--secondary" href="{{ scenario_url }}">Scenario Overview</a>
{% elif project_url %}
<a class="btn" href="{{ project_url }}">Project Overview</a>
<a class="btn btn--secondary" href="{{ project_url }}">Project Overview</a>
{% elif cancel_url %}
<a class="btn" href="{{ cancel_url }}">Back</a>
<a class="btn btn--secondary" href="{{ cancel_url }}">Back</a>
{% endif %}
{% if scenario_portfolio_url %}
<a class="btn" href="{{ scenario_portfolio_url }}">Scenario Portfolio</a>
<a class="btn btn--secondary" href="{{ scenario_portfolio_url }}">Scenario Portfolio</a>
{% endif %}
<button class="btn primary" type="submit" form="opex-form">Save &amp; Calculate</button>
<button class="btn btn--primary" type="submit" form="opex-form">Save &amp; Calculate</button>
</div>
</header>
@@ -66,7 +66,7 @@
</header>
<div class="table-actions">
<button class="btn secondary" type="button" data-action="add-opex-component">Add Component</button>
<button class="btn btn--secondary" type="button" data-action="add-opex-component">Add Component</button>
</div>
{% if component_errors %}
@@ -142,7 +142,7 @@
<input type="number" min="1" step="1" name="components[{{ loop.index0 }}][period_end]" value="{{ component.period_end or '' }}" />
</td>
<td class="row-actions">
<button class="btn link" type="button" data-action="remove-opex-component">Remove</button>
<button class="btn btn--link" type="button" data-action="remove-opex-component">Remove</button>
</td>
</tr>
{% endfor %}

10
templates/scenarios/profitability.html
View File

@@ -20,16 +20,16 @@
</div>
<div class="header-actions">
{% if scenario_url %}
<a class="btn" href="{{ scenario_url }}">Scenario Overview</a>
<a class="btn btn--secondary" href="{{ scenario_url }}">Scenario Overview</a>
{% elif project_url %}
<a class="btn" href="{{ project_url }}">Project Overview</a>
<a class="btn btn--secondary" href="{{ project_url }}">Project Overview</a>
{% elif cancel_url %}
<a class="btn" href="{{ cancel_url }}">Back</a>
<a class="btn btn--secondary" href="{{ cancel_url }}">Back</a>
{% endif %}
{% if scenario_portfolio_url %}
<a class="btn" href="{{ scenario_portfolio_url }}">Scenario Portfolio</a>
<a class="btn btn--secondary" href="{{ scenario_portfolio_url }}">Scenario Portfolio</a>
{% endif %}
<button class="btn primary" type="submit" form="profitability-form">Run Calculation</button>
<button class="btn btn--primary" type="submit" form="profitability-form">Run Calculation</button>
</div>
</header>