From a97c8ffc9397c825ea899bb152912b6ca5d0c12b Mon Sep 17 00:00:00 2001 From: Pablo Vazquez Date: Wed, 12 Sep 2018 19:00:16 +0200 Subject: [PATCH] Search: Layout and styling --- src/styles/_search.sass | 446 +++++---------------- src/styles/components/_card.sass | 24 ++ src/styles/components/_navbar.sass | 2 +- src/templates/_macros/_asset_list_item.pug | 1 - src/templates/mixins/components.pug | 2 +- src/templates/nodes/search.pug | 177 +++----- 6 files changed, 198 insertions(+), 454 deletions(-) diff --git a/src/styles/_search.sass b/src/styles/_search.sass index c784ebbc..a3a332f8 100644 --- a/src/styles/_search.sass +++ b/src/styles/_search.sass @@ -92,46 +92,51 @@ $search-hit-width_grid: 100px &.tt-cursor:hover .search-hit background-color: lighten($color-background, 5%) -#search-container - min-height: 600px +.search-list + width: 30% - +media-lg - padding-left: 0 - padding-right: 0 + .card-deck.card-deck-horizontal + .card .embed-responsive + max-width: 80px - #search-list - width: 40% - position: relative - overflow-x: hidden + input.search-field + border: none + border-bottom: 2px solid rgba($primary, .2) + border-radius: 0 + width: 100% + transition: border 100ms ease-in-out + + &::placeholder + color: $color-text-dark-secondary + &:placeholder-shown + border-bottom-color: $primary + + &:focus + outline: none + border: none + border-bottom: 2px solid lighten($primary, 5%) + +.search-details + width: 70% + +#search-details + position: relative + #search-hit-container + position: absolute // for scrollbars overflow-y: auto - #hits + #error_container position: relative - width: 100% + background: white + padding: 20px - #no-hits - padding: 10px 15px - color: $color-text-dark-secondary - - #search-details - position: relative - width: 40% - - #search-hit-container - position: absolute // for scrollbars - overflow-y: auto - - #error_container - position: relative - background: white - padding: 20px - - #search-error - display: none - margin: 20px auto - color: $color-danger - text-align: center + #search-error + display: none + margin: 20px auto + color: $color-danger + text-align: center +#search-container #node-container width: 100% max-width: 100% @@ -284,109 +289,78 @@ $search-hit-width_grid: 100px button width: 100% +#project_sidebar+#search-sidebar, +#project_sidebar+#search-sidebar+#search-container + padding-left: $sidebar-width + +.search-project + li.project + display: none + #search-sidebar - width: 20% - background-color: $color-background-light - - +media-lg - border-top-left-radius: 3px - - input.search-field + .card margin-bottom: 10px + border-radius: 3px border: none - border-bottom: 2px solid rgba($primary, .2) - border-radius: 0 - width: 100% - transition: border 100ms ease-in-out + background-color: white + box-shadow: 1px 1px 0 rgba(black, .1) - &::placeholder - color: $color-text-dark-secondary - &:placeholder-shown - border-bottom-color: $primary + a + text-decoration: none - &:focus - outline: none - border: none - border-bottom: 2px solid lighten($primary, 5%) + .toggleRefine + display: block + padding-left: 7px + color: $color-text-dark + text-transform: capitalize - .search-list-filters - padding: - left: 10px - right: 10px - - .panel.panel-default - margin-bottom: 10px - border-radius: 3px - border: none - background-color: white - box-shadow: 1px 1px 0 rgba(black, .1) - - a + &:hover text-decoration: none + color: $primary - .toggleRefine - display: block - padding-left: 7px - color: $color-text-dark - text-transform: capitalize + &.refined + color: $primary &:hover - text-decoration: none - color: $primary + color: $color-danger - &.refined - color: $primary - - &:hover - color: $color-danger - - span - &:before - /* x icon */ - content: '\e84b' - font-family: 'pillar-font' span &:before - /* circle with dot */ - content: '\e82f' + /* x icon */ + content: '\e84b' font-family: 'pillar-font' - position: relative - left: -7px - font-size: .9em - span &:before - /* empty circle */ - content: '\e82c' + /* circle with dot */ + content: '\e82f' font-family: 'pillar-font' position: relative left: -7px font-size: .9em - .facet_count - color: $color-text-dark-secondary - - .panel-title, .panel-heading - color: $color-text-dark-secondary - font: - size: 1em - weight: 500 - - .panel-body - padding-top: 0 - - .panel-title - position: relative - &:after - content: '\e83b' + span + &:before + /* empty circle */ + content: '\e82c' font-family: 'pillar-font' - position: absolute - right: 0 - color: $color-text-dark-primary + position: relative + left: -7px + font-size: .9em + .facet_count + color: $color-text-dark-secondary - .collapsed - .panel-title:after - content: '\e838' + .card-title + position: relative + &:after + content: '\e83b' + font-family: 'pillar-font' + position: absolute + right: 0 + color: $color-text-dark-primary + + .collapsed + .card-title:after + content: '\e838' .search-list-stats @@ -396,241 +370,37 @@ $search-hit-width_grid: 100px font-size: .9em +clearfix - #pagination - ul.search-pagination - text-align: center - list-style-type: none - margin: 0 - padding: 0 - width: 100% - display: flex - +clearfix - - li - display: inline-block - margin: 5px auto - - &:last-child - border-color: transparent - - a - font-weight: 500 - padding: 5px 4px - color: $color-text-dark-secondary - - &:hover - color: $color-text-dark-primary - - &.disabled - opacity: .6 - - &.active a - color: $color-text-dark-primary - font-weight: bold - - -.search-hit - +clearfix - float: left +.search-pagination + text-align: center + list-style-type: none margin: 0 - padding: 7px 10px 7px 10px - position: relative + padding: 0 width: 100% + display: flex + +clearfix - &:first-child - border: thin solid transparent - border-left: 3px solid transparent + li + display: inline-block + margin: 5px auto - &:hover - opacity: 1 - text-decoration: none - cursor: default - color: darken($primary, 20%) - background-color: $color-background-light + &:last-child + border-color: transparent - & .search-hit-name i - color: darken($primary, 20%) + a + font-weight: 500 + padding: 5px 4px + color: $color-text-dark-secondary - & .search-hit-thumbnail - & .search-hit-thumbnail-icon - transform: translate(-50%, -50%) scale(1.1) - - .search-hit-name - text-decoration: none &:hover - color: darken($primary, 10%) + color: $color-text-dark-primary - .search-hit-thumbnail - cursor: pointer + &.disabled + opacity: .6 - .search-hit-thumbnail-icon - transform: translate(-50%, -50%) scale(1) + &.active a + color: $color-text-dark-primary + font-weight: bold - &:active - background-color: rgba($color-background, .5) - opacity: .8 - color: $primary - & .search-hit-name i - color: $primary - - &:focus - border-color: rgba($primary, .2) - - /* Class that gets added when we click on the item */ - &.active - background-color: lighten($color-background, 2%) - box-shadow: inset -3px 0 $primary - - .search-hit-name - color: darken($primary, 10%) - - .search-hit-meta - span.when - display: none - span.context - display: inline-block - - .search-hit-thumbnail - position: relative - float: left - min-width: $search-hit-width_list * 1.49 - max-width: $search-hit-width_list * 1.49 - height: $search-hit-width_list - border-radius: 3px - background: $color-background - margin-right: 12px - text-align: center - overflow: hidden - +media-xs - display: none - +media-sm - min-width: $search-hit-width_list - max-width: $search-hit-width_list - - img - height: $search-hit-width_list - width: auto - - - .pi-video:before, .pi-file:before, - .pi-group:before - font-family: 'pillar-font' - .pi-video:before - content: '\e81d' - .pi-file:before - content: '\e825' - .pi-group:before - content: '\e80d' - - .search-hit-thumbnail-icon - position: absolute - top: 50% - left: 50% - transform: translate(-50%, -50%) - color: white - font-size: 1.2em - transition: none - color: $color-text-dark-secondary - - .dark - text-shadow: none - font-size: 1.3em - - .search-hit-name - position: relative - font-size: 1.1em - color: $color-text-dark-primary - background-color: initial - width: initial - max-width: initial - +text-overflow-ellipsis - padding-top: 5px - - &:hover - cursor: pointer - text-decoration: underline - - em - color: darken($primary, 15%) - font-style: normal - - .search-hit-ribbon - +ribbon - right: -30px - top: 5px - - span - font-size: 60% - margin: 1px 0 - padding: 2px 35px - - .search-hit-meta - position: relative - font-size: .9em - color: $color-text-dark-secondary - background-color: initial - padding: 3px 0 0 0 - text-decoration: none - +text-overflow-ellipsis - - span - &.project - color: $color-text-dark-secondary - margin-right: 3px - &.updated - color: $color-text-dark-hint - &.status - font-size: .8em - color: $color-text-dark-secondary - border: thin solid $color-text-dark-hint - padding: 3px 8px - text-transform: uppercase - border-radius: 3px - margin-right: 5px - &.media, &.node_type - color: $color-text-dark-secondary - text-transform: capitalize - margin: 0 3px - - &.when - margin: 0 3px - float: right - display: block - +media-lg - display: block - +media-md - display: block - +media-sm - display: none - +media-xs - display: none - - &.context - margin: 0 - float: right - display: none - - &:hover - cursor: pointer - .search-hit-name-user - color: $primary - - &.users - em - font-style: normal - color: $primary - - .search-hit-name - font-size: 1.2em - - small - margin-left: 5px - color: $color-text-dark-secondary - - .search-hit-roles - font-size: .9em - color: $color-text-dark-secondary - margin-left: 15px .view-grid display: flex diff --git a/src/styles/components/_card.sass b/src/styles/components/_card.sass index 2e296b93..66d50189 100644 --- a/src/styles/components/_card.sass +++ b/src/styles/components/_card.sass @@ -21,6 +21,25 @@ flex: 1 0 20% max-width: 20% + &.card-deck-horizontal + @extend .flex-column + flex-wrap: initial + + .card + @extend .w-100 + @extend .flex-row + flex: initial + max-width: 100% + + .card-img-top + @extend .rounded-0 + + .embed-responsive + @extend .mr-2 + max-width: 120px + + .card-body + @extend .overflow-hidden .card-padless .card @@ -90,3 +109,8 @@ position: absolute padding: 1px 5px z-index: 1 + +.card + &.active + .card-title + color: $primary diff --git a/src/styles/components/_navbar.sass b/src/styles/components/_navbar.sass index dfa5fe1e..bbcc934f 100644 --- a/src/styles/components/_navbar.sass +++ b/src/styles/components/_navbar.sass @@ -7,7 +7,7 @@ nav.sidebar border: none color: $color-text-dark-secondary padding: 0 - z-index: $z-index-base + 5 /* Flowplayer seems to take up to 11, project container is 12 */ + z-index: $z-index-base + 5 nav margin-left: auto diff --git a/src/templates/_macros/_asset_list_item.pug b/src/templates/_macros/_asset_list_item.pug index 1445c616..e9568720 100644 --- a/src/templates/_macros/_asset_list_item.pug +++ b/src/templates/_macros/_asset_list_item.pug @@ -25,7 +25,6 @@ a.card.asset.card-image-fade.pr-0.mx-0.mb-2( li.pr-2 {{ node_type | undertitle }} li {{ asset._created | pretty_date }} - | {% if asset.properties.content_type == 'video' %} | {% set view_progress = current_user.nodes.view_progress %} diff --git a/src/templates/mixins/components.pug b/src/templates/mixins/components.pug index a85dab99..3bea4d78 100644 --- a/src/templates/mixins/components.pug +++ b/src/templates/mixins/components.pug @@ -53,7 +53,7 @@ mixin card-deck() if block block else - p No cards defined. + .p-3 No items. // {# // Passes all attributes to the card. diff --git a/src/templates/nodes/search.pug b/src/templates/nodes/search.pug index 5a8f69c9..fd60cb3c 100644 --- a/src/templates/nodes/search.pug +++ b/src/templates/nodes/search.pug @@ -1,4 +1,7 @@ | {% extends 'layout.html' %} +| {% from '_macros/_asset_list_item.html' import asset_list_item %} +include ../mixins/components + | {% block page_title %}Search{% if project %} {{ project.name }}{% endif %}{% endblock %} | {% block head %} @@ -28,61 +31,46 @@ script. document.body.dataset["projectId"] = "{{project._id}}"; | {% endif %} -#search-container.d-flex +| {% if project %} +#project_sidebar.bg-white + ul.project-tabs.p-0 + li.tabs-browse( + title="Browse", + data-toggle="tooltip", + data-placement="right") + a(href="{{url_for('projects.view', project_url=project.url, _external=True)}}") + i.pi-folder - | {% if project %} - #project_sidebar.bg-white - ul.project-tabs.p-0 - li.tabs-browse( - title="Browse", - data-toggle="tooltip", - data-placement="right") - a(href="{{url_for('projects.view', project_url=project.url, _external=True)}}") - i.pi-folder + li.tabs-search.active( + title="Search", + data-toggle="tooltip", + data-placement="right") + a(href="{{url_for('projects.search', project_url=project.url, _external=True)}}") + i.pi-search +| {% endif %} - li.tabs-search.active( - title="Search", - data-toggle="tooltip", - data-placement="right") - a(href="{{url_for('projects.search', project_url=project.url, _external=True)}}") - i.pi-search - | {% endif %} - #search-sidebar +#search-container.d-flex(class="{% if project %}search-project{% endif %}") + .search-list input.search-field.p-2.bg-white( - type="text", - name="q", - id="q", - autocomplete="off", - spellcheck="false", - autocorrect="false", - placeholder="Search by Title, Type...") + type="text", + name="q", + id="q", + autocomplete="off", + spellcheck="false", + autocorrect="false", + placeholder="Search by Title, Type...") - .search-list-filters - .filter-list - | View as: - ul.filter-list - li.filter-list-type.grid( - title="Browse as grid", - data-list-type="grid") - i.pi-layout - li.filter-list-type.list( - title="Browse as list", - data-list-type="list") - i.pi-list + #pagination.mt-3 - #accordion.panel-group.accordion(role="tablist", aria-multiselectable="true") - #facets + //- #accordion.panel-group.accordion(role="tablist", aria-multiselectable="true") + #facets - #pagination + #stats.search-list-stats - .search-list-stats - #stats + +card-deck()(id='hits', class="h-100 m-0 pt-3 pr-2 card-deck-horizontal") - #search-list.h-100 - #hits - - #search-details.border-left + #search-details.border-left.search-details #search-error #search-hit-container.w-100 @@ -90,12 +78,12 @@ script. | {% raw %} // Facet template script(type="text/template", id="facet-template") - .panel.panel-default + .card a(data-toggle='collapse', data-parent='#accordion', href='#filter_{{ facet }}', aria-expanded='true', aria-controls='filter_{{ facet }}') - .panel-heading(role='tab') - .panel-title {{ title }} - .panel-collapse.collapse.in(id='filter_{{ facet }}', role='tabpanel', aria-labelledby='headingOne') - .panel-body + .card-header(role='tab') + .card-title {{ title }} + .collapse.show(id='filter_{{ facet }}', role='tabpanel', aria-labelledby='headingOne') + .card-body | {{#values}} a.facet_link.toggleRefine( class='{{#refined}}refined{{/refined}}', @@ -110,35 +98,33 @@ script(type="text/template", id="facet-template") // Hit template script(type="text/template", id="hit-template") - .search-hit(data-hit-id='{{ objectID }}') - .search-hit-thumbnail + a.card.asset.card-image-fade.pl-0.mx-0.mb-1( + data-hit-id='{{ objectID }}', + href="/nodes/{{ objectID }}/redir", + class="js-search-hit {{#is_free}}free{{/is_free}}") + .embed-responsive.embed-responsive-16by9 | {{#picture}} - img(src="{{{ picture }}}") + .card-img-top.embed-responsive-item(style="background-image: url({{{ picture }}})") | {{/picture}} | {{^picture}} - .search-hit-thumbnail-icon + .card-img-top.card-icon.embed-responsive-item | {{#media}} i(class="pi-{{{ media }}}") | {{/media}} | {{^media}} - i.dark(class="pi-{{{ node_type }}}") + i(class="pi-{{{ node_type }}}") | {{/media}} | {{/picture}} - | {{#is_free}} - .search-hit-ribbon - span free - | {{/is_free}} - .search-hit-name - | {{ name }} - .search-hit-meta - span.project {{ project.name }} - span.node_type {{{ node_type }}} - | {{#media}} - span.media ยท {{{ media }}} - | {{/media}} - span.when {{{ created_at }}} - span.context - a(href="/nodes/{{ objectID }}/redir") view in context + .card-body.py-2.d-flex.flex-column + .card-title.mb-1.font-weight-bold + | {{ name }} + + ul.card-text.list-unstyled.d-flex.text-black-50.mt-auto + li.pr-2.project {{ project.name }} + | {{#media}} + li.pr-2.text-capitalize {{{ media }}} + | {{/media}} + li.pr-2 {{{ created_at }}} // Pagination template @@ -159,7 +145,6 @@ script(type="text/template", id="stats-template") | {% endblock %} | {% block footer_scripts %} -script(src="//releases.flowplayer.org/6.0.5/flowplayer.min.js", async) script(src="{{ url_for('static_pillar', filename='assets/js/vendor/hogan.common-3.0.0.js') }}") script(src="{{ url_for('static_pillar', filename='assets/js/elasticsearch.min.js') }}") @@ -182,17 +167,19 @@ script. }); } - $('body').on('click', '.search-hit', function(){ + $('body').on('click', '.js-search-hit', function(e){ + e.preventDefault(); + $('.loader-bar').removeClass('active').addClass('active'); displayNode($(this).data('hit-id')); - $('.search-hit').removeClass('active'); + $('.js-search-hit').removeClass('active'); $(this).addClass('active'); }); - // Remove focus from search input so that the click event bound to .search-hit - // can be fired on the first click. - $(searchList).hover(function(){ + // Remove focus from search input so that the click event + // bound to .search-hit can be fired on the first click. + $('#search-list').hover(function(){ $('#q').blur(); }); $('#search-sidebar').hover(function(){ @@ -200,42 +187,6 @@ script. }); /* UI Stuff */ - - /* List types, grid or list (default)*/ - var uiListType = Cookies.getJSON('bcloud_ui'); - var searchList = document.getElementById('search-list'); - - function uiSetListType(type){ - $('.filter-list-type').removeClass('active'); - - if (type == 'grid'){ - $(searchList).addClass('view-grid'); - $('.filter-list-type.grid').addClass('active'); - } else { - $(searchList).removeClass('view-grid'); - $('.filter-list-type.list').addClass('active'); - } - } - - if (uiListType && uiListType.search_browse_type == 'grid'){ - uiSetListType('grid'); - } else { - uiSetListType('list'); - } - - $('.filter-list-type').on('click', function(){ - if ($(this).attr('data-list-type') == 'grid'){ - uiSetListType('grid'); - setJSONCookie('bcloud_ui', 'search_browse_type', 'grid'); - } else { - uiSetListType('list'); - setJSONCookie('bcloud_ui', 'search_browse_type', 'list'); - } - }); - - /* Hide site-wide search, kinda confusing */ - $('.search-input').hide(); - /* Resize container so we can have custom scrollbars */ container_offset = $('#search-container').offset();