From 5f1cd6b552f33f3df110bf96b410797a23106b54 Mon Sep 17 00:00:00 2001 From: Tommy Miland Date: Tue, 12 Mar 2019 16:38:15 +0100 Subject: [PATCH] Revert "Responsive Side Menu" This reverts commit 7218c70ce868a82a64b57f307cd67d05a52f8b14. --- assets/css/side-menu.css | 248 ---------------------------- assets/js/ui.js | 46 ------ src/invidious/views/template.ecr | 268 ++++++++++++------------------- 3 files changed, 100 insertions(+), 462 deletions(-) delete mode 100644 assets/css/side-menu.css delete mode 100644 assets/js/ui.js diff --git a/assets/css/side-menu.css b/assets/css/side-menu.css deleted file mode 100644 index 2c37104c..00000000 --- a/assets/css/side-menu.css +++ /dev/null @@ -1,248 +0,0 @@ -body { - color: #777; -} - -.pure-img-responsive { - max-width: 100%; - height: auto; -} - -/* -Add transition to containers so they can push in and out. -*/ -#layout, -#menu, -.menu-link { - -webkit-transition: all 0.2s ease-out; - -moz-transition: all 0.2s ease-out; - -ms-transition: all 0.2s ease-out; - -o-transition: all 0.2s ease-out; - transition: all 0.2s ease-out; -} - -/* -This is the parent `
` that contains the menu and the content area. -*/ -#layout { - position: relative; - left: 0; - padding-left: 0; -} - #layout.active #menu { - left: 160px; - width: 160px; - } - - #layout.active .menu-link { - left: 160px; - } -/* -The content `
` is where all your content goes. -*/ -.content { - margin: 0 auto; - padding: 0 2em; - max-width: 800px; - margin-bottom: 50px; - line-height: 1.6em; -} - -.header { - margin: 0; - color: #333; - text-align: center; - padding: 2.5em 2em 0; - border-bottom: 1px solid #eee; - } - .header h1 { - margin: 0.2em 0; - font-size: 3em; - font-weight: 300; - } - .header h2 { - font-weight: 300; - color: #ccc; - padding: 0; - margin-top: 0; - } - -.content-subhead { - margin: 50px 0 20px 0; - font-weight: 300; - color: #888; -} - - - -/* -The `#menu` `
` is the parent `
` that contains the `.pure-menu` that -appears on the left side of the page. -*/ - -#menu { - margin-left: -160px; /* "#menu" width */ - width: 160px; - position: fixed; - top: 0; - left: 0; - bottom: 0; - z-index: 1000; /* so the menu or its navicon stays above all content */ - background: #191818; - overflow-y: auto; - -webkit-overflow-scrolling: touch; -} - /* - All anchors inside the menu should be styled like this. - */ - #menu a { - color: #999; - border: none; - padding: 0.6em 0 0.6em 0.6em; - } - - /* - Remove all background/borders, since we are applying them to #menu. - */ - #menu .pure-menu, - #menu .pure-menu ul { - border: none; - background: transparent; - } - - /* - Add that light border to separate items into groups. - */ - #menu .pure-menu ul, - #menu .pure-menu .menu-item-divided { - border-top: 1px solid #333; - } - /* - Change color of the anchor links on hover/focus. - */ - #menu .pure-menu li a:hover, - #menu .pure-menu li a:focus { - background: #333; - } - - /* - This styles the selected menu item `
  • `. - */ - #menu .pure-menu-selected, - #menu .pure-menu-heading { - background: #1f8dd6; - } - /* - This styles a link within a selected menu item `
  • `. - */ - #menu .pure-menu-selected a { - color: #fff; - } - - /* - This styles the menu heading. - */ - #menu .pure-menu-heading { - font-size: 110%; - color: #fff; - margin: 0; - } - -/* -- Dynamic Button For Responsive Menu -------------------------------------*/ - -/* -The button to open/close the Menu is custom-made and not part of Pure. Here's -how it works: -*/ - -/* -`.menu-link` represents the responsive menu toggle that shows/hides on -small screens. -*/ -.menu-link { - position: fixed; - display: block; /* show this only on small screens */ - top: 0; - left: 0; /* "#menu width" */ - background: #000; - background: rgba(0,0,0,0.7); - font-size: 10px; /* change this value to increase/decrease button size */ - z-index: 10; - width: 2em; - height: auto; - padding: 2.1em 1.6em; -} - - .menu-link:hover, - .menu-link:focus { - background: #000; - } - - .menu-link span { - position: relative; - display: block; - } - - .menu-link span, - .menu-link span:before, - .menu-link span:after { - background-color: #fff; - width: 100%; - height: 0.2em; - } - - .menu-link span:before, - .menu-link span:after { - position: absolute; - margin-top: -0.6em; - content: " "; - } - - .menu-link span:after { - margin-top: 0.6em; - } - - -/* -- Responsive Styles (Media Queries) ------------------------------------- */ - -/* -Hides the menu at `48em`, but modify this based on your app's needs. -*/ -@media (min-width: 48em) { - - .header, - .content { - padding-left: 2em; - padding-right: 2em; - } - - #layout { - padding-left: 160px; /* left col width "#menu" */ - left: 0; - } - #menu { - left: 160px; - } - - .menu-link { - position: fixed; - left: 160px; - display: none; - } - - #layout.active .menu-link { - left: 160px; - } -} - -@media (max-width: 48em) { - /* Only apply this when the window is small. Otherwise, the following - case results in extra padding on the left: - * Make the window small. - * Tap the menu to trigger the active state. - * Make the window large again. - */ - #layout.active { - position: relative; - left: 160px; - } -} diff --git a/assets/js/ui.js b/assets/js/ui.js deleted file mode 100644 index 6d7c20b2..00000000 --- a/assets/js/ui.js +++ /dev/null @@ -1,46 +0,0 @@ -(function (window, document) { - - var layout = document.getElementById('layout'), - menu = document.getElementById('menu'), - menuLink = document.getElementById('menuLink'), - content = document.getElementById('main'); - - function toggleClass(element, className) { - var classes = element.className.split(/\s+/), - length = classes.length, - i = 0; - - for(; i < length; i++) { - if (classes[i] === className) { - classes.splice(i, 1); - break; - } - } - // The className is not found - if (length === classes.length) { - classes.push(className); - } - - element.className = classes.join(' '); - } - - function toggleAll(e) { - var active = 'active'; - - e.preventDefault(); - toggleClass(layout, active); - toggleClass(menu, active); - toggleClass(menuLink, active); - } - - menuLink.onclick = function (e) { - toggleAll(e); - }; - - content.onclick = function(e) { - if (menu.className.indexOf('active') !== -1) { - toggleAll(e); - } - }; - -}(this, this.document)); diff --git a/src/invidious/views/template.ecr b/src/invidious/views/template.ecr index fe3e7d93..0f705836 100644 --- a/src/invidious/views/template.ecr +++ b/src/invidious/views/template.ecr @@ -14,7 +14,6 @@ - @@ -29,180 +28,113 @@ <% locale = LOCALES[env.get("locale").as(String)]? %> -
    - - - - - - -
    -
    -
    -
    -
    - Invidious -
    -
    -
    -
    - " value=" - <%= env.get?("search").try {|x| HTML.escape(x.as(String)) } || env.params.query["q"]?.try {|x| HTML.escape(x)} %>"> -
    -
    -
    -
    - <% if env.get? "user" %> -
    - " class="pure-menu-heading"> - <% preferences = env.get("user").as(User).preferences %> - <% if preferences.dark_mode %> - - <% else %> - - <% end %> - -
    -
    - " href="/feed/subscriptions" class="pure-menu-heading"> - <% notification_count = env.get("user").as(User).notifications.size %> - <% if notification_count > 0 %> - <%= notification_count %> - <% else %> - - <% end %> - -
    -
    - " href="/preferences?referer= - <%= env.get?("current_page") %>" class="pure-menu-heading"> - - -
    -
    - &token= - <%= env.get?("token") %>&challenge= - <%= env.get?("challenge") %>" class="pure-menu-heading"> - <%= translate(locale, "Sign out") %> - -
    +
    +
    +
    +
    +
    + Invidious +
    +
    +
    +
    + " value="<%= env.get?("search").try {|x| HTML.escape(x.as(String)) } || env.params.query["q"]?.try {|x| HTML.escape(x)} %>"> +
    +
    +
    +
    + <% if env.get? "user" %> +
    + " class="pure-menu-heading"> + <% preferences = env.get("user").as(User).preferences %> + <% if preferences.dark_mode %> + <% else %> -
    - " class="pure-menu-heading"> - <% if env.get?("preferences").try &.as(Preferences).dark_mode %> - - <% else %> - - <% end %> - -
    -
    - " href="/preferences?referer= - <%= env.get?("current_page") %>" class="pure-menu-heading"> - - -
    - <% if config.login_enabled %> -
    - " class="pure-menu-heading"> - <%= translate(locale, "Login") %> - -
    + <% end %> - <% end %> -
    +
    - <%= content %> -
    -
    -
    - - <%= translate(locale, "Released under the AGPLv3 by Omar Roth.") %> - -
    -
    - - <%= translate(locale, "BTC: ") %>356DpZyMXu6rYd55Yqzjs29n79kGKWcYrY
    -
    - - <%= translate(locale, "BCH: ") %>qq4ptclkzej5eza6a50et5ggc58hxsq5aylqut2npk
    -
    - - - <%= translate(locale, "Liberapay") %> - / - - <%= translate(locale, "Patreon") %> -
    -
    - - - <%= translate(locale, "View JavaScript license information.") %> - -
    -
    - - <%= translate(locale, "Current version: ") %> - <%= CURRENT_VERSION %>- - <%= CURRENT_COMMIT %> - - <%= CURRENT_BRANCH %> -
    -
    +
    + " href="/feed/subscriptions" class="pure-menu-heading"> + <% notification_count = env.get("user").as(User).notifications.size %> + <% if notification_count > 0 %> + <%= notification_count %> + <% else %> + + <% end %> + +
    +
    + " href="/preferences?referer=<%= env.get?("current_page") %>" class="pure-menu-heading"> + + +
    +
    + &token=<%= env.get?("token") %>&challenge=<%= env.get?("challenge") %>" class="pure-menu-heading"> + <%= translate(locale, "Sign out") %> + +
    + <% else %> +
    + " class="pure-menu-heading"> + <% if env.get?("preferences").try &.as(Preferences).dark_mode %> + + <% else %> + + <% end %> + +
    +
    + " href="/preferences?referer=<%= env.get?("current_page") %>" class="pure-menu-heading"> + + +
    + <% if config.login_enabled %> +
    + " class="pure-menu-heading"> + <%= translate(locale, "Login") %> + +
    + <% end %> + <% end %> +
    +
    + <%= content %> +
    +
    +
    + + <%= translate(locale, "Released under the AGPLv3 by Omar Roth.") %> + +
    +
    + + <%= translate(locale, "BTC: ") %>356DpZyMXu6rYd55Yqzjs29n79kGKWcYrY
    +
    + + <%= translate(locale, "BCH: ") %>qq4ptclkzej5eza6a50et5ggc58hxsq5aylqut2npk
    +
    + + <%= translate(locale, "Liberapay") %> + / + <%= translate(locale, "Patreon") %> +
    +
    + + + <%= translate(locale, "View JavaScript license information.") %> + +
    +
    + + <%= translate(locale, "Current version: ") %> <%= CURRENT_VERSION %>-<%= CURRENT_COMMIT %> + + <%= CURRENT_BRANCH %>
    -
    +
    -