Toggle mobile view menu by js
This commit is contained in:
parent
b7996696d7
commit
b7e5e9cb41
@ -69,11 +69,6 @@ Router\get_action('show-help', function () {
|
||||
Response\html(Template\load('show_help'));
|
||||
});
|
||||
|
||||
// Show the menu for the mobile view
|
||||
Router\get_action('more', function () {
|
||||
Response\html(Template\layout('show_more', array('menu' => 'more')));
|
||||
});
|
||||
|
||||
// Image proxy (avoid SSL mixed content warnings)
|
||||
Router\get_action('proxy', function () {
|
||||
Handler\Proxy\download(rawurldecode(Request\param('url')));
|
||||
|
@ -29,30 +29,40 @@
|
||||
<nav>
|
||||
<a class="logo" href="?"><?= tne('mini%sflux%s','<span>','</span>') ?></a>
|
||||
<ul>
|
||||
<li <?= isset($menu) && $menu === 'unread' ? 'class="active"' : '' ?>>
|
||||
<li<?= isset($menu) && $menu === 'unread' ? ' class="active"' : '' ?>>
|
||||
<a href="?action=unread"><?= t('unread') ?><span id="nav-counter"><?= empty($nb_unread_items) ? '' : $nb_unread_items ?></span></a>
|
||||
</li>
|
||||
<li class="<?= isset($menu) && $menu === 'bookmarks' ? 'active hide-mobile' : 'hide-mobile' ?>">
|
||||
<li class="hide-mobile<?= isset($menu) && $menu === 'bookmarks' ? ' active' : '' ?>">
|
||||
<a href="?action=bookmarks"><?= t('bookmarks') ?></a>
|
||||
</li>
|
||||
<li class="<?= isset($menu) && $menu === 'history' ? 'active hide-mobile' : 'hide-mobile' ?>">
|
||||
<li class="hide-mobile<?= isset($menu) && $menu === 'history' ? ' active' : '' ?>">
|
||||
<a href="?action=history"><?= t('history') ?></a>
|
||||
</li>
|
||||
<li class="<?= isset($menu) && $menu === 'feeds' ? 'active hide-mobile' : 'hide-mobile' ?>">
|
||||
<li class="hide-mobile<?= isset($menu) && $menu === 'feeds' ? ' active' : '' ?>">
|
||||
<a href="?action=feeds"><?= t('subscriptions') ?></a>
|
||||
</li>
|
||||
<li class="<?= isset($menu) && $menu === 'config' ? 'active hide-mobile' : 'hide-mobile' ?>">
|
||||
<li class="hide-mobile<?= isset($menu) && $menu === 'config' ? 'active' : '' ?>">
|
||||
<a href="?action=config"><?= t('preferences') ?></a>
|
||||
</li>
|
||||
<li class="hide-mobile">
|
||||
<a href="?action=logout"><?= t('logout') ?></a>
|
||||
</li>
|
||||
<li class="<?= isset($menu) && $menu === 'more' ? 'active hide-desktop' : 'hide-desktop' ?>">
|
||||
<a href="?action=more">∨ <?= t('menu') ?></a>
|
||||
<li class="hide-desktop">
|
||||
<span data-action="toggle-menu-more" class="menu-more-switcher" href="#">∨ <?= t('menu') ?></span>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<div id="menu-more" class="hide">
|
||||
<ul>
|
||||
<li<?= isset($menu) && $menu === 'unread' ? ' class="active"' : '' ?>><a href="?action=unread"><?= t('unread') ?></a></li>
|
||||
<li<?= isset($menu) && $menu === 'bookmarks' ? ' class="active"' : '' ?>><a href="?action=bookmarks"><?= t('bookmarks') ?></a></li>
|
||||
<li<?= isset($menu) && $menu === 'history' ? ' class="active"' : '' ?>><a href="?action=history"><?= t('history') ?></a></li>
|
||||
<li<?= isset($menu) && $menu === 'feeds' ? ' class="active"' : '' ?>><a href="?action=feeds"><?= t('subscriptions') ?></a></li>
|
||||
<li<?= isset($menu) && $menu === 'config' ? ' class="active"' : '' ?>><a href="?action=config"><?= t('preferences') ?></a></li>
|
||||
<li><a href="?action=logout"><?= t('logout') ?></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<section class="page" data-item-page="<?= $menu ?>">
|
||||
<?= Miniflux\Helper\flash('flash_message', '<div class="alert alert-success">%s</div>') ?>
|
||||
<?= Miniflux\Helper\flash('flash_error_message', '<div class="alert alert-error">%s</div>') ?>
|
||||
|
@ -1,22 +0,0 @@
|
||||
<div class="menu-more">
|
||||
<ul>
|
||||
<li>
|
||||
<a href="?action=unread"><?= t('unread') ?></a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="?action=bookmarks"><?= t('bookmarks') ?></a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="?action=history"><?= t('history') ?></a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="?action=feeds"><?= t('subscriptions') ?></a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="?action=config"><?= t('preferences') ?></a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="?action=logout"><?= t('logout') ?></a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
@ -442,6 +442,11 @@ header a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
nav .menu-more-switcher {
|
||||
color: #777;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
nav .active a {
|
||||
color: #333;
|
||||
font-weight: bold;
|
||||
@ -793,7 +798,11 @@ iframe {
|
||||
font-size: 75%;
|
||||
}
|
||||
|
||||
.menu-more li {
|
||||
#menu-more {
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
#menu-more li {
|
||||
font-size: 1.1em;
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
@ -801,9 +810,13 @@ iframe {
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
.menu-more a {
|
||||
text-decoration: none;
|
||||
#menu-more li.active a {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
#menu-more a {
|
||||
text-decoration: none;
|
||||
color: #777;
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
@ -602,6 +602,9 @@ Miniflux.Event = (function() {
|
||||
case 'show-search':
|
||||
Miniflux.Nav.ShowSearch();
|
||||
break;
|
||||
case 'toggle-menu-more':
|
||||
Miniflux.Nav.ToggleMenuMore();
|
||||
break;
|
||||
}
|
||||
}
|
||||
};
|
||||
@ -974,6 +977,12 @@ Miniflux.Nav = (function() {
|
||||
document.getElementById("search-form").removeAttribute("class");
|
||||
document.getElementById("form-text").focus();
|
||||
},
|
||||
ToggleMenuMore: function () {
|
||||
var menu = document.getElementById("menu-more");
|
||||
menu.hasAttribute("class")
|
||||
? menu.removeAttribute("class")
|
||||
: menu.setAttribute("class", "hide");
|
||||
},
|
||||
IsListing: isListing
|
||||
};
|
||||
|
||||
|
@ -85,6 +85,9 @@ Miniflux.Event = (function() {
|
||||
case 'show-search':
|
||||
Miniflux.Nav.ShowSearch();
|
||||
break;
|
||||
case 'toggle-menu-more':
|
||||
Miniflux.Nav.ToggleMenuMore();
|
||||
break;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
@ -112,6 +112,12 @@ Miniflux.Nav = (function() {
|
||||
document.getElementById("search-form").removeAttribute("class");
|
||||
document.getElementById("form-text").focus();
|
||||
},
|
||||
ToggleMenuMore: function () {
|
||||
var menu = document.getElementById("menu-more");
|
||||
menu.hasAttribute("class")
|
||||
? menu.removeAttribute("class")
|
||||
: menu.setAttribute("class", "hide");
|
||||
},
|
||||
IsListing: isListing
|
||||
};
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user