templates
/
KiBot
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[KiRi] Moved style from HTML to CSS

This commit is contained in:
Salvador E. Tropea 2023-12-12 11:08:31 -03:00
parent d073b155ef
commit 6a380e3ddb
2 changed files with 277 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

116
kibot/resources/kiri/index.html
View File

@ -18,25 +18,28 @@
<div id="server_offline" style="display: none;">
</div>
<div class="container fill no-gutters" style="background-color: #333; overflow-y: hidden; overflow-x: hidden; padding: 0px 10px 0px 10px; margin: 0px;">
<div class="row fill align-items-start no-gutters" style="overflow-y: hidden; overflow-x: hidden; padding: 0px 0px 0px 0px; margin: 0px;">
<div class="col align-self-start justify-content-start col-3 no-gutters" style="height: 100%; overflow-y: hidden; overflow-x: hidden; padding: 0px 0px 0px 0px; margin: 0px;">
<div class="list-group 3 no-gutters" style="padding: 0px 0px 0px 0px; margin: 0px 0px 0px 8px; height: 95%;">
<span style="margin-top: 1em"></span>
<h3 class="text-light" style="margin-left: 5px;">Kicad Revision Inspector</h3>
<div id="sch_title" style="display: inline; margin-left: 5px;">
<h4 id="sch_title_text" class="text-warning text-bold" style="margin-bottom: 0px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">[SCH_TITLE]</h4>
<!-- User Interface -->
<div class="container fill no-gutters ui-style">
<div class="row fill align-items-start no-gutters ui-row-style">
<!-- Project info and commits -->
<div class="col align-self-start justify-content-start col-3 no-gutters ui-col-prjdata">
<div class="list-group 3 no-gutters ui-list-prjdata">
<span class="ui-list-topsep-prjdata"></span>
<h3 class="text-light ui-kiri-title">Kicad Revision Inspector</h3>
<div id="sch_title" class="ui-sch-title-m" style="display: inline;">
<h4 id="sch_title_text" class="text-warning text-bold ui-sch-title">[SCH_TITLE]</h4>
<p id="sch_rev" class="text-light text-sm" >Rev. [SCH_REVISION] ([SCH_DATE])</p>
</div>
<div id="pcb_title" style="display: none; margin-left: 5px;">
<h4 id="pcb_title_text" class="text-info text-bold" style="margin-bottom: 0px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">[PCB_TITLE]</h4>
<div id="pcb_title" class="ui-pcb-title-m" style="display: none;">
<h4 id="pcb_title_text" class="text-info text-bold ui-pcb-title">[PCB_TITLE]</h4>
<p id="pcb_rev" class="text-light text-sm">Rev. [PCB_REVISION] ([PCB_DATE])</p>
</div>
<p class="text-light" >
<span style="margin-left:5px; margin-right:0.5em" class="iconify" data-icon="fa-solid:code-branch" data-inline="false"></span>
<!-- Commits -->
<p class="text-light">
<span class="iconify icon-commits" data-icon="fa-solid:code-branch" data-inline="false"></span>
Commits
</p>
<div class="form-check scrollbox" style="padding: 0px 4px 8px 0px; margin: 0px; margin-right: 4px; overflow-y: scroll">
<div class="form-check scrollbox ui-commits-list">
<form id="commits_form" class="overflow-auto scrollbox-content">
<!-- FILL_COMMITS_HERE -->
</form>
@ -44,49 +47,48 @@
</div>
</div>
<div class="col align-self-start justify-content-start col-7 no-gutters" style="background-color: #333; padding: 0px 0px 0px 0px; margin: 0px; height: 90vh;">
<!-- Controls, commit legends and diff -->
<div class="col align-self-start justify-content-start col-7 no-gutters ui-center">
<div class="row no-gutters ui-center-row">
<!-- Controls -->
<div class="container no-gutters ui-controls">
<div class="row no-gutters ui-controls-row">
<div class="row no-gutters" style="width: 100%; padding: 0px 0px 0px 0px; margin: 0px;">
<div class="container no-gutters" style="width: 100%; flex: 1; padding: 0px 0px 0px 0px; margin: 0px;">
<div class="row no-gutters" style="width: 100%; margin: 0px 0px 0px 5px;">
<form class="inline" style="padding: 0px 0px 0px 0px; margin: 20px 0px 0px 10px;">
<form class="inline ui-pcb-sch-sel">
<div id="view_mode" class="form-group row btn-group btn-group-toggle" data-toggle="buttons" role="group" aria-label="View Mode">
<label id="show_sch_lbl" data-toggle="tooltip" title="Schematic View (s)" class="btn btn-secondary active" onclick="show_sch()">
<input id="show_sch" type="radio" name="view_mode" value="show_sch" checked>
<span class="iconify" style="width: 20px; height: 20px;" data-icon="carbon:schematics" data-inline="false"></span>
<span class="iconify icon-control" data-icon="carbon:schematics" data-inline="false"></span>
</label>
<label id="show_pcb_lbl" data-toggle="tooltip" title="Layout View (s)" class="btn btn-secondary" onclick="show_pcb()">
<input id="show_pcb" type="radio" name="view_mode" value="show_pcb" >
<span class="iconify" style="width: 20px; height: 20px;" data-icon="codicon:circuit-board" data-inline="false"></span>
<span class="iconify icon-control" data-icon="codicon:circuit-board" data-inline="false"></span>
</label>
</div>
</form>
<span style="width: 2em"></span>
<span class="ui-controls-sep1"></span>
<form class="inline" style="padding: 0px 0px 0px 0px; margin: 20px 0px 0px 20px;">
<form class="inline ui-controls-svg">
<div id="svg_controls" class="form-group btn-group btn-group-toggle" role="group" aria-label="Zoom Level">
<button id="zoom-in" data-toggle="tooltip" title="Zoom In (+)" name="svg_controls" type="button" aria-pressed="false" class="btn btn-secondary" onclick="this.blur();">
<span class="iconify" style="width: 20px; height: 20px;" data-icon="akar-icons:zoom-in" data-inline="false"></span>
<span class="iconify icon-control" data-icon="akar-icons:zoom-in" data-inline="false"></span>
</button>
<button id="zoom-out" data-toggle="tooltip" title="Zoom Out (-)" name="svg_controls" type="button" aria-pressed="false" class="btn btn-secondary" onclick="this.blur();" >
<span class="iconify" style="width: 20px; height: 20px;" data-icon="akar-icons:zoom-out" data-inline="false"></span>
<button id="zoom-out" data-toggle="tooltip" title="Zoom Out (-)" name="svg_controls" type="button" aria-pressed="false" class="btn btn-secondary" onclick="this.blur();">
<span class="iconify icon-control" data-icon="akar-icons:zoom-out" data-inline="false"></span>
</button>
<button id="zoom-fit" data-toggle="tooltip" title="Fit View (0)" name="svg_controls" type="button" aria-pressed="false" class="btn btn-secondary" onclick="this.blur();" >
<span class="iconify" style="width: 20px; height: 20px;" data-icon="carbon:center-to-fit" data-inline="false"></span>
<button id="zoom-fit" data-toggle="tooltip" title="Fit View (0)" name="svg_controls" type="button" aria-pressed="false" class="btn btn-secondary" onclick="this.blur();">
<span class="iconify icon-control" data-icon="carbon:center-to-fit" data-inline="false"></span>
</button>
</div>
</form>
<span style="width: 1em"></span>
<span class="ui-controls-sep2"></span>
<form class="inline" style="padding: 0px 0px 0px 0px; margin: 20px 0px 0px 20px;">
<form class="inline ui-controls-info">
<div id="info_controls" class="form-group btn-group btn-group-toggle" role="group" aria-label="Info">
<button id="info-btn" data-toggle="modal" title="Info (i)" name="info_controls" type="button" aria-pressed="false" class="btn btn-secondary" data-target="#shortcuts-modal" onclick="this.blur();">
<span class="iconify" style="width: 20px; height: 20px;" data-icon="akar-icons:info" data-inline="false"></span>
<span class="iconify icon-control" data-icon="akar-icons:info" data-inline="false"></span>
</button>
</div>
</form>
@ -94,11 +96,12 @@
</div>
</div>
</div>
<div class="col no-gutters" style="width: 100%; padding: 0px 0px 0px 0px; margin: 0px; height: 100%; ">
<div class="col no-gutters" style="width: 100%; height: 90%; padding: 0px 0px 0px 0px; margin: 0px;">
<div id="legend" class="rounded no-gutters" style="background-color: #222; width: 100%; padding: 8px 5px 8px 5px; margin: 0px;">
<!-- Commit legends -->
<div class="col no-gutters ui-canvas-out">
<div class="col no-gutters ui-canvas-in">
<div id="legend" class="rounded no-gutters ui-legend">
<iframe name="hidden_post_target" class="hidden_iframe"></iframe>
<span id=commit1_legend style="margin-left:0.5em; margin-right:0.2em; color: #00FF00; width: 10px; height: 10px;" class="iconify" data-icon="teenyicons-square-solid"></span>
<span id="commit1_legend" class="iconify icon-commit1" data-icon="teenyicons-square-solid"></span>
<small id="commit1_legend_text" class="text-sm text-light">
Newer
<span class="text-monospace">
@ -109,8 +112,8 @@
</form>
</span>
</small>
<span style="display: inline; width: 2em;"></span>
<span id="commit2_legend" style="display: inline; margin-left:1em; margin-right:0.2em; color: #FF0000; width: 10px; height: 10px;" class="iconify" data-icon="teenyicons-square-solid"></span>
<span class="ui-legend-sep1"></span>
<span id="commit2_legend icon-commit2" class="iconify" data-icon="teenyicons-square-solid"></span>
<small id="commit2_legend_text" class="text-sm text-light">
Older
<span class="text-monospace">
@ -121,31 +124,31 @@
</form>
</span>
</small>
<span id="commit3_legend" style="margin-left:1em; margin-right:0.2em; color: #FFA000; width: 10px; height: 10px;" class="iconify" data-icon="teenyicons-square-solid"></span>
<span id="commit3_legend icon-commit3" class="iconify" data-icon="teenyicons-square-solid"></span>
<small id="commit3_legend_text" class="text-sm text-light">
Unchanged
</small>
</div>
<div id="diff-container" class="position-relative" style="height: 94%; padding: 0px">
<!-- Diff canvas -->
<div id="diff-container" class="position-relative ui-diff-container">
<!-- SVGS_GOES_HERE -->
</div>
</div>
</div>
</div>
<div class="col align-self-start justify-content-start col-1 no-gutters" style="width: 100%; padding: 0px 0px 0px 0px; margin: 0px; height: 100vh;" >
<!-- Sheets/Layers -->
<div class="col align-self-start justify-content-start col-1 no-gutters ui-sheets-col">
<div class="list-group no-gutters" id="pages_list" style="display: inline;">
<div class="form-check no-gutters" style="width: 180px; padding-top: 1em">
<!-- Sheets form -->
<div class="form-check no-gutters ui-sheets-form">
<p class="text-light">
<span style="margin-right:0.5em; width: 20px; height: 20px;" class="iconify" data-icon="gridicons:next-page" data-inline="false"></span>
<span class="iconify icon-sheets" data-icon="gridicons:next-page" data-inline="false"></span>
Pages
</p>
<div class="row" style="height: 85%; width: 300px;">
<div class="col" style="height: 100%; width: 100%">
<div id="pages_list_div" class="form-check scrollbox" style="height: 100%; width: 100%; padding: 0px 0px 8px 0px; margin: 0px; overflow-y: scroll; max-height: 90vh;">
<div class="row ui-sheets-form-row">
<div class="col ui-sheets-form-col">
<div id="pages_list_div" class="form-check scrollbox ui-sheets-form-div">
<form id="pages_list_form" class="overflow-auto scrollbox-content">
<!-- FILL_PAGES_HERE -->
</form>
@ -155,15 +158,15 @@
</div>
</div>
<div class="list-group no-gutters" id="layers_list" style="display: none; height: 100%;">
<div class="form-check no-gutters" style="width: 180px; padding-top: 1em; height: 100%; ">
<div class="list-group no-gutters" id="layers_list" style="display: none;">
<div class="form-check no-gutters ui-sheets-form">
<p class="text-light">
<span style="margin-right:0.5em; width: 20px; height: 20px;" class="iconify" data-icon="teenyicons:layers-solid" data-inline="false"></span>
<span class="iconify icon-sheets" data-icon="teenyicons:layers-solid" data-inline="false"></span>
Layers
</p>
<div class="row" style="height: 85%; width: 300px;">
<div class="col" style="height: 100%; width: 100%">
<div id="layers_list_div" class="form-check scrollbox" style="height: 100%; width: 100%; padding: 0px 0px 8px 0px; margin: 0px; overflow-y: scroll; max-height: 90vh;">
<div class="row ui-sheets-form-row">
<div class="col ui-sheets-form-col">
<div id="layers_list_div" class="form-check scrollbox ui-sheets-form-div">
<form id="layers_list_form" class="overflow-auto scrollbox-content">
<!-- FILL_LAYERS_HERE -->
</form>
@ -176,6 +179,7 @@
</div>
</div>
<!-- Help dialog -->
<div class="modal fade text-light" id="shortcuts-modal" tabindex="-1" role="dialog" aria-labelledby="shortcuts-modal-title" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">

