mbk-lab
/
nextcloud
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Merge pull request #9853 from owncloud/design-mobile-search 

improve look of search on mobile, save space in top bar, fix overlap
This commit is contained in:
Morris Jobke 2014-07-28 13:15:19 +02:00
parent 539d2b7ec3 3013b26092
commit 798ffd9d7c
4 changed files with 19 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
core/css/icons.css
View File

@ -128,6 +128,9 @@
.icon-search {
background-image: url('../img/actions/search.svg');
}
.icon-search-white {
background-image: url('../img/actions/search-white.svg');
}
.icon-settings {
background-image: url('../img/actions/settings.svg');

16
core/css/mobile.css
View File

@ -31,16 +31,22 @@
/* compress search box on mobile, expand when focused */
.searchbox input[type="search"] {
width: 15%;
-webkit-transition: width 100ms;
-moz-transition: width 100ms;
-o-transition: width 100ms;
transition: width 100ms;
width: 0;
cursor: pointer;
background-color: transparent;
background-image: url('../img/actions/search-white.svg');
-webkit-transition: all 100ms;
-moz-transition: all 100ms;
-o-transition: all 100ms;
transition: all 100ms;
}
.searchbox input[type="search"]:focus,
.searchbox input[type="search"]:active {
width: 155px;
max-width: 50%;
cursor: text;
background-color: #fff;
background-image: url('../img/actions/search.svg');
}
/* do not show display name on mobile when profile picture is present */

BIN
core/img/actions/search-white.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 309 B

5
core/img/actions/search-white.svg Normal file
View File

@ -0,0 +1,5 @@
<?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="16" width="16" version="1.0" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/">
<rect style="color:#000000" fill-opacity="0" height="97.986" width="163.31" y="-32.993" x="-62.897"/>
<path style="color:#000000" d="m6 1c-2.7614 0-5 2.2386-5 5s2.2386 5 5 5c0.98478 0 1.8823-0.28967 2.6562-0.78125l4.4688 4.625c0.09558 0.10527 0.22619 0.16452 0.375 0.15625 0.14882-0.0083 0.3031-0.07119 0.40625-0.1875l0.9375-1.0625c0.19194-0.22089 0.19549-0.53592 0-0.71875l-4.594-4.406c0.478-0.7663 0.75-1.6555 0.75-2.625 0-2.7614-2.2386-5-5-5zm0 2c1.6569 0 3 1.3431 3 3s-1.3431 3-3 3-3-1.3431-3-3 1.3431-3 3-3z" fill="#fff"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 812 B