Skip to content

Commit

Permalink
Separate demo from main toh code
Browse files Browse the repository at this point in the history
  • Loading branch information
@soif
soif committed Oct 17, 2024
1 parent 4bb9689 commit 876c4e9
Show file tree
Hide file tree
Showing 4 changed files with 109 additions and 37 deletions.
39 changes: 30 additions & 9 deletions src/www/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,14 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>OpenWrt Table Of Hardware (for the rest of us)</title>
<title>OpenWRT Table of Hardware - Comprehensive Device Compatibility List</title>

<meta name="description" content="Explore our enhanced OpenWRT Table of Hardware. Find detailed compatibility information for routers, access points, and embedded devices supported by OpenWRT firmware.">
<meta name="keywords" content="OpenWRT, hardware compatibility, Table of Hardware, TOH, router firmware, open-source networking, device support, wireless routers">
<meta property="og:title" content="OpenWRT Table of Hardware - Device Compatibility Guide">
<meta property="og:description" content="Comprehensive list of devices compatible with OpenWRT firmware. Find the perfect hardware for your open-source networking project.">
<meta property="og:type" content="website">
<meta property="og:url" content="https://soif.github.io/OpenWrtTOH/">

<!-- External Includes (copied in local) ------------------------------------>
<link rel="stylesheet" href="static/css/bootstrap_3.3.7.min.css">
Expand All @@ -25,23 +32,32 @@
<body>
<div class="container-fluid">

<div id="demo-head">
<div id="head-loading"><i class="fa-solid fa-arrows-rotate fa-spin"></i></div>
<h1 class="text-center">OpenWrt - Table Of Hardware <small>(for the rest of us)</small></h1>
<div id="demo-header" class="row">
<div id="head-loading"><i class="fa-solid fa-arrows-rotate fa-spin"></i></div>
<div id="demo-header-title" class="container-fluid">
<h1>OpenWrt - Table Of Hardware</h1>
</div>
</div>


<div id="demo-intro">
What if we could effortlessly browse the entire <a href="https://openwrt.org/toh/start" target="_blank">OpenWRT Table of Hardware</a>? Here is a try:

</div>


<div id="demo-toh">

<div id="table-head">
<div id="head-views"></div>
<div id="head-view-custom" class="row">
<div class="col-md-12">
<div id="custom-content" class="multi-column-text"></div>

<div id="head-views">
<div id="head-views-menu" class="menu"><span class="menu-title">Views:</span><span id="head-views-menu-links" class="menu-links"></span></div>
<div id="head-view-custom" class="row">
<div class="container-fluid">
<div class="col-md-12">
<div id="custom-content" class="multi-column-text"></div>
</div>
</div>
</div>
</div>

Expand All @@ -52,9 +68,14 @@ <h1 class="text-center">OpenWrt - Table Of Hardware <small>(for the rest of us)<
</div>


<div id="demo-foot">
<div id="demo-foot" class="row">
<div class="container">
This project is available at <a href="https://github.com/soif/OpenWrtTOH/" target="_blank">Github</a>.
</div>
</div>



</div>
</body>
</html>
Expand Down
65 changes: 62 additions & 3 deletions src/www/static/css/demo.css
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,71 @@
#demo-head{
/* @override
http://src.dev.lo.lo/OpenWrtTOH/src/www/static/css/demo.css */

body {
background-color: #f9f9f9;
}

#demo-header{
background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.58) 0%, rgba(0, 0, 0, 0.06) 100%) #eee;
background: -moz-linear-gradient(top, rgba(255, 255, 255, 0.58) 0%, rgba(0, 0, 0, 0.06) 100%) #eee;
background: -ms-linear-gradient(top, rgba(255, 255, 255, 0.58) 0%, rgba(0, 0, 0, 0.06) 100%) #eee;
background: linear-gradient(to bottom, rgba(255, 255, 255, 0.58) 0%, rgba(0, 0, 0, 0.06) 100%) #eee;
border-bottom: 1px solid #ccc;
margin-bottom: 10px;
}
div#demo-header h1 {
text-align: center;
margin: 10px 0;
font-size: 2em;
}
#demo-intro{

