@concretecms/bedrock 1.1.3 → 1.1.8

package/assets/accordions/js/frontend.js

@@ -0,0 +1 @@
+import 'bootstrap/js/dist/collapse'

package/assets/accordions/scss/frontend/_frontend.scss

@@ -0,0 +1,11 @@
+@import 'bootstrap/scss/functions';
+@import 'bootstrap/scss/variables';
+@import 'bootstrap/scss/mixins';
+
+// Base styling
+@import 'bootstrap/scss/accordion';
+
+// Reset header top margins because if this is used on old bootstrap sometimes a margin is present.
+.accordion-header {
+  margin-top: 0;
+}

package/assets/accordions/scss/frontend.scss

@@ -0,0 +1,4 @@
+// This is an entry point so it just includes the partial that includes everything else.
+// That way if we want to include full support in our theme we just include the partial (rather
+// than including the entry point because I think it's bad practice.)
+@import 'frontend/frontend';

package/assets/bedrock/scss/_frontend.scss

@@ -5,6 +5,7 @@
 @import '@fortawesome/fontawesome-free/scss/variables';
 
 // Import Theme Foundation items
+@import 'theme-context-root';
 @import 'mixins';
 @import 'utilities';
 @import 'theme-grid';

package/assets/bedrock/scss/_theme-context-root.scss

@@ -0,0 +1,17 @@
+// What is the purpose of this file, you ask?
+// In our theme color input selector, we use CSS variables to display colors.
+// e.g. var(--bs-primary)
+// However, since .ccm-ui has the CMS variables attached to it, and the ::root has the
+// theme bootstrap variables attached to it, the primary color shown in the color input
+// Will come from .ccm-ui instead of ::root, since .ccm-ui is inside ::root.
+// So instead, let's ALSO define the theme colors against the .ccm-context-theme
+// class, and then wrap any controls that need to have access to theme specific variables
+// within the .ccm-context-theme class.
+
+.ccm-context-theme {
+
+  @each $color, $value in $theme-colors {
+    --#{$variable-prefix}#{$color}: #{$value};
+  }
+
+}

package/assets/cms/components/customizer/FontFamilyPageCustomizerWidget.vue

@@ -1,7 +1,7 @@
 <template>
     <select @change="componentUpdated" class="selectpicker" v-model="selectedFont">
         <option value="" :data-content="'<span>Default</span>'">Default</option>
-        <option v-for="font in webFonts" :value="font" :data-content="'<span style=\'font-family: ' + font + '\'>' + font + '</span>'">{{ font }}</option>
+        <option v-for="font in customFonts" :value="font" :data-content="'<span style=\'font-family: ' + font + '\'>' + font + '</span>'">{{ font }}</option>
         <option v-for="font in standardFonts" :value="font" :data-content="'<span style=\'font-family: ' + font + '\'>' + font + '</span>'">{{ font }}</option>
     </select>
 </template>
