mirror of
https://github.com/nextcloud/server.git
synced 2026-04-21 06:08:46 -04:00
provide layout for smaller screens on android/iphone
This commit is contained in:
Robin
parent
645de2ff78
commit
8058b24227
5 changed files with 479 additions and 10 deletions
438
css/small.php
Normal file
438
css/small.php
Normal file
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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');
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue