From c335169f6de619ba05685cc1de5cbd1163c18321 Mon Sep 17 00:00:00 2001 From: Jan-Christoph Borchardt Date: Fri, 4 Oct 2013 08:41:16 +0300 Subject: [PATCH] increase height of controls bar and elements to more clickable 44px --- apps/files/css/files.css | 59 ++++++++++++++++++++++++---------- apps/files/css/upload.css | 55 ++++++++++++++++++++++--------- core/css/styles.css | 58 +++++++++++++++++++++++++++------ core/img/breadcrumb-start.png | Bin 311 -> 0 bytes core/img/breadcrumb-start.svg | 6 ---- core/img/breadcrumb.png | Bin 320 -> 594 bytes core/img/breadcrumb.svg | 16 ++++++--- settings/css/settings.css | 27 +++++++++++++--- 8 files changed, 164 insertions(+), 57 deletions(-) delete mode 100644 core/img/breadcrumb-start.png delete mode 100644 core/img/breadcrumb-start.svg diff --git a/apps/files/css/files.css b/apps/files/css/files.css index f09e51e70c..138b15db04 100644 --- a/apps/files/css/files.css +++ b/apps/files/css/files.css @@ -7,14 +7,34 @@ .actions input, .actions button, .actions .button { margin:0; float:left; } .actions .button a { color: #555; } .actions .button a:hover, .actions .button a:active { color: #333; } -#new { - height:17px; margin:0 0 0 1em; z-index:1010; float:left; +#new, #trash { + z-index: 1010; + float: left; + padding: 0 !important; /* override default control bar button padding */ +} +#trash { + margin: 0 1em; + float: right; +} +#new>a, #trash>a { + padding: 14px 10px; + position: relative; + top: 7px; +} +#new.active { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + border-bottom: none; } -#new.active { border-bottom-left-radius:0; border-bottom-right-radius:0; border-bottom:none; } -#new>a { padding:.5em 1.2em .3em; } #new>ul { - display:none; position:fixed; min-width:7em; z-index:10; - padding:.5em; padding-bottom:0; margin-top:.075em; margin-left:-.5em; + display: none; + position: fixed; + min-width: 7em; + z-index: 10; + padding: .5em; + padding-bottom: 0; + margin-top: 14px; + margin-left: -1px; text-align:left; background: #f8f8f8; border: 1px solid #ddd; @@ -25,18 +45,16 @@ #new>ul>li { height:36px; margin:.3em; padding-left:3em; padding-bottom:0.1em; background-repeat:no-repeat; cursor:pointer; } #new>ul>li>p { cursor:pointer; padding-top: 7px; padding-bottom: 7px;} -#new>ul>li>form>input { - padding: 5px; - margin: 2px 0; -} - -#trash { margin: 0 1em; z-index:1010; float: right; } /* FILE TABLE */ -#filestable { position: relative; top:37px; width:100%; } +#filestable { + position: relative; + top: 44px; + width: 100%; +} #filestable tbody tr { background-color:#fff; height:2.5em; } #filestable tbody tr:hover, tbody tr:active { background-color: rgb(240,240,240); @@ -90,9 +108,18 @@ table th#headerDate, table td.date { /* Multiselect bar */ #filestable.multiselect { - top: 88px; + top: 95px; +} +table.multiselect thead { + position: fixed; + top: 89px; + z-index: 1; + -moz-box-sizing: border-box; + box-sizing: border-box; + left: 0; + padding-left: 80px; + width: 100%; } -table.multiselect thead { position:fixed; top:82px; z-index:1; -moz-box-sizing: border-box; box-sizing: border-box; left: 0; padding-left: 80px; width:100%; } table.multiselect thead th { background-color: rgba(210,210,210,.7); @@ -293,8 +320,6 @@ a.action>img { max-height:16px; max-width:16px; vertical-align:text-bottom; } #scanning-message{ top:40%; left:40%; position:absolute; display:none; } -div.crumb a{ padding:0.9em 0 0.7em 0; color:#555; } - table.dragshadow { width:auto; } diff --git a/apps/files/css/upload.css b/apps/files/css/upload.css index 2d11e41ba8..ef04356909 100644 --- a/apps/files/css/upload.css +++ b/apps/files/css/upload.css @@ -1,38 +1,63 @@ - #upload { - height:27px; padding:0; margin-left:0.2em; overflow:hidden; + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; + height: 36px; + width: 39px; + padding: 0 !important; /* override default control bar button padding */ + margin-left: .2em; + overflow: hidden; vertical-align: top; } #upload a { - position:relative; display:block; width:100%; height:27px; - cursor:pointer; z-index:10; - background-image:url('%webroot%/core/img/actions/upload.svg'); - background-repeat:no-repeat; - background-position:7px 6px; - opacity:0.65; + position: relative; + display: block; + width: 100%; + height: 44px; + width: 44px; + margin: -5px -3px; + cursor: pointer; + z-index: 10; + background-image: url('%webroot%/core/img/actions/upload.svg'); + background-repeat: no-repeat; + background-position: center; + opacity: .65; } .file_upload_target { display:none; } .file_upload_form { display:inline; float:left; margin:0; padding:0; cursor:pointer; overflow:visible; } #file_upload_start { - float: left; - left:0; top:0; width:28px; height:27px; padding:0; - font-size:1em; + position: relative; + left: 0; + top: 0; + width: 44px; + height: 44px; + margin: -5px -3px; + padding: 0; + font-size: 1em; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter:alpha(opacity=0); opacity:0; - z-index:20; position:relative; cursor:pointer; overflow:hidden; + z-index: 20; + cursor: pointer; + overflow: hidden; } #uploadprogresswrapper { + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; display: inline-block; vertical-align: top; - margin:0.3em; - height: 29px; + height: 36px; + box-sizing: border-box; +} +#uploadprogresswrapper > input[type='button'] { + height: 36px; } #uploadprogressbar { position:relative; float: left; margin-left: 12px; width: 130px; - height: 26px; + height: 36px; display:inline-block; } #uploadprogressbar + stop { diff --git a/core/css/styles.css b/core/css/styles.css index 06b61f0fa6..72cb7994ea 100644 --- a/core/css/styles.css +++ b/core/css/styles.css @@ -152,22 +152,37 @@ input[type="submit"].enabled { background:#66f866; border:1px solid #5e5; -moz-b /* CONTENT ------------------------------------------------------------------ */ #controls { + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; position: fixed; - height: 36px; + height: 44px; width: 100%; - padding: 0 75px 0 6px; + padding-right: 75px; margin: 0; background: #eee; border-bottom: 1px solid #e7e7e7; z-index: 50; - -moz-box-sizing: border-box; box-sizing: border-box; } -#controls .button { +#controls .button, +#controls button, +#controls input[type='submit'], +#controls input[type='text'], +#controls input[type='password'], +#controls select { + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; display: inline-block; + height: 36px; + padding: 7px 10px } #content { position:relative; height:100%; width:100%; } -#content .hascontrols { position: relative; top: 2.9em; } +#content .hascontrols { + position: relative; + top: 45px; +} #content-wrapper { position:absolute; height:100%; width:100%; padding-top:3.5em; padding-left:80px; -moz-box-sizing:border-box; box-sizing:border-box; @@ -746,15 +761,38 @@ span.ui-icon {float: left; margin: 3px 7px 30px 0;} .arrow.left { left:-13px; bottom:1.2em; -webkit-transform:rotate(270deg); -moz-transform:rotate(270deg); -o-transform:rotate(270deg); -ms-transform:rotate(270deg); transform:rotate(270deg); } .arrow.up { top:-8px; right:2em; } .arrow.down { -webkit-transform:rotate(180deg); -moz-transform:rotate(180deg); -o-transform:rotate(180deg); -ms-transform:rotate(180deg); transform:rotate(180deg); } -.help-includes {overflow: hidden; width: 100%; height: 100%; -moz-box-sizing: border-box; box-sizing: border-box; padding-top: 2.8em; } +.help-includes { + overflow: hidden; + width: 100%; + height: 100%; + -moz-box-sizing: border-box; + box-sizing: border-box; + padding-top: 44px; +} .help-iframe {width: 100%; height: 100%; margin: 0;padding: 0; border: 0; overflow: auto;} /* ---- BREADCRUMB ---- */ -div.crumb { float:left; display:block; background:url('../img/breadcrumb.svg') no-repeat right 0; padding:.75em 1.5em 0 1em; height:2.9em; -moz-box-sizing:border-box; box-sizing:border-box; } -div.crumb:first-child { padding:10px 20px 10px 5px; } -div.crumb.last { font-weight:bold; background:none; padding-right:10px; } -div.crumb a{ padding: 0.9em 0 0.7em 0; } +div.crumb { + float: left; + display: block; + background: url('../img/breadcrumb.svg') no-repeat right center; + height: 44px; +} +div.crumb a { + position: relative; + top: 12px; + padding: 14px 24px 14px 17px; + color: #555; +} +div.crumb:first-child a { + position: relative; + top: 13px; +} +div.crumb.last { + font-weight: bold; + margin-right: 10px; +} /* some feedback for hover/tap on breadcrumbs */ div.crumb:hover, diff --git a/core/img/breadcrumb-start.png b/core/img/breadcrumb-start.png deleted file mode 100644 index b0df5f44037637c322fb4eb867f90c18c6e8f613..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 311 zcmeAS@N?(olHy`uVBq!ia0vp^+(4|t!3HGb!wwt;QY^(zo*^7SP{WbZ0pxQQctjQh z)n5l;MkkHg6+l7B64!{5;QX|b^2DN4hVt@qz0ADq;^f4FRK5J7^x5xhq=1UHc)B=- zSe#DYQT~43{r~^}OLiRODSv;j_QRW-#(GJj|Jfgv1&REx`tYDpZDZGe=DYjmXB-XS zHFVKtdnEq-{e5wTFhdT1Ro9R43TBEx=6p6UBf-@YEt@?8|Hw&LJvySr_VDNujeqsO zzvZ$o61~5(`1!4w#_18AK|DuAf#O_W*4S+9ay)m_L-?qQ<>IDaj_zJdbe4HKomy1& zNL@49cWGUqLy4lZ*GJc&gE##C9-1>Hi-}>r7Ee;wzKIGz_cM69`njxgN@xNA+1PfO diff --git a/core/img/breadcrumb-start.svg b/core/img/breadcrumb-start.svg deleted file mode 100644 index 7f36231cdf..0000000000 --- a/core/img/breadcrumb-start.svg +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - diff --git a/core/img/breadcrumb.png b/core/img/breadcrumb.png index 84992be0d9350d7a94455cfe46dcea2fcc669e64..7e9593a36bf9a2fc123ee6237fdfc88c022df0a6 100644 GIT binary patch delta 530 zcmV+t0`2|40@4H_iBL{Q4GJ0x0000DNk~Le0000E0000i2nGNE097oB?2#c%e*w=) zL_t(YiIvpPi%oGD$MKh8vS4A&#$wddC``&9z(T@85o_5D67r+OD3r$dwICZQ*|4%e zlRv;l$&bx_$}DVHTd^IV&Uxx|>UsK{_qXTsIbXeAZ?V_wo$B}dx;zuO zkGafTr$bFd#9Ms8rB1@)eI6$=e{*9eVMKhvbKLAoge%yWnL9cOBjN|{;!am0+`?35 z9_S>Dh~JpQd}dB|A;J^q1d0 zjEK*8p(YgLh;SMEt3okW7!lubPemx2h%k>$dDS8~$c( zk9rJ~cro zT{Ry^ysa?1YFJ4uuE!Z1XsY|_GGdk4ZI5~stBsglRsRJbGuIfHeZ1^j6Y&C;nna8& zCo|XMEOs@C%EaqrcoRmjD0&07*qoM6N<$g3WyM!T?$G59q@bLLsIBDu5~=Isr5y5;@_g-5COBcQy9jr{{tb zwzbyMdkQ98F?8WtYr%p!3U6@7*oE7`0f#6&w$nFVxDCu$qVUi*Gj-uMu*Eq9w}Hzi zQQzQ?qQ0&P$5&Cm;5Sh}^}dSgRKX)2tEg@)v0p_+-~l&GB@%kcWPrAXPHq`brgJxN=ivp7~8Y0l0IbQRgL7!~g&Q07*qoM6N<$ Eg3ps@`Tzg` diff --git a/core/img/breadcrumb.svg b/core/img/breadcrumb.svg index 05a216e50a..f0b5c9218d 100644 --- a/core/img/breadcrumb.svg +++ b/core/img/breadcrumb.svg @@ -1,6 +1,12 @@ - - - - - + + + + + image/svg+xml + + + + + + diff --git a/settings/css/settings.css b/settings/css/settings.css index 57a43180a4..0afdd9edbf 100644 --- a/settings/css/settings.css +++ b/settings/css/settings.css @@ -47,18 +47,37 @@ tr:hover>td.remove>a { float:right; } li.selected { background-color:#ddd; } table:not(.nostyle) { width:100%; } #rightcontent { padding-left: 1em; } -div.quota { float:right; display:block; position:absolute; right:25em; top:-1px; } +div.quota { + float: right; + display: block; + position: absolute; + right: 216px; + top: 0; +} div.quota-select-wrapper { position: relative; } div.recoveryPassword { left:50em; display:block; position:absolute; top:-1px; } input#recoveryPassword {width:15em;} select.quota { position:absolute; left:0; top:0; width:10em; } select.quota-user { position:relative; left:0; top:0; width:10em; } -div.quota>span { position:absolute; right:0; white-space:nowrap; top:.7em; color:#888; text-shadow:0 1px 0 #fff; } +div.quota>span { + position: absolute; + right: 0; + white-space: nowrap; + top: 12px; + color: #888; + text-shadow: 0 1px 0 #fff; +} select.quota.active { background: #fff; } /* positioning fixes */ -#newuser { position:relative; top:-3px; } -#newuser .multiselect { top:1px; } +#newuser .multiselect { + min-width: 150px !important; +} +#newuser .multiselect, +#newusergroups + input[type='submit'] { + position: relative; + top: 1px; +} #headerGroups, #headerSubAdmins, #headerQuota { padding-left:18px; } .ie8 table.hascontrols{border-collapse:collapse;width: 100%;}