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

82
parts/templates/partsearch.html
Unescape View File

@ -9,28 +9,26 @@
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
<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="parts/static/style-m.css" media="screen and (max-width:500px)">
<link rel="apple-touch-icon-precomposed" href="parts/static/apple-touch-icon.png">
<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="{{url_for('static', filename='style-m.css')}}" media="screen and (max-width:500px)">
<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 type="text/javascript" src="parts/static/common.js"></script>
<script type="text/javascript" src="parts/static/script.js"></script>
<script type="text/javascript" src="{{url_for('static', filename='common.js')}}"></script>
<script type="text/javascript" src="{{url_for('static', filename='script.js')}}"></script>
</head>
<body>
<h1>ELAB Part Search Engine</h1>
<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">
</div>
<div class="filter-concontainertainer">
<div class="filter-container">
<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>
<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>
<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>
<ul>
<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>
<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>
<table id="results">
<tr>
<th id="location">Location</th>
@ -39,41 +37,41 @@
</tr>
</table>
<h3 id="no-results">No results.</h3>
<div class="bottom-spacer"></div>
<div class="shadow" onclick="overlay_out()"></div>
<div class="overlay">
<h2>Part Details</h2>
<div>
<table id="details">
<tr id="location-head" class="details-header"><td>LOCATION</td></tr>
<tr id="location" class="details-content"><td><p></p>
<select class="pinfo-input" id="container-dropdown" onchange="container_onchange()">
{% for container in containers %}
<option value="{{container['id']}}">{{container['name']}}</option>
{% endfor %}
</select>
<select class="pinfo-input" id="location-dropdown">
<option value="-1" selected="true">-- Select a container --</option>
</select>
</td></tr>
<tr id="partno-head" class="details-header"><td>PART NUMBER</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-head" class="details-header"><td>DESCRIPTION</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="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-head" class="details-header"><td>DATASHEET: </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" 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-head" class="details-header"><td>NOTES</td></tr>
<tr id="notes" class="details-content"><td><p></p><input type="text" name="notes-input" class="pinfo-input" placeholder="Notes"></td></tr>
</table>
<img src="" id="map" class="map"/>
<div id="info-container">
<img src="" id="map" class="map"/>
<table id="details">
<tr id="location-head" class="details-header"><td>LOCATION</td></tr>
<tr id="location" class="details-content"><td><p></p>
<select class="pinfo-input" id="container-dropdown" onchange="container_onchange()">
{% for container in containers %}
<option value="{{container['id']}}">{{container['name']}}</option>
{% endfor %}
</select>
<select class="pinfo-input" id="location-dropdown">
<option value="-1" selected="true">-- Select a container --</option>
</select>
</td></tr>
<tr id="partno-head" class="details-header"><td>PART NUMBER</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-head" class="details-header"><td>DESCRIPTION</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="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-head" class="details-header"><td>DATASHEET: </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" 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-head" class="details-header"><td>NOTES</td></tr>
<tr id="notes" class="details-content"><td><p></p><input type="text" name="notes-input" class="pinfo-input" placeholder="Notes"></td></tr>
</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 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>
</div>

Write Preview
Loading…
Cancel
Save