davide
/
ELAB-partsearch
1
0
Fork 0
Code Issues 4 Pull Requests Releases Wiki Activity

Heavy restyling

Browse Source
pull/3/head
Davide Bongiovanni 6 years ago
parent c6168f5281
commit 47c25847f0
2 changed files with 109 additions and 196 deletions
Show Stats Download Patch File Download Diff File

223
parts/static/style.css
Unescape View File

@ -2,8 +2,8 @@ html {
background-color: #D7E2E2; background-color: #D7E2E2;
color: #000F0F; color: #000F0F;
font-family: 'Roboto', sans-serif; font-family: 'Roboto', sans-serif;
font-size:large;
overflow-y: scroll; overflow-y: scroll;
text-align: center;
} }
body { body {
@ -11,7 +11,7 @@ body {
} }
h1 { h1 {
padding: 16pt; padding: 16px;
margin: 0 0 20pt 0; margin: 0 0 20pt 0;
text-align: center; text-align: center;
color: #D7E2E2; color: #D7E2E2;
@ -42,39 +42,39 @@ a {
input[type=text].search-bar { input[type=text].search-bar {
color: #404040; color: #404040;
font-size: x-large; font-size: 1.6em;
padding: 5pt 8pt 5pt 8pt; padding: 5pt 8pt 5pt 8pt;
margin-top: 8pt; margin-top: 8pt;
margin-bottom: 8pt; margin-bottom: 8pt;
margin-left: 20pt; margin-left: 20pt;
width: 70%; width: 70%;
border: 2pt solid grey; border: 1px solid grey;
border-radius: 5pt;
} }
.search-bar-container { .filter-container p {
text-align: center; text-align: left;
color: #226666;
font-size: 10px;
margin: 2px;
} }
.filter-container { .filter-container {
background-color: #226666; width: 30%;
padding: 10pt 15pt 10pt 15pt;
margin-top: 10pt;
margin-bottom: 10pt;
display: inline-block; display: inline-block;
border: 1px #226666 solid;
} }
.filter-container p { .filter-container ul {
text-align: left; display: flex;
color: #D7E2E2; justify-content: stretch;
font-size: 10pt; list-style: none;
margin-top: 4pt; margin: 0;
margin-left: 3pt; padding: 0;
margin-bottom: 4pt;
} }
.filter-concontainertainer { .filter-container li {
text-align: center; flex: 1;
font-size: 0.8em;
} }
input[type=checkbox]{ input[type=checkbox]{
@ -82,70 +82,17 @@ input[type=checkbox]{
} }
input[type=checkbox] + label.toggle-btn { input[type=checkbox] + label.toggle-btn {
display: inline-block; padding:6px 0 6px 0;
padding: 5pt; display: block;
color: #013A3A; color: rgba(94,146,146, 0.5);
margin-top: 6pt; background-color: #D7E2E2;
margin-bottom: 6pt;
margin-left: 3pt;
margin-right: 3pt;
width: 80pt;
line-height: 300%;
text-align: center;
border: 1pt solid #013A3A;
transition: 0.2s; transition: 0.2s;
-webkit-transition: 0.2s; -webkit-transition: 0.2s;
} }
input[type=checkbox]:checked + label.toggle-btn { input[type=checkbox]:checked + label.toggle-btn {
background-color: #D7E2E2; color: #D7E2E2;
border: 1pt solid #D7E2E2; background-color: #226666;
color: #000F0F;
}
div label input {
margin-right:100px;
}
.tooltip {
position: relative;
display: inline-block;
}
.tooltip .tooltiptext {
font-size: 10pt;
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
top: -5px;
right: 105%;
margin-left: -60px;
/* Fade in tooltip - takes 1 second to go from 0% to 100% opac: */
opacity: 0;
transition: opacity 0.2s;
}
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
.tooltip .tooltiptext::after {
content: " ";
position: absolute;
top: 50%;
left: 100%; /* To the right of the tooltip */
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent transparent black;
} }
.shadow { .shadow {
@ -179,41 +126,14 @@ div label input {
} }
.round-button { .round-button {
position: absolute; display: flex;
bottom: 15pt; align-items: center;
left: calc(11% - 20pt); justify-content: center;
width: 40pt; width: 56px;
height: 32pt; height: 56px;
border-radius: 20pt; border-radius: 28px;
background-color: #5E9292; font-size: 32px;
font-size: 20pt;
padding-top: 8pt;
box-shadow: 2pt 1pt 8pt black;
}
.round-button-left {
position: absolute;
bottom: 15pt;
left: calc(22% - 20pt);
width: 40pt;
height: 32pt;
border-radius: 20pt;
background-color: #5E9292;
font-size: 20pt;
padding-top: 8pt;
box-shadow: 2pt 1pt 8pt black;
}
.round-button-right {
position: absolute;
bottom: 15pt;
left: calc(33% - 20pt);
width: 40pt;
height: 32pt;
border-radius: 20pt;
background-color: #5E9292; background-color: #5E9292;
font-size: 20pt;
padding-top: 8pt;
box-shadow: 2pt 1pt 8pt black; box-shadow: 2pt 1pt 8pt black;
} }
@ -221,20 +141,11 @@ div label input {
color: #D7E2E2; color: #D7E2E2;
} }
.round-button-left a{
color: #D7E2E2;
}
.round-button-right a{
color: #D7E2E2;
}
.small-square-button { .small-square-button {
position: absolute; position: absolute;
top: 5pt; top: 5px;
right: 5pt; right: 10px;
padding-right: 5pt; font-size: 40px;
font-size: 16pt;
} }
.small-square-button a { .small-square-button a {
@ -246,13 +157,13 @@ div label input {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
position: fixed; position: fixed;
bottom: 15pt; bottom: 20px;
right: 15pt; right: 20px;
width: 40pt; width: 56px;
height: 40pt; height: 56px;
border-radius: 20pt; border-radius: 28px;
font-size: 32px;
background-color: #5E9292; background-color: #5E9292;
font-size: 22pt;
box-shadow: 2pt 1pt 8pt black; box-shadow: 2pt 1pt 8pt black;
} }
@ -264,19 +175,16 @@ div label input {
font-size: 12pt; font-size: 12pt;
} }
.bottom-spacer { #results {
height: 80pt;
}
table#results {
width: 100%; width: 100%;
max-width: 1280px; max-width: 1280px;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
border-collapse: collapse; border-collapse: collapse;
margin-top: 1em;
} }
table#results th { #results th {
background-color: #226666; background-color: #226666;
color: #D7E2E2; color: #D7E2E2;
padding: 5pt; padding: 5pt;
@ -284,36 +192,42 @@ table#results th {
border-left: 2px solid #D7E2E2; border-left: 2px solid #D7E2E2;
} }
table#results tr:nth-child(odd) { #results tr:nth-child(odd) {
background-color: #5E9292; background-color: #5E9292;
} }
table#results td { #results td {
padding: 4pt; padding: 4pt;
cursor: pointer; cursor: pointer;
text-align: left;
} }
table#results #location { #results #location {
width: 18%; width: 18%;
} }
table#results #partno { #results #partno {
/*width: 20%;*/ /*width: 20%;*/
} }
table#results #description { #results #description {
width: 70%; width: 70%;
} }
table#results #docs { #results #docs {
width: 5%; width: 5%;
} }
table#details { #info-container {
position: absolute;
left: 0;
width: 35%; width: 35%;
margin-top: 0; height: 85%;
display: flex;
flex-direction:column;
justify-content:space-between;
}
#details {
width: 100%;
} }
#magical_autofill{ #magical_autofill{
@ -340,6 +254,11 @@ td p {
padding: 0; padding: 0;
} }
.button-container {
display: flex;
justify-content: space-evenly;
}
.map { .map {
position: absolute; position: absolute;
right: 5%; right: 5%;
@ -356,7 +275,3 @@ td p {
.nothidden{ .nothidden{
display: initial !important; display: initial !important;
} }
.results-locations{
}

82
parts/templates/partsearch.html
Unescape View File

@ -9,28 +9,26 @@
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script> crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Roboto:300,400" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="parts/static/style.css" media="screen and (min-width:500px)"> <link rel="stylesheet" type="text/css" href="{{url_for('static', filename='style.css')}}" media="screen and (min-width:500px)">
<link rel="stylesheet" type="text/css" href="parts/static/style-m.css" media="screen and (max-width:500px)"> <link rel="stylesheet" type="text/css" href="{{url_for('static', filename='style-m.css')}}" media="screen and (max-width:500px)">
<link rel="apple-touch-icon-precomposed" href="parts/static/apple-touch-icon.png"> <link rel="apple-touch-icon-precomposed" href="{{url_for('static', filename='apple-touch-icon.png')}}">
<script src="https://use.fontawesome.com/2fef7be393.js"></script> <script src="https://use.fontawesome.com/2fef7be393.js"></script>
<script type="text/javascript" src="parts/static/common.js"></script> <script type="text/javascript" src="{{url_for('static', filename='common.js')}}"></script>
<script type="text/javascript" src="parts/static/script.js"></script> <script type="text/javascript" src="{{url_for('static', filename='script.js')}}"></script>
</head> </head>
<body> <body>
<h1>ELAB Part Search Engine</h1> <h1>ELAB Part Search Engine</h1>
<p>Looking for obsolete ICs that were discontinued years ago? Just start typing!</p> <p>Looking for obsolete ICs that were discontinued years ago? Just start typing!</p>
<div class="search-bar-container">
<input type="text" name="search-bar" class="search-bar" placeholder="Search parts"> <input type="text" name="search-bar" class="search-bar" placeholder="Search parts">
</div>
<div class="filter-concontainertainer">
<div class="filter-container"> <div class="filter-container">
<p>SEARCH IN</p> <p>SEARCH IN</p>
<input type="checkbox" class="checkbox" id="location"></input><label class="toggle-btn" for="location">Locations<br/><i class="fa fa-map" style="font-size:28pt"></i></label> <ul>
<input type="checkbox" class="checkbox" id="partno" checked></input><label class="toggle-btn" for="partno">Part Number<br/><i class="fa fa-hashtag" style="font-size:28pt"></i></label> <li><input type="checkbox" class="checkbox" id="location"><label class="toggle-btn" for="location">Locations<br><i class="fa fa-map" style="font-size:20pt"></i></label></li>
<input type="checkbox" class="checkbox" id="description" checked></input><label class="toggle-btn" for="description">Description<br/><i class="fa fa-edit" style="font-size:28pt"></i></label> <li><input type="checkbox" class="checkbox" id="partno" checked=""><label class="toggle-btn" for="partno">Part Number<br><i class="fa fa-hashtag" style="font-size:20pt"></i></label></li>
<li><input type="checkbox" class="checkbox" id="description" checked=""><label class="toggle-btn" for="description">Description<br><i class="fa fa-edit" style="font-size:20pt"></i></label></li>
</ul>
</div> </div>
</div>
<table id="results"> <table id="results">
<tr> <tr>
<th id="location">Location</th> <th id="location">Location</th>
@ -39,41 +37,41 @@
</tr> </tr>
</table> </table>
<h3 id="no-results">No results.</h3> <h3 id="no-results">No results.</h3>
<div class="bottom-spacer"></div>
<div class="shadow" onclick="overlay_out()"></div> <div class="shadow" onclick="overlay_out()"></div>
<div class="overlay"> <div class="overlay">
<h2>Part Details</h2> <h2>Part Details</h2>
<div> <div id="info-container">
<table id="details"> <img src="" id="map" class="map"/>
<tr id="location-head" class="details-header"><td>LOCATION</td></tr> <table id="details">
<tr id="location" class="details-content"><td><p></p> <tr id="location-head" class="details-header"><td>LOCATION</td></tr>
<select class="pinfo-input" id="container-dropdown" onchange="container_onchange()"> <tr id="location" class="details-content"><td><p></p>
{% for container in containers %} <select class="pinfo-input" id="container-dropdown" onchange="container_onchange()">
<option value="{{container['id']}}">{{container['name']}}</option> {% for container in containers %}
{% endfor %} <option value="{{container['id']}}">{{container['name']}}</option>
</select> {% endfor %}
<select class="pinfo-input" id="location-dropdown"> </select>
<option value="-1" selected="true">-- Select a container --</option> <select class="pinfo-input" id="location-dropdown">
</select> <option value="-1" selected="true">-- Select a container --</option>
</td></tr> </select>
<tr id="partno-head" class="details-header"><td>PART NUMBER</td></tr> </td></tr>
<tr id="partno" class="details-content"><td><p></p><input type="text" name="partno-input" placeholder="Part Number" class="pinfo-input" id="partno-input"/></td></tr> <tr id="partno-head" class="details-header"><td>PART NUMBER</td></tr>
<tr id="description-head" class="details-header"><td>DESCRIPTION</td></tr> <tr id="partno" class="details-content"><td><p></p><input type="text" name="partno-input" placeholder="Part Number" class="pinfo-input" id="partno-input"/></td></tr>
<tr id="description" class="details-content"><td><p></p><input type="text" name="description-input" placeholder="Description" class="pinfo-input" id="description-input"/></td></tr> <tr id="description-head" class="details-header"><td>DESCRIPTION</td></tr>
<tr id="magical_autofill" style="display:none"><td><input type="button" id="magic-autofill-button" onclick="octopartFetch()" value="magical auto-fill" style="margin-bottom:6pt"/> powered by <a href="http://octopart.com" class="small_link">OctoPart™</a></td></tr> <tr id="description" class="details-content"><td><p></p><input type="text" name="description-input" placeholder="Description" class="pinfo-input" id="description-input"/></td></tr>
<tr id="datasheet-head" class="details-header"><td>DATASHEET: </td></tr> <tr id="magical_autofill" style="display:none"><td><input type="button" id="magic-autofill-button" onclick="octopartFetch()" value="magical auto-fill" style="margin-bottom:6pt"/> powered by <a href="http://octopart.com" class="small_link">OctoPart™</a></td></tr>
<tr id="datasheet" style="display: none"><td><input type="file" accept=".pdf" class="pinfo-input" id="datasheet-finput"></td></tr> <tr id="datasheet-head" class="details-header"><td>DATASHEET: </td></tr>
<tr id="datasheet" style="display: none"><td>OR: <input type="text" class="pinfo-input" name="datasheet-url-input" style="width:80%; margin-bottom: 6pt;" placeholder="Datasheet URL"></td></tr> <tr id="datasheet" style="display: none"><td><input type="file" accept=".pdf" class="pinfo-input" id="datasheet-finput"></td></tr>
<tr id="notes-head" class="details-header"><td>NOTES</td></tr> <tr id="datasheet" style="display: none"><td>OR: <input type="text" class="pinfo-input" name="datasheet-url-input" style="width:80%; margin-bottom: 6pt;" placeholder="Datasheet URL"></td></tr>
<tr id="notes" class="details-content"><td><p></p><input type="text" name="notes-input" class="pinfo-input" placeholder="Notes"></td></tr> <tr id="notes-head" class="details-header"><td>NOTES</td></tr>
</table> <tr id="notes" class="details-content"><td><p></p><input type="text" name="notes-input" class="pinfo-input" placeholder="Notes"></td></tr>
<img src="" id="map" class="map"/> </table>
<div class="button-container">
<div class="round-button"><a href="#" id="delete-button"><i class="fa fa-trash" aria-hidden="true"></i></a></div>
<div class="round-button"><a href="#" id="edit-button"><i class="fa fa-pencil" aria-hidden="true"></i></a></div>
<div class="round-button"><a href="#" id="duplicate-button" onclick="init_edit(-1)"><i class="fa fa-copy" aria-hidden="true"></i></a></div>
</div>
</div> </div>
<div> <div>
<div class="round-button-left"><a href="#" id="edit-button"><i class="fa fa-pencil" aria-hidden="true"></i></a></div>
<div class="round-button"><a href="#" id="delete-button"><i class="fa fa-trash" aria-hidden="true"></i></a></div>
<div class="round-button-right"><a href="#" id="duplicate-button" onclick="init_edit(-1)"><i class="fa fa-copy" aria-hidden="true"></i></a></div>
<div class="small-square-button"><a href="#" onclick="overlay_out()"><i class="fa fa-times" aria-hidden="true"></i></a></div> <div class="small-square-button"><a href="#" onclick="overlay_out()"><i class="fa fa-times" aria-hidden="true"></i></a></div>
</div> </div>
</div> </div>

Write Preview
Loading…
Cancel
Save