add nav menu to decrease number of items

This commit is contained in:
Milan
2019-10-04 00:33:02 +02:00
parent 39864053db
commit bad6d301e5
4 changed files with 42 additions and 17 deletions

View File

@@ -539,7 +539,6 @@ input[type='checkbox']{
top:0;
left:0;
right:0;
justify-content:end;
}
#calcms_admin_menu div a,
@@ -606,3 +605,27 @@ input.image{
text-align:left;
}
#calcms_admin_menu .dropdown {
position: relative;
display: inline-block;
}
#calcms_admin_menu .dropdown-content {
display: none;
position: absolute;
z-index: 100;
text-align:left;
background:#004f9b;
min-width:10rem;
}
#calcms_admin_menu .dropdown-content a{
width:20rem;
}
#calcms_admin_menu .dropdown:hover .dropdown-content {
display: block;
transition: all 1s linear;
}

View File

@@ -354,7 +354,7 @@ input.tablesorter-filter{
}
div#toolbar{
z-index:999;
z-index:9;
padding:0;
width:100%;
background:#ddd;
@@ -362,7 +362,6 @@ div#toolbar{
flex-wrap: wrap;
align-items: center;
vertical-align:middle;
z-index:99;
left:0;
}

View File

@@ -209,7 +209,7 @@ function handleBars(){
var menu=$('#calcms_admin_menu');
menu.toggleClass('mobile');
if (menu.hasClass('mobile')){
$('#calcms_admin_menu div').show();
$('#calcms_admin_menu>div').show();
$('#content').hide();
}else{
$('#content').show();
@@ -230,10 +230,10 @@ function setupMenu(update){
if (update == 1){
if (menu.width() < 960){
$('#calcms_admin_menu div').hide();
$('#calcms_admin_menu div.mobile').show();
$('#calcms_admin_menu>div').hide();
$('#calcms_admin_menu>div.mobile').show();
}else{
$('#calcms_admin_menu div').show();
$('#calcms_admin_menu>div').show();
$('#calcms_admin_menu #bars').hide();
menu.removeClass('mobile');
}

View File

@@ -14,6 +14,11 @@
<div><a href="series.cgi?project_id=<TMPL_VAR project_id>&studio_id=<TMPL_VAR default_studio_id>"><i class="fas fa-list-alt"></i>&nbsp;<TMPL_VAR .loc.series></a></div>
</TMPL_IF>
<!-- start menu -->
<div class="dropdown">
<a href="#"><i class="fas fa-plus"></i>&nbsp;mehr...&nbsp;</a>
<div class="dropdown-content">
<TMPL_IF .allow.read_playout>
<div><a href="show-playout.cgi?project_id=<TMPL_VAR project_id>&studio_id=<TMPL_VAR default_studio_id>"><i class="fas fa-play"></i>&nbsp;<TMPL_VAR .loc.playout></a></div>
</TMPL_IF>
@@ -26,14 +31,14 @@
<div><a href="roles.cgi?project_id=<TMPL_VAR project_id>&studio_id=<TMPL_VAR default_studio_id>"><i class="fas fa-tasks"></i>&nbsp;<TMPL_VAR .loc.roles></a></div>
</TMPL_IF>
<TMPL_IF .allow.read_studio>
<div><a href="studios.cgi?project_id=<TMPL_VAR project_id>&studio_id=<TMPL_VAR default_studio_id>"><i class="fas fa-project-diagram"></i>&nbsp;<TMPL_VAR .loc.studios></a></div>
</TMPL_IF>
<TMPL_IF .allow.read_studio_timeslot_schedule>
<div><a href="studio_timeslots.cgi?project_id=<TMPL_VAR project_id>&studio_id=<TMPL_VAR default_studio_id>"><i class="fas fa-clock"></i>&nbsp;<TMPL_VAR .loc.timeslots></a></div>
</TMPL_IF>
<TMPL_IF .allow.read_studio>
<div><a href="studios.cgi?project_id=<TMPL_VAR project_id>&studio_id=<TMPL_VAR default_studio_id>"><i class="fas fa-project-diagram"></i>&nbsp;<TMPL_VAR .loc.studios></a></div>
</TMPL_IF>
<TMPL_IF .allow.read_project>
<div><a href="projects.cgi?project_id=<TMPL_VAR project_id>&studio_id=<TMPL_VAR default_studio_id>"><i class="fas fa-broadcast-tower"></i>&nbsp;<TMPL_VAR .loc.projects></a></div>
</TMPL_IF>
@@ -46,16 +51,14 @@
<div><a href="image.cgi?project_id=<TMPL_VAR project_id>&studio_id=<TMPL_VAR default_studio_id>&search=<TMPL_VAR .presets.user>"><i class="fas fa-images"></i>&nbsp;<TMPL_VAR .loc.images></a></div>
</TMPL_IF>
<TMPL_IF .allow.scan_series_events>
<!--
<div><a href="assignments.cgi?project_id=<TMPL_VAR project_id>&studio_id=<TMPL_VAR default_studio_id>"><TMPL_VAR .loc.import></a></div>
-->
</TMPL_IF>
<div title="<TMPL_VAR .loc.profile>"><a href="user_settings.cgi?project_id=<TMPL_VAR project_id>&studio_id=<TMPL_VAR default_studio_id>"><i class="fas fa-cog"></i>&nbsp;<TMPL_VAR .loc.profile></a></div>
<div title="<TMPL_VAR .loc.help>"><a href="help.cgi?project_id=<TMPL_VAR project_id>&studio_id=<TMPL_VAR default_studio_id>"><i class="fas fa-info"></i>&nbsp;<TMPL_VAR .loc.help></a></div>
<!--end menu -->
</div>
</div>
<div class="mobile">
<i class="fas fa-home"></i>
<select id="studio_id" name="studio_id" onchange="set_studio($(this).val())">