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

4 files changed, 26 insertions, 100 deletions

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 d5fe77279d..2baac1459a 100644
--- 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 e20ab69d3e..37d77b4f43 100644
--- 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
index 0000000000..660cd8df4d
--- /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 a8c257e405..7b173bdb67 100644
--- 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>