Fixed css

This commit is contained in:
FrederikBaerentsen 2024-03-04 07:45:58 -05:00
parent 4991595995
commit 1bab668b98
3 changed files with 66 additions and 53 deletions

1
static/save.svg Normal file
View File

@ -0,0 +1 @@
<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="feather feather-save"><path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"></path><polyline points="17 21 17 13 7 13 7 21"></polyline><polyline points="7 3 7 8 15 8"></polyline></svg>

After

Width:  |  Height:  |  Size: 392 B

View File

@ -2,58 +2,67 @@
<html> <html>
<head> <head>
<title>{{ title }}</title> <title>{{ title }}</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <!-- CSS Reset -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.css">
<!-- Milligram CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/milligram/1.4.1/milligram.css">
<style> <style>
table {
width: 100%;
border-collapse: collapse;
}
th, td { td {
padding: 8px; padding: 0px 0px 0px 0px;
text-align: left; margin-left: 10px;
border-bottom: 1px solid #ddd; height: 50px;
} }
th { .centered-cell {
background-color: #f2f2f2; text-align: center; /* Center the content horizontally within the cell */
} }
/* Responsive styles */ .inputContainer {
@media only screen and (max-width: 600px) { display: inline-block; /* Display as an inline block */
table { vertical-align: middle; /* Center vertically within the cell */
border: 0; width: 120px;
} }
table caption { .inputContainer form {
font-size: 1.3em; margin: 5% auto 5% auto;
} }
table thead { .inputField {
display: none; display: flex;
} align-items: center; /* Align items vertically */
width: 100%; /* Ensure inputField fills out inputContainer */
height: 100%; /* Ensure inputField fills out inputContainer */
}
.inputField input {
flex: 1;
width: 70%;
padding: 0px;
margin: auto 2.5px auto 2.5px;
}
.inputField button {
width: 30%;
padding: 0px;
margin: 0 2.5px 0 2.5px;
}
table tr { .square-button {
border-bottom: 3px solid #ddd; background-color: white;
display: block; }
margin-bottom: 10px;
}
table td {
display: block;
text-align: right;
font-size: 13px;
}
table td::before { td img{
content: attr(data-label); display: block;
font-weight: bold; margin-left: auto;
display: inline-block; margin-right: auto;
width: 50%;
} }
}
</style> </style>
</head> </head>
<body> <body>
<div class="container"> <div class="container">

View File

@ -5,13 +5,11 @@
<table id="data" class="table table-striped"> <table id="data" class="table table-striped">
<thead> <thead>
<tr> <tr>
<th>img</th> <th></th>
<th>element_id</th> <th>ID</th>
<th>part_num</th> <th>Name</th>
<th>name</th> <th>Color</th>
<th>color.id</th> <th>Qty</th>
<th>color</th>
<th>qty</th>
{% for i in json_file['unit'] %} {% for i in json_file['unit'] %}
<th>Missing ({{ loop.index }})</th> <th>Missing ({{ loop.index }})</th>
{% endfor %} {% endfor %}
@ -26,15 +24,14 @@
{% else %} {% else %}
<td><img src="{{ '/static/parts/' + brick.element_id + '.jpg' }}" style="height: 50px; width: auto;"></td> <td><img src="{{ '/static/parts/' + brick.element_id + '.jpg' }}" style="height: 50px; width: auto;"></td>
{% endif %} {% endif %}
<td>{{ brick.element_id }}</td>
<td>{{ brick.part.part_num }}</td> <td>{{ brick.part.part_num }}</td>
<td>{{ brick.part.name }}</td> <td>{{ brick.part.name }}</td>
<td>{{ brick.color.id }}</td>
<td>{{ brick.color.name }}</td> <td>{{ brick.color.name }}</td>
<td>{{ brick.quantity }}</td> <td>{{ brick.quantity }}</td>
{% for i in json_file['unit'] %} {% for i in json_file['unit'] %}
<td> <td class="centered-cell">
<div class="inputContainer">
{% set ns = namespace(count='') %} {% set ns = namespace(count='') %}
<form action="/{{ tmp }}/saveNumber" method="post"> <form action="/{{ tmp }}/saveNumber" method="post">
<input type="hidden" name="brick.part.part_num" value="{{ brick.part.part_num }}"> <input type="hidden" name="brick.part.part_num" value="{{ brick.part.part_num }}">
@ -51,8 +48,14 @@
{% endif %} {% endif %}
{% endif %} {% endif %}
{% endfor %} {% endfor %}
<input type="text" style="height:auto;width:40px" id="numberInput" name="numberInput" value={{ ns.count }}><button type="submit"><i class="fa fa-save"></i></button> <div class='inputField'>
<input type="text" id="numberInput" name="numberInput" value={{ ns.count }}>
<button class="square-button" type="submit">
<img src="/static/save.svg" alt="Save Icon">
</button>
</div>
</form> </form>
</div>
</td> </td>
{% endfor %} {% endfor %}
</tr> </tr>