mirrors
/
nextcloud
mirror da https://github.com/nextcloud/server.git
Segui 1
Vota 0
Forka 0
Codice Problemi 0 Rilasci 984 Wiki Attività
Sfoglia il codice sorgente

provide layout for smaller screens on android/iphone

tags/v3.0
Robin 14 anni fa
parent
645de2ff78
commit
8058b24227
5 ha cambiato i file con 479 aggiunte e 10 eliminazioni
Visualizzazione separata Mostra Diff Stats
  1. 438
    0
      css/small.php
  2. 12
    0
      inc/lib_base.php
  3. 4
    0
      inc/templates/footer.php
  4. 11
    2
      inc/templates/header.php
  5. 14
    8
      js/filebrowser.js

+ 438
- 0
css/small.php Vedi 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;
}

+ 12
- 0
inc/lib_base.php Vedi File

@@ -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

+ 4
- 0
inc/templates/footer.php Vedi File

@@ -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');

+ 11
- 2
inc/templates/header.php Vedi File

@@ -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

+ 14
- 8
js/filebrowser.js Vedi File

@@ -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));
}
}
}


Write Preview
Loading…
Annulla
Salva