Skip to content

Commit

Permalink
Added description class to itembox and made content take up the whole…
Browse files Browse the repository at this point in the history 
… width (#723)
  • Loading branch information
@danrot
Marcel Moosbrugger authored and danrot committed Sep 12, 2016
1 parent 1af2792 commit aee31f7
Show file tree
Hide file tree
Showing 7 changed files with 126 additions and 51 deletions.
1 change: 1 addition & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
# CHANGELOG for husky

* dev-develop
* ENHANCEMENT #723 Added description class to itembox and made content take up the whole width
* ENHANCEMENT #721 Improved cropping in tiles view and fixed dropzone issue when destroying
* ENHANCEMENT #715 Display effective limit in dropdown-pagination decorator
* ENHANCEMENT #715 Replace expand-icon with loader when loading children in datagrid
Expand Down
83 changes: 57 additions & 26 deletions dist/husky.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11335,88 +11335,119 @@ label.husky-toggler-label ~ .input-description {
line-height: 50px;
border-bottom: 1px solid #ddd;
position: relative;
display: table;
width: 100%;
}
/* line 342, ../scss/modules/content-types.scss */
/* line 344, ../scss/modules/content-types.scss */
.white-box .content .items-list li .icon {
cursor: move;
color: #000;
font-size: 15px;
padding-right: 10px;
display: table-cell;
width: 1px;
}
/* line 348, ../scss/modules/content-types.scss */
/* line 352, ../scss/modules/content-types.scss */
.white-box .content .items-list li img {
padding-top: 8px;
padding-bottom: 8px;
padding-right: 20px;
vertical-align: middle;
}
/* line 354, ../scss/modules/content-types.scss */
/* line 358, ../scss/modules/content-types.scss */
.white-box .content .items-list li .num {
color: #999;
padding-right: 15px;
display: table-cell;
width: 1px;
}
/* line 359, ../scss/modules/content-types.scss */
.white-box .content .items-list li a {
/* line 365, ../scss/modules/content-types.scss */
.white-box .content .items-list li > a, .white-box .content .items-list li .item-content > a {
display: table;
width: 100%;
}
/* line 368, ../scss/modules/content-types.scss */
.white-box .content .items-list li > a, .white-box .content .items-list li > a *, .white-box .content .items-list li .item-content > a, .white-box .content .items-list li .item-content > a * {
text-decoration: none;
}
/* line 362, ../scss/modules/content-types.scss */
.white-box .content .items-list li a .value, .white-box .content .items-list li a .title {
/* line 372, ../scss/modules/content-types.scss */
.white-box .content .items-list li > a .value, .white-box .content .items-list li > a .title, .white-box .content .items-list li > a:hover .description, .white-box .content .items-list li .item-content > a .value, .white-box .content .items-list li .item-content > a .title, .white-box .content .items-list li .item-content > a:hover .description {
color: black;
}
/* line 367, ../scss/modules/content-types.scss */
.white-box .content .items-list li .value {
/* line 376, ../scss/modules/content-types.scss */
.white-box .content .items-list li > a > *, .white-box .content .items-list li .item-content > a > * {
display: table-cell;
width: 1px;
}
/* line 381, ../scss/modules/content-types.scss */
.white-box .content .items-list li > a .value, .white-box .content .items-list li > a .title, .white-box .content .items-list li .item-content > a .value, .white-box .content .items-list li .item-content > a .title {
width: auto;
}
/* line 385, ../scss/modules/content-types.scss */
.white-box .content .items-list li > a .description, .white-box .content .items-list li .item-content > a .description {
width: 50%;
}
/* line 390, ../scss/modules/content-types.scss */
.white-box .content .items-list li .value, .white-box .content .items-list li .title {
color: #999;
white-space: normal;
}
/* line 370, ../scss/modules/content-types.scss */
/* line 394, ../scss/modules/content-types.scss */
.white-box .content .items-list li .description {
color: #999;
font-size: 12px;
}
/* line 398, ../scss/modules/content-types.scss */
.white-box .content .items-list li .remove {
position: absolute;
top: 50%;
right: -8px;
margin-top: -20px;
display: table-cell;
cursor: pointer;
width: 40px;
height: 40px;
line-height: 40px;
width: 50px;
line-height: 50px;
background: #fff;
text-align: center;
color: #000;
}
/* line 387, ../scss/modules/content-types.scss */
/* line 411, ../scss/modules/content-types.scss */
.white-box .item-content {
position: relative;
display: table-cell;
}
/* line 416, ../scss/modules/content-types.scss */
.white-box .footer {
padding: 15px 20px 20px 20px;
line-height: 14px;
color: #999;
font-size: 12px;
}
/* line 394, ../scss/modules/content-types.scss */
/* line 423, ../scss/modules/content-types.scss */
.white-box.no-content {
padding-bottom: 0;
}
/* line 397, ../scss/modules/content-types.scss */
/* line 426, ../scss/modules/content-types.scss */
.white-box.no-content .header .no-content-message {
display: inline;
}
/* line 400, ../scss/modules/content-types.scss */
/* line 429, ../scss/modules/content-types.scss */
.white-box.no-content .header .position {
display: none;
}
/* line 403, ../scss/modules/content-types.scss */
/* line 432, ../scss/modules/content-types.scss */
.white-box.no-content .header .selected-counter {
display: none;
}
/* line 411, ../scss/modules/content-types.scss */
/* line 440, ../scss/modules/content-types.scss */
.white-box.is-loading .header .loader {
display: block;
}
/* line 414, ../scss/modules/content-types.scss */
/* line 443, ../scss/modules/content-types.scss */
.white-box.is-loading .header .no-content-message {
display: none;
}
/* line 417, ../scss/modules/content-types.scss */
/* line 446, ../scss/modules/content-types.scss */
.white-box.is-loading .header .position {
display: none;
}
/* line 420, ../scss/modules/content-types.scss */
/* line 449, ../scss/modules/content-types.scss */
.white-box.is-loading .header .selected-counter {
display: none;
}
Expand Down
19 changes: 13 additions & 6 deletions dist/husky.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52312,7 +52312,7 @@ define('husky_extensions/itembox',[],function() {
'<li data-id="', id, '">',
!!this.options.sortable ? ' <span class="fa-ellipsis-v icon move"></span>' : '',
' <span class="num"></span>',
content,
' <div class="item-content">' + content + '</div>',
!!this.options.removable ? ' <span class="fa-times remove"></span>' : '',
'</li>'
].join('');
Expand Down Expand Up @@ -52725,47 +52725,54 @@ define('husky_extensions/itembox',[],function() {
/**
* Checks if the given data is empty, can be overriden by the concrete implementation.
* Especially useful if data is not an array.
*
* @param data {object} The data to check
*/
isDataEmpty: function(data) {
return this.sandbox.util.isEmpty(data);
},

/**
* Returns the selector for the given id
* Returns the selector for the given id.
*
* @param type {string} The type of the element, for which the id should be returned
*
* @returns {string} The id of the element
*/
getId: function(type) {
return ['#', this.ids[type]].join('');
},

/**
* Returns the URL for the list based on the data
* Returns the URL for the list based on the data.
*
* @param data {object} The data for which the URL should be generated
*/
getUrl: function(data) {
throw new Error('"getUrl" not implemented');
},

/**
* Returns the HTML for an item in the list
* Returns the HTML for an item in the list.
*
* @param item
*/
getItemContent: function(item) {
throw new Error('"getItemContent" not implemented');
},

/**
* This function is called when the sorting has been updated
* This function is called when the sorting has been updated.
*
* @param ids {array} The new order of the ids
*/
sortHandler: function(ids) {
throw new Error('"sortHandler" not implemented');
},

/**
* Handler, which is called when a row is removed
* Handler, which is called when a row is removed.
*
* @param id {number} The id of the item to remove
*/
removeHandler: function(id) {
Expand Down
2 changes: 1 addition & 1 deletion dist/husky.min.css
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/husky.min.js
View file

Large diffs are not rendered by default.

19 changes: 13 additions & 6 deletions husky_extensions/itembox.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -110,7 +110,7 @@ define(function() {
'<li data-id="', id, '">',
!!this.options.sortable ? ' <span class="fa-ellipsis-v icon move"></span>' : '',
' <span class="num"></span>',
content,
' <div class="item-content">' + content + '</div>',
!!this.options.removable ? ' <span class="fa-times remove"></span>' : '',
'</li>'
].join('');
Expand Down Expand Up @@ -523,47 +523,54 @@ define(function() {
/**
* Checks if the given data is empty, can be overriden by the concrete implementation.
* Especially useful if data is not an array.
*
* @param data {object} The data to check
*/
isDataEmpty: function(data) {
return this.sandbox.util.isEmpty(data);
},

/**
* Returns the selector for the given id
* Returns the selector for the given id.
*
* @param type {string} The type of the element, for which the id should be returned
*
* @returns {string} The id of the element
*/
getId: function(type) {
return ['#', this.ids[type]].join('');
},

/**
* Returns the URL for the list based on the data
* Returns the URL for the list based on the data.
*
* @param data {object} The data for which the URL should be generated
*/
getUrl: function(data) {
throw new Error('"getUrl" not implemented');
},

/**
* Returns the HTML for an item in the list
* Returns the HTML for an item in the list.
*
* @param item
*/
getItemContent: function(item) {
throw new Error('"getItemContent" not implemented');
},

/**
* This function is called when the sorting has been updated
* This function is called when the sorting has been updated.
*
* @param ids {array} The new order of the ids
*/
sortHandler: function(ids) {
throw new Error('"sortHandler" not implemented');
},

/**
* Handler, which is called when a row is removed
* Handler, which is called when a row is removed.
*
* @param id {number} The id of the item to remove
*/
removeHandler: function(id) {
Expand Down
51 changes: 40 additions & 11 deletions scss/modules/content-types.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -339,11 +339,15 @@
line-height: 50px;
border-bottom: 1px solid $borderColor;
position: relative;
display: table;
width: 100%;
.icon {
cursor: move;
color: $black;
font-size: 15px;
padding-right: 10px;
display: table-cell;
width: 1px; // make cell fit content
}
img {
padding-top: 8px;
Expand All @@ -354,28 +358,48 @@
.num {
color: $grayLight;
padding-right: 15px;
display: table-cell;
width: 1px; // make cell fit content
}

a {
text-decoration: none;
& > a, .item-content > a {
display: table;
width: 100%;
&, & * {
text-decoration: none;
}

.value, .title {
.value, .title, &:hover .description {
color: black;
}

& > * {
display: table-cell;
width: 1px;
}

.value, .title {
width: auto;
}

.description {
width: 50%;
}
}

.value {
.value, .title {
color: $grayLight;
white-space: normal;
}
.description {
color: $grayLight;
font-size: $smallFontSize;
}
.remove {
position: absolute;
top: 50%;
right: -8px;
margin-top: -20px;
display: table-cell;
cursor: pointer;
width: 40px;
height: 40px;
line-height: 40px;
width: 50px;
line-height: 50px;
background: $white;
text-align: center;
color: $black;
Expand All @@ -384,6 +408,11 @@
}
}

.item-content {
position: relative;
display: table-cell;
}

.footer {
padding: 15px 20px 20px 20px;
line-height: 14px;
Expand Down

0 comments on commit aee31f7

Please sign in to comment.