font-size: 0.9em;
text-align: center;
margin-bottom: 10px;
opacity: 0.7;
}
#demo-toh{
margin-bottom: 20px;
background: #fff;
padding-top: 15px;
border-radius: 6px;
border: 1px solid #eee;
}



#demo-toh .menu {
border-width: 1px 0;
border-color: #ddd;
border-style: solid;
background-color: #f5f5f5;
}
#demo-toh .menu-title {
display: inline-block;
padding-left: 10px;
padding-right: 10px;
border-right: 1px solid #ddd;
}
#demo-toh .menu-links A{
display: inline-block;
padding: 1px 9px;
text-decoration: none;
background-color: #fff;
border-right: 1px solid #ddd;
}

#demo-toh .menu-links A:hover{
background-color: #aaa;
}
#demo-toh .menu-links A.selected{
background-color: #555;
color: #fff;
}

#demo-foot{
font-size: 0.8em;
background-color: #eee;
border-top: 1px solid #ddd;
font-size: 0.85em;
padding: 10px 0;
text-align: center;
}
30 changes: 11 additions & 19 deletions src/www/static/css/toh.css
View file
Original file line number Diff line number Diff line change
@@ -1,29 +1,21 @@
/* @override
http://src.dev.lo.lo/OpenWrtTOH/src/www/static/css/toh.css */

#table-head{
margin-bottom: 20px;
}

#head-loading{
float:right;
font-size: 1.5em;
}
#table-head{
clear: both;
}
#head-views A{
border: 1px solid #ddd;
display: inline-block;
padding: 1px 3px;
margin: 0 3px;
text-decoration: none;
}
#head-views A:hover{
background-color: #ddf;
}
#head-views A.selected{
background-color: #ddd;
font-size: 1.9em;
top: 6px;
right: 20px;
color: #062fed;
position: absolute;
}



#head-view-custom{
border: 1px solid #ccc;
padding: 5px;
}
#head-view-custom UL{
Expand Down
12 changes: 6 additions & 6 deletions src/www/static/js/toh_main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -126,7 +126,7 @@ $(document).ready(function () {
var name=data;
name = name.replace(/_/g,' ');
name = name.replace(/(^\w{1})|(\s{1}\w{1})/g, match => match.toUpperCase());
return '<a href="#" class="'+myclass+'" data-value="'+data+'">'+name+'</a>'+"\n";
return '<a href="#" class="'+myclass+'" data-value="'+data+'">'+name+'</a>'+"";
}

// handles Image Preview on hover --------------------------------------------------
Expand Down Expand Up @@ -195,7 +195,7 @@ $(document).ready(function () {
columns:[],
//renderHorizontal:"virtual",
pagination: true,
paginationSize: 50,
paginationSize: 30,
paginationButtonCount: 10,
// autoColumns:true, //create columns from data field names
movableColumns:true, //allow column order to be changed
Expand Down Expand Up @@ -297,7 +297,7 @@ $(document).ready(function () {
table.setColumns(columns);
//default view
//applyView('normal');
$("#head-views A[data-value='"+init_view+"']").trigger('click');
$("#head-views-menu-links A[data-value='"+init_view+"']").trigger('click');
//groupsUpdateIcon();

// sort columns
Expand All @@ -322,14 +322,14 @@ $(document).ready(function () {
views_html+=makeButton('view',key);
}
views_html+=makeButton('view','custom');
$('#head-views').html(views_html);
$('#head-views-menu-links').html(views_html);
//groupsUpdateIcon();

// view presets click ----------------------
$('#head-views').on('click','A',function(e){
$('#head-views-menu-links').on('click','A',function(e){
console.log('apply '+$(this).data('value'));
applyView($(this).data('value'));
$('#head-views A').removeClass('selected');
$('#head-views-menu-links A').removeClass('selected');
$(this).addClass('selected');
groupsUpdateIcon();
});
Expand Down

0 comments on commit 876c4e9

Please sign in to comment.