mirror of
https://github.com/nasa/openmct.git
synced 2025-04-10 21:00:16 +00:00
[Search] Less space above tree
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
parent
501e426868
commit
8c08f7b93e
@ -700,10 +700,14 @@ mct-container {
|
||||
* this source code distribution or the Licensing information page available
|
||||
* at runtime from the About dialog for additional information.
|
||||
*****************************************************************************/
|
||||
/* line 27, ../sass/search/_layout.scss */
|
||||
/* line 29, ../sass/search/_layout.scss */
|
||||
.split-layout.vertical > .pane:first-child .holder {
|
||||
position: relative; }
|
||||
|
||||
/* line 42, ../sass/search/_layout.scss */
|
||||
.pane.treeview.left .tree-holder {
|
||||
top: 0; }
|
||||
|
||||
/*****************************************************************************
|
||||
* Open MCT Web, Copyright (c) 2014-2015, United States Government
|
||||
* as represented by the Administrator of the National Aeronautics and Space
|
||||
|
||||
@ -271,41 +271,44 @@ ul.tree {
|
||||
* this source code distribution or the Licensing information page available
|
||||
* at runtime from the About dialog for additional information.
|
||||
*****************************************************************************/
|
||||
/* line 27, ../sass/search/_search.scss */
|
||||
.search .search-input {
|
||||
margin-top: 10px;
|
||||
width: 100%; }
|
||||
/* line 33, ../sass/search/_search.scss */
|
||||
.search .results {
|
||||
margin-top: 10px; }
|
||||
/* line 37, ../sass/search/_search.scss */
|
||||
.search .results .search-result-item {
|
||||
margin-bottom: 5px;
|
||||
background: #005177;
|
||||
border-radius: 2px;
|
||||
padding-top: 2px;
|
||||
padding-bottom: 1px; }
|
||||
/* line 47, ../sass/search/_search.scss */
|
||||
.search .results .search-result-item .label {
|
||||
margin-left: 6px; }
|
||||
/* line 56, ../sass/search/_search.scss */
|
||||
.search .results .search-result-item .label .title-label {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
width: auto;
|
||||
left: 29px;
|
||||
right: 0;
|
||||
font-size: .8em;
|
||||
line-height: 17px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap; }
|
||||
/* line 79, ../sass/search/_search.scss */
|
||||
.search .load-more-button {
|
||||
margin-top: 5px;
|
||||
position: relative;
|
||||
left: 25%;
|
||||
width: 50%;
|
||||
height: 20px;
|
||||
line-height: 11px;
|
||||
font-size: 0.7em; }
|
||||
/* line 22, ../sass/search/_search.scss */
|
||||
.search-holder {
|
||||
overflow-y: auto; }
|
||||
/* line 30, ../sass/search/_search.scss */
|
||||
.search-holder .search .search-input {
|
||||
margin-top: 10px;
|
||||
width: 100%; }
|
||||
/* line 36, ../sass/search/_search.scss */
|
||||
.search-holder .search .results {
|
||||
margin-top: 10px; }
|
||||
/* line 40, ../sass/search/_search.scss */
|
||||
.search-holder .search .results .search-result-item {
|
||||
margin-bottom: 5px;
|
||||
background: #005177;
|
||||
border-radius: 2px;
|
||||
padding-top: 2px;
|
||||
padding-bottom: 1px; }
|
||||
/* line 50, ../sass/search/_search.scss */
|
||||
.search-holder .search .results .search-result-item .label {
|
||||
margin-left: 6px; }
|
||||
/* line 59, ../sass/search/_search.scss */
|
||||
.search-holder .search .results .search-result-item .label .title-label {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
width: auto;
|
||||
left: 29px;
|
||||
right: 0;
|
||||
font-size: .8em;
|
||||
line-height: 17px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap; }
|
||||
/* line 82, ../sass/search/_search.scss */
|
||||
.search-holder .search .load-more-button {
|
||||
margin-top: 5px;
|
||||
position: relative;
|
||||
left: 25%;
|
||||
width: 50%;
|
||||
height: 20px;
|
||||
line-height: 11px;
|
||||
font-size: 0.7em; }
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -38,7 +38,7 @@
|
||||
</mct-representation>
|
||||
</div>
|
||||
|
||||
<!-- Load more? -->
|
||||
<!-- Load more -->
|
||||
<div ng-if="controller.areMore()">
|
||||
<button class="load-more-button btn very-subtle"
|
||||
ng-click="controller.loadMore()">
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user