@@ -42,13 +42,13 @@ export default {
         }
     },
     computed: {
-        webFonts: function() {
+        customFonts: function() {
             var fonts = []
             var my = this
             this.styleValue.style.fonts.forEach(function(font) {
                 fonts.push(font.name)
             })
-            if (fonts.indexOf(my.selectedFont) === -1) {
+            if (fonts.indexOf(my.selectedFont) === -1 && my.standardFonts.indexOf(my.selectedFont) === -1) {
                 fonts.push(my.selectedFont)
             }
             return fonts

package/assets/cms/components/customizer/ThemeCustomizer.vue

@@ -178,7 +178,7 @@ export default {
                     url: my.createNewSkinAction,
                     data: {
                         skinName: my.newSkinName,
-                        styles: my.customizerStyles,
+                        styles: JSON.stringify(my.customizerStyles),
                         customCss: my.customizerCustomCss,
                         ccm_token: CCM_SECURITY_TOKEN
                     },
@@ -301,7 +301,7 @@ export default {
             new ConcreteAjaxRequest({
                 url: my.saveSkinAction,
                 data: {
-                    styles: my.customizerStyles,
+                    styles: JSON.stringify(my.customizerStyles),
                     customCss: my.customizerCustomCss,
                     ccm_token: CCM_SECURITY_TOKEN
                 },

package/assets/cms/components/file-manager/Chooser/ExternalFileProvider.vue

@@ -31,6 +31,7 @@
     </div>
     <div>
       <files v-if="keywords"
+             :key-prefix="'external-file-provider' + id"
              :selectedFiles.sync="selectedFiles"
              :resultsFormFactor="formFactor"
              :routePath="routePath + id + '/search/' + keywords"

package/assets/cms/components/file-manager/Chooser/FileManager.vue

@@ -1,11 +1,14 @@
 <template>
     <div>
         <chooser-header :resultsFormFactor.sync="formFactor"
+                        :resultsSearchQuery.sync="searchQuery"
                         :breadcrumb-items="breadcrumbItems"
+                        :enable-search="searchChooserIsEnabled"
                         @breadcrumbItemClick="activeFolder = $event.folderId"
                         :title="title"/>
 
         <files :selectedFiles.sync="selectedFiles"
+               key-prefix="file-manager"
                :resultsFormFactor="formFactor"
                :routePath="routePath + activeFolder"
                :enable-pagination="true"
@@ -32,9 +35,15 @@ export default {
         selectedFiles: [],
         breadcrumbItems: [],
         routePath: '/ccm/system/file/chooser/get_folder_files/',
-        formFactor: 'grid'
+        formFactor: 'grid',
+        searchQuery: ''
     }),
     props: {
+        searchChooserIsEnabled: {
+            type: Boolean,
+            required: false,
+            default: true
+        },
         resultsFormFactor: {
             type: String,
             required: false,
@@ -59,7 +68,7 @@ export default {
     },
     created() {
         this.activeFolder = this.$props.startFolder
-        this.fetchBreadcrumb(this.activeFolder)
+        // this.fetchBreadcrumb(this.activeFolder) // Not sure why this is here, it leads to duplicate requests and I don't think it needs to be
     },
     methods: {
         fetchBreadcrumb(folderId = '') {
@@ -81,15 +90,19 @@ export default {
         formFactor(value) {
             this.$emit('update:resultsFormFactor', value)
         },
+        searchQuery(value) {
+            this.$emit('update:resultsSearchQuery', value)
+        },
         startFolder(value) {
             this.activeFolder = value
-            this.fetchBreadcrumb(value)
+            // this.fetchBreadcrumb(value) // Not sure why this is here, it leads to duplicate requests and I don't think it needs to be
         }
     },
     mounted() {
         this.formFactor = this.resultsFormFactor
+        this.searchQuery = this.resultsSearchQuery
         this.activeFolder = this.$props.startFolder
-        this.fetchBreadcrumb(this.activeFolder)
+        // this.fetchBreadcrumb(this.activeFolder) // Not sure why this is here, it leads to duplicate requests and I don't think it needs to be
     }
 }
 </script>

package/assets/cms/components/file-manager/Chooser/FileSets.vue

@@ -17,6 +17,7 @@
         </div>
         <div class="mt-3" v-show="activeSet">
             <files v-if="activeSet"
+                   key-prefix="file-sets"
                    :selectedFiles.sync="selectedFiles"
                    :resultsFormFactor="formFactor"
                    :routePath="routePath + activeSet"

package/assets/cms/components/file-manager/Chooser/Files.vue

@@ -3,10 +3,10 @@
         <svg v-if="isLoading" class="ccm-loader-dots"><use xlink:href="#icon-loader-circles" /></svg>
         <div v-if="!isLoading">
             <div class="ccm-image-cell-grid container-fluid ps-0" v-if="resultsFormFactor === 'grid'">
-                <div v-for="row in rows" class="row text-center" :key="row.index">
-                    <div class="col-md-3" v-for="file in row" :key="(file.fID || file.treeNodeID) + 'grid'">
+                <div v-for="(row, index) in rows" class="row text-center" :key="keyPrefix + '-' + index">
+                    <div class="col-md-3" v-for="file in row" :key="keyPrefix + '-' + (file.fID || file.treeNodeID) + '-grid'">
                         <div class="ccm-image-cell" @click="onItemClick(file)">
-                            <label class="form-label" :for="'file-' + (file.fID || file.treeNodeID)"><span v-html="file.resultsThumbnailImg"></span></label>
+                            <label class="form-label" :data-bs-content="getGridHoverContent(file)" :for="'file-' + (file.fID || file.treeNodeID)"><span v-html="file.resultsThumbnailImg"></span></label>
                             <div class="ccm-image-cell-title pt-1">
                                 <div class="form-check form-check-inline">
                                     <input :disabled="!canChooseFile(file)" class="form-check-input" type="checkbox" v-if="multipleSelection && !file.isFolder" v-model="selectedFiles" :id="'file-' + file.fID" :value="file.fID">
@@ -19,7 +19,7 @@
                 </div>
             </div>
             <div v-if="resultsFormFactor === 'list'">
-                <table class="table ccm-image-chooser-list-view ccm-search-results-table">
+                <table class="table align-middle ccm-image-chooser-list-view ccm-search-results-table">
                     <thead>
                     <tr>
                         <th></th>
@@ -33,18 +33,24 @@
                             <a v-if="enableSort" href="#" @click.prevent="sortBy(dateSortColumn)">{{ i18n.uploaded }}</a>
                             <span v-else>{{ i18n.uploaded }}</span>
                         </th>
+                        <th>{{ i18n.size }}</th>
+                        <th>{{ i18n.width }}</th>
+                        <th>{{ i18n.height }}</th>
                     </tr>
                     </thead>
                     <tbody>
-                        <tr v-for="file in fileList" :key="(file.fID || file.treeNodeID) + 'list'" @click="onItemClick(file)">
+                        <tr v-for="file in fileList" :key="keyPrefix + '-' + (file.fID || file.treeNodeID) + '-list'" @click="onItemClick(file)">
                             <td>
                                 <input type="checkbox" :disabled="!canChooseFile(file)" v-if="multipleSelection && !file.isFolder" v-model="selectedFiles" :id="'file-' + file.fID" :value="file.fID">
                                 <input type="radio" :disabled="!canChooseFile(file)" v-if="!multipleSelection && !file.isFolder" v-model="selectedFiles" :id="'file-' + file.fID" :value="file.fID">
                             </td>
-                            <td class="ccm-image-chooser-icon"><span v-html="file.resultsThumbnailImg" width="32" height="32"></span></td>
+                            <td class="ccm-image-chooser-icon"><div :data-bs-content="getListHoverContent(file)"><span v-html="file.resultsThumbnailImg" width="32" height="32"></span></div></td>
                             <td>{{file.fID}}</td>
                             <td>{{file.title}}</td>
                             <td>{{file.fvDateAdded}}</td>
+                            <td>{{file.size}}</td>
+                            <td>{{file.attributes ? file.attributes.width : ''}}</td>
+                            <td>{{file.attributes ? file.attributes.height : ''}}</td>
                         </tr>
                     </tbody>
                 </table>
@@ -71,7 +77,7 @@
 }
 </style>
 <script>
-/* global CCM_DISPATCHER_FILENAME, ConcreteAjaxRequest */
+/* global CCM_DISPATCHER_FILENAME, bootstrap, ConcreteAjaxRequest */
 /* eslint-disable no-new */
 import Pagination from '../../Pagination'
 
@@ -83,7 +89,10 @@ export default {
         i18n: {
             id: 'ID',
             name: 'Name',
-            uploaded: 'Uploaded'
+            uploaded: 'Uploaded',
+            size: 'Size',
+            width: 'Width',
+            height: 'Height'
         },
         currentPage: 1,
         rows: false,
@@ -103,6 +112,11 @@ export default {
         filters: {
             type: Array
         },
+        keyPrefix: {
+            type: String,
+            required: false,
+            default: ''
+        },
         enableSort: {
             type: Boolean,
             required: false,
@@ -174,6 +188,40 @@ export default {
         }
     },
     methods: {
+        getGridHoverContent(file) {
+            if (!file.isFolder) {
+                var title = ''
+                if (file.resultsThumbnailDetailImg) {
+                    title += '<div>' + file.resultsThumbnailDetailImg + '</div>'
+                }
+                title += '<div class="text-center"><b>' + file.size + '</b></div>'
+                if (file.attributes && file.attributes.width && file.attributes.height) {
+                    title += '<div class="text-center text-muted"><small>' + file.attributes.width + 'x' + file.attributes.height + '</small></div>'
+                }
+                return title
+            }
+        },
+        getListHoverContent(file) {
+            if (!file.isFolder) {
+                if (file.resultsThumbnailDetailImg) {
+                    return '<div>' + file.resultsThumbnailDetailImg + '</div>'
+                }
+            }
+        },
+        setupHoverPreview() {
+            var $cells = $(this.$el).find('[data-bs-content]')
+            $cells.each(function(i) {
+                return new bootstrap.Popover($cells.get(i), {
+                    container: '#ccm-tooltip-holder',
+                    customClass: 'ccm-image-chooser-popover',
+                    placement: 'bottom',
+                    delay: 500,
+                    trigger: 'hover',
+                    fallbackPlacements: ['top'],
+                    html: true
+                })
+            })
+        },
         canChooseFile(file) {
             var canChooseFile = -1
             if (this.filters) {
@@ -284,6 +332,17 @@ export default {
         }
     },
     watch: {
+        resultsFormFactor(value) {
+            var my = this
+            setTimeout(function() {
+                my.setupHoverPreview()
+            }, 5)
+        },
+        viewIsLoading(value) {
+            if (!value) {
+                this.setupHoverPreview()
+            }
+        },
         selectedFiles(value) {
             this.$emit('update:selectedFiles', Array.isArray(value) ? value : [value])
         },

package/assets/cms/components/file-manager/Chooser/FolderBookmark.vue

@@ -5,7 +5,8 @@
                         @breadcrumbItemClick="activeFolder = $event.folderId"
                         :title="title"/>
 
-        <files :selectedFiles.sync="selectedFiles"
+        <files :key-prefix="'folder-bookmark' + activeFolder"
+               :selectedFiles.sync="selectedFiles"
                :resultsFormFactor="formFactor"
                :routePath="routePath + activeFolder"
                :enable-pagination="true"

package/assets/cms/components/file-manager/Chooser/Header.vue

@@ -1,14 +1,27 @@
 <template>
     <div class="row">
-        <div class="mb-3 col-sm-12">
-            <header>
+        <div class="mb-3">
+            <header class="hstack align-items-start gap-3">
+                <div class="me-auto">
+                    <h5>{{title}}</h5>
+                    <breadcrumb v-if="breadcrumbItems" :breadcrumb-items="breadcrumbItems" @itemClick="onBreadcrumbItemClick" />
+                </div>
+                <form @submit.prevent="search" v-if="enableSearch">
+                    <div class="ccm-header-search-form-input input-group input-group-sm">
+                        <input type="text" class="form-control border-end-0" :placeholder="i18n.search"
+                               autocomplete="false" v-model="searchText">
+                        <button type="submit" class="input-group-icon">
+                            <svg width="16" height="16">
+                                <use xlink:href="#icon-search"/>
+                            </svg>
+                        </button>
+                    </div>
+                </form>
                 <button type="button" @click="toggleFormFactor" v-if="showFormFactorSelector"
-                        class="btn btn-sm float-end btn-secondary">
+                        class="btn btn-sm btn-secondary">
                     <i v-if="resultsFormFactor === 'grid'" class="fas fa-th"></i>
                     <i v-if="resultsFormFactor === 'list'" class="fas fa-list"></i>
                 </button>
-                <h5>{{title}}</h5>
-                <breadcrumb v-if="breadcrumbItems" :breadcrumb-items="breadcrumbItems" @itemClick="onBreadcrumbItemClick" />
             </header>
         </div>
     </div>
@@ -31,6 +44,14 @@ export default {
             required: false,
             default: true
         },
+        enableSearch: {
+            type: Boolean,
+            required: false,
+            default: false
+        },
+        resultsSearchQuery: {
+            type: String
+        },
         resultsFormFactor: {
             type: String,
             required: false,
@@ -42,7 +63,24 @@ export default {
             required: false
         }
     },
+    data() {
+        return {
+            i18n: {
+                search: 'Search'
+            },
+            searchText: ''
+        }
+    },
+    watch: {
+        resultsSearchQuery(value) {
+            this.searchText = value
+        }
+    },
     methods: {
+        search() {
+            const my = this
+            my.$emit('update:resultsSearchQuery', my.searchText)
+        },
         toggleFormFactor() {
             const my = this
             if (this.resultsFormFactor === 'grid') {
@@ -54,6 +92,15 @@ export default {
         onBreadcrumbItemClick(item) {
             this.$emit('breadcrumbItemClick', item)
         }
+    },
+    mounted() {
+        if (window.ccmi18n_filemanager) {
+            for (const key in this.i18n) {
+                if (window.ccmi18n_filemanager[key]) {
+                    this.i18n[key] = window.ccmi18n_filemanager[key]
+                }
+            }
+        }
     }
 }
 </script>

package/assets/cms/components/file-manager/Chooser/RecentUploads.vue

@@ -1,8 +1,11 @@
 <template>
     <div>
-        <chooser-header :resultsFormFactor.sync="formFactor" :title="title"/>
+        <chooser-header :resultsFormFactor.sync="formFactor"
+                        :resultsSearchQuery.sync="searchQuery"
+                        :title="title"/>
 
         <files :selectedFiles.sync="selectedFiles"
+               key-prefix="recent-uploads"
                :resultsFormFactor="formFactor"
                :filters="filters"
                routePath="/ccm/system/file/chooser/recent"
@@ -22,7 +25,8 @@ export default {
     },
     data: () => ({
         selectedFiles: [],
-        formFactor: 'grid'
+        formFactor: 'grid',
+        searchQuery: ''
     }),
     props: {
         resultsFormFactor: {
@@ -49,10 +53,14 @@ export default {
         },
         formFactor(value) {
             this.$emit('update:resultsFormFactor', value)
+        },
+        searchQuery(value) {
+            this.$emit('update:resultsSearchQuery', value)
         }
     },
     mounted() {
         this.formFactor = this.resultsFormFactor
+        this.searchQuery = this.resultsSearchQuery
     }
 }
 </script>

package/assets/cms/components/file-manager/Chooser/SavedSearch.vue

@@ -20,6 +20,7 @@
         </div>
         <div class="mt-3" v-show="activeSearchPreset">
             <files v-if="activeSearchPreset"
+                   key-prefix="saved-search"
                    :selectedFiles.sync="selectedFiles"
                    :resultsFormFactor="formFactor"
                    :filters="filters"

package/assets/cms/components/file-manager/Chooser/Search.vue

@@ -1,22 +1,10 @@
 <template>
     <div>
-        <chooser-header :resultsFormFactor.sync="formFactor" :title="title"/>
+        <chooser-header :resultsFormFactor.sync="formFactor"
+                        :resultsSearchQuery.sync="searchQuery"
+                        :enable-search="true"
+                        :title="title"/>
 
-        <div class="row mb-3">
-            <div class="col-md-4 ms-auto">
-                <form @submit.prevent="search">
-                    <div class="ccm-header-search-form-input input-group">
-                        <input type="text" class="form-control border-end-0" :placeholder="i18n.search"
-                               autocomplete="false" v-model="searchText">
-                        <button type="submit" class="input-group-icon">
-                            <svg width="16" height="16">
-                                <use xlink:href="#icon-search"/>
-                            </svg>
-                        </button>
-                    </div>
-                </form>
-            </div>
-        </div>
         <div v-show="!keywords" class="text-center mt-5">
             <span class="search-icon my-4">
                 <Icon icon="search" type="fas" color="#f4f4f4"/>
@@ -25,6 +13,7 @@
         </div>
         <div>
             <files v-if="keywords"
+                   key-prefix="search"
                    :selectedFiles.sync="selectedFiles"
                    :resultsFormFactor="formFactor"
                    :routePath="routePath + keywords"
@@ -50,14 +39,13 @@ export default {
     },
     data: () => ({
         i18n: {
-            search: 'Search',
             initialSearchChooserTip: "Let's get some info on what you're looking for."
         },
-        searchText: '',
         keywords: '',
         selectedFiles: [],
         routePath: '/ccm/system/file/chooser/search/',
-        formFactor: 'grid'
+        formFactor: 'grid',
+        searchQuery: ''
     }),
     props: {
         resultsFormFactor: {
@@ -66,6 +54,9 @@ export default {
             default: 'grid', // grid | list
             validator: value => ['grid', 'list'].indexOf(value) !== -1
         },
+        resultsSearchQuery: {
+            type: String
+        },
         title: {
             type: String,
             required: true
@@ -89,6 +80,9 @@ export default {
         },
         formFactor(value) {
             this.$emit('update:resultsFormFactor', value)
+        },
+        searchQuery(value) {
+            this.keywords = value
         }
     },
     mounted() {
@@ -100,6 +94,7 @@ export default {
             }
         }
         this.formFactor = this.resultsFormFactor
+        this.searchQuery = this.resultsSearchQuery
     }
 }
 </script>

package/assets/cms/components/file-manager/Chooser.vue

@@ -4,8 +4,8 @@
             <div class="row h-100">
                 <div class="col-4 border-end p-3">
                     <ul class="nav flex-column">
-                        <li class="nav-item" v-for="item in choosers" :key="item.id">
-                            <a :class="{'nav-link': true, 'active': activeNavItem.id === item.id}"
+                        <li class="nav-item" v-for="item in choosers" :key="item.componentKey + '-' + item.id">
+                            <a :class="{'nav-link': true, 'active': activeNavItem.id === item.id && activeNavItem.componentKey === item.componentKey}"
                                @click.prevent="activateTab(item)"
                                href="javascript:void(0)">
                                 {{item.title}}
@@ -14,8 +14,8 @@
                     </ul>
                     <hr>
                     <ul class="nav flex-column">
-                        <li class="nav-item" v-for="item in uploaders" :key="item.id">
-                            <a :class="{'nav-link': true, 'active': activeNavItem.id === item.id}"
+                        <li class="nav-item" v-for="item in uploaders" :key="item.componentKey + '-' + item.id">
+                            <a :class="{'nav-link': true, 'active': activeNavItem.id === item.id && activeNavItem.componentKey === item.componentKey}"
                                @click.prevent="activateTab(item)"
                                href="javascript:void(0)">
                                 {{item.title}}
@@ -32,6 +32,8 @@
                                    :extraData="activeNavItem.data || {}"
                                    :multipleSelection="multipleSelection"
                                    :selectedFiles.sync="selectedFiles"
+                                   :searchChooserIsEnabled="searchChooserIsEnabled()"
+                                   :resultsSearchQuery.sync="resultsSearchQuery"
                                    :resultsFormFactor.sync="resultsFormFactor"
                                    :filesReadyToUpload.sync="filesReadyToUpload"
                                    :filters="filters"
@@ -86,6 +88,7 @@ export default {
                 search: 'Search',
                 uploadFiles: 'Upload Files'
             },
+            resultsSearchQuery: '',
             filesReadyToUpload: 0,
             activeNavItem: null,
             resultsFormFactor: 'grid',
@@ -155,9 +158,23 @@ export default {
         },
         uploaders() {
             this.applyLocalization()
+        },
+        resultsSearchQuery(value) {
+            if (value) {
+                this.activateTabByKey('search')
+            }
         }
     },
     methods: {
+        searchChooserIsEnabled() {
+            var enabled = false
+            this.choosers.forEach(function(chooser) {
+                if (chooser.id === 'search') {
+                    enabled = true
+                }
+            })
+            return enabled
+        },
         applyLocalization() {
             if (this.choosers) {
                 for (const chooser of this.choosers) {

package/assets/cms/components/form/ConcreteFileInput.vue

@@ -72,6 +72,12 @@ export default {
                         this.$emit('change', null)
                     }
                 }
+                if (!this.isFirstRun) {
+                    // Fire the jQuery change event.
+                    // @deprecated - do not use this unless you have to. Use this component directly instead and listen
+                    // to its change event. This will be removed when the jQuery dependency is removed.
+                    $('input[name=' + this.inputName + ']').trigger('change')
+                }
                 this.isFirstRun = false
             }
         }

package/assets/cms/components/form/ConcreteThemeColorInput.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="mb-3">
+    <div class="mb-3 ccm-context-theme">
         <select :name="inputName" data-select="theme-colors" data-width="100%">
             <option v-for="color in colorCollection.colors" :selected="selectedColor == color.variable" :data-content="dataContentAttribute(color)" :value="color.variable">{{ color.name }}</option>
         </select>

package/assets/cms/js/jquery-awesome-rating.js

@@ -16,9 +16,9 @@
         var toggleStarEl
         toggleStarEl = function($star, state) {
             if (state) {
-                return $star.removeClass('fa-star-o').addClass('fa-star')
+                return $star.removeClass('far').addClass('fas')
             } else {
-                return $star.removeClass('fa-star').addClass('fa-star-o')
+                return $star.removeClass('fas').addClass('far')
             }
         }
         return $.fn.awesomeStarRating = function(options) {
@@ -39,7 +39,7 @@
             stars = []
             _results = []
             for (i = _i = 1; _i <= 5; i = ++_i) {
-                $star = $('<i class="fa"></i>')
+                $star = $('<i class="fa-star"></i>')
                 toggleStarEl($star, i <= ratingScore)
                 $ratingContainer.append($star)
                 stars[i] = $star

package/assets/cms/scss/_toolbar.scss

@@ -518,3 +518,11 @@ ul.ccm-mobile-menu {
     }
   }
 }
+
+html.ccm-toolbar-visible {
+  .ccm-page {
+    // This used to be dynamically included in the theme. Now we're moving it here.
+    // The purpose of this code is to push the content of the page down if the toolbar appears at the top.
+    margin-top: 48px;
+  }
+}

package/assets/cms/scss/bootstrap/_reboot.scss

@@ -20,35 +20,6 @@
 }
 
 
-// Root
-//
-// Ability to the value of the root font sizes, affecting the value of `rem`.
-// null by default, thus nothing is generated.
-
-:root {
-  font-size: $font-size-root;
-
-  @if $enable-smooth-scroll {
-    @media (prefers-reduced-motion: no-preference) {
-      scroll-behavior: smooth;
-    }
-  }
-}
-
-
-// Body
-//
-// 1. Remove the margin in all browsers.
-// 2. As a best practice, apply a default `background-color`.
-// 3. Prevent adjustments of font size after orientation changes in iOS.
-// 4. Change the default tap highlight to be completely transparent in iOS.
-
-html.ccm-toolbar-visible {
-  // We _could_ set this by setting font-size-root, but we don't really want to screw with the theme loading this
-  // unless we know the toolbar is visible.
-  font-size: 16px; // By setting this here, rem declarations in BS5 work off of 16px, and the base theme can do whatever it wants at body
-}
-
 .ccm-ui {
   margin: 0; // 1
   font-family: $font-family-base;

package/assets/cms/scss/file-manager/_file-chooser.scss

@@ -1,9 +1,18 @@
 .ccm-ui {
+  .ccm-image-chooser-popover {
+    max-width: 400px;
+
+    img {
+      height: auto;
+      margin-bottom: 1rem;
+      max-width: 100%;
+    }
+  }
+
   table.ccm-image-chooser-list-view {
     img {
       height: 32px;
       width: 32px;
     }
-
   }
 }

package/assets/imagery/scss/frontend/_hero-image.scss

@@ -12,6 +12,13 @@ div.ccm-block-hero-image {
     width: 100%;
   }
 
+  div.ccm-block-hero-image-text {
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  }
+
   div.ccm-block-hero-image-cover {
     z-index: 2;
   }

package/assets/navigation/scss/frontend/_frontend.scss

@@ -1,5 +1,6 @@
 // Core block types
 @import 'page-list';
 @import 'rss-displayer';
+@import 'top-navigation-bar';
 @import 'date-navigation';
 @import 'responsive-navigation';

package/assets/navigation/scss/frontend/_top-navigation-bar.scss

@@ -0,0 +1,39 @@
+@import 'bootstrap/scss/functions';
+@import 'bootstrap/scss/variables';
+@import 'bootstrap/scss/mixins';
+
+// Navigation bar styling
+div.ccm-block-top-navigation-bar {
+
+  @import 'bootstrap/scss/navbar';
+  @import 'bootstrap/scss/forms/input-group';
+
+  .navbar {
+    .navbar-nav {
+      order: 0;
+    }
+  }
+
+  // Logo/brand
+  .navbar-brand {
+    // If this is being included in a BS4 theme we need to reset some parameters
+    float: none;
+    height: auto;
+
+    img {
+      max-height: 38px;
+    }
+  }
+
+  // Search
+  form {
+    display: flex;
+    margin-left: auto;
+    order: 1;
+
+    .btn {
+      background: none;
+      padding: $btn-padding-x-sm $btn-padding-y-sm;
+    }
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@concretecms/bedrock",
-  "version": "1.1.3",
+  "version": "1.1.8",
   "description": "The asset framework and dependencies for Concrete CMS.",
   "scripts": {
     "lint": "standardx \"**/*.{js,vue}\" && stylelint assets/**/*.{scss,vue}",
@@ -46,7 +46,7 @@
     "selectize-bootstrap4-theme": "^2.0.2",
     "spectrum-colorpicker": "^1.8.1",
     "tristate": "^1.2.0",
-    "underscore": "^1.11.0",
+    "underscore": "^1.13",
     "v-calendar": "^1.0.8",
     "vue": "^2.6.12",
     "vue-js-toggle-button": "^1.3.3",