themes/freifunk-generic: add CSS for mobile devices

2 files changed, 227 insertions, 0 deletions

diff --git a/themes/freifunk-generic/htdocs/luci-static/freifunk-generic/mobile.css b/themes/freifunk-generic/htdocs/luci-static/freifunk-generic/mobile.css
new file mode 100644
index 000000000..0e5384d6f
--- /dev/null
+++ b/themes/freifunk-generic/htdocs/luci-static/freifunk-generic/mobile.css
@@ -0,0 +1,225 @@
+.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;
+}
+
+		#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;
+		}
+
+
+
+/**** Begin iphone menu bar ****/
+
+#iphone_menu{
+	position:absolute;	
+	display:inline !important;
+	top:0px;
+	left:0px;
+	margin:0px;
+	padding:10px;
+	z-index:40 !important;
+}
+
+#iphone_menu_handles{
+	display:block;
+	font-size:60px;
+	font-weight:bold;
+	height:160px;
+}
+
+#iphone_menu_open{
+	display:inline;
+}
+
+#iphone_menu_close{
+	display:none;
+}
+
+#iphone_menu_joker{
+	display:none;
+	position:absolute;
+	right:5px;
+	top:5px;
+	border:none;
+	text-decoration:none;
+}
+
+.iphone_button{
+	display:inline !important;
+}
+.iphone_button table {
+	table-layout:fixed;
+	color:#ffffff;
+	border-collapse:collapse;
+	vertical-align:middle;
+}
+
+.iphone_button_content {
+	font-weight:bold;
+	padding: 0.2em 0.75em;
+}
+	/*** Begin  iphone menu items ***/
+			#iphone_menu_items {
+				display:none;
+			}
+			#iphone_menu_items table {
+				border-collapse:collapse;
+			}
+
+			#iphone_menu_items  td {
+				vertical-align:middle;
+			}
+
+			#iphone_menu_items .menu_item {
+				font-size:65px;
+				padding:15px 30px;
+				line-height:1.5em;			
+			}
+
+			#iphone_menu_items .menu_item table { 
+				width:720px;
+			}
+
+			#iphone_menu_items .submenu_marker {
+				font-size:65px;
+				padding: 0px;
+				line-height:1.5em;
+			}
+
+			#iphone_menu_items a {
+				text-decoration:none;
+				font-weight:bold;
+				color:#ffffff;	
+			}
+
+			#iphone_menu_items a.active {
+				color: #4f9ed3;
+			}
+			#iphone_menu_items li {
+				min-height:100px;
+				list-style:none;
+			}
+
+	/***End iphone menu items ***/
+/**** End  iphone menu bar ****/
+
+
+
+
+#sidebar_container{
+	display:none;
+}
+
+#adbar_low_res_container{
+	display:block !important;
+}
+#main_content_container{
+	margin-top:50px !important;
+}
+
+.lt_spec{
+	padding:0px;
+	width:54px;
+	height:42px;
+	background:transparent url(images/lt_round.png) no-repeat 0% 0% !important;
+}
+
+#content {
+	margin-left:0px !important; 
+}
+
+#maincontent{
+	font-size:35px!important;
+}
+
+input[type=submit],
+.cbi-button,
+.cbi-button-reset,
+.cbi-button-save{
+	display:inline !important;
+	float:none !important;
+	padding:10px 30px !important;
+	margin: 0px 10px !important;
+	font-size:45px !important;
+	font-family: impact, sans-serif !important;
+	background:#ff8800 none !important;
+	border-color:#000000 !important;
+}
+
+.cbi-input-text,
+.cbi-input-select,
+.cbi-input-user,
+.cbi-input-password{
+	display:block !important;
+	font-size:35px  !important;
+	margin: 0 !important;
+	padding:0 !important;
+}
+
+.cbi-value-field{
+	font-size:35px;
+	margin:0 !important;
+	margin-bottom: 1em !important;
+	width:100%  !important;	
+}
+
+.cbi-section legend{
+	white-space:normal !important;
+}
+.cbi-section code{
+	font-size:24px;
+}
+
+.cbi-value-title{
+	font-size:35px;
+	font-weight:bold;
+	float:none !important;
+}
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 9dbcf9ff3..11c7de50e 100644
--- a/themes/freifunk-generic/luasrc/view/themes/freifunk-generic/header.htm
+++ b/themes/freifunk-generic/luasrc/view/themes/freifunk-generic/header.htm
@@ -68,6 +68,8 @@ require("luci.http").prepare_content("application/xhtml+xml")
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <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: 480px)" href="<%=media%>/mobile.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%>" />
 <% end -%>