themes/freifunk-generic: Improve display on mobile devices, remove useless css from...

diff --git a/themes/freifunk-generic/htdocs/luci-static/freifunk-generic/cascade.css b/themes/freifunk-generic/htdocs/luci-static/freifunk-generic/cascade.css
index d5fe772..2baac14 100644 (file)
--- a/themes/freifunk-generic/htdocs/luci-static/freifunk-generic/cascade.css
+++ b/themes/freifunk-generic/htdocs/luci-static/freifunk-generic/cascade.css
@@ -174,6 +174,8 @@ a img {
 
 .header_left{
        text-align:left;
+       max-width: 50%;
+       float:left;
 }
 
 .header_left a{
@@ -182,21 +184,14 @@ a img {
        text-decoration: none;
 }
 
-.header_left .spacer {
-height: 12px;
-min-height:12px;
-width:99%;
-}
-
 #header h1,
 .header_right {
-       position: absolute;
+       max-width: 45%;
        text-align: right;
-       top: 10px;
-       right: 10px;
        font-size: 70%;
        font-weight: normal;
        line-height: 160%;
+       float:right;
 }
 
 ul.dropdowns {
@@ -296,7 +291,6 @@ ul.dropdowns ul ul ul li:hover ul {
        color: #004a9c;
        border-bottom: 1px dotted #5A5A5A;
 }
-
 #menubar .warning {
        color: red;
        background-color: #FFF;
@@ -415,7 +409,7 @@ html #menubar a:visited.warning {
 * html .lang_pt-br #submenu_admin_network_firewall { width: 15em; }
 
 #modemenu {
-       width: auto;
+/*     width: auto;*/
        background: #000;
        color: #fff;
        list-style: none;
@@ -448,6 +442,7 @@ textarea#syslog {
        font-family: monospace;
 }
 
+
 #maincontent {
        clear: both;
        width: 90%;
@@ -976,6 +971,7 @@ td.cbi-value-error {
        padding: 0.3em;
 }
 
+
 .wrapper {
        min-height: 100%;
        height: auto !important;

diff --git a/themes/freifunk-generic/htdocs/luci-static/freifunk-generic/mobile.css b/themes/freifunk-generic/htdocs/luci-static/freifunk-generic/mobile.css
index e20ab69..37d77b4 100644 (file)
--- a/themes/freifunk-generic/htdocs/luci-static/freifunk-generic/mobile.css
+++ b/themes/freifunk-generic/htdocs/luci-static/freifunk-generic/mobile.css
@@ -1,84 +1,14 @@
-.high_res_only{
-       display:none !important;
-}
-
-#main_bg_pattern {
-       position:absolute;
-       background: url(images/PF_background_pattern.png) repeat-x;
-       top:0px;
-       left:0px;
-       width:980px;
-       z-index:0;              
-}
-
-#main_bg {
-    min-height:2000px;
-}
-
-#heading{
-       margin-left:285px !important;
-}
-
 #header{
        padding-left:0px !important;
        padding-bottom:24px;
 }
 
-#menubar{
-    font-size:35px;
-}
-
-
-               #maincontent .multiColumn {
-                       margin:1em 0px;
-                       width:100%;
-               }
-
-               #maincontent .multiColumn .first{
-                       width:100% !important;
-                       float:none !important;
-                       display:block !important;
-                       padding-right:0px;
-               }
-
-               #maincontent .multiColumn .second{
-                       width:100% !important;
-                       float:none !important;
-                       display:block !important;
-                       padding-right:0px;
-               }
-               #maincontent .multiColumn .terminateMultiColumn{
-                       clear:both;
-                       float:none;
-                       display:block;
-                       text-align:left !important;
-                       padding-top:2em;
-               }
-
-               #maincontent ul{
-                       margin-bottom:1em;
-               }
-
-
-
-
-
-#sidebar_container{
-       display:none;
-}
-
-#adbar_low_res_container{
-       display:block !important;
-}
-#main_content_container{
-       margin-top:50px !important;
+.header_left{
+       max-width: 100%;
 }
 
-.lt_spec{
-       padding:0px;
-       width:54px;
-       height:42px;
-       background:transparent url(images/lt_round.png) no-repeat 0% 0% !important;
+#mainlogo {
+       max-width: 90%;
 }
 
 #content {
@@ -86,8 +16,8 @@
 }
 
 #maincontent{
