From c335169f6de619ba05685cc1de5cbd1163c18321 Mon Sep 17 00:00:00 2001
From: Jan-Christoph Borchardt <hey@jancborchardt.net>
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!ia0y~yVBlt8U{K*;V_;y24?A#_fq{Xg*vT`5gM)*kh9jke
zfq{Xuz$3Dlfr0lr2s1iq%&uTyV2~_vjVKAuPb(=;EJ|f4FE7{2%*!rLPAo{(%P&fw
z{mw>;fq`L*r;B5V#p&c7<?rX+|NsBLWXD0C^7r>@KfJkVtd}JEpZ!r;kjVe44-XpE
zHg^4IzPoRJ#?b&?Ll<qfN8;b#-xpU1Gvx4Bb^RExV5S&m$T6SI%SdpwM9XH6z&~;l
zR*#Nou{}JxMB`um?{B&6i$w45EPj4#rg3^iXAsX((Ip!HxW25h+1TZH?xu(EQ5DO@
zO}`x7y_V=K^K?43sOpirX0-3px<H2#MQ5*%u0aQH`29UJXG#_m!+b5Cq^^Av6&M&8
O7(8A5T-G@yGywqF*mju!

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 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="36" width="11" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/">
- <g transform="translate(0 -1016.4)">
-  <path d="m0 0 11 18-11 18z" transform="translate(0 1016.4)" fill="#ddd"/>
- </g>
-</svg>
diff --git a/core/img/breadcrumb.png b/core/img/breadcrumb.png
index 84992be0d9350d7a94455cfe46dcea2fcc669e64..7e9593a36bf9a2fc123ee6237fdfc88c022df0a6 100644
GIT binary patch
delta 530
zcmX@Wbcsc=Gr-TCmrII^fq{Y7)59f*fq{XKfq_AXgN=cKAylXH%|u0?ddBmfE{-7{
zol~!z@AfT}IR0^Z;--Yev&WLIT-NY8C4a!_kdt8cO&+07i;rkbIrd|#g0$w%4VxS$
z+aGW{*?+e7luk}W^o9vXx9)g;t@PQP>T{K^N?uj|n)7}8^Us#?d*kvqUVlCJ)%V}K
zY=n38?>rN;+}YRVNOaACrGAGV)yk<G)fXqLC%V)eEWY!`t3~_9^qJOHoXU^b-#zjR
zSGsd3Bu(yxN>9iA8Ha1q{K^y$3I93x#^PaD-TwV+X3nhsz!NO^akFlqi_W9Ph6`7S
zh?VlGzjg}L?&&yRu~1FqaYupV@6}F*VG@G(3;kU+W_1|!`#udY;ZlAizD}!k5wD=!
z<Ms6u147sqtTHOrpQq(?ahitGy$6$(MAmk)ma@G!xH~Ii-MT}pHXR-Lt8Zy_J<U0M
z@Y<0xF_{I{G1C9ia{H@zCRdo`nB<unUr*xPEcmhLM!xf&j`fR`BzDg^bEm=hM&vwG
z!TblIE_?L(vpQ$)6m2(*HI;YYv({jDR)nX{y5o{E8LNK3GD@0yGq=A=WOeV1*wFv1
z3dYwZX4LL^6D|CaY1%B89vyY#>yLHHOgm2<d0i2kTBd7gy!`=(*>=HRA@L6z&b{$U
qN_%&#thr+AI?g%Q63RmVGTU<Qf9-!ld^!UI1B0ilpUXO@geCyZeDlHp

delta 254
zcmcb_a)3#(Gr-TCmrII^fq{Y7)59f*fq{XWfq_AVgN=cKAwKND(TR#a^$dGGT^vI!
zPOrVXTkw#9fNLOYUo4aF4*nO1MVu6uF={nvDOfR@C<$3UTz*%QDZSkE+r8z_n}oM*
zy>_XZOD)E*<Y83y!6r+t{DR{*T5lg<Y}c^acG*032k)7PMISDh8J9jZ+i=v9Wqadk
z^}zcN`WNk6$9X(FaQ_4IK>M%zx?Y7GRF+%4B2Q;yysPU2Mspukp{h3p|Mcfn^?qPq
z7A8Jz(j{5GAgx6YKeVq8eRZg9wL+-T!(U#a$vcXIQ|JBkwPD;*yeROwYVZ*T1_lOC
LS3j3^P6<r_&y#2R

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 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="36" width="11" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/">
- <g transform="translate(0 -1016.4)">
-  <path d="m0.5 0 10 18-10 18 10-18z" transform="translate(0 1016.4)" stroke="#ddd" stroke-linecap="round" stroke-miterlimit="31.2" stroke-width="0.9" fill="#ddd"/>
- </g>
+<svg xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="44" width="14" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/">
+ <metadata>
+  <rdf:RDF>
+   <cc:Work rdf:about="">
+    <dc:format>image/svg+xml</dc:format>
+    <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
+    <dc:title/>
+   </cc:Work>
+  </rdf:RDF>
+ </metadata>
+ <path d="M0.54879,0.047777,12.744,22,0.54879,43.951,12.744,22z" stroke="#d7d7d7" stroke-linecap="round" stroke-miterlimit="31.20000076000000178" stroke-width="1.09758711000000009" fill="#F00"/>
 </svg>
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%;}
-- 
GitLab