alihan/openmct
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[Search] Less space above tree

Browse Source 
Removed the awkward spacing between the filetree
and the search bar. Now 'My Items' appears just
below the search bar.
Also added .search-holder to the sass, but haven't
done anything with it yet.
This commit is contained in:
shale
2015-07-23 09:25:10 -07:00
parent 501e426868
commit 8c08f7b93e
5 changed files with 127 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
platform/commonUI/general/res/sass/search/_layout.scss
View File

@@ -20,6 +20,8 @@
* at runtime from the About dialog for additional information.
*****************************************************************************/
// Overrides some styling in user-environ/_layout.scss
.split-layout {
&.vertical {
>.pane {
@@ -32,6 +34,14 @@
}
}
}
}
}
.pane {
&.treeview.left {
.tree-holder {
// Want tree holder to start right below the search bar
top: 0;
}
}
}

134
platform/commonUI/general/res/sass/search/_search.scss
View File

@@ -19,75 +19,79 @@
* this source code distribution or the Licensing information page available
* at runtime from the About dialog for additional information.
*****************************************************************************/
.search {
$iconWidth: 20px;
$leftMargin: 6px;
.search-holder {
//position: relative;
overflow-y: auto; // This should make it scroll, but isn't wokring :(
.search-input {
// Align with the top of the divider bar, below create button
margin-top: 10px;
width: 100%;
}
.results {
// Spacing away from the search input
margin-top: 10px;
.search {
$iconWidth: 20px;
$leftMargin: 6px;
.search-result-item {
// Space the results from each other
margin-bottom: 5px;
// Make the highlights the right color and shape
background: $colorKeySelectedBg; // Later make this apply to only certain ones
border-radius: 2px;
padding-top: 2px;
padding-bottom: 1px;
.label {
// Give some padding away from the left side
margin-left: $leftMargin;
.type-icon {
.icon {
}
}
.title-label {
display: inline-block;
position: absolute;
.search-input {
// Align with the top of the divider bar, below create button
margin-top: 10px;
width: 100%;
}
.results {
// Spacing away from the search input
margin-top: 10px;
.search-result-item {
// Space the results from each other
margin-bottom: 5px;
// Make the highlights the right color and shape
background: $colorKeySelectedBg; // Later make this apply to only certain ones
border-radius: 2px;
padding-top: 2px;
padding-bottom: 1px;
.label {
// Give some padding away from the left side
width: auto;
left: $leftMargin + 3px + $iconWidth;
right: 0;
// Size and position the text
font-size: .8em;
line-height: 17px;
// Hide overflow text
// Only works when width is defined
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin-left: $leftMargin;
.type-icon {
.icon {
}
}
.title-label {
display: inline-block;
position: absolute;
// Give some padding away from the left side
width: auto;
left: $leftMargin + 3px + $iconWidth;
right: 0;
// Size and position the text
font-size: .8em;
line-height: 17px;
// Hide overflow text
// Only works when width is defined
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
}
}
}
.load-more-button {
// Space away form the results list
margin-top: 5px;
// Center it
position: relative;
left: 25%;
width: 50%;
// Make smallish button
height: 20px;
line-height: 11px;
font-size: 0.7em;
}
.load-more-button {
// Space away form the results list
margin-top: 5px;
// Center it
position: relative;
left: 25%;
width: 50%;
// Make smallish button
height: 20px;
line-height: 11px;
font-size: 0.7em;
}
}
}