From 87b1dac236da4b60c06b03cbbd80fe2aa23598df Mon Sep 17 00:00:00 2001 From: Ryan Shaw Date: Tue, 9 Sep 2014 15:58:08 -0600 Subject: [PATCH] A bunch of style/polish for newfiles fixes: CNVS-15244 CNVS-15261 CNVS-15374 changes: handles overflow by scrolling matches blake's mockup test plan: try the folder tree in both new files and by pressing the "add image" icon in the tinyMCE toolbar and going to the "From Canvas" tab. TODO: 'active' style it should look good and work well. Change-Id: I6219da771758fd00d6ed3005ed459097a83fcd7e Reviewed-on: https://gerrit.instructure.com/40922 Tested-by: Jenkins Reviewed-by: Clay Diffrient Product-Review: Ryan Shaw QA-Review: Ryan Shaw --- .../components/ColumnHeaders.coffee | 29 ++-- .../react_files/components/FolderChild.coffee | 70 +++++----- .../components/FriendlyDatetime.coffee | 12 +- .../react_files/components/ItemCog.coffee | 16 ++- .../react_files/components/Toolbar.coffee | 2 +- app/coffeescripts/views/FolderTreeView.coffee | 23 +++- app/stylesheets/base/_custom_bootstrap.scss | 1 + app/stylesheets/base/_variables.scss | 7 +- app/stylesheets/components/_g_wiki.sass | 3 +- app/stylesheets/components/_item-groups.scss | 4 +- app/stylesheets/jst/FileBrowserView.scss | 55 ++++---- app/stylesheets/legacy/_old?_tree.scss | 55 -------- app/stylesheets/pages/discussions_list.scss | 2 +- app/stylesheets/pages/ember_files.scss | 129 ++++++------------ app/stylesheets/vendor/bootstrap/_media.scss | 17 +-- app/views/jst/FolderTreeItem.handlebars | 10 +- 16 files changed, 193 insertions(+), 242 deletions(-) delete mode 100644 app/stylesheets/legacy/_old?_tree.scss diff --git a/app/coffeescripts/react_files/components/ColumnHeaders.coffee b/app/coffeescripts/react_files/components/ColumnHeaders.coffee index e9e7fb8d7bb..5ea858abbf3 100644 --- a/app/coffeescripts/react_files/components/ColumnHeaders.coffee +++ b/app/coffeescripts/react_files/components/ColumnHeaders.coffee @@ -1,29 +1,32 @@ define [ + 'i18n!react_files' 'underscore' 'react' 'react-router' 'compiled/react/shared/utils/withReactDOM' 'compiled/fn/preventDefault' -], (_, React, ReactRouter, withReactDOM, preventDefault) -> +], (I18n, _, React, ReactRouter, withReactDOM, preventDefault) -> columns = [ - displayName: 'Name' + displayName: I18n.t('name', 'Name') property: 'name' className: 'ef-name-col' , - displayName: 'Date Created' + displayNameShort: I18n.t('created_at_short', 'Created') + displayName: I18n.t('created_at', 'Date Created') property: 'created_at' className: 'ef-date-created-col' , - displayName: 'Date Modified' + displayNameShort: I18n.t('updated_at_short', 'Modified') + displayName: I18n.t('updated_at', 'Date Modified') property: 'updated_at' className: 'ef-date-modified-col' , - displayName: 'Modified By' + displayName: I18n.t('modified_by', 'Modified By') className: 'ef-modified-by-col' property: 'user' , - displayName: 'Size' + displayName: I18n.t('size', 'Size') property: 'size' className: 'ef-size-col' ] @@ -46,8 +49,14 @@ define [ columns.map (column) => isSortedCol = sort is column.property div key: column.property, className: "#{column.className} #{'current-filter' if isSortedCol}", - ReactRouter.Link _.defaults({to: @props.to, query: @queryParamsFor(column.property)}, @props.params), - column.displayName - i className:'icon-arrow-up' if isSortedCol and order is 'asc' - i className:'icon-arrow-down' if isSortedCol and order is 'desc' + ReactRouter.Link _.defaults({to: @props.to, query: @queryParamsFor(column.property), className: 'ef-plain-link'}, @props.params), + + span className: ('visible-desktop' if column.displayNameShort), + column.displayName + if column.displayNameShort + span className: 'hidden-desktop', + column.displayNameShort + + i className:'icon-mini-arrow-up' if isSortedCol and order is 'asc' + i className:'icon-mini-arrow-down' if isSortedCol and order is 'desc' div className:'ef-links-col' diff --git a/app/coffeescripts/react_files/components/FolderChild.coffee b/app/coffeescripts/react_files/components/FolderChild.coffee index c01abedd8b8..b5921c32a6a 100644 --- a/app/coffeescripts/react_files/components/FolderChild.coffee +++ b/app/coffeescripts/react_files/components/FolderChild.coffee @@ -10,8 +10,7 @@ define [ 'compiled/models/Folder' 'compiled/fn/preventDefault' './PublishCloud' - '../utils/downloadStuffAsAZip' -], (I18n, React, {Link}, BackboneMixin, withReactDOM, FriendlyDatetime, ItemCog, friendlyBytes, Folder, preventDefault, PublishCloud, downloadStuffAsAZip) -> +], (I18n, React, {Link}, BackboneMixin, withReactDOM, FriendlyDatetime, ItemCog, friendlyBytes, Folder, preventDefault, PublishCloud) -> FolderChild = React.createClass @@ -41,11 +40,15 @@ define [ render: withReactDOM -> - div className:"ef-item-row #{'ef-item-selected' if @props.isSelected}", onClick: @props.toggleSelected, + div { + onClick: @props.toggleSelected + className: "ef-item-row #{'ef-item-selected' if @props.isSelected}" + }, label className: 'screenreader-only', input type: 'checkbox', defaultChecked: @props.isSelected, onChange: @props.toggleSelected, I18n.t('labels.select', 'Select This Item') - div className:'ef-name-col', + + div className:'ef-name-col ellipsis', if @state.editing form className: 'ef-edit-name-form', onSubmit: preventDefault(@saveNameEdit), input({ @@ -59,40 +62,43 @@ define [ button type: 'button', className: 'btn btn-link ef-edit-name-cancel', onClick: @cancelEditingName, i className: 'icon-x' else if @props.model instanceof Folder - Link to: 'folder', contextType: @props.params.contextType, contextId: @props.params.contextId, splat: @props.model.urlPath(), - i className:'icon-folder', - @props.model.get('name') + Link { + to: 'folder' + contextType: @props.params.contextType + contextId: @props.params.contextId + splat: @props.model.urlPath() + className: 'media' + }, + span className: 'pull-left', + i className: 'icon-folder media-object ef-big-icon' + span className: 'media-body', + @props.model.displayName() else - a href: @props.model.get('url'), - if @props.model.get('thumbnail_url') - img src: @props.model.get('thumbnail_url'), className:'ef-thumbnail', alt:'' - else - i className:'icon-document' - @props.model.get('display_name') + a href: @props.model.get('url'), className: 'media', + span className: 'pull-left', + if @props.model.get('thumbnail_url') + span + className: 'media-object ef-thumbnail' + style: + backgroundImage: "url('#{ @props.model.get('thumbnail_url') }')" + else + i className:'icon-document media-object ef-big-icon' + span className: 'media-body', + @props.model.displayName() div className:'ef-date-created-col', FriendlyDatetime datetime: @props.model.get('created_at'), + div className:'ef-date-modified-col', FriendlyDatetime datetime: @props.model.get('updated_at'), - div className:'ef-modified-by-col', - a href: @props.model.get('user')?.html_url, - @props.model.get('user')?.display_name, + + div className:'ef-modified-by-col ellipsis', + a href: @props.model.get('user')?.html_url, className: 'ef-plain-link', + @props.model.get('user')?.display_name + div className:'ef-size-col', - friendlyBytes(@props.model.get('size')), - div( {className:'ef-links-col'}, + friendlyBytes(@props.model.get('size')) + + div className: 'ef-links-col', PublishCloud(model: @props.model), - - a (if @props.model instanceof Folder - href: '#' - onClick: preventDefault => - downloadStuffAsAZip([@props.model], { - contextType: @props.params.contextType - contextId: @props.params.contextId - }) - else - href: @props.model.get('url') - ), - i className:'icon-download' - ItemCog(model: @props.model, startEditingName: @startEditingName) - ) diff --git a/app/coffeescripts/react_files/components/FriendlyDatetime.coffee b/app/coffeescripts/react_files/components/FriendlyDatetime.coffee index 1e108170f78..f79831527d6 100644 --- a/app/coffeescripts/react_files/components/FriendlyDatetime.coffee +++ b/app/coffeescripts/react_files/components/FriendlyDatetime.coffee @@ -21,7 +21,15 @@ define [ fudged = $.fudgeDateForProfileTimezone(datetime) timeTitle = $.datetimeString(datetime) - @transferPropsTo(React.DOM.time({ + + @transferPropsTo React.DOM.time { title: $.datetimeString(datetime) dateTime: datetime.toISOString() - }, $.friendlyDatetime(fudged))) \ No newline at end of file + }, + React.DOM.span className: 'visible-desktop', + # something like: Mar 6, 2014 + $.friendlyDatetime(fudged) + React.DOM.span className: 'hidden-desktop', + # something like: 3/3/2014 + fudged.toLocaleDateString() + diff --git a/app/coffeescripts/react_files/components/ItemCog.coffee b/app/coffeescripts/react_files/components/ItemCog.coffee index 49b9b210029..2dbf5dd7170 100644 --- a/app/coffeescripts/react_files/components/ItemCog.coffee +++ b/app/coffeescripts/react_files/components/ItemCog.coffee @@ -4,11 +4,13 @@ define [ 'compiled/react/shared/utils/withReactDOM' 'compiled/fn/preventDefault' 'compiled/models/FilesystemObject' + 'compiled/models/Folder' './RestrictedDialogForm' '../utils/openMoveDialog' + '../utils/downloadStuffAsAZip' 'jquery' 'jqueryui/dialog' -], (I18n, React, withReactDOM, preventDefault, FilesystemObject, RestrictedDialogForm, openMoveDialog, $) -> +], (I18n, React, withReactDOM, preventDefault, FilesystemObject, Folder, RestrictedDialogForm, openMoveDialog, downloadStuffAsAZip, $) -> ItemCog = React.createClass @@ -55,6 +57,18 @@ define [ i className:'icon-mini-arrow-down' ul className:'al-options', + li {}, + a (if @props.model instanceof Folder + href: '#' + onClick: preventDefault => + downloadStuffAsAZip([@props.model], { + contextType: @props.params.contextType + contextId: @props.params.contextId + }) + else + href: @props.model.get('url') + ), + I18n.t('download', 'Download') li {}, a href:'#', onClick: preventDefault(@props.startEditingName), I18n.t('edit_name', 'Edit Name') diff --git a/app/coffeescripts/react_files/components/Toolbar.coffee b/app/coffeescripts/react_files/components/Toolbar.coffee index e15eb96df4f..9c189c758b6 100644 --- a/app/coffeescripts/react_files/components/Toolbar.coffee +++ b/app/coffeescripts/react_files/components/Toolbar.coffee @@ -41,7 +41,7 @@ define [ render: withReactDOM -> header className:'ef-header', form onSubmit: @onSubmitSearch, className:'ef-search-container', - i className:'icon-search', + i({className:'icon-search'}), input placeholder: I18n.t('search', 'Search for files'), type:'search', ref:'searchTerm', defaultValue: @props.query.search_term #, onKeyUp: @onKeyUp div className: 'ef-main-buttons', diff --git a/app/coffeescripts/views/FolderTreeView.coffee b/app/coffeescripts/views/FolderTreeView.coffee index 8fd80803354..364ca86c4c0 100644 --- a/app/coffeescripts/views/FolderTreeView.coffee +++ b/app/coffeescripts/views/FolderTreeView.coffee @@ -33,6 +33,7 @@ define [ initialize: -> @tagId = _.uniqueId 'treenode-' + @render = _.debounce(@render) @model.on 'all', @render, this @model.files.on 'all', @render, this @model.folders.on 'all', @render, this @@ -57,17 +58,27 @@ define [ renderSelf: -> @$el.attr @attributes() - @$label ||= $("").prependTo(@$el) - $text = $('', { - text: @title_text(), - click: (event) => @onClick?(event, @model) - }) + @$label ||= do => + @$labelInner = $('').click (event) => @onClick?(event, @model) + + $(""" + + + + + """).append(@$labelInner).prependTo(@$el) + + @$labelInner.text(@title_text()) @$label .attr('href', @href?(@model) || '#') - .html($text) .toggleClass('expanded', !!@model.isExpanded) .toggleClass('loading after', !!@model.isExpanding) + renderContents: -> if @model.isExpanded unless @$folderContents diff --git a/app/stylesheets/base/_custom_bootstrap.scss b/app/stylesheets/base/_custom_bootstrap.scss index 8c85f6f49dd..d129e7dde74 100644 --- a/app/stylesheets/base/_custom_bootstrap.scss +++ b/app/stylesheets/base/_custom_bootstrap.scss @@ -50,6 +50,7 @@ @import "vendor/bootstrap/thumbnails"; @import "vendor/bootstrap/labels-badges"; @import "vendor/bootstrap/progress-bars"; +@import "vendor/bootstrap/media"; //@import "vendor/bootstrap/accordion"; // use jqueryUI instead //these are just commented out because we dont use them yet, if you want them just uncomment. //@import "vendor/bootstrap/carousel"; diff --git a/app/stylesheets/base/_variables.scss b/app/stylesheets/base/_variables.scss index ed787b52d24..0675d4d14ea 100644 --- a/app/stylesheets/base/_variables.scss +++ b/app/stylesheets/base/_variables.scss @@ -67,7 +67,7 @@ // this passes by itself with a 4.93 ratio // in case you're wondering where $use_high_contrast is - $canvas-neutral: #bbb; + $canvas-neutral: hsl(0,0,95); @if $use_high_contrast { $canvas-neutral: #6d6d6d; } $canvas-action: #ba3fa5; @@ -122,8 +122,13 @@ $eportfolio-name--disabled: #777; @if $use_high_contrast {$eportfolio-name--disabled: #686868;} + $base-font-color-light: $canvas-light; $base-font-color-dark: $canvas-dark; +$base-border-color: $canvas-neutral; + +$base-list-item-background--hover: #eef7ff; +$base-list-item-background--selected: #d9edf9; $announcements_disscussion-summary-color: $canvas-dark; diff --git a/app/stylesheets/components/_g_wiki.sass b/app/stylesheets/components/_g_wiki.sass index 31e241f7f3c..666da251612 100644 --- a/app/stylesheets/components/_g_wiki.sass +++ b/app/stylesheets/components/_g_wiki.sass @@ -19,7 +19,6 @@ $pages-inner-border: 1px solid #e1e3e4 $index-background: #e8ecef $item-background: #ffffff -$item-hover-background: #eef7ff $shadow: 0 1px 0 rgba(0,0,0,0.15) $table-shadow: 0 1px 0 #dde0e4 @@ -173,7 +172,7 @@ $revision-button-hover-color: #2590cf :text-decoration inherit :color inherit &.clickable:hover - :background $item-hover-background + :background $base-list-item-background--hover :text-decoration inherit :color inherit td:first-child diff --git a/app/stylesheets/components/_item-groups.scss b/app/stylesheets/components/_item-groups.scss index 6d39681c738..e157e31d5b5 100644 --- a/app/stylesheets/components/_item-groups.scss +++ b/app/stylesheets/components/_item-groups.scss @@ -239,11 +239,11 @@ is for items that are not draggable. } &:hover { - background-color: #eef7ff; + background-color: $base-list-item-background--hover; } &:focus { - background-color: #eef7ff; + background-color: $base-list-item-background--hover; } &:before { diff --git a/app/stylesheets/jst/FileBrowserView.scss b/app/stylesheets/jst/FileBrowserView.scss index c6bc1fc0d31..b56356d1ff6 100644 --- a/app/stylesheets/jst/FileBrowserView.scss +++ b/app/stylesheets/jst/FileBrowserView.scss @@ -1,42 +1,35 @@ @import 'base/environment'; -$triangle-edge-size: 5px; - .folderTree { + &:focus { outline: none; } + font-size: 12px; &, ul { @include reset-list; } ul { margin-left: 8px; } li a { - padding: 1px 7px 1px 35px; - display: block; - background: url(/images/inst_tree/file_types/page_white.png) no-repeat 13px 3px; - position: relative; - &.folderLabel { - background-image: url(/images/inst_tree/folder.png); - &:before{ - position: absolute; - top: $triangle-edge-size; - left: 4px; - border: solid transparent; - border-width: $triangle-edge-size; - border-left-color: $button-text-color; - content: ''; - } - &.expanded:before{ - left: 0; - top: 7px; - border-left-color: transparent; - border-top-color: $button-text-color; - } - } - + padding-bottom: 2px; + display: flex; + white-space: nowrap; &.active { background-color: $activeBG; } } - .preview-thumbnail { - margin-left: -23px; - max-width: 200px; - height: 30px; - vertical-align: middle; + .preview-thumbnail-holder { + display: inline-block; + width: 42px; + height: 42px; + padding-right: 6px; + .preview-thumbnail { + max-width: 100%; + max-height: 100%; + } } -} \ No newline at end of file + .icon-folder:before { + font-size: 11px; + } + + i[class*=icon-], i[class^=icon-] { color: $base-font-color-dark } + + .icon-mini-arrow-right { transition: transform 0.2s } + .expanded .icon-mini-arrow-right { transform: rotate(90deg) } +} + diff --git a/app/stylesheets/legacy/_old?_tree.scss b/app/stylesheets/legacy/_old?_tree.scss deleted file mode 100644 index 7b992c7870d..00000000000 --- a/app/stylesheets/legacy/_old?_tree.scss +++ /dev/null @@ -1,55 +0,0 @@ -@import 'base/environment'; - -$triangle-edge-size: 5px; - -.folderTree { - &, ul { - @include reset-list; - } - ul { margin-left: 8px; } - .folderContents ul.hidden { - display: none; - } - li a { - padding: 1px 7px 1px 35px; - display: block; - background: url(/images/inst_tree/file_types/page_white.png) no-repeat 13px 3px; - position: relative; - &.folderLabel { - background-image: url(/images/inst_tree/folder.png); - &:before{ - position: absolute; - top: $triangle-edge-size; - left: 4px; - border: solid transparent; - border-width: $triangle-edge-size; - border-left-color: $button-text-color; - content: ''; - } - &.expanded:before{ - left: 0; - top: 7px; - border-left-color: transparent; - border-top-color: $button-text-color; - } - &.loading:after { - // these are the height/width of /images/ajax-loader-linear.gif - width: 16px; - height: 11px; - - background: url(/images/ajax-loader-linear.gif); - content: ''; - display: inline-block; - margin-left: 7px; - } - } - - &:focus { background-color: #f2fafd; } - } - .preview-thumbnail { - margin-left: -23px; - max-width: 200px; - height: 30px; - vertical-align: middle; - } -} \ No newline at end of file diff --git a/app/stylesheets/pages/discussions_list.scss b/app/stylesheets/pages/discussions_list.scss index afc5f343c80..31d9e1ee2ba 100644 --- a/app/stylesheets/pages/discussions_list.scss +++ b/app/stylesheets/pages/discussions_list.scss @@ -157,7 +157,7 @@ } &:hover { - background: #eef7ff; + background: $base-list-item-background--hover; } a { diff --git a/app/stylesheets/pages/ember_files.scss b/app/stylesheets/pages/ember_files.scss index e8c0e611ad0..19c75ba0bea 100644 --- a/app/stylesheets/pages/ember_files.scss +++ b/app/stylesheets/pages/ember_files.scss @@ -1,11 +1,14 @@ @import "base/environment"; +$replace-this-with-a-variable-for-focus-bg: hsl(0, 0%, 95%); + +$ef-thumbnail-size: 36px; + @mixin hideForPhone { - @media (max-width:767px){ + @media (max-width:800px){ display: none; } } -$border: #e5e4e4; .form-horizontal{ .dialog-adapter-form-calendar-label{ @@ -13,19 +16,9 @@ $border: #e5e4e4; margin-left: 0px; } } +.dateSelectInput { width: 100px } +.controls.dateSelectInputContainer{ margin-left: 100px } -.adminCog-download-link{ - color: black; - margin-right: 10px; -} - -.dateSelectInput{ - width: 100px; -} - -.controls.dateSelectInputContainer{ - margin-left: 100px; -} .ef-search-container{ position: relative; height: 30px; @@ -66,45 +59,13 @@ $border: #e5e4e4; left: 8px; } -.ef-admin-cog{ - margin-left: 10px; -} - .ef-header{ height: 75px; padding-left: 20px; padding-right: 20px; display: flex; align-items: center; -} - -.ef-breadcrumbs{ - padding-left: 20px; - border-top: 1px solid $border; - border-bottom: 1px solid $border; - height: 40px; - display: flex; - align-items: center; - - a { - background-color: transparent; - background-image: url("/images/breadcrumb-chevron.png"); - background-repeat: no-repeat; - background-position: 0 50%; - line-height: 29px; - padding-left: 12px; - margin-left: 8px; - - &:first-of-type { - background: none; - padding-left: 0; - margin-left: 0; - } - &.active:link, &.active:visited{ - color: #999da5; - } - } - + border-bottom: 1px solid $base-border-color; } .ef-main{ @@ -112,22 +73,16 @@ $border: #e5e4e4; display: flex; .ef-folder-content{ - border-right: 1px solid #f2f2f2; + border-right: 1px solid $base-border-color; display: flex; flex-direction: column; flex: 1 1 0; padding: 0px; - [role=tree]{ - position: relative; - margin: 10px; + .folderTree { + margin: 10px } - i { - color: black; - } - - [aria-selected=true] > .ef-folder-header{ background-color: #f2f2f2; font-weight: bold; @@ -145,6 +100,7 @@ $border: #e5e4e4; .ef-folder-list{ flex: 10 10 0; font-size: 12px; + overflow: auto; } .ef-folder-totals{ @@ -154,7 +110,7 @@ $border: #e5e4e4; flex: 1 1 0; height: 30px; font-size: 16px; - border-top: 1px solid $border; + border-top: 1px solid $base-border-color; padding-left: 20px; } } @@ -169,35 +125,35 @@ $border: #e5e4e4; .ef-directory-header{ display: flex; padding: 5px; - border-bottom: 1px solid #f2f2f2; - - a{ - color: black; - } + border-bottom: 1px solid $base-border-color; } +.ef-plain-link, .ef-plain-link:hover { color: $base-font-color-dark; } .ef-item-row{ display: flex; padding: 5px; user-select: none; /* so that we can shift-click to select */ + margin-bottom: 1px; + border-radius: 3px; + line-height: $ef-thumbnail-size; - &.ef-item-selected{ - background-color: #d9edf9; - } + // :hover style needs to be before 'selected' so item that is both hovered and selected gets selected color + &:hover { background-color: $base-list-item-background--hover } + &.ef-item-selected { background-color: $base-list-item-background--selected } - .al-trigger { - opacity: 0 - } - &:hover .al-trigger, - .al-trigger.ui-state-active { - opacity: 1 - } + .al-trigger { opacity: 0 } + &:hover .al-trigger, .al-trigger.ui-state-active { opacity: 1 } - - &:hover{ - background-color: #d9edf9; + .btn-link { border-width: 0 } +} +.ef-big-icon { + width: $ef-thumbnail-size !important; + color: $base-font-color-dark; + &:before { + font-size: $ef-thumbnail-size - 16px !important; + left: 7px; } } @@ -227,30 +183,27 @@ $border: #e5e4e4; .ef-links-col{ display: flex; - width: 85px; + width: 63px; } -.ef-hover-options{ - .al-trigger{ - color: black; - } - margin-left: 14px; -} - - .ef-thumbnail { - width: 45px; + width: $ef-thumbnail-size; + height: $ef-thumbnail-size; + background-repeat: no-repeat; + background-size: cover; + background-position: center center; + box-shadow: inset 0 0 0 1px rgba(0,0,0,0.2); } -.ef-edit-name-form { - position: relative; -} +.ef-edit-name-form { position: relative } .ef-edit-name-cancel { position: absolute; top: 0; right: 0; } + + .file-rename-form__form-label { float: left; margin-top: 5px; diff --git a/app/stylesheets/vendor/bootstrap/_media.scss b/app/stylesheets/vendor/bootstrap/_media.scss index 1decab71dec..4b36ed5e55c 100644 --- a/app/stylesheets/vendor/bootstrap/_media.scss +++ b/app/stylesheets/vendor/bootstrap/_media.scss @@ -10,7 +10,6 @@ .media, .media-body { overflow: hidden; - *overflow: visible; zoom: 1; } @@ -37,11 +36,13 @@ // Media image alignment // ------------------------- -.media .pull-left { - margin-right: 10px; -} -.media .pull-right { - margin-left: 10px; +.media { + > .pull-left { + margin-right: 10px; + } + > .pull-right { + margin-left: 10px; + } } @@ -50,6 +51,6 @@ // Undo default ul/ol styles .media-list { - margin-left: 0; + padding-left: 0; list-style: none; -} +} \ No newline at end of file diff --git a/app/views/jst/FolderTreeItem.handlebars b/app/views/jst/FolderTreeItem.handlebars index 31da9929f90..162caafd5f6 100644 --- a/app/views/jst/FolderTreeItem.handlebars +++ b/app/views/jst/FolderTreeItem.handlebars @@ -1,4 +1,10 @@ - - {{display_name}} + {{#if thumbnail_url}} + + + + {{else}} + + {{/if}} + {{display_name}}