217
kibot/resources/kiri/kiri.css
View File

@ -360,3 +360,220 @@ hr {
margin-left: 0.5em;
margin-right: 0.1em;
}
.icon-commits {
margin-left: 5px;
margin-right:0.5em;
}
.icon-control {
width: 20px;
height: 20px;
}
.icon-commit1 {
margin-left: 0.5em;
margin-right: 0.2em;
color: #00FF00;
width: 10px;
height: 10px;
}
.icon-commit2 {
display: inline;
margin-left: 1em;
margin-right:0.2em;
color: #FF0000;
width: 10px;
height: 10px;
}
.icon-commit3 {
margin-left:1em;
margin-right:0.2em;
color: #FFA000;
width: 10px;
height: 10px;
}
.icon-sheets {
margin-right:0.5em;
width: 20px;
height: 20px;
}
.ui-style {
background-color: #333;
overflow-y: hidden;
overflow-x: hidden;
padding: 0px 10px 0px 10px;
margin: 0px;
}
.ui-row-style {
overflow-y: hidden;
overflow-x: hidden;
padding: 0px 0px 0px 0px;
margin: 0px;
}
.ui-col-prjdata {
height: 100%;
overflow-y: hidden;
overflow-x: hidden;
padding: 0px 0px 0px 0px;
margin: 0px;
}
.ui-list-prjdata {
height: 95%;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 8px;
}
.ui-list-topsep-prjdata {
margin-top: 1em;
}
.ui-kiri-title {
margin-left: 5px;
}
.ui-sch-title-m {
margin-left: 5px;
}
.ui-pcb-title-m {
margin-left: 5px;
}
.ui-sch-title {
margin-bottom: 0px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.ui-pcb-title {
margin-bottom: 0px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.ui-commits-list {
padding: 0px 4px 8px 0px;
margin: 0px;
margin-right: 4px;
overflow-y: scroll;
}
.ui-center {
background-color: #333;
padding: 0px 0px 0px 0px;
margin: 0px;
height: 90vh;
}
.ui-center-row {
width: 100%;
padding: 0px 0px 0px 0px;
margin: 0px;
}
.ui-controls {
width: 100%;
flex: 1;
padding: 0px 0px 0px 0px;
margin: 0px;
}
.ui-controls-row {
width: 100%;
margin: 0px 0px 0px 5px;
}
.ui-pcb-sch-sel {
padding: 0px 0px 0px 0px;
margin: 20px 0px 0px 10px;
}
.ui-controls-sep1 {
width: 2em;
}
.ui-controls-svg {
padding: 0px 0px 0px 0px;
margin: 20px 0px 0px 20px;
}
.ui-controls-sep2 {
width: 1em;
}
.ui-controls-info {
padding: 0px 0px 0px 0px;
margin: 20px 0px 0px 20px;
}
.ui-canvas-out {
width: 100%;
height: 100%;
padding: 0px 0px 0px 0px;
margin: 0px;
}
.ui-canvas-in {
width: 100%;
height: 90%;
padding: 0px 0px 0px 0px;
margin: 0px;
}
.ui-legend {
background-color: #222;
width: 100%;
padding: 8px 5px 8px 5px;
margin: 0px;
}
.ui-legend-sep1 {
display: inline;
width: 2em;
}
.ui-diff-container {
height: 94%;
padding: 0px;
}
.ui-sheets-col {
width: 100%;
padding: 0px 0px 0px 0px;
margin: 0px;
height: 100vh;
}
.ui-sheets-form {
width: 180px;
padding-top: 1em;
}
.ui-sheets-form-row {
height: 85%;
width: 300px;
}
.ui-sheets-form-col {
height: 100%;
width: 100%;
}
.ui-sheets-form-div {
height: 100%;
width: 100%;
padding: 0px 0px 8px 0px;
margin: 0px;
overflow-y: scroll;
max-height: 90vh;
}