diff --git a/assets/css/side-menu.css b/assets/css/side-menu.css new file mode 100644 index 00000000..2c37104c --- /dev/null +++ b/assets/css/side-menu.css @@ -0,0 +1,248 @@ +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 new file mode 100644 index 00000000..6d7c20b2 --- /dev/null +++ b/assets/js/ui.js @@ -0,0 +1,46 @@ +(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 0f705836..9ff6216d 100644 --- a/src/invidious/views/template.ecr +++ b/src/invidious/views/template.ecr @@ -14,127 +14,193 @@ + - <% if env.get?("preferences").try &.as(Preferences).dark_mode %> + <% if env.get("preferences").as(Preferences).dark_mode %> <% else %> <% end %> -<% locale = LOCALES[env.get("locale").as(String)]? %> +<% locale = LOCALES[env.get("preferences").as(Preferences).locale]? %> -
    -
    -
    -
    -
    - 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") %> - -
    - <% 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.") %> +
    + + + + + +
    • +
  • + " href="/feed/trending" class="pure-menu-link"> + + <%= translate(locale, "Trending") %> -
    • -
    - - <%= translate(locale, "Current version: ") %> <%= CURRENT_VERSION %>-<%= CURRENT_COMMIT %> - - <%= CURRENT_BRANCH %>
    -
    + +
  • + " href="feed/history" class="pure-menu-link"> + + <%= translate(locale, "History") %> + +
    • +
  • +
    • +
  • + " href="/preferences?referer= + <%= env.get?("current_page") %>" class="pure-menu-link"> + + <%= translate(locale, "Preferences") %> + +
    • +
  • +
    • +
  • + + <%= translate(locale, "Wiki") %> + +
    • +
  • + + <%= translate(locale, "Send Feedback") %> + +
    • +
    -
    +
    +
    +
    +
    +
    + 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") %> + +
    + <% 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.") %> + +
    +
    + + BTC: 356DpZyMXu6rYd55Yqzjs29n79kGKWcYrY
    +
    + + BCH: qq4ptclkzej5eza6a50et5ggc58hxsq5aylqut2npk
    +
    + + Liberapay + / + Patreon +
    +
    + + + <%= translate(locale, "View JavaScript license information.") %> + +
    +
    + + <%= translate(locale, "Current version: ") %> + <%= CURRENT_VERSION %>- + <%= CURRENT_COMMIT %> + + <%= CURRENT_BRANCH %> +
    +
    +
    +
    +
    +
    +