"user block"
Bootstrap 3.0.0 Snippet by irinashuvalova

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div id="userBlockApp" class="user-info"> <i class="settings-ribbon settings-icon settings-icon--gray js-ribbon-settings"></i> <div class="user-info__photo right"> <img src="{{user.Photo}}" alt=""> </div> <div class="user-info__title right"> <h4 href="#" class="user-title">{{user.Firstname}}<br /> {{user.Lastname}}</h4> <a href="#" class="user-link">Мой кабинет</a> </div> <div class="notifications-widget header__notifications right"> <i class="notifications-widget__icon"></i> <div class="counter-sm counter-sm--red notifications-widget__count"> 8 </div> </div> <i class="settings-header__icon"></i> </div> <script> (function (webPartId, initialState) { new UserBlockWidget({ el: '#userBlockApp', data: function () { return { user: User || {} } } }); })(__WebPartID__, __INITIAL_STATE__); </script>
const path = require('path'); const merge = require('webpack-merge'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const baseConfig = require('../webpack.config.base'); const project = __dirname .split(path.sep) .pop(); const template = (name) => path.resolve(__dirname, 'L', project, name); const config = { entry: { 'userBlock': ['./UserBlock/UserBlock.js', './UserBlock/userblock.less'] }, plugins: [ new HtmlWebpackPlugin({ template: './UserBlock/UserBlock.html', filename: template('UserBlock.html'), chunks: ['userBlock'], inject: 'head' }) ] }; module.exports = merge(baseConfig(project), config);
const path = require('path'); const webpack = require('webpack'); const CleanWebpackPlugin = require('clean-webpack-plugin'); const ExtractTextPlugin = require('extract-text-webpack-plugin'); const core = ''; const layouts = (dir, project) => path.resolve(dir, project, 'Layouts', project); module.exports = function (project) { return { devtool: 'eval', resolve: { alias: { 'core': layouts(__dirname, core) } }, output: { path: layouts(__dirname, project), filename: '[name].[hash].js', publicPath: '/_l/' + project.toLowerCase() + '/' }, module: { rules: [ { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader' }, { test: /\.css$/, use: ExtractTextPlugin.extract({ fallback: "style-loader", use: "css-loader" }) }, { test: /\.less$/i, use: ExtractTextPlugin.extract(['css-loader', 'less-loader']) }, { test: /\.vue$/, loader: 'vue-loader', options: { loaders: { css: ExtractTextPlugin.extract(['css-loader']), less: ExtractTextPlugin.extract(['css-loader', 'less-loader']) } } }, { test: /\.(jpe?g|png|gif)$/, loader: 'file-loader' } ] }, externals: { 'jquery': 'jQuery', 'Vue': 'Vue', 'VueRouter': 'VueRouter', 'Vuex': 'Vuex' }, plugins: [ new webpack.NoEmitOnErrorsPlugin(), new CleanWebpackPlugin([layouts(__dirname, project)], { watch: true }), new ExtractTextPlugin('[name].[contenthash].css') ] } };

Related: See More


Questions / Comments: