├── .babelrc ├── .editorconfig ├── .eslintrc.json ├── .gitignore ├── .prettierrc ├── LICENSE ├── README.md ├── img └── toasts.png ├── jsconfig.json ├── lib ├── index.d.ts ├── index.js ├── semantic-toast-container.jsx ├── semantic-toast.jsx ├── store.js ├── toast.js └── with-transition.jsx ├── package-lock.json ├── package.json └── styles └── react-semantic-alert.css /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["@babel/preset-env", "@babel/preset-react"], 3 | "plugins": [ 4 | "@babel/plugin-proposal-object-rest-spread", 5 | "@babel/plugin-proposal-class-properties", 6 | "@babel/plugin-transform-async-to-generator", 7 | [ 8 | "module-resolver", 9 | { 10 | "root": ["./lib"] 11 | } 12 | ] 13 | ], 14 | "retainLines": true 15 | } 16 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # editorconfig.org 2 | root = true 3 | 4 | [*] 5 | indent_style = space 6 | indent_size = 4 7 | end_of_line = lf 8 | charset = utf-8 9 | trim_trailing_whitespace = true 10 | insert_final_newline = true 11 | -------------------------------------------------------------------------------- /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ["airbnb", "prettier", "prettier/react"], 3 | "plugins": ["react", "jsx-a11y", "import"], 4 | "parser": "babel-eslint", 5 | "parserOptions": { 6 | "ecmaVersion": 2018, 7 | "sourceType": "module", 8 | "ecmaFeatures": { 9 | "jsx": true 10 | } 11 | }, 12 | "env": { 13 | "es6": true, 14 | "browser": true, 15 | "node": true 16 | }, 17 | "rules": { 18 | "import/no-unresolved": "off", 19 | "no-prototype-builtins": "off", 20 | "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }], 21 | "react/jsx-props-no-spreading": "off", 22 | "react/prop-types": [2], 23 | "react/no-did-mount-set-state": "off", 24 | "react/destructuring-assignment": "off", 25 | "react/static-property-placement": "off", 26 | "react/state-in-constructor": "off", 27 | "jsx-a11y/anchor-is-valid": [ 28 | "error", 29 | { 30 | "components": ["Link"], 31 | "specialLink": ["to", "hrefLeft", "hrefRight"], 32 | "aspects": ["noHref", "invalidHref", "preferButton"] 33 | } 34 | ] 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | 6 | # Build 7 | build 8 | 9 | # Dependency directories 10 | node_modules/ 11 | 12 | # Optional npm cache directory 13 | .npm 14 | 15 | # Optional eslint cache 16 | .eslintcache 17 | 18 | # Optional REPL history 19 | .node_repl_history 20 | 21 | # OSX 22 | .DS_Store 23 | 24 | # Webstorm directory 25 | .idea/ 26 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "printWidth": 100, 3 | "semi": true, 4 | "singleQuote": true, 5 | "tabWidth": 4, 6 | "trailingComma": "none" 7 | } 8 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # React Semantic Toasts 2 | 3 | Simple and easy Semantic UI animated toast notifications for React 4 | 5 | ![Toasts](/img/toasts.png?raw=true 'Toasts') 6 | 7 | ## Installation 8 | 9 | ```bash 10 | $ npm install --save react-semantic-toasts semantic-ui-react semantic-ui-css 11 | ``` 12 | 13 | ## Usage 14 | 15 | The library does not depend on `semantic-ui-css` anymore, make sure to import `semantic.min.css` or at the very least, to include the following components: 16 | 17 | ```javascript 18 | import 'semantic-ui-css/components/reset.min.css'; 19 | import 'semantic-ui-css/components/site.min.css'; 20 | import 'semantic-ui-css/components/container.min.css'; 21 | import 'semantic-ui-css/components/icon.min.css'; 22 | import 'semantic-ui-css/components/message.min.css'; 23 | import 'semantic-ui-css/components/header.min.css'; 24 | ``` 25 | 26 | Import the library into your project using ES6 module syntax: 27 | 28 | ```javascript 29 | import { SemanticToastContainer, toast } from 'react-semantic-toasts'; 30 | import 'react-semantic-toasts/styles/react-semantic-alert.css'; 31 | ``` 32 | 33 | Render the `SemanticToastContainer` component: 34 | 35 | ```jsx 36 | render() { 37 | return ; 38 | } 39 | ``` 40 | 41 | Fire as many notifications as you want 42 | 43 | ```javascript 44 | setTimeout(() => { 45 | toast( 46 | { 47 | title: 'Info Toast', 48 | description:

This is a Semantic UI toast

49 | }, 50 | () => console.log('toast closed'), 51 | () => console.log('toast clicked'), 52 | () => console.log('toast dismissed') 53 | ); 54 | }, 1000); 55 | 56 | setTimeout(() => { 57 | toast({ 58 | type: 'warning', 59 | icon: 'envelope', 60 | title: 'Warning Toast', 61 | description: 'This is a Semantic UI toast wich waits 5 seconds before closing', 62 | animation: 'bounce', 63 | time: 5000, 64 | onClose: () => alert('you close this toast'), 65 | onClick: () => alert('you click on the toast'), 66 | onDismiss: () => alert('you have dismissed this toast') 67 | }); 68 | }, 5000); 69 | ``` 70 | 71 | ## API 72 | 73 | ### Toast Container 74 | 75 | The `` receives an optional `position` prop, which can be one of `top-right`, `top-center`, `top-left`, `bottom-right`, `bottom-center` or `bottom-left`. 76 | 77 | The type of animation can be specifed using an optional `animation` prop with any supported [SemanticUI animation](https://semantic-ui.com/modules/transition.html) value. If not present, will be derived from the container position. 78 | 79 | ```jsx 80 | 81 | ``` 82 | 83 | #### Max Toasts 84 | 85 | Supply the `maxToasts` prop to `` to control the amount of toasts visible at any given time. 86 | 87 | - `maxToasts` - The amount of toasts to display at once. On new toasts, the toaster will dismiss the oldest toast to say within the limit. 88 | 89 | ```jsx 90 | 91 | ``` 92 | 93 | ### Toast 94 | 95 | The `toast` notification function receives a toast options object and optional close, click and dismiss callbacks as function arguments: 96 | 97 | ```javascript 98 | toast(options, onClose, onClick, onDismiss); 99 | ``` 100 | 101 | #### Toast Options 102 | 103 | - `title` - The header of the toast 104 | - `description` - The content of the toast 105 | - `type` - Can be one of `info`, `success`, `warning`, or `error` 106 | - `icon` - Override the default icon 107 | - `color` - Override color with [semantic values](https://react.semantic-ui.com/collections/message/#variations-color) 108 | - `size` - Size of toast with [semantic values](https://react.semantic-ui.com/collections/message/#variations-size) 109 | - `list` - Array of strings for showing an item menu inside the toast 110 | - `time` - Duration to keep the toast open, 0 to wait until closed by the user 111 | - `onClose` - The function that will be called when the toast is closed (either if you have clicked the close sign or if the toast has been closed after `time` has passed) 112 | - `onClick` - The function that will be called when you click on the toast 113 | - `onDismiss` - The function that will be called when you click to close the toast. onClose function will be called afterwards. 114 | - `animation` - Override the default toast container animation 115 | 116 | ## License 117 | 118 | Licensed under MIT 119 | -------------------------------------------------------------------------------- /img/toasts.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/academia-de-codigo/react-semantic-toasts/c8b3513db687b97bab4e1b100ef26dcb7f2ca858/img/toasts.png -------------------------------------------------------------------------------- /jsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es2017", 4 | "allowSyntheticDefaultImports": false, 5 | "baseUrl": "src", 6 | "module": "es6", 7 | "paths": { 8 | "*": ["lib/*"] 9 | } 10 | }, 11 | "exclude": ["node_modules", "build"] 12 | } 13 | -------------------------------------------------------------------------------- /lib/index.d.ts: -------------------------------------------------------------------------------- 1 | declare module 'react-semantic-toasts' { 2 | import { SemanticICONS, SemanticSIZES, SemanticCOLORS } from 'semantic-ui-react' 3 | type ContainerPosition = 'top-right' | 'top-center' | 'top-left' | 'bottom-right' | 'bottom-center' | 'bottom-left' 4 | type SemanticAnimation = 'scale' | 'zoom' | 'fade' | 'fade up' | 'fade down' | 'fade left' | 'fade right' | 'horizontal flip' | 'vertical flip' | 'drop' | 5 | 'fly left' | 'fly right' | 'fly down' | 'fly up' | 'swing left' | 'swing right' | 'swing up' | 'swing down' | 'browse' | 'browse right' | 'slide down' | 6 | 'slide up' | 'slide left' | 'slide right' | 'jiggle' | 'flash' | 'shake' | 'pulse' | 'tada' | 'bounce' | 'glow' 7 | type ToastType = 'info' | 'success' | 'warning' | 'error' 8 | 9 | interface ToastOptions { 10 | title: string 11 | description?: string 12 | type?: ToastType 13 | icon?: SemanticICONS 14 | time?: number 15 | animation?: SemanticAnimation 16 | size?: SemanticSIZES 17 | color?: SemanticCOLORS 18 | } 19 | 20 | const SemanticToastContainer: ( 21 | props: { 22 | position?: ContainerPosition 23 | animation?: SemanticAnimation 24 | className?: string 25 | maxToasts?: number 26 | } 27 | ) => JSX.Element 28 | 29 | const toast: ( 30 | options: ToastOptions, 31 | onClose?: () => void, 32 | onClick?: () => void, 33 | onDismiss?: () => void, 34 | ) => void 35 | 36 | export { SemanticToastContainer, toast, ToastOptions } 37 | } 38 | -------------------------------------------------------------------------------- /lib/index.js: -------------------------------------------------------------------------------- 1 | import SemanticToastContainer from './semantic-toast-container'; 2 | import { toast } from './toast'; 3 | 4 | export { SemanticToastContainer, toast }; 5 | -------------------------------------------------------------------------------- /lib/semantic-toast-container.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import PropTypes from 'prop-types'; 3 | 4 | import SemanticToast from './semantic-toast'; 5 | import { store } from './toast'; 6 | 7 | /* eslint-disable no-useless-computed-key */ 8 | const closeAnimations = { 9 | ['top-right']: 'fly left', 10 | ['top-center']: 'fly down', 11 | ['top-left']: 'fly right', 12 | ['bottom-right']: 'fly left', 13 | ['bottom-center']: 'fly up', 14 | ['bottom-left']: 'fly right' 15 | }; 16 | 17 | class SemanticToastContainer extends Component { 18 | static propTypes = { 19 | position: PropTypes.oneOf([ 20 | 'top-right', 21 | 'top-center', 22 | 'top-left', 23 | 'bottom-right', 24 | 'bottom-center', 25 | 'bottom-left' 26 | ]), 27 | animation: PropTypes.string, 28 | className: PropTypes.string, 29 | maxToasts: PropTypes.number, 30 | }; 31 | 32 | static defaultProps = { 33 | position: 'top-right', 34 | animation: null, 35 | className: '', 36 | maxToasts: null 37 | }; 38 | 39 | state = { 40 | toasts: [] 41 | }; 42 | 43 | componentDidMount() { 44 | store.subscribe(this.updateToasts); 45 | } 46 | 47 | componentDidUpdate() { 48 | // If we're above the limit after adding a new toast, and the maxToasts prop is set. 49 | if (this.props.maxToasts && this.state.toasts.length > this.props.maxToasts) { 50 | // Close the oldest toast. 51 | this.onClose(this.state.toasts[0].id); 52 | } 53 | } 54 | 55 | componentWillUnmount() { 56 | store.unsubscribe(this.updateToasts); 57 | } 58 | 59 | onClose = toastId => { 60 | const toast = this.state.toasts.find(value => value.id === toastId); 61 | 62 | // toast has been removed already, fixes #1 63 | if (!toast) { 64 | return; 65 | } 66 | 67 | store.remove(toast); 68 | 69 | if (toast.onClose) { 70 | toast.onClose(); 71 | } 72 | }; 73 | 74 | updateToasts = () => { 75 | // Add the new toast data to state. 76 | this.setState({ 77 | toasts: store.data 78 | }); 79 | }; 80 | 81 | render() { 82 | const { animation: containerAnimation, position, className } = this.props; 83 | const { toasts } = this.state; 84 | 85 | return toasts.length ? ( 86 |
87 | {toasts.map(toast => { 88 | const { 89 | id, 90 | type = 'info', 91 | title = '', 92 | description = '', 93 | icon, 94 | time, 95 | size, 96 | color, 97 | list, 98 | onClick, 99 | onDismiss, 100 | animation 101 | } = toast; 102 | return ( 103 | 120 | ); 121 | })} 122 |
123 | ) : null; 124 | } 125 | } 126 | 127 | export default SemanticToastContainer; 128 | -------------------------------------------------------------------------------- /lib/semantic-toast.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import { Message } from 'semantic-ui-react'; 4 | import withTransition from './with-transition'; 5 | 6 | const icons = { 7 | info: 'announcement', 8 | success: 'checkmark', 9 | error: 'remove', 10 | warning: 'warning circle' 11 | }; 12 | 13 | function SemanticToast({ type, title, description, onClose, onDismiss, icon, ...props }) { 14 | const computedIcon = icon || icons[type]; 15 | 16 | const onDispel = e => { 17 | e.stopPropagation(); 18 | onDismiss(); 19 | onClose(); 20 | }; 21 | 22 | return ( 23 | 32 | ); 33 | } 34 | 35 | SemanticToast.propTypes = { 36 | type: PropTypes.oneOf(['info', 'success', 'error', 'warning']).isRequired, 37 | title: PropTypes.string.isRequired, 38 | description: PropTypes.oneOfType([ 39 | PropTypes.arrayOf(PropTypes.string), 40 | PropTypes.string, 41 | PropTypes.node 42 | ]).isRequired, 43 | icon: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]), 44 | onDismiss: PropTypes.func, 45 | onClose: PropTypes.func 46 | }; 47 | 48 | SemanticToast.defaultProps = { 49 | onDismiss: () => undefined, 50 | onClose: () => undefined, 51 | icon: undefined 52 | }; 53 | 54 | export default withTransition(SemanticToast); 55 | -------------------------------------------------------------------------------- /lib/store.js: -------------------------------------------------------------------------------- 1 | class Store { 2 | subscribers = []; 3 | 4 | items = []; 5 | 6 | subscribe(cb) { 7 | this.subscribers.push(cb); 8 | } 9 | 10 | unsubscribe(cb) { 11 | this.subscribers = this.subscribers.filter(subscriber => 12 | subscriber !== cb ? subscriber : undefined 13 | ); 14 | } 15 | 16 | notify() { 17 | this.subscribers.forEach(subscriber => subscriber()); 18 | } 19 | 20 | add(item) { 21 | this.items.push(item); 22 | this.notify(); 23 | } 24 | 25 | remove(item) { 26 | this.items = this.items.filter(storeItem => (storeItem !== item ? storeItem : undefined)); 27 | this.notify(); 28 | } 29 | 30 | get data() { 31 | return this.items; 32 | } 33 | } 34 | 35 | export default Store; 36 | -------------------------------------------------------------------------------- /lib/toast.js: -------------------------------------------------------------------------------- 1 | import Store from './store'; 2 | 3 | const store = new Store(); 4 | let id = 0; 5 | 6 | function toast(item, onClose, onClick, onDismiss) { 7 | id += 1; 8 | store.add({ id, onClose, onClick, onDismiss, ...item }); 9 | } 10 | 11 | export { toast, store }; 12 | -------------------------------------------------------------------------------- /lib/with-transition.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Transition } from 'semantic-ui-react'; 3 | import PropTypes from 'prop-types'; 4 | 5 | const OPEN_TIME = 500; 6 | const CLOSE_TIME = 1000; 7 | 8 | export default function withTransitions(Component) { 9 | class SemanticTransition extends React.Component { 10 | static propTypes = { 11 | toastId: PropTypes.number.isRequired, 12 | onClose: PropTypes.func.isRequired, 13 | openAnimation: PropTypes.string.isRequired, 14 | closeAnimation: PropTypes.string.isRequired, 15 | time: PropTypes.number 16 | }; 17 | 18 | static defaultProps = { 19 | time: 2000 20 | }; 21 | 22 | state = { 23 | visible: false, 24 | time: OPEN_TIME, 25 | animation: this.props.openAnimation 26 | }; 27 | 28 | componentDidMount() { 29 | // schedule auto closing of toast 30 | if (this.props.time) { 31 | this.timerId = setTimeout(this.onClose, this.props.time); 32 | } 33 | 34 | // start animation as soon as toast is mounted in the dom 35 | this.setState({ visible: true }); 36 | } 37 | 38 | onClose = () => { 39 | // trigger new animation when toast is dismissed 40 | this.setState( 41 | prevState => ({ 42 | visible: !prevState.visible, 43 | animation: this.props.closeAnimation, 44 | time: CLOSE_TIME 45 | }), 46 | () => { 47 | setTimeout(() => { 48 | if (this.timerId) { 49 | clearTimeout(this.timerId); 50 | } 51 | 52 | this.props.onClose(this.props.toastId); 53 | }, CLOSE_TIME); 54 | } 55 | ); 56 | }; 57 | 58 | render() { 59 | const { toastId, openAnimation, closeAnimation, time: timeProp, onClose, ...props } = this.props; 60 | const { time, visible, animation } = this.state; 61 | const styles = { 62 | marginBottom: '1em' 63 | }; 64 | 65 | return ( 66 | 67 |
68 | 69 |
70 | 71 | ); 72 | } 73 | } 74 | 75 | return SemanticTransition; 76 | } 77 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-semantic-toasts", 3 | "version": "0.6.6", 4 | "description": "React Semantic UI alerts library", 5 | "main": "build/index.js", 6 | "types": "build/index.d.ts", 7 | "keywords": [ 8 | "react", 9 | "semantic ui", 10 | "toast", 11 | "alerts" 12 | ], 13 | "scripts": { 14 | "build": "babel lib -d build", 15 | "build:watch": "babel lib -w -d build", 16 | "eslint": "eslint lib/**/*.js", 17 | "eslint-check": "eslint --print-config .eslintrc.js | eslint-config-prettier-check", 18 | "prepack": "copyfiles -u 1 lib/index.d.ts build", 19 | "test": "echo \"Error: no test specified\" && exit 1" 20 | }, 21 | "repository": { 22 | "type": "git", 23 | "url": "https://github.com/academia-de-codigo/react-semantic-alert.git" 24 | }, 25 | "author": "", 26 | "license": "MIT", 27 | "bugs": { 28 | "url": "https://github.com/academia-de-codigo/react-semantic-alert/issues" 29 | }, 30 | "devDependencies": { 31 | "@babel/cli": "^7.16.0", 32 | "@babel/core": "^7.16.0", 33 | "@babel/plugin-proposal-class-properties": "^7.16.0", 34 | "@babel/plugin-proposal-object-rest-spread": "^7.16.0", 35 | "@babel/plugin-transform-async-to-generator": "^7.16.0", 36 | "@babel/preset-env": "^7.16.4", 37 | "@babel/preset-react": "^7.16.0", 38 | "babel-eslint": "^10.0.3", 39 | "babel-plugin-module-resolver": "^4.1.0", 40 | "copyfiles": "^2.4.1", 41 | "eslint": "^8.3.0", 42 | "eslint-config-airbnb": "^19.0.1", 43 | "eslint-plugin-import": "^2.25.3", 44 | "eslint-plugin-jsx-a11y": "^6.5.1", 45 | "eslint-plugin-react": "^7.27.1", 46 | "eslint-config-prettier": "^8.3.0", 47 | "prettier-eslint": "^13.0.0", 48 | "semantic-ui-css": "^2.4.1" 49 | }, 50 | "peerDependencies": { 51 | "react": "16.x.x || 17.x.x", 52 | "prop-types": "^15.7.2", 53 | "semantic-ui-react": "*" 54 | }, 55 | "dependencies": {} 56 | } 57 | -------------------------------------------------------------------------------- /styles/react-semantic-alert.css: -------------------------------------------------------------------------------- 1 | .ui-alerts { 2 | position: fixed; 3 | z-index: 2060; 4 | padding: 23px; 5 | } 6 | 7 | .ui-alerts.center { 8 | top: 50%; 9 | left: 50%; 10 | margin-top: -100px; 11 | margin-left: -222px; 12 | } 13 | 14 | .ui-alerts.top-right { 15 | top: 20px; 16 | right: 20px; 17 | } 18 | 19 | .ui-alerts.top-center { 20 | top: 20px; 21 | margin-left: -222px; 22 | left: 50%; 23 | } 24 | 25 | .ui-alerts.top-left { 26 | top: 20px; 27 | left: 20px; 28 | } 29 | 30 | .ui-alerts.bottom-right { 31 | bottom: 0; 32 | right: 20px; 33 | } 34 | .ui-alerts.bottom-center { 35 | bottom: 0; 36 | margin-left: -222px; 37 | left: 50%; 38 | } 39 | 40 | .ui-alerts.bottom-left { 41 | bottom: 0; 42 | left: 20px; 43 | } 44 | 45 | .ui-alerts.ui-alerts > .message > .content > .header { 46 | padding-right: 13px; 47 | } 48 | 49 | @media (min-width: 320px) { 50 | /* smartphones, portrait iPhone, portrait 480x320 phones (Android) */ 51 | .ui-alerts.top-center { 52 | margin-left: -163px; 53 | } 54 | } 55 | @media (min-width: 480px) { 56 | /* smartphones, Android phones, landscape iPhone */ 57 | } 58 | @media (min-width: 600px) { 59 | /* portrait tablets, portrait iPad, e-readers (Nook/Kindle), landscape 800x480 phones 60 | * (Android) */ 61 | } 62 | @media (min-width: 801px) { 63 | /* tablet, landscape iPad, lo-res laptops ands desktops */ 64 | } 65 | @media (min-width: 1025px) { 66 | /* big landscape tablets, laptops, and desktops */ 67 | } 68 | @media (min-width: 1281px) { 69 | /* hi-res laptops and desktops */ 70 | } 71 | --------------------------------------------------------------------------------