Sue Busher Posted April 13, 2022 Share Posted April 13, 2022 AI am interested in improving how we show documents on our sites. Something like the above image where the some 'graphics' are static, but others are links). Does anyone know if this is possible via the text editor? Link to comment Share on other sites More sharing options...
Graham Quince Posted April 14, 2022 Share Posted April 14, 2022 Hi Sue, The Text widget can display some special characters, but that does depend on the fonts available (I think). This website is pretty handy for finding then copying and pasting icons: https://copychar.cc/ I find that if I make each link it's own single-celled table, it becomes easy to copy and paste and retain the layout. If you're trying to tidy up your policy pages, I recently posted this code: This doesn't look identical to yours, but it's all in HTML so can be adapted easily enough. The benefit of the HTML solution is that you can use both Frog's icons as fonts and we import FontAwesome, which is packed with icons. Graham Link to comment Share on other sites More sharing options...
Graham Quince Posted August 17, 2022 Share Posted August 17, 2022 Something like this: <style> .policy_doc { border: 1px solid #CCCCCC; margin-bottom: 10px; padding: 5px; border-radius: 5px; background: #FFFFFF; color: #000000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .policy_doc:hover { background: #dddddd; } .policy_icon { font-size: 20px; margin-right: 10px; margin-left: 10px; position: relative; top: 2px; cursor: pointer; } .policy_print { margin-right: 0px; } .file_name { font-size: 16px; font-weight: bold; } .date { font-size: 10px; } </style> <div class="file_list"></div> <script type="text/javascript"> var forceDownload = '?mode=download'; var fileList = arguments[0].find('.file_list'); var baseURL = Frog.Utilities.getBaseUrl(); var imagebank = baseURL+'/app/public/sprite/os-icon-ext/sprite.png?v=2106_0_15'; var fileDropUUID = 'FILE_DROP_UUID'; Frog.Model.api('filedrop.get', { filedrop: fileDropUUID }).done(function(filesResponse) { var files = filesResponse.data.resources; files.sort((a, b) => (a.file.name > b.file.name) ? 1 : -1); $.each(files, function(index, file) { if (file.deleted == '0') { var nameToShowArray = file.file.name.split('_'); var nameToShow = nameToShowArray[0]; var dateAdded = moment(file.date).format('DD/MM/YYYY'); fileList.append( '<div class="policy_doc">'+ '<div class="content-wrapper">'+ '<div class="">'+ '<span class="fa fa-file policy_icon"></span>'+ '<span class="file_name">'+nameToShow+'</span>'+ '<span class="ff-print-mono policy_icon policy_print" data-name="'+nameToShow+'" data-filelink="'+file.file.uuid+'"></span>'+ '<span class="ff-download-mono policy_icon policy_dl" data-name="'+nameToShow+'" data-filelink="'+file.file.uuid+'"></span>'+ '<span class="date">Updated: '+dateAdded+'</span>'+ '</div>'+ '</div>' ); } }) }); $(fileList).on('click', '.policy_dl', function(el){ Frog.Utilities.download( baseURL+'/app/file/resource/'+el.currentTarget.dataset.filelink + forceDownload,true ); }); $(fileList).on('click', '.policy_print', function(el){ Frog.Utilities.download( baseURL+'/app/file/resource/'+el.currentTarget.dataset.filelink,true ); }); </script> Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now