Switched CSS framework to Bootstrap

This commit is contained in:
Gregory Ballantine
2025-06-26 15:34:02 -04:00
parent e59d606f8c
commit de9e082961
17 changed files with 320 additions and 310 deletions

View File

@ -4,33 +4,31 @@
{% block content %}
<div class="row">
<div class="twelve columns">
<div class="row mb-4">
<div class="col-12">
<h1>Add new component</h1>
</div>
</div>
<div class="row">
<div class="twelve columns">
<form action="{{ url_for('component.add') }}" method="POST" class="u-full-width">
<div class="row">
<div class="nine columns">
<label for="component_name">Component name:</label>
<input type="text" id="component_name" class="u-full-width" name="component_name">
<div class="col-12">
<form action="{{ url_for('component.add') }}" method="POST">
<div class="row mb-3">
<div class="col-9">
<label class="form-label" for="component_name">Component name:</label>
<input id="component_name" class="form-control" type="text" name="component_name">
</div>
<div class="three columns">
<label>
Component type:
<select class="u-full-width" name="component_type">
<option value="gpu">Graphics card</option>
<option value="cpu">Processor</option>
</select>
</label>
<div class="col-3">
<label class="form-label" for="component_type">Component type:</label>
<select id="component_type" class="form-select" name="component_type">
<option value="gpu">Graphics card</option>
<option value="cpu">Processor</option>
</select>
</div>
</div>
<input class="button button-primary u-full-width" type="submit" value="Submit">
<input class="btn btn-primary" type="submit" value="Create Component">
</form>
</div>
</div>

View File

@ -4,35 +4,31 @@
{% block content %}
<div class="row">
<div class="twelve columns">
<div class="row mb-4">
<div class="col-12">
<h1>Editing Component: {{ component.name }}</h1>
</div>
</div>
<div class="row">
<div class="twelve columns">
<div class="col-12">
<form action="{{ url_for('component.edit', { component_id: component.id }) }}" method="POST" class="u-full-width">
<div class="row">
<div class="nine columns">
<label>
Component name:
<input type="text" id="component_name" class="u-full-width" name="component_name" value="{{ component.name }}">
</label>
<div class="row mb-3">
<div class="col-9">
<label class="form-label" for="component_name">Component name:</label>
<input id="component_name" class="form-control" type="text" name="component_name" value="{{ component.name }}">
</div>
<div class="three columns">
<label>
Component type:
<select class="u-full-width" name="component_type">
<option value="gpu" {% if component.type == 'gpu' %}selected{% endif %}>Graphics card</option>
<option value="cpu" {% if component.type == 'cpu' %}selected{% endif %}>Processor</option>
</select>
</label>
<div class="col-3">
<label class="form-label" for="component_type">Component type:</label>
<select id="component_type" class="form-select" name="component_type">
<option value="gpu" {% if component.type == 'gpu' %}selected{% endif %}>Graphics card</option>
<option value="cpu" {% if component.type == 'cpu' %}selected{% endif %}>Processor</option>
</select>
</div>
</div>
<input class="button button-primary u-full-width" type="submit" value="Submit">
<input class="btn btn-primary" type="submit" value="Submit Changes">
</form>
</div>
</div>

View File

@ -6,8 +6,8 @@
<p><a href="{{ url_for('component.add') }}">Create new Hardware Component</a></p>
{% if components | length > 0 %}
<table class="u-full-width">
<thead>
<table class="table table-hover table-responsive">
<thead class="table-light">
<tr>
<th>Component name</th>
<th>Type</th>

View File

@ -4,7 +4,7 @@
{% block content %}
<div class="row">
<div class="twelve columns">
<div class="col-12">
<h1>{{ component.name }}</h1>
<p><a href="{{ url_for('component.edit', { component_id: component.id }) }}">Edit</a></p>
<p>{{ component.type }}</p>
@ -14,12 +14,12 @@
<hr>
<div class="row">
<div class="twelve columns">
<div class="col-12">
<h3>Tests using this component:</h3>
{% if component.tests | length > 0 %}
<table class="u-full-width">
<thead>
<table class="table table-hover table-responsive">
<thead class="table-light">
<tr>
<th>Test title</th>
<th>Benchmarks</th>