Skip to content

Commit

Permalink
Add a responsive top menu (Novik#2696)
Browse files Browse the repository at this point in the history 
* Add a responsive top menu

The previous step of adopting full bootstrap was a huge leap forward, reducing a huge amount of work adding responsiveness by using bootstrap's built-in components and functionality.
As for the looks, there are 2 major changes:
- Borders were added to top menu buttons, which made button boundaries easier to spot on mobile screens.
- Buttons' hover effect was set to `brightness` filter. The previous implementation was using a rectangle tile as the background image, which would become odd on mobile screens, because the buttons are going to grow, the background tiles, however, remains the same size.

Some current TODO's:
- I really want to replace the image icons with bootstrap's monocolor svg icons. This should be approved beforehand, though.
- The big gap on mobile screens between the left side panel and the main torrent list is also on the agenda for rewriting. We can use a bootstrap's offcanvas on the side panel.

* Add bootstrap js functionality

* Fix theme compatibility on top menu

- Reverted the top menu from `<nav>` to `<div>` for compatility for diffreent themes.
- Removed top menu buttons' borders on desktop screens.

* Adapt all themes to responsive top menu
  • Loading branch information
@jevenski
jevenski committed Jul 28, 2024
1 parent f3c0c15 commit 81a8caf
Show file tree
Hide file tree
Showing 15 changed files with 344 additions and 187 deletions.
127 changes: 84 additions & 43 deletions css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -160,35 +160,73 @@ ul.CMenu li:hover ul.left {left: -150px}
span.htkey {text-align:right; position: absolute; right: 16px; z-index:100}
#sel {width: 0px; height: 0px; position: absolute; left: 0px; top: 0px; border: 1px dotted #000000; display: none; z-index: 1000}

div#t {width: 100%; height: 36px; background: #F0F0F0 url(../images/t_bg.png) repeat-x center center; border-bottom: 1px solid #D0D0D0; white-space: nowrap}
div#t a {float: left; margin: 3px 0 0 5px; padding: 3px}
div#t a:hover {background: transparent url(../images/tb_bg.gif) no-repeat scroll center center}
div#t a:active {padding: 4px 2px 2px 4px}
div#t div {width: 24px; height: 24px; float: left; cursor: pointer}
div#t div.TB_Separator {width: 1px; height: 22px; margin: 7px 0 0 5px; padding: 0; border: 0; background-color: #A0A0A0}

div#t div#add {background: transparent url(../images/toolbar.png) no-repeat -24px center}
div#t div#create {background: transparent url(../images/toolbar.png) no-repeat -48px center}
div#t div#remove {background: transparent url(../images/toolbar.png) no-repeat -72px center}
div#t div#start {background: transparent url(../images/toolbar.png) no-repeat -96px center}
div#t div#pause {background: transparent url(../images/toolbar.png) no-repeat -120px center}
div#t div#stop {background: transparent url(../images/toolbar.png) no-repeat -144px center}
div#t div#moveu {background: transparent url(../images/toolbar.png) no-repeat -168px center}
div#t div#moved {background: transparent url(../images/toolbar.png) no-repeat -192px center}
div#t div#search {background: transparent url(../images/toolbar.png) no-repeat -216px center}
div#t div#rss {background: transparent url(../images/toolbar.png) no-repeat -240px center}
div#t div#setting {background: transparent url(../images/toolbar.png) no-repeat -264px center}

div#t div#help {background: transparent url(../images/quest.gif) no-repeat 0px center}
div#t div#plugins {background: transparent url(../images/plugin.png) no-repeat 0px center}

#rc { float: right; }
#go {background: transparent url(../images/go.gif) no-repeat 0px center; }
#query { margin-top: 4px; }
div#t a#mnu_go {margin: 3px 0 0 0; padding: 3px}
div#t #ind {margin-top: 2px; background: transparent url(../images/ajax-loader.gif) no-repeat 0px center; width: 32px; margin-right: 2px; line-height: 26px; cursor: default; }

input.Textbox {border: 1px solid #B0B0B0; font-size: 11px; padding: 2px}
div#t {
height: auto;
background: #F0F0F0 url(../images/t_bg.png) repeat-x center 0.25rem;
border-bottom: 1px solid #D0D0D0;
white-space: nowrap;
}
#top-menu {
background-color: #F0F0F0;
border-bottom: 1px solid #D0D0D0;
z-index: 30;
}
div#t button.navbar-toggler {width: 3rem; background-color: #F0F0F0;}
div#t a {padding: 3px;}
div#t div.navbar-nav a:hover {
filter: brightness(1.3);
}
div#t div.navbar-nav a:active {padding: 4px 2px 2px 4px;}
div#t div.TB_Separator {
align-self: stretch;
flex: 0 0 1px;
margin: 0.25rem;
padding: 0;
border: 0;
background-color: #A0A0A0;
}
div#t .nav-link {
display: flex;
flex-direction: row;
align-items: center;
gap: 0.5rem;
font-weight: bold;
border: 1px solid #A0A0A0;
border-radius: 8px;
background-color: #F0F0F0;
background-image: none;
margin: 0.15rem;
}
div.navbar-nav div.nav-icon {
width: 24px;
height: 24px;
cursor: pointer;
background-color: transparent;
background-repeat: no-repeat;
background-position: center;
}
div#add, div#remove, div#start, div#pause, div#stop, div#search, div#rss, div#setting {background-image: url(../images/toolbar.png);}
div#add {background-position-x: -24px;}
div#remove {background-position-x: -72px;}
div#start {background-position-x: -96px;}
div#pause {background-position-x: -120px;}
div#stop {background-position-x: -144px;}
div#search {background-position-x: -216px;}
div#rss {background-position-x: -240px;}
div#setting {background-position-x: -264px;}
div#moveu {background: url(../images/toolbar.png) -168px center}
div#moved {background: url(../images/toolbar.png) -192px center}
div#help {background: url(../images/quest.gif) 0px center}
div#plugins {background: url(../images/plugin.png) 0px center}
#go {background: url(../images/go.gif) 0px center; }

