nofusscomputing/centurion_erp
1
0
Fork 0
Code Issues Wiki Activity

feat(base): add stylised action button/text

Browse Source 
!5
This commit is contained in:
Jon Lockwood
2024-05-17 18:53:57 +09:30
parent 8b746bb9ff
commit 7302f99753
5 changed files with 88 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
app/itam/templates/itam/device.html.j2
View File

@ -74,8 +74,11 @@
<tr>
<td><a href="{% url 'ITAM:_software_view' pk=software.id %}">{{ software.software }}</a></td>
<td><a href="{% url 'ITAM:_device_software_view' device_id=device.id pk=software.id %}">{{ software.get_action_display }}</a></td>
<td>
{% include 'icons/success_text.html.j2' with icon_text='success' %}{% include 'icons/cross_text.html.j2' with icon_text='cross' %}{% include 'icons/change_text.html.j2' with icon_text='change' %}
</td>
<td>&nbsp;</td>
<th>&nbsp;</th>
</tr>
{% endfor %}
</table>

60
app/project-static/base.css
View File

@ -41,6 +41,66 @@ span#content_header_icon {
color: #177ee6;
}
span.icon-text {
vertical-align: middle;
border-radius: 25px;
font-size: inherit;
border: 1px solid #ccc;
line-height: 30px;
padding-left: 1px;
padding-right: 10px;
height: 30px;
display: inline-block;
}
span.success {
color: #319c3a;
}
span.icon-success {
fill: #319c3a;
height: 30px;
line-height: 30px;
margin: 0px;
margin-bottom: -7px;
padding: 0px;
vertical-align: middle;
display: inline-block;
}
span.cross {
color: #9c3131;
}
span.icon-cross {
fill: #9c3131;
height: 30px;
line-height: 30px;
margin: 0px;
margin-bottom: -7px;
padding: 0px;
vertical-align: middle;
display: inline-block;
}
span.change {
color: #cab706;
}
span.icon-change {
fill: #cab706;
height: 30px;
line-height: 30px;
margin: 0px;
margin-bottom: -7px;
padding: 0px;
vertical-align: middle;
display: inline-block;
}
/* .icon {
display: block;
content: none;

8
app/templates/icons/change_text.html.j2 Normal file
View File

@ -0,0 +1,8 @@
<span class="icon-text change">
<span class="icon-change" style="">
<svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 -960 960 960" width="20px">
<path d="M483-337q-29 0-56.5-10T378-378q-20-20-31-46.28T336-480q0-9.74.8-18.99.8-9.25 3.2-18.01 2-10-1.66-18.82-3.65-8.83-12.59-12.5-9.75-3.68-18.37.51-8.63 4.19-11.63 14.24Q292-521 290-507.63q-2 13.37-2 27.63 0 38 14.71 73.42Q317.42-371.17 344-344q28 28 64.5 42t75.5 14l-27 27q-7 7.36-7 17.18t7 16.82q7 7 16.82 7t17.18-7l59.79-59.79Q562-298 562-312.18T551-337l-59-60q-7.36-7-17.18-7T458-397q-7 7-7 16.82t7 17.18l25 26Zm-7-287q29.7 0 57.35 10.5Q561-603 582-582q20 20 31 46.28T624-480q0 9-.8 18.5T620-443q-2 10 1.5 19t12.59 12q9.91 3 18.89-1.32 8.99-4.33 12.11-14.71Q669-441 670.5-453.5 672-466 672-480q0-38-15-73.5T615-616q-28-28-65-41.5T474-670l29-29q7-7.36 7-17.18T503-733q-7-7-16.82-7T469-733l-59.79 59.79Q398-662 398-647.82T409-623l60 60q7.36 7 17.18 7t16.82-7q7-7 7-16.82T503-597l-27-27Zm4.28 528Q401-96 331-126t-122.5-82.5Q156-261 126-330.96t-30-149.5Q96-560 126-629.5q30-69.5 82.5-122T330.96-834q69.96-30 149.5-30t149.04 30q69.5 30 122 82.5T834-629.28q30 69.73 30 149Q864-401 834-331t-82.5 122.5Q699-156 629.28-126q-69.73 30-149 30Z"/>
</svg>
</span>
{{ icon_text }}
</span>

8
app/templates/icons/cross_text.html.j2 Normal file
View File

@ -0,0 +1,8 @@
<span class="icon-text cross">
<span class="icon-cross" style="">
<svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 -960 960 960" width="20px">
<path d="m480-429 116 116q11 11 25.5 10.5T647-314q11-11 11-25.5t-11-25.46L531-480.5l116-115.54q11-10.96 11-25.46T647-647q-11-11-25.5-11T596-647L480-531 364-647q-11-11-25-11t-25 11q-11 11-11 25.5t10.91 25.5L429-480 313-364q-11 11-10.5 25t11.5 25q11 11 25.5 11t25.41-10.91L480-429Zm.28 333Q401-96 331-126t-122.5-82.5Q156-261 126-330.96t-30-149.5Q96-560 126-629.5q30-69.5 82.5-122T330.96-834q69.96-30 149.5-30t149.04 30q69.5 30 122 82.5T834-629.28q30 69.73 30 149Q864-401 834-331t-82.5 122.5Q699-156 629.28-126q-69.73 30-149 30Z" />
</svg>
</span>
{{ icon_text }}
</span>

8
app/templates/icons/success_text.html.j2 Normal file
View File

@ -0,0 +1,8 @@
<span class="icon-text success">
<span class="icon-success" style="">
<svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 -960 960 960" width="20px">
<path class="tick" d="m424-408-86-86q-11-11-28-11t-28 11q-11 11-11 28t11 28l114 114q12 12 28 12t28-12l226-226q11-11 11-28t-11-28q-11-11-28-11t-28 11L424-408Zm56 328q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Z"></path>
</svg>
</span>
{{ icon_text }}
</span>