derived mobile template from default

4 files changed, 232 insertions, 91 deletions

diff --git a/module/web/static/css/default/style.css b/module/web/static/css/default/style.css
index a5f0d7c9b..fb33875a7 100644
--- a/module/web/static/css/default/style.css
+++ b/module/web/static/css/default/style.css
@@ -66,14 +66,16 @@ a:hover {
     padding-bottom: 100px; /* Height of footer */

 }

 

+#content:before {

+    display: block;

+    content: " ";

+    height: 70px; /* Pushes content down with height of header */

+}

+

 /*

     Header

 */

 

-#push {

-    height: 70px; /* Pushes content down with height of header */

-}

-

 header {

     background: url("../../img/default/main-wrapper-bg.png") repeat-x;

     height: 70px;

diff --git a/module/web/static/css/mobile/style.css b/module/web/static/css/mobile/style.css
new file mode 100644
index 000000000..349b54bc0
--- /dev/null
+++ b/module/web/static/css/mobile/style.css
@@ -0,0 +1,214 @@
+

+/*

+    General

+ */

+

+* {

+    margin: 0;

+}

+

+html, body {

+    height: 100%;

+}

+

+body {

+    margin: 0;

+    padding: 0;

+    font-family: 'Abel', sans-serif;

+    font-size: 16px;

+    color: #757575;

+    background: url("../../img/default/fancy_deboss.png") repeat scroll 0 0 transparent;

+    min-width: 320px;

+}

+

+h1, h2, h3 {

+	margin: 0;

+	padding: 0;

+	font-weight: normal;

+	color: #221D1D;

+}

+

+h1 {

+	font-size: 2em;

+}

+

+h2 {

+	font-size: 2.4em;

+}

+

+h3 {

+	font-size: 1.6em;

+}

+

+p, ul, ol {

+	margin-top: 0;

+	line-height: 180%;

+}

+

+ul, ol {

+}

+

+a {

+	text-decoration: none;

+	color: #FF7637;

+}

+

+a:hover {

+}

+

+#wrap {

+    min-height: 100%;

+}

+

+#content {

+    padding-left: 10px;

+    padding-bottom: 30px; /* Height of footer */

+}

+

+#content:before {

+    display: block;

+    content: " ";

+    height: 30px;

+}

+

+/*

+    Header

+*/

+

+header {

+    background: url("../../img/default/main-wrapper-bg.png") repeat-x;

+    height: 30px;

+    position: fixed;

+    top: 0;

+    vertical-align: top;

+    width: 100%;

+    z-index: 10;

+    min-width: 1000px;

+    color: #ffffff;

+}

+

+header a {

+    color: #ffffff;

+}

+

+header:before {

+    position: absolute;

+    content: ' ';

+    top: 0;

+    right: 0;

+    bottom: 0;

+    left: 0;

+    background-color: transparent;

+    box-shadow: 0 0 5px black;

+    z-index: -1;

+}

+

+header div.center {

+    position: relative;

+    padding-left: 20px;

+    padding-right: 20px;

+}

+header span.title {

+    color: white;

+    float: left;

+    font-family: SansationRegular, sans-serif;

+    font-size: 18px;

+    cursor: default;

+    margin-top: 4px;

+    padding-left: 10px;

+}

+

+/*

+    Login

+*/

+.login {

+    vertical-align: middle;

+    text-align: center;

+    border: 2px solid #000000;

+    padding: 15px;

+	font-size: 17px;

+    border-radius: 15px;

+    -moz-border-radius: 15px;

+	-webkit-border-radius: 15px;

+}

+

+.login input, .login div{

+    padding: 3px;

+}

+.login_submit input {

+	padding: 5px 15px;

+}

+.login_user , .login_password  {

+	text-align: right;

+	width: 320px;

+	margin-left: auto;

+	margin-right: auto;

+}

+.login_user  span, .login_password span{

+	margin-right: 5px;

+}

+/*

+    Footer

+*/

+footer {

+    background: url("../../img/default/main-wrapper-bg.png") repeat-x;

+    height: 30px;

+    margin-top: -30px;

+    position: relative;

+    width: 100%;

+    z-index: 10;

+}

+

+footer .logo {

+    background: url(../../img/default/logo_grey.png) no-repeat;

+    float: left;

+    width: 60px;

+    height: 60px;

+    margin-top: 12px;

+    margin-right: 12px;

+}

+

