provide layout for smaller screens on android/iphone

16 years ago · 8058b24227
5 changed files with 479 additions and 10 deletions
--- a/css/small.php
+++ b/css/small.php
@ -0,0 +1,438 @@
+<?php
+header('Content-Type: text/css');
+require_once('../inc/lib_base.php');
+?>
+
+/* css used for devices with small screen such as smartphones */
+html,body {
+    background-color: #F9F9F9;
+    margin:0px;
+    height:100%;
+    width:100%;
+    position:absolute;
+}
+#mainlayout{
+	width:100%;
+	height:100%;
+}
+
+#mainlayout>div{
+	position:absolute;
+	width:100%;
+	left:0px;
+}
+
+#mainlayout>.head{
+	height:24px;
+	top:0px;
+}
+
+#mainlayout>.body{
+	vertical-align:top;
+	top:24px;
+	bottom:24px;
+	overflow:auto;
+}
+
+#mainlayout>.foot{
+	height:24px;
+	bottom:0px;
+}
+
+#mainlayout>.foot>.bar{
+	background-color:#EEE;
+	position:absolute;
+	top:0px;
+	height:24px;
+	width:100%;
+}
+
+body.error {background-color: #F0F0F0;}
+td.error{color:#FF0000; text-align:center}
+body,th,td,ul,li,a,div,p,pre {color:#333333; font-family:Verdana,"Bitstream Vera Sans",Arial,Helvetica,Sans,"Bitstream Vera Serif"; font-size:9.0pt;}
+
+a img {
+  border:none;
+}
+
+h1 {
+  margin-bottom:1.5em;
+}
+
+.center {
+  text-align:center;
+}
+
+.center * {
+  margin-left:auto;
+  margin-right:auto;
+}
+
+td {
+  text-align:left;
+}
+
+div#nav {
+  width:100%;
+  background-color: #EEEEEE;
+  padding:0px;
+  margin:0px;
+  position:absolute;
+  bottom:0px;
+}
+
+a#owncloud-logo {
+  margin-left:auto;
+  margin-right:auto;
+  display:block;
+  width:200px;
+  height:99px;
+  background: transparent url(<?php if(isset($WEBROOT)) echo($WEBROOT); ?>/img/owncloud-logo-small.png) no-repeat scroll 0 0;
+}
+
+a#owncloud-logo span {
+  display:none;
+}
+
+td.nametext{
+	white-space:nowrap;
+	/*overflow:hidden;*/
+	text-overflow: ellipsis;
+}
+td.nametext>img{
+	float:left;
+	display:box;
+}
+td.nametext>a{
+	display:block;
+	max-width:95%;
+	float:left;
+	overflow:hidden;
+	text-overflow: ellipsis;
+}
+.nametext a, .breadcrumb a{color:#333333; font-size:8pt; font-weight:bold; text-decoration:none;}
+.errortext {color:#CC3333; font-size:9pt; font-weight:bold; text-decoration:none;}
+.highlighttext {color:#333333; font-size:9pt; font-weight:bold; text-decoration:none;}
+.datetext {color:#333333; font-size:7pt;}
+.sizetext{
+	color:#333333;
+	font-size:7pt;
+}
+.footer {color:#999999; text-align:center; font-size:9pt; margin-top:4px;}
+.footer a {color:#999999; text-decoration:none;}
+.hint {color:#AAAAAA; text-align:center; font-size:8pt; margin-top:10px;}
+.hint a{color:#AAAAAA; text-align:center; font-size:8pt;}
+
+.formstyle {
+  font-weight:normal;
+  font-size: 8.0pt;
+  color: #555555;
+  background-color: #FFFFFF;
+  border: 1px solid #DDDDDD;
+  padding:0px;
+  margin:0px;
+}
+
+.loginform {
+  background-color: #EEEEEE;
+}
+
+.browser {
+	width:100%;
+	table-layout:fixed;
+  background-color: #EEEEEE;
+}
+
+.browserline {
+  background-color: #EEEEEE;
+}
+
+.browserline:hover {
+  background-color: #DDDDDD;
+}
+
+
+.navigationitem1 {
+  background-color: #EEEEEE;
+  color:#555555; 
+  font-size:9pt; 
+  font-weight:bold;
+}
+
+.navigationitem1 a{
+  text-decoration:none;
+}
+
+.navigationitem1 img {
+  border:none;
+}
+
+.navigationitem1:hover {
+  background-color: #EEEEEE;
+}
+
+.navigationitem {
+  background-color: #EEEEEE;
+}
+
+.navigationitem:hover {
+  background-color: #DDDDDD;
+}
+
+.navigationselected td {
+  background-color: #DDDDDD;
+}
+
+.navigationitem a {
+  text-decoration:none;
+  color: #333333;
+  font-size: 8.0pt;
+}
+
+.navigationitemselected a {
+  text-decoration:none;
+  color: #333333;
+  font-size: 8.0pt;
+  font-weight:bold;
+}
+
+.hidden{
+    height:0px;
+    width:0px;
+    margin:0px;
+    padding:0px;
+    border:0px;
+    position:absolute;
+    top:0px;
+    left:0px;
+    overflow:hidden;
+    /*do not use display:none here, it breaks iframes in some browsers*/
+}
+
+div.OCNotification{
+    background:#0c285a;
+    color:white;
+    border:white solid 1px;
+    padding:1px;
+    margin:4px;
+    min-width:200px;
+}
+div.OCNotificationHolder{
+    right:20px;
+    bottom:0px;
+    position:fixed;
+    color:white;
+}
+
+td img.file_actions{
+    cursor:pointer;
+    height:0px;
+    width:9px;
+}
+
+td.nametext:hover img.file_actions{
+    height:auto;
+}
+
+div.breadcrumb{
+   background-color: #F0F0F0; 
+}
+
+div.fileactionlist{
+	z-index:50;
+    position:absolute;
+    background-color: #DDDDDD;
+    margin-top:5px;
+    border:1px black solid;
+}
+
+div.fileactionlist td{
+    cursor:pointer;
+}
+
+div.fileactionlist td:hover{
+    background-color: #CCCCCC;
+}
+
+tr.breadcrumb{
+	background-color: #CCCCCC;
+}
+
+#content, div.browser{
+	vertical-align:top;
+	/*min-height:200px;*/
+	height:100%;
+}
+
+table.browser{
+	border: solid 3px #CCC;
+	height:100%;
+	border-spacing:0px;
+}
+
+table.browser thead, table.browser tfoot{
+	background-color:#CCC;
+	width:100%;
+}
+
+td.sizetext{
+	width:70px;
+	float:right;
+	text-align:right;
+}
+
+
+input.fileSelector{
+	margin-right:17px;
+	float:left;
+}
+
+td.fileSelector, td.fileicon{
+	width:20px;
+}
+
+span.upload{
+	float:right;
+	text-align:right;
+	margin:0px;
+	padding:0px;
+}
+
+table.browser>tbody{
+	vertical-align:top;
+}
+
+table.browser>tbody>tr>td, table.browser>tbody>tr{
+	padding:0px;
+	/*height:100%;*/
+}
+
+div.fileList{
+	width:100%;
+	position:relative;
+	overflow:hidden;
+	vertical-align:top;
+	height:100%;
+	min-height:150px;
+	top:0px;
+}
+
+div.fileactionlist table{
+	table-layout:auto !important;
+}
+
+div.fileList table{
+	width:100%;
+	table-layout:fixed;
+	vertical-align:top;
+}
+
+table.browser thead td,table.browser tfoot td{
+	padding-left:6px;
+	padding-top:0px;
+	padding-bottom:0px;
+}
+
+#imageframe{
+	position:absolute;
+	top:0px;
+	left:0px;
+	height:100%;
+	width:100%;
+	background:rgb(20,20,20);
+	background:rgba(20,20,20,0.9);
+	text-align:center;
+}
+
+#imageframe img{
+	vertical-align:middle;
+	max-height:90%;
+	max-width:90%;
+	margin:10px;
+	border: black solid 3px;
+}
+
+tr.hint, tr.hint td{
+	background:transparent;
+}
+
+#debug{
+	position:fixed;
+	bottom:20px;
+	left:20px;
+	border:solid 1px black;
+}
+
+.dragClone{
+	position:absolute;
+}
+
+div.breadcrumb{
+	float:left;
+	background:transparent;
+}
+
+div.moreActionsButton>p{
+	padding:0px;
+	margin:0px;
+	width:100%;
+	height:100%;
+}
+
+div.moreActionsButton{
+	background-color:white;
+	display:inline;
+	border:1px solid black;
+	cursor:pointer;
+	padding-right:10px;
+	text-align:right;
+	width:90px;
+	height:19px;
+	float:right;
+	margin-top:2px !important;
+	right:2px;
+	position:absolute;
+	background:#DDD url(<?php if(isset($WEBROOT)) echo($WEBROOT); ?>/img/arrow_up.png) no-repeat scroll center right;
+}
+
+td.moreActionsButtonClicked{
+	background:#DDD url(<?php if(isset($WEBROOT)) echo($WEBROOT); ?>/img/arrow_down.png) no-repeat scroll center right !important
+}
+
+tr.utilityline{
+	height:24px;
+}
+
+td.actionsSelected{
+<!-- 	position:absolute; -->
+<!-- 	width:790px; -->
+}
+
+div.moreActionsList{
+	background:#EEE;
+	position:absolute;
+	bottom:19px;
+	right:-2px;
+	border:1px solid black;
+	text-align:right;
+	float:right;
+}
+
+div.moreActionsList input{
+<!-- 	float:right; -->
+}
+
+div.moreActionsList>table{
+	width:100%;
+}
+
+div.moreActionsList td{
+	width:300px;
+	text-align:right;
+	padding-top:3px !important;
+	padding-bottom:3px !important;
+}
+
+div.moreActionsList tr:hover{
+	background-color:#DDD;
+}
--- a/inc/lib_base.php
+++ b/inc/lib_base.php
@ -206,6 +206,18 @@ class OC_UTIL {
    global $WEBROOT;
    oc_require('templates/header.php');;
  }
+  
+  /**
+   * check if we need to use the layout optimized for smaller screen, currently only checks for iPhone/Android
+   * @return bool
+   */
+	public static function hasSmallScreen(){
+		$userAgent=strtolower($_SERVER['HTTP_USER_AGENT']);
+		if(strpos($userAgent,'android') or strpos($userAgent,'iphone') or strpos($userAgent,'ipod')){//todo, add support for more devices
+			return true;
+		}
+		return false;
+	}

  /**
   * show the footer of the web GUI
--- a/inc/templates/footer.php
+++ b/inc/templates/footer.php
@ -3,9 +3,13 @@ global $WEBROOT;
 ?>
 </div>
 <div class='foot'>
+<?php
+if(!OC_UTIL::hasSmallScreen()){
+?>
 <div class='bar'><p class="hint">
 Hint: Mount it via webdav like this: <a href="webdav://<?php echo($_SERVER["HTTP_HOST"].$WEBROOT.'/webdav/owncloud.php');?>">webdav://<?php echo($_SERVER["HTTP_HOST"].$WEBROOT);?>/webdav/owncloud.php</a>
 </p></div>
+<?php }?>
 <p class="footer">
 <?php
  echo('<a href="http://ownCloud.org">ownCloud</a> - 1.0 beta 2');
--- a/inc/templates/header.php
+++ b/inc/templates/header.php
@ -4,7 +4,13 @@
    <head>
 	<title>ownCloud</title>
 	<base href="<?php echo($WEBROOT); ?>/"/>
-	<link rel="stylesheet" type="text/css" href="<?php echo($WEBROOT)?>/css/default.php"/>
+	<link rel="stylesheet" type="text/css" href="<?php
+	if(!OC_UTIL::hasSmallScreen()){
+		echo($WEBROOT.'/css/default.php');
+	}else{
+		echo($WEBROOT.'/css/small.php');
+	}
+	?>"/>
 	<script type='text/ecmascript' src='<?php echo($WEBROOT)?>/js/lib_ajax.js'></script>
 	<?php
 	global $CONFIG_INSTALLED;
@ -27,6 +33,7 @@ foreach(OC_UTIL::$scripts as $script){
 ?>
 	<script type='text/ecmascript'>
 	var WEBROOT='<?php echo($WEBROOT)?>';
+	var SMALLSCREEN='<?php echo((OC_UTIL::hasSmallScreen())?'true':'false')?>';
 	</script>
    </head>
    <body onload='OC_onload.run()'>
@ -34,7 +41,9 @@ foreach(OC_UTIL::$scripts as $script){
 <div class='head'>
 <?php
 global $CONFIG_ERROR;
-echo('<h1><a id="owncloud-logo" href="'.$WEBROOT.'"><span>ownCloud</span></a></h1>');
+if(!OC_UTIL::hasSmallScreen()){
+	echo('<h1><a id="owncloud-logo" href="'.$WEBROOT.'"><span>ownCloud</span></a></h1>');
+}


  // check if already configured. otherwise start configuration wizard
--- a/js/filebrowser.js
+++ b/js/filebrowser.js
@ -178,10 +178,14 @@ OC_FILES.browser.files.add=function(name,type,size,date,mime){
 			a.setAttribute('href','#'+OC_FILES.dir+dirname);
 		}else{
 			a.setAttribute('href','#'+OC_FILES.dir);
-			sizeTd=document.createElement('td');
-			tr.appendChild(sizeTd);
-			sizeTd.className='sizetext';
-			sizeTd.appendChild(document.createTextNode(sizeFormat(size)));
+			if(!SMALLSCREEN){
+				sizeTd=document.createElement('td');
+				tr.appendChild(sizeTd);
+				sizeTd.className='sizetext';
+				sizeTd.appendChild(document.createTextNode(sizeFormat(size)));
+			}else{
+				td.setAttribute('colspan',2);
+			}
 		}
 		a=document.createElement('a');
 		var img=document.createElement('img');
@ -191,10 +195,12 @@ OC_FILES.browser.files.add=function(name,type,size,date,mime){
 		img.title='actions';
 		img.src=WEBROOT+'/img/arrow_down.png';
 		img.addEvent('onclick',OC_FILES.browser.showactions,name);
-		td=document.createElement('td');
-		tr.appendChild(td);
-		td.className='sizetext';
-		td.appendChild(document.createTextNode(date));
+		if(!SMALLSCREEN){
+			td=document.createElement('td');
+			tr.appendChild(td);
+			td.className='sizetext';
+			td.appendChild(document.createTextNode(date));
+		}
 	}
 }