updated header, more responsive for smaller width

author: RaNaN <Mast3rRaNaN@hotmail.de> 2012-12-22 14:36:17 +0100
committer: RaNaN <Mast3rRaNaN@hotmail.de> 2012-12-22 14:36:17 +0100
commit: c40dd130d11a768941e264bc7fbb270f859b3239 (patch)
tree: 0b43e36eca98b6ab0992dd3c77c03c5a27d5def4 /module
parent: updated bootstrap to 2.2.2 (diff)
download: pyload-c40dd130d11a768941e264bc7fbb270f859b3239.tar.xz
3 files changed, 277 insertions, 219 deletions
diff --git a/module/web/static/css/default/style.less b/module/web/static/css/default/style.less
index 4ad4d5f19..79fbbe1e8 100644
--- a/module/web/static/css/default/style.less
+++ b/module/web/static/css/default/style.less
@@ -2,17 +2,28 @@
    Definitions
 */
 
-@min-width: 1000px;
-@header-height: 62px;
-// 62:38 = 100 -> Golden ratio
+/*
+  Bootstrap size: Phones to tablets, min value when scrollbar appears
+*/
+@min-width: 767px;
+
+/*
+  Threshold for slightly larger screen
+*/
+@large-screen: 1150px;
+
+@header-height: 75px;
 @footer-height: 100px;
+
 @margin-side: 100px;
 
-@dark: #333333;
 @light: #ffffff;
+@dark: #333333;
+
 @grey: #757575;
 @greyLight: #E5E5E5;
 @greyLighter: #F5F5F5;
+@greyDark: #111113;
 
 @yellow: #fee247;
 @yellowLighter: lighten(spin(@yellow, 10), 20%);
@@ -101,6 +112,25 @@ a:hover {
   height: @header-height;
 }
 