#ind {
background: transparent url(../images/ajax-loader.gif) no-repeat 0px center;
width: 32px;
height: 32px;
cursor: default;
}

Input.TextboxShort {border: 1px solid #B0B0B0; font-size: 11px; padding: 2px; width: 50px}
Input.TextboxMid {border: 1px solid #B0B0B0; font-size: 11px; padding: 2px; width: 110px}
Input.TextboxLarge {border: 1px solid #B0B0B0; font-size: 11px; padding: 2px; width: 220px}
Expand Down Expand Up @@ -449,12 +487,6 @@ div.space {flex-grow: 1;}

#bf {white-space:pre}

@media only screen and (orientation:portrait)
{
#go { display: none }
#query { width: 80px }
}

@media only screen and (min-width: 1280px) {
.desktop { display: inline-block; }
}
Expand All @@ -463,14 +495,6 @@ div.space {flex-grow: 1;}
.desktop { display: none; }
}

@media only screen and (min-width: 730px) {
.mobile-search { display: inline-block; }
}

@media only screen and (max-width: 729px) {
.mobile-search { display: none; }
}

/* Custom break point settings for responsiveness */

/* X-Small devices (portrait phones, less than 576px) */
Expand All @@ -494,6 +518,23 @@ div.dlg-window .buttons-list {
/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
/* Custom rules for medium devices */
div#t {
height: 36px;
}
#top-menu {
background-color: transparent;
border-bottom: none;
z-index: auto;
}
div#t div.navbar-nav a:hover {
background: transparent url(../images/tb_bg.gif) no-repeat scroll center center;
filter: none;
}
div#t .nav-link {
border: none;
border-radius: 0;
background-color: transparent;
}
div#tadd {min-width: 600px;}
div.dlg-window .buttons-list {
margin: 1rem 0.5rem;
Expand Down
87 changes: 46 additions & 41 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,47 +68,51 @@
<div id="rs"></div>
<div id="sel"></div>
<div id="sc"></div>
<div id="t"><a id="mnu_add" href="javascript://void();" onclick="theWebUI.showAdd(); return(false);" onfocus="this.blur()" uilangtitle="mnu_add">
<div id="add"></div>
</a>
<div class="TB_Separator"></div>
<a id="mnu_remove" href="javascript://void();" onclick="theWebUI.removeTorrent(); return(false);" onfocus="this.blur()" uilangtitle="mnu_remove">
<div id="remove"></div>
</a>
<div class="TB_Separator"></div>
<a id="mnu_start" href="javascript://void();" onclick="theWebUI.start(); return(false);" onfocus="this.blur()" uilangtitle="mnu_start">
<div id="start"></div>
</a><a id="mnu_pause" href="javascript://void();" onclick="theWebUI.pause(); return(false);" onfocus="this.blur()" uilangtitle="mnu_pause">
<div id="pause"></div>
</a><a id="mnu_stop" href="javascript://void();" onclick="theWebUI.stop(); return(false);" onfocus="this.blur()" uilangtitle="mnu_stop">
<div id="stop"></div>
</a>
<div class="TB_Separator"></div>
<a id="mnu_settings" href="javascript://void();" onclick="theWebUI.showSettings(); return(false);" onfocus="this.blur()" uilangtitle="mnu_settings">
<div id="setting"></div>
</a>
<div class="TB_Separator"></div>
<a id="mnu_help" href="javascript://void();" onclick="theDialogManager.toggle('dlgHelp'); return(false);" onfocus="this.blur()" uilangtitle="mnu_help">
<div id="help"></div>
</a>
<table id='rc' class="mobile-search" cellpadding="0" cellspacing="0"><tr id='rrow'>
<td>
<a id="mnu_search" class="top-menu-item" href="javascript://void();" onclick="theSearchEngines.show(); return(false);" onfocus="this.blur()" uilangtitle="mnu_search">
<div id="search" class="top-menu-item"></div>
</a>
</td>
<td>
<input type="text" class="TextboxMid" id="query" onfocus="$('#sc').hide();"/>
</td>
<td>
<a id="mnu_go" href="javascript://void();" onclick="theSearchEngines.run(); return(false);" onfocus="this.blur()" ulangtitle="mnu_go">
<div id="go"></div>
</a>
</td>
<td>
<div id="ind"></div>
</td>
</tr></table>
<div id="t" class="py-0 navbar navbar-expand-md">
<div class="container-fluid justify-content-end px-0">
<button class="navbar-toggler my-2" type="button" data-bs-toggle="collapse" data-bs-target="#top-menu" aria-controls="top-menu" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse px-1 py-2 py-md-0" id="top-menu">
<div class="navbar-nav flex-grow-1">
<a id="mnu_add" class="nav-link" href="#" onclick="theWebUI.showAdd(); return(false);" onfocus="this.blur()" uilangtitle="mnu_add">
<div id="add" class="nav-icon"></div>
</a>
<div class="TB_Separator"></div>
<a id="mnu_remove" class="nav-link" href="#" onclick="theWebUI.removeTorrent(); return(false);" onfocus="this.blur()" uilangtitle="mnu_remove">
<div id="remove" class="nav-icon"></div>
</a>
<div class="TB_Separator"></div>
<a id="mnu_start" class="nav-link" href="#" onclick="theWebUI.start(); return(false);" onfocus="this.blur()" uilangtitle="mnu_start">
<div id="start" class="nav-icon"></div>
</a>
<a id="mnu_pause" class="nav-link" href="#" onclick="theWebUI.pause(); return(false);" onfocus="this.blur()" uilangtitle="mnu_pause">
<div id="pause" class="nav-icon"></div>
</a>
<a id="mnu_stop" class="nav-link" href="#" onclick="theWebUI.stop(); return(false);" onfocus="this.blur()" uilangtitle="mnu_stop">
<div id="stop" class="nav-icon"></div>
</a>
<div class="TB_Separator"></div>
<a id="mnu_settings" class="nav-link" href="#" onclick="theWebUI.showSettings(); return(false);" onfocus="this.blur()" uilangtitle="mnu_settings">
<div id="setting" class="nav-icon"></div>
</a>
<div class="TB_Separator"></div>
<a id="mnu_help" class="nav-link" href="#" onclick="theDialogManager.toggle('dlgHelp'); return(false);" onfocus="this.blur()" uilangtitle="mnu_help">
<div id="help" class="nav-icon"></div>
</a>
<div id="rc" class="ms-0 ms-md-auto d-flex gap-1 flex-row align-items-center">
<a id="mnu_search" class="nav-link top-menu-item" href="#" onclick="theSearchEngines.show(); return(false);" onfocus="this.blur()" uilangtitle="mnu_search">
<div id="search" class="nav-icon top-menu-item"></div>
</a>
<input type="text" id="query" onfocus="$('#sc').hide();"/>
<a id="mnu_go" class="nav-link" href="#" onclick="theSearchEngines.run(); return(false);" onfocus="this.blur()" ulangtitle="mnu_go">
<div id="go" class="nav-icon"></div>
</a>
<div id="ind" class="flex-shrink-0"></div>
</div>
</div>
</div>
</div>
</div>
<table id="maincont" cellpadding="0" cellspacing="0" summary="layout table">
<tr>
Expand Down Expand Up @@ -289,5 +293,6 @@
</div>
<div class="graph_tab_grid"></div>
<div class="graph_tab_legend"></div>
<script type="text/javascript" src="./js/bootstrap.bundle.min.js?v=430"></script>
</body>
</html>
7 changes: 7 additions & 0 deletions js/bootstrap.bundle.min.js
View file

Large diffs are not rendered by default.

41 changes: 16 additions & 25 deletions js/plugins.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -332,35 +332,26 @@ rPlugin.prototype.removePageFromTabs = function(id)

rPlugin.prototype.registerTopMenu = function(weight)
{
if(this.canChangeToolbar())
{
if( !$$("mnu_plugins") )
this.addButtonToToolbar("plugins",theUILang.Plugins+"...","theWebUI.showPluginsMenu()","help");
thePlugins.registerTopMenu( this, weight );
if (this.canChangeToolbar()) {
if (!$$("mnu_plugins"))
this.addButtonToToolbar("plugins", theUILang.Plugins, "theWebUI.showPluginsMenu()", "help");
thePlugins.registerTopMenu(this, weight);
}
return(this);
return this;
}

rPlugin.prototype.addButtonToToolbar = function(id,name,onclick,idBefore)
{
if(this.canChangeToolbar())
{
var newBtn = document.createElement("A");
newBtn.id="mnu_"+id;
newBtn.href='javascript://void();';
newBtn.title=name;
newBtn.innerHTML='<div class="top-menu-item" id="'+id+'" onclick="'+onclick+';return(false);"></div>';
$(newBtn).addClass('top-menu-item').on('focus', function(e) { this.blur(); } );
var targetBtn = idBefore ? $$("mnu_"+idBefore) : null;
if(targetBtn)
targetBtn.parentNode.insertBefore(newBtn,targetBtn);
else
{
targetBtn = $$("mnu_settings");
targetBtn.parentNode.appendChild(newBtn);
}
rPlugin.prototype.addButtonToToolbar = function(id, name, onclick, idBefore) {
if (this.canChangeToolbar()) {
const newBtn = $("<a>").attr(
{id:`mnu_${id}`, href:"#", onclick:onclick, onfocus:"this.blur();", title:`${name}...`}
).addClass("nav-link").append(
$("<div>").attr({id:id}).addClass("nav-icon top-menu-item"),
$("<span>").addClass("d-inline d-md-none").text(`${name}...`),
);
const beforeBtn = $(`#mnu_${idBefore}`);
beforeBtn && beforeBtn.length > 0 ? newBtn.insertBefore(beforeBtn) : newBtn.insertBefore($("#mnu_settings"));
}
return(this);
return this;
}

rPlugin.prototype.removeButtonFromToolbar = function(id)
Expand Down
1 change: 1 addition & 0 deletions plugins/create/create.css
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
div#create {background: url(../../images/toolbar.png) -48px center}
div#tcreate div.dlg-header {background-image: url(./images/create16.gif)}
div#tcreate .container {padding: 0;}
div#tcreate .row {margin: 0 0 0.25rem 0; padding: 0; align-items: center;}
Expand Down
6 changes: 0 additions & 6 deletions plugins/extsearch/extsearch.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,4 @@ div#tegLoadTorrents input, div#tegLoadTorrents select {margin-top: 2px; margin-b
div#tegLoadTorrents br {clear: left; line-height: 0}

#st_extsearch { overflow: auto }
#exscategory { margin-top: 6px; width: 100px }
.bld { color: blue; font-weight: bold; }

@media only screen and (orientation:portrait)
{
#exscategory { width: 30px }
}
5 changes: 2 additions & 3 deletions plugins/extsearch/init.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -862,9 +862,8 @@ plugin.onLangLoaded = function()
$(".seng_private").hide();
$('#cont_'+$(this).val()).show();
});
var td = $$('rrow').insertCell(2);
s ="<select id='exscategory' title='"+theUILang.excat+"'></select>";
$(td).prop("id","exscat").html(s);
s = "<select id='exscategory' title='" + theUILang.excat + "'></select>";
$("<div>").prop("id","exscat").html(s).insertBefore($("#mnu_go"));
plugin.markLoaded();
theSearchEngines.checkForIncorrectCurrent(true);
if(thePlugins.isInstalled('search'))
Expand Down
20 changes: 18 additions & 2 deletions plugins/theme/themes/Acid/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,8 +70,16 @@ div.graph_tab {background-color: #272E36; color: #BDDBDB; font-weight: bold;}
.graph_tab_tooltip { color: #FFF; background-color: #272E36; border: 1px solid #BDDBDB; }

div#t {background: #252525 url(./images/t_bg.png) repeat-x center center; border-bottom: 1px solid #252525;}
div#t a:hover {background: transparent url(./images/tb_bg.gif) no-repeat scroll center center}

#top-menu {
background-color: #252525;
border-bottom: 1px solid #252525;
}
div#t .nav-link {
background-color: #1E2124;
border-color: #D0D0D0;
color: #00FF00;
font-weight: bold;
}
div#t div#add {background: transparent url(./images/toolbar.png) no-repeat -24px center}
div#t div#create {background: transparent url(./images/toolbar.png) no-repeat -48px center}
div#t div#remove {background: transparent url(./images/toolbar.png) no-repeat -72px center}
Expand Down Expand Up @@ -148,3 +156,11 @@ div#tadd { background-color: #1e2124; border: 2px solid #909090; color: #BDDBDB;

.sthdr { color: #00FF00;}
.stval { color: #BDDBDB;}

@media (min-width: 768px) {
/* Custom rules for medium devices */
div#t .nav-link {
background-color: transparent;
border: none;
}
}
Loading

0 comments on commit 81a8caf

Please sign in to comment.