+footer div.center {

+    padding-top: 10px;

+    width: 900px;

+    margin-left: auto;

+    margin-right: auto;

+}

+

+footer:before {

+    position: absolute;

+    content: ' ';

+    top: 0;

+    right: 0;

+    bottom: 0;

+    left: 0;

+    background-color: transparent;

+    box-shadow: 0 0 5px black;

+    z-index: -1;

+}

+

+footer .block {

+    font-size: 12px;

+    float: left;

+    margin: 0;

+    width: 150px;

+    padding-top: 6px;

+    padding-right: 30px;

+}

+

+footer .copyright {

+    text-align: center;

+    width: auto;

+    padding-top: 22px;

+}

+

+footer h2 {

+    background: url("../../img/default/double-line.gif") repeat-x scroll center bottom transparent !important;

+    color: #FFFFFF;

+    font-family: SansationLight, sans-serif;

+    font-size: 16px;

+    font-weight: normal;

+    line-height: 16px;

+    margin: 0;

+    padding-bottom: 6px;

+}
\ No newline at end of file
diff --git a/module/web/templates/default/base.html b/module/web/templates/default/base.html
index f611596d8..316cc04af 100644
--- a/module/web/templates/default/base.html
+++ b/module/web/templates/default/base.html
@@ -63,7 +63,6 @@
             {% endif %}

         </div>

     </header>

-    <div id="push"></div>

     <div id="content">

         <div class="modal window-container zoomout ow-closed">

             <h1>Close me!</h1>

diff --git a/module/web/templates/mobile/base.html b/module/web/templates/mobile/base.html
index 8145ced26..95d824730 100644
--- a/module/web/templates/mobile/base.html
+++ b/module/web/templates/mobile/base.html
@@ -10,102 +10,28 @@
     <meta http-equiv="cleartype" content="on">
 
     <link rel="shortcut icon" href="img/touch/apple-touch-icon.png">
-    <link rel="stylesheet" href="/static/css/mobile/main.css">
+    <link href="static/css/font.css" rel="stylesheet" type="text/css"/>
+    {# TODO: Needs cleanup #}
+    <link rel="stylesheet" href="/static/css/mobile/style.css">
 
     <script type="text/javascript" data-main="static/js/mobile" src="static/js/libs/require-2.0.6.js"></script>
     {% block head %}
     {% endblock %}
-    <style>
-        * {
-            margin: 0;
-        }
-
-        html, body {
-            height: 99.9%;
-        }
-
-        #wrap {
-            height: 100%;
-            position: relative;
-        }
-
-        header {
-            height: 25px;
-        }
-
-        .viewport {
-            overflow-x: hidden;
-        }
-
-        #content {
-            position: relative;
-            width: 99.9%;
-            height: 100%;
-        }
-
-        ul li {
-            display: inline;
-            padding-right: 10px;
-        }
-
-        .page {
-            position: absolute;
-            height: 99.9%;
-            width: 99.9%;
-            border: 1px solid red;
-        }
-
-        .page:before {
-            content: ' ';
-            display: block;
-            height: 25px;
-        }
-
-        footer, header {
-            position: fixed;
-            height: 25px;
-            width: 100%;
-            z-index: 1000;
-            left: 0;
-            right: 0;
-            background-color: #ffd700;
-        }
-
-        header {
-            top: 0;
-        }
-
-        footer {
-            bottom: 0;
-        }
-
-    </style>
 </head>
 <body class="viewport">
+<div id="wrap">
 <header>
-    <ul>
-        <li><a id="p1" href="#">Page 1</a></li>
-        <li><a id="p2" href="#">Page 2</a></li>
-    </ul>
+    <div class="logo"></div>
+    <span class="title">pyLoad</span>
 </header>
 <div id="content">
-    <div class="page" style="background-color: yellow;">
-        <h1>dfgfdg</h1>
-        dfgfhdfgh<br>
-        fhsfdfgdfg<br>
-        cgfghfgh<br>
-
-        <h2>much content</h2>
-        dfgfghdfgh<br>
-        dfghfgh<br>
-        dfg fghgfh<br>
-
-        <h3>Even more</h3>
-        ertert
-        {% block content %}
-        {% endblock content %}
-    </div>
+    <h2>Tech Demo</h2>
+    <h3>In Development</h3>
+</div>
 </div>
+<footer>
+    Tab Bar
+</footer>
 <script>
     require(['mobile'], function (App) {
         App.init();