+/*
+  Additional Responsive Class for larger desktop
+*/
+
+.visible-large-screen {
+  display: inherit !important;
+}
+
+@media (max-width: @large-screen) {
+  .visible-large-screen {
+    display: none !important;
+  }
+
+  #content {
+    margin-left: @margin-side / 2;
+    margin-right: @margin-side / 2;
+  }
+}
+
 .btn-blue {
   background-color: hsl(206, 49%, 35%) !important;
   background-repeat: repeat-x;
@@ -139,10 +169,6 @@ a:hover {
   -webkit-font-smoothing: antialiased;
 }
 
-.label-info, .badge-info {
-  background-color: @blue;
-}
-
 /*
     Header
 */
@@ -178,7 +204,6 @@ header:before {
 header div.left {
   position: relative;
   padding-left: 20px;
-  width: 32%;
   height: @header-height;
   float: left; //  border-right: 1px solid;
 }
@@ -187,6 +212,10 @@ header div.right {
   padding-right: 20px;
 }
 
+header .pull-right {
+  color: #fee267;
+}
+
 header span.title {
   color: white;
   float: left;
@@ -199,7 +228,7 @@ header span.title {
 header .logo {
   float: left;
   margin-right: 10px;
-  margin-top: 4px;
+  margin-top: 12px;
   width: 105px;
   height: 105px;
   background: url("../../img/default/logo.png") no-repeat;
@@ -208,8 +237,8 @@ header .logo {
 .header_block {
   float: right;
   font-family: SansationRegular, sans-serif;
-  margin: 5px 8px 0;
-  line-height: 17px;
+  margin: 10px 8px 0;
+  line-height: 18px;
   font-size: small;
 
   i {
@@ -217,31 +246,55 @@ header .logo {
     vertical-align: text-bottom;
   }
 
+  .btn {
+    margin-top: 8px;
+  }
+
 }
 
 #notification_div {
-  position: absolute;
-  left: 50%;
+/*position: absolute;*/
+/* left: 50%;*/
+  float: right;
   width: 26%;
-  height: 45px;
-  margin-left: -13%;
-  margin-top: 8px;
-  text-align: center;
+  margin-right: 15px;
+  text-align: left;
+}
+
+.notifications-area {
+  display: inline;
+  color: #fff;
+  height: 14px;
+  line-height: 14px;
+  font-size: small;
+  background-color: @grey;
+  border: 5px solid @grey;
+  border-radius: 0 0 5px 5px;
 }
 
 #globalprogress {
-  height: 8px;
+  background-color: @grey;
+  background-image: none;
+  height: 15px;
   margin: 8px 5px 0;
-}
+  line-height: 15px;
+  -webkit-border-radius: 15px;
+  -moz-border-radius: 15px;
+  border-radius: 15px;
+  border: 3px solid #242424;
+
+  .bar {
+    color: @dark;
+    background-image: none;
+    background-color: @yellow;
+  }
 
-#globalprogress .bar {
-  background-color: @yellow;
 }
 
 #speedgraph {
   float: right;
-  height: 45px;
   width: 14%;
+  height: 60px;
   margin-top: 8px;
   font-family: sans-serif
 }
diff --git a/module/web/templates/default/base.html b/module/web/templates/default/base.html
index 88eee8f5b..e93eb52f8 100644
--- a/module/web/templates/default/base.html
+++ b/module/web/templates/default/base.html
@@ -30,36 +30,25 @@
 </head>
 <body>
 <div id="wrap">
-    <header style="width: 100%;">
+    <header>
         <div class="left">
             <div class="logo"></div>
-            <span class="title">pyLoad</span>
+            <span class="title visible-large-screen">pyLoad</span>
         </div>
         <div class="right">
             {% if user %}
-                {#                <div class="btn-group btn-group-vertical">#}
-                {#                    <a class="btn btn-mini" href="#"><i class="icon-align-left"></i></a>#}
-                {#                    <a class="btn btn-mini" href="#"><i class="icon-align-center"></i></a>#}
-                {#                </div>#}
-                <div id="notification_div">
-                    <span class="label label-info" style="position: absolute; left: 0;">O Msg.</span>
-                    <span class="label label-success" style="position: absolute; right: 0;">Started</span>
-                    No runnings tasks
-                    <div class="progress progress-warning progress-striped" id="globalprogress">
-                        <div class="bar" style="width: 60%"></div>
-                    </div>
-                </div>
-
                 <div class="header_block">
-                    <span class="label label-info"
-                          style="width: 100%; display: inline-block; text-align: center">
-                        Info
-                    </span>
-                    <div class="btn-group" style="margin-top: 5px">
-                        <a class="btn btn-blue btn-small" href="#"><i class="icon-user icon-white"></i> User</a>
-                        <a class="btn btn-blue btn-small dropdown-toggle" data-toggle="dropdown" href="#"><span
+                    <a class="header-link" href="/settings"><i class="icon-cog icon-white"></i> Settings</a>
+                    <a class="header-link" href="#"><i class="icon-list-alt icon-white"></i> Accounts</a>
+                    <br/>
+
+                    <a class="btn btn-success" href="#"><i class="icon-plus icon-white"></i> Add</a>
+
+                    <div class="btn-group">
+                        <a class="btn btn-blue" href="#"><i class="icon-user icon-white"></i> User</a>
+                        <a class="btn btn-blue dropdown-toggle" data-toggle="dropdown" href="#"><span
                                 class="caret"></span></a>
-                        <ul class="dropdown-menu">
+                        <ul class="dropdown-menu" style="right: 0; left: -100%">
                             <li><a href="#"><i class="icon-pencil"></i> Edit</a></li>
                             <li><a href="#"><i class="icon-trash"></i> Delete</a></li>
                             <li><a href="#"><i class="icon-ban-circle"></i> Ban</a></li>
@@ -67,25 +56,41 @@
                             <li><a href="#"><i class="i"></i> Make admin</a></li>
                         </ul>
                     </div>
-                    {#                    <div class="btn-toolbar">#}
-                    {#                        <div class="btn-group">#}
-                    {#                            <a class="btn btn-mini" href="#"><i class="icon-align-left"></i></a>#}
-                    {#                            <a class="btn btn-mini" href="#"><i class="icon-align-center"></i></a>#}
-                    {#                            <a class="btn btn-mini" href="#"><i class="icon-align-right"></i></a>#}
-                    {#                        </div>#}
-                    {#                    </div>#}
+
                 </div>
-                <div id="speedgraph"></div>
+
+                <div id="speedgraph" class="visible-desktop"></div>
+
                 <div class="header_block">
-                    <span class="pull-right">500 kb/s</span><br>
-                    <span class="pull-right">1h 5m</span><br>
-                    <span class="pull-right">5 / 125</span><br>
+                    <span class="pull-right">8:15:01</span><br>
+                    <span class="pull-right">Started</span><br>
+                        <span class="pull-right"><span
+                                style="font-weight:bold;color: #fff !important;">5</span> of 12</span>
+
                 </div>
                 <div class="header_block">
-                    <i class="icon-download icon-white"></i> Speed:<br>
                     <i class="icon-time icon-white"></i> Remaining:<br>
-                    <i class="icon-hdd icon-white"></i> Queue:<br>
+                    <i class="icon-retweet icon-white"></i> Status:<br>
+                    <i class="icon-download-alt icon-white"></i> Downloaded: <br>
                 </div>
+
+                <div id="notification_div">
+                    <div class="notifications-area">
+                        Notifications
+                        <span class="badge badge-info">88</span>
+                    </div>
+
+                    <div class="progress" id="globalprogress">
+                        <div class="bar" style="width: 48%">downloading... (48%)</div>
+                    </div>
+
+                    <div>
+                        <span class="pull-left">3,65 MB of 5,30 MB</span>
+                        <span class="pull-right">420,7 kB / sec</span>
+                    </div>
+
+                </div>
+
             {% endif %}
         </div>
     </header>
@@ -108,7 +113,7 @@
 
         <div class="block">
             <h2 class="block-title">Powered by</h2>
-            asd <br>
+            Bootstrap <br>
             dsfdsf <br>
             sdf dsg <br>
         </div>
diff --git a/module/web/webinterface.py b/module/web/webinterface.py
index 4438c36bb..850ed5bdc 100644
--- a/module/web/webinterface.py
+++ b/module/web/webinterface.py
@@ -1,159 +1,159 @@
-#!/usr/bin/env python
-# -*- coding: utf-8 -*-
-"""
-    This program is free software; you can redistribute it and/or modify
-    it under the terms of the GNU General Public License as published by
-    the Free Software Foundation; either version 3 of the License,
-    or (at your option) any later version.
-
-    This program is distributed in the hope that it will be useful,
-    but WITHOUT ANY WARRANTY; without even the implied warranty of
-    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
-    See the GNU General Public License for more details.
-
-    You should have received a copy of the GNU General Public License
-    along with this program; if not, see <http://www.gnu.org/licenses/>.
-
-    @author: RaNaN
-"""
-
-import sys
-import module.common.pylgettext as gettext
-
-import os
-from os.path import join, abspath, dirname, exists
-from os import makedirs
-
-PROJECT_DIR = abspath(dirname(__file__))
-PYLOAD_DIR = abspath(join(PROJECT_DIR, "..", ".."))
-
-sys.path.append(PYLOAD_DIR)
-
-from module import InitHomeDir
-from module.utils import format_size
-
-import bottle
-from bottle import run, app
-
-from jinja2 import Environment, FileSystemLoader, PrefixLoader, FileSystemBytecodeCache
-from middlewares import StripPathMiddleware, GZipMiddleWare, PrefixMiddleware
-
-SETUP = None
-PYLOAD = None
-
-from module.web import ServerThread
-
-if not ServerThread.core:
-    if ServerThread.setup:
-        SETUP = ServerThread.setup
-        config = SETUP.config
-    else:
-        raise Exception("Could not access pyLoad Core")
-else:
-    PYLOAD = ServerThread.core.api
-    config = ServerThread.core.config
-
-from module.common.JsEngine import JsEngine
-
-JS = JsEngine()
-
-TEMPLATE = config.get('webinterface', 'template')
-DL_ROOT = config.get('general', 'download_folder')
-LOG_ROOT = config.get('log', 'log_folder')
-PREFIX = config.get('webinterface', 'prefix')
-
-if PREFIX:
-    PREFIX = PREFIX.rstrip("/")
-    if PREFIX and not PREFIX.startswith("/"):
-        PREFIX = "/" + PREFIX
-
-DEBUG = config.get("general", "debug_mode") or "-d" in sys.argv or "--debug" in sys.argv
-bottle.debug(DEBUG)
-
-cache = join("tmp", "jinja_cache")
-if not exists(cache):
-    makedirs(cache)
-
-bcc = FileSystemBytecodeCache(cache, '%s.cache')
-loader = PrefixLoader({
-    "default": FileSystemLoader(join(PROJECT_DIR, "templates", "default")),
-    "mobile": FileSystemLoader(join(PROJECT_DIR, "templates", "mobile")),
-    'js': FileSystemLoader(join(PROJECT_DIR, 'media', 'js'))
-})
-
-env = Environment(loader=loader, extensions=['jinja2.ext.i18n', 'jinja2.ext.autoescape'], trim_blocks=True, auto_reload=False,
-    bytecode_cache=bcc)
-
-# Filter
-
-env.filters["type"] = lambda x: str(type(x))
-env.filters["formatsize"] = format_size
-env.filters["getitem"] = lambda x, y: x.__getitem__(y)
-if not PREFIX:
-    env.filters["url"] = lambda x: x
-else:
-    env.filters["url"] = lambda x: PREFIX + x if x.startswith("/") else x
-
-# Locale
-
-gettext.setpaths([join(os.sep, "usr", "share", "pyload", "locale"), None])
-translation = gettext.translation("django", join(PYLOAD_DIR, "locale"),
-    languages=[config.get("general", "language"), "en"],fallback=True)
-translation.install(True)
-env.install_gettext_translations(translation)
-
-# Middlewares
-
-from beaker.middleware import SessionMiddleware
-
-session_opts = {
-    'session.type': 'file',
-    'session.cookie_expires': False,
-    'session.data_dir': './tmp',
-    'session.auto': False
-}
-
-web = StripPathMiddleware(SessionMiddleware(app(), session_opts))
-web = GZipMiddleWare(web)
-
-if PREFIX:
-    web = PrefixMiddleware(web, prefix=PREFIX)
-
-import pyload_app
-import setup_app
-import cnl_app
-import api_app
-
-
-# Server Adapter
-
-def run_simple(host="0.0.0.0", port="8000"):
-    run(app=web, host=host, port=port, quiet=True)
-
-
-def run_lightweight(host="0.0.0.0", port="8000"):
-    run(app=web, host=host, port=port, quiet=True, server="bjoern")
-
-
-def run_threaded(host="0.0.0.0", port="8000", threads=6, cert="", key=""):
-    from wsgiserver import CherryPyWSGIServer
-
-    if cert and key:
-        CherryPyWSGIServer.ssl_certificate = cert
-        CherryPyWSGIServer.ssl_private_key = key
-
-    # todo: threads configurable
-    from utils import CherryPyWSGI
-    CherryPyWSGI.numthreads = threads
-
-    run(app=web, host=host, port=port, server=CherryPyWSGI, quiet=True)
-
-
-def run_fcgi(host="0.0.0.0", port="8000"):
-    from bottle import FlupFCGIServer
-
-    run(app=web, host=host, port=port, server=FlupFCGIServer, quiet=True)
-
-
-if __name__ == "__main__":
-    run(app=web, port=8001)
+#!/usr/bin/env python
+# -*- coding: utf-8 -*-
+"""
+    This program is free software; you can redistribute it and/or modify
+    it under the terms of the GNU General Public License as published by
+    the Free Software Foundation; either version 3 of the License,
+    or (at your option) any later version.
+
+    This program is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
+    See the GNU General Public License for more details.
+
+    You should have received a copy of the GNU General Public License
+    along with this program; if not, see <http://www.gnu.org/licenses/>.
+
+    @author: RaNaN
+"""
+
+import sys
+import module.common.pylgettext as gettext
+
+import os
+from os.path import join, abspath, dirname, exists
+from os import makedirs
+
+PROJECT_DIR = abspath(dirname(__file__))
+PYLOAD_DIR = abspath(join(PROJECT_DIR, "..", ".."))
+
+sys.path.append(PYLOAD_DIR)
+
+from module import InitHomeDir
+from module.utils import format_size
+
+import bottle
+from bottle import run, app
+
+from jinja2 import Environment, FileSystemLoader, PrefixLoader, FileSystemBytecodeCache
+from middlewares import StripPathMiddleware, GZipMiddleWare, PrefixMiddleware
+
+SETUP = None
+PYLOAD = None
+
+from module.web import ServerThread
+
+if not ServerThread.core:
+    if ServerThread.setup:
+        SETUP = ServerThread.setup
+        config = SETUP.config
+    else:
+        raise Exception("Could not access pyLoad Core")
+else:
+    PYLOAD = ServerThread.core.api
+    config = ServerThread.core.config
+
+from module.common.JsEngine import JsEngine
+
+JS = JsEngine()
+
+TEMPLATE = config.get('webinterface', 'template')
+DL_ROOT = config.get('general', 'download_folder')
+LOG_ROOT = config.get('log', 'log_folder')
+PREFIX = config.get('webinterface', 'prefix')
+
+if PREFIX:
+    PREFIX = PREFIX.rstrip("/")
+    if PREFIX and not PREFIX.startswith("/"):
+        PREFIX = "/" + PREFIX
+
+DEBUG = config.get("general", "debug_mode") or "-d" in sys.argv or "--debug" in sys.argv
+bottle.debug(DEBUG)
+
+cache = join("tmp", "jinja_cache")
+if not exists(cache):
+    makedirs(cache)
+
+bcc = FileSystemBytecodeCache(cache, '%s.cache')
+loader = PrefixLoader({
+    "default": FileSystemLoader(join(PROJECT_DIR, "templates", "default")),
+    "mobile": FileSystemLoader(join(PROJECT_DIR, "templates", "mobile")),
+    'js': FileSystemLoader(join(PROJECT_DIR, 'media', 'js'))
+})
+
+env = Environment(loader=loader, extensions=['jinja2.ext.i18n', 'jinja2.ext.autoescape'], trim_blocks=True, auto_reload=True,
+    bytecode_cache=bcc)
+
+# Filter
+
+env.filters["type"] = lambda x: str(type(x))
+env.filters["formatsize"] = format_size
+env.filters["getitem"] = lambda x, y: x.__getitem__(y)
+if not PREFIX:
+    env.filters["url"] = lambda x: x
+else:
+    env.filters["url"] = lambda x: PREFIX + x if x.startswith("/") else x
+
+# Locale
+
+gettext.setpaths([join(os.sep, "usr", "share", "pyload", "locale"), None])
+translation = gettext.translation("django", join(PYLOAD_DIR, "locale"),
+    languages=[config.get("general", "language"), "en"],fallback=True)
+translation.install(True)
+env.install_gettext_translations(translation)
+
+# Middlewares
+
+from beaker.middleware import SessionMiddleware
+
+session_opts = {
+    'session.type': 'file',
+    'session.cookie_expires': False,
+    'session.data_dir': './tmp',
+    'session.auto': False
+}
+
+web = StripPathMiddleware(SessionMiddleware(app(), session_opts))
+web = GZipMiddleWare(web)
+
+if PREFIX:
+    web = PrefixMiddleware(web, prefix=PREFIX)
+
+import pyload_app
+import setup_app
+import cnl_app
+import api_app
+
+
+# Server Adapter
+
+def run_simple(host="0.0.0.0", port="8000"):
+    run(app=web, host=host, port=port, quiet=True)
+
+
+def run_lightweight(host="0.0.0.0", port="8000"):
+    run(app=web, host=host, port=port, quiet=True, server="bjoern")
+
+
+def run_threaded(host="0.0.0.0", port="8000", threads=6, cert="", key=""):
+    from wsgiserver import CherryPyWSGIServer
+
+    if cert and key:
+        CherryPyWSGIServer.ssl_certificate = cert
+        CherryPyWSGIServer.ssl_private_key = key
+
+    # todo: threads configurable
+    from utils import CherryPyWSGI
+    CherryPyWSGI.numthreads = threads
+
+    run(app=web, host=host, port=port, server=CherryPyWSGI, quiet=True)
+
+
+def run_fcgi(host="0.0.0.0", port="8000"):
+    from bottle import FlupFCGIServer
+
+    run(app=web, host=host, port=port, server=FlupFCGIServer, quiet=True)
+
+
+if __name__ == "__main__":
+    run(app=web, port=8001)
author	RaNaN <Mast3rRaNaN@hotmail.de>	2012-12-22 14:36:17 +0100
committer	RaNaN <Mast3rRaNaN@hotmail.de>	2012-12-22 14:36:17 +0100
commit	c40dd130d11a768941e264bc7fbb270f859b3239 (patch)
tree	0b43e36eca98b6ab0992dd3c77c03c5a27d5def4 /module
parent	updated bootstrap to 2.2.2 (diff)
download	pyload-c40dd130d11a768941e264bc7fbb270f859b3239.tar.xz