-       font-size:25px!important;
-       line-height:40px;
+       font-size:1.2em;
+       line-height:1.5em;
 }
 
 input[type=submit],
@@ -97,11 +27,7 @@ input[type=submit],
        display:inline !important;
        float:none !important;
        padding:10px 30px !important;
-       margin: 0px 10px !important;
-       font-size:25px !important;
-       font-family: impact, sans-serif !important;
-       background:#ff8800 none !important;
-       border-color:#000000 !important;
+       margin: 10px 10px 10px 0 !important;
 }
 
 .cbi-input-text,
@@ -109,13 +35,11 @@ input[type=submit],
 .cbi-input-user,
 .cbi-input-password{
        display:block !important;
-       font-size:25px  !important;
        margin: 0 !important;
        padding:0 !important;
 }
 
 .cbi-value-field{
-       font-size:25px;
        margin:0 !important;
        margin-bottom: 1em !important;
        width:100%  !important; 
@@ -124,12 +48,12 @@ input[type=submit],
 .cbi-section legend{
        white-space:normal !important;
 }
-.cbi-section code{
-       font-size:24px;
-}
 
 .cbi-value-title{
-       font-size:25px;
        font-weight:bold;
        float:none !important;
 }
+
+img {
+       max-width:100%;
+}

diff --git a/themes/freifunk-generic/htdocs/luci-static/freifunk-generic/smallscreen.css b/themes/freifunk-generic/htdocs/luci-static/freifunk-generic/smallscreen.css
new file mode 100644 (file)
index 0000000..660cd8d
--- /dev/null
+++ b/themes/freifunk-generic/htdocs/luci-static/freifunk-generic/smallscreen.css
@@ -0,0 +1,3 @@
+.header_right {
+       display:none;
+}

diff --git a/themes/freifunk-generic/luasrc/view/themes/freifunk-generic/header.htm b/themes/freifunk-generic/luasrc/view/themes/freifunk-generic/header.htm
index a8c257e..7b173bd 100644 (file)
--- a/themes/freifunk-generic/luasrc/view/themes/freifunk-generic/header.htm
+++ b/themes/freifunk-generic/luasrc/view/themes/freifunk-generic/header.htm
@@ -75,6 +75,7 @@ You may obtain a copy of the License at
 <meta http-equiv="Content-Script-Type" content="text/javascript" />
 <link rel="stylesheet" type="text/css" media="screen" href="<%=media%>/cascade.css" />
 <link rel="stylesheet" media="only screen and (max-device-width: 854px)" href="<%=media%>/mobile.css" type="text/css" />
+<link rel="stylesheet" media="only screen and (max-width: 854px)" href="<%=media%>/smallscreen.css" type="text/css" />
 <link rel="stylesheet" media="handheld" href="<%=media%>/mobile.css" type="text/css" />
 <!--[if IE 7]><link rel="stylesheet" type="text/css" media="screen" href="<%=media%>/ie7.css" /><![endif]-->
 <% if node and node.css then %><link rel="stylesheet" type="text/css" media="screen" href="<%=resource%>/<%=node.css%>" />
@@ -83,6 +84,7 @@ You may obtain a copy of the License at
 <%= css %>
 </style>
 <% end -%>
+<meta name="viewport" content="initial-scale=1.0">
 <script type="text/javascript" src="<%=resource%>/xhr.js"></script>
 
 <title><%=striptags( hostname .. ( (node and node.title) and ' - ' .. translate(tostring(node.title)) or '')) %> - LuCI</title>
@@ -117,12 +119,11 @@ You may obtain a copy of the License at
                </div>
        <%else%>
                <div class="header_left">
-                       <a href="<%=hp%>"><img src="<%=logo%>" alt="Logo" /></a>
+                       <a href="<%=hp%>"><img src="<%=logo%>" id="mainlogo" alt="Logo" /></a>
                        <%if show_comm then%>
                                <a href="<%=hp%>"><%=community%></a>
                                <br/>
                        <%end%>
-               <div class = "spacer"></div>
                </div>
                <div class="header_right">
                        <%=luci.version.distversion%><br />
@@ -134,6 +135,8 @@ You may obtain a copy of the License at
                                <span id="xhr_poll_status_off" style="display:none"><%:off%></span>
                        </span>
                </div>
+               <div class="clear"></div>
+
        <%end%>
 </div>