Toggle mobile view menu by js

This commit is contained in:
denfil 2016-11-10 16:22:48 +03:00
parent b7996696d7
commit b7e5e9cb41
7 changed files with 51 additions and 37 deletions

View File

@ -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')));

View File

@ -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>') ?>

View File

@ -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>

View File

@ -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;
}

View File

@ -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
};

View File

@ -85,6 +85,9 @@ Miniflux.Event = (function() {
case 'show-search':
Miniflux.Nav.ShowSearch();
break;
case 'toggle-menu-more':
Miniflux.Nav.ToggleMenuMore();
break;
}
}
};

View File

@ -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
};