Skip to content

Commit

Permalink
tweaks to borders between cards
Browse files Browse the repository at this point in the history
  • Loading branch information
@briehl
briehl committed Nov 14, 2017
1 parent b8e76d4 commit 4ba6982
Show file tree
Hide file tree
Showing 3 changed files with 89 additions and 83 deletions.
8 changes: 5 additions & 3 deletions kbase-extension/static/kbase/css/kbaseNarrative.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2279,7 +2279,6 @@ button.kb-data-obj {
display: flex;
align-items: center;
width:98%;
border-bottom: 1px solid #E0E0E0;
}

.narrative-data-list-subcontent{
Expand Down Expand Up @@ -2343,6 +2342,7 @@ button.kb-data-obj {
box-shadow: 1px 1px 1px 1px #fff;
-webkit-box-shadow: 1px 1px 1px 1px #fff;
moz-box-shadow: 1px 1px 1px 1px #fff;
border-bottom: 1px solid #E0E0E0;

}
.narrative-card-row-main{
Expand Down Expand Up @@ -2575,16 +2575,18 @@ button.kb-data-obj {
font-size: 11pt;
font-family: 'OyxgenBold', Arial, sans-serif;
margin: 2px;
cursor: pointer;
}
.kb-data-list-name:hover {
text-decoration: underline;
}
.kb-data-list-version {
color:#777;
color: #777;
font-size: 9pt;
font-style: italic;
white-space: nowrap;
cursor:default;
cursor: default;
margin-left: 3px;
}
.kb-data-list-type {
color:#777;
Expand Down
143 changes: 71 additions & 72 deletions kbase-extension/static/kbase/js/widgets/narrative_core/kbaseCardLayout.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,8 @@
*
* Authors: zzheng@lbl.gov
*
* This the templating function for creating consistent card. Should be called through card
* creating function such as kbaseDataCard.
* This the templating function for creating consistent card. Should be called through card
* creating function such as kbaseDataCard.
*
* Expected options:
* options : {
Expand All @@ -17,79 +17,78 @@
* }
*/

define (
[
'bootstrap',
'jquery'
], function(
bootstrap,
$
) {
function KbaseCardLayout(options) {

//partitions
var $card = $('<div>').addClass('narrative-card-row');
var $mainContent = $('<div>').addClass('narrative-card-row-main');
var $moreContent = $('<div>').addClass('narrative-card-row-more').hide();
var $info = $('<div>').addClass('kb-data-list-info');

var $toggleAdvancedViewBtn =$('<div>');
define ([
'bootstrap',
'jquery'
], function(
bootstrap,
$
) {
'use strict';
function KbaseCardLayout(options) {
//partitions
var $card = $('<div>').addClass('narrative-card-row');
var $mainContent = $('<div>').addClass('narrative-card-row-main');
var $moreContent = $('<div>').addClass('narrative-card-row-more').hide();
var $info = $('<div>').addClass('kb-data-list-info');

//if have sub content, add toggle
if(options.moreContent) {
$moreContent.append(options.moreContent);
$toggleAdvancedViewBtn
.hide()
.html($('<button class="btn btn-xs btn-default pull-right" aria-hidden="true">')
.append('<span class="fa fa-ellipsis-h" style="color:#888" />'));
}
var $actionButtonWrapper = $('<div>')
.addClass('narrative-card-action-button-wrapper');
var $toggleAdvancedViewBtn =$('<div>');

var $actionButton = $('<button>')
.addClass('kb-primary-btn')
.addClass('narrative-card-action-button')
.append($('<span>').addClass('fa fa-chevron-circle-left'))
.append($('<div>').append(options.actionButtonText).addClass('narrative-card-action-button-name'));

$actionButtonWrapper.append($actionButton);
//if have sub content, add toggle
if(options.moreContent) {
$moreContent.append(options.moreContent);
$toggleAdvancedViewBtn
.hide()
.html($('<button class="btn btn-xs btn-default pull-right" aria-hidden="true">')
.append('<span class="fa fa-ellipsis-h" style="color:#888" />'));
}
var $actionButtonWrapper = $('<div>')
.addClass('narrative-card-action-button-wrapper');

var $actionButton = $('<button>')
.addClass('kb-primary-btn')
.addClass('narrative-card-action-button')
.append($('<span>').addClass('fa fa-chevron-circle-left'))
.append($('<div>').append(options.actionButtonText).addClass('narrative-card-action-button-name'));

$actionButtonWrapper.append($actionButton);

var $logo = options.logo.addClass('narrative-card-logo');
var $title = options.title;
var $subcontent = options.subcontent;

var $logo = options.logo.addClass('narrative-card-logo');
var $title = options.title;
var $subcontent = options.subcontent;
$info.append($title)
.append($subcontent);

$info.append($title)
.append($subcontent);

if(options.actionButtonClick){
$actionButtonWrapper.click(options.actionButtonClick);
}
if(options.actionButtonText) {
$mainContent.append($actionButtonWrapper);
}

$mainContent.append($logo)
.append($info)
.append($('<div>').addClass('narrative-card-ellipsis')
.append($toggleAdvancedViewBtn))
.mouseenter(function () {
$toggleAdvancedViewBtn.show();
$actionButton.show();
})
.mouseleave(function () {
$toggleAdvancedViewBtn.hide();
$actionButton.hide();
})
.click(function () {
$moreContent.slideToggle('fast');
});

$card.append($mainContent);
if(options.moreContent) {
$card.append($moreContent);
}
if(options.actionButtonClick){
$actionButtonWrapper.click(options.actionButtonClick);
}
if(options.actionButtonText) {
$mainContent.append($actionButtonWrapper);
}

return $card;
$mainContent.append($logo)
.append($info)
.append($('<div>').addClass('narrative-card-ellipsis')
.append($toggleAdvancedViewBtn))
.mouseenter(function () {
$toggleAdvancedViewBtn.show();
$actionButton.show();
})
.mouseleave(function () {
$toggleAdvancedViewBtn.hide();
$actionButton.hide();
})
.click(function () {
$moreContent.slideToggle('fast');
});

$card.append($mainContent);
if(options.moreContent) {
$card.append($moreContent);
}
return KbaseCardLayout; //end init
});

return $card;
}
return KbaseCardLayout; //end init
});
21 changes: 13 additions & 8 deletions kbase-extension/static/kbase/js/widgets/narrative_core/kbaseNarrativeManagePanel.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -321,8 +321,8 @@ define([
},

renderPanel: function () {
var self = this,
divider = '<hr class="kb-data-list-row-hr">';
var self = this;
// divider = '<hr class="kb-data-list-row-hr">';

if (self.$narPanel && self.narData) {
self.$narPanel.children().detach(); // this will also hide any loading messages if they exist
Expand All @@ -334,7 +334,7 @@ define([
if (!self.narData.mine[k].$div) {
self.narData.mine[k].$div = self.renderNarrativeDiv(self.narData.mine[k]);
}
self.$narPanel.append(divider);
// self.$narPanel.append(divider);
self.$narPanel.append(self.narData.mine[k].$div);
}
}
Expand All @@ -346,7 +346,7 @@ define([
if (!self.narData.shared[k].$div) {
self.narData.shared[k].$div = self.renderNarrativeDiv(self.narData.shared[k]);
}
self.$narPanel.append(divider);
// self.$narPanel.append(divider);
self.$narPanel.append(self.narData.shared[k].$div);
}
}
Expand Down Expand Up @@ -755,7 +755,7 @@ define([
isCurrent = true;
}

var $narDiv = $('<div>').addClass('kb-data-list-obj-row');
var $narDiv = $('<div>').addClass('kb-data-list-obj-row').css({'padding-top': '5px'});

var $dataCol = $('<td>').css({'text-align': 'left', 'vertical-align': 'top'});
var $ctrCol = $('<td>').css({'text-align': 'right', 'vertical-align': 'top', 'width': '80px'});
Expand Down Expand Up @@ -808,16 +808,21 @@ define([
$priv.addClass('fa fa-pencil').prop('title', 'you can edit');
}

var $nameLink = $('<a href="' + narRef + '" target="_blank">');
var $nameLink = $('<a href="' + narRef + '" target="_blank">').addClass('kb-data-list-name');
if (isCurrent) {
$nameLink.append($('<span>').addClass('fa fa-circle').css({'margin-right': '3px', 'color': '#4BB856'})
.tooltip({title: 'You are viewing this Narrative now'}));
} else if (data.error) {
$nameLink.append($('<span>').addClass('fa fa-circle').css({'margin-right': '3px', 'color': '#F44336'})
.tooltip({title: 'This narrative has been corrupted.'}));
}
$nameLink.append(nameText).append($version).append($priv);
$dataCol.append($('<div>').addClass('kb-data-list-name').css({'white-space': 'normal', 'cursor': 'pointer'}).append($nameLink));
$nameLink.append(nameText); //.append($version).append($priv);
$dataCol.append(
$('<div>')
.append($nameLink)
.append($version)
.append($priv)
);

// only display the rest if there was no error
if (!data.error) {
Expand Down

0 comments on commit 4ba6982

Please sign in to comment.