Fabio/webssh2
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

split css out to improve loading perception

Browse source
This commit is contained in:
billchurch 2018-02-06 15:04:55 -05:00
parent d44e62dc3a
commit 875aecf09a
8 changed files with 278 additions and 692 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
package.json
View file

@ -52,6 +52,7 @@
"clean-webpack-plugin": "^0.1.18", "clean-webpack-plugin": "^0.1.18",
"copy-webpack-plugin": "^4.3.1", "copy-webpack-plugin": "^4.3.1",
"css-loader": "^0.28.9", "css-loader": "^0.28.9",
"extract-text-webpack-plugin": "^3.0.2",
"nodemon": "^1.11.0", "nodemon": "^1.11.0",
"snazzy": "^7.0.0", "snazzy": "^7.0.0",
"snyk": "^1.39.1", "snyk": "^1.39.1",

1
public/client-full.htm
View file

@ -1,6 +1,7 @@
<html> <html>
<head> <head>
<title>Web SSH full</title> <title>Web SSH full</title>
<link rel="stylesheet" href="/webssh2.css" />
<script src="/webssh2.bundle.js" defer></script> <script src="/webssh2.bundle.js" defer></script>
</head> </head>
<body> <body>

1
public/client-min.htm
View file

@ -1,6 +1,7 @@
<html> <html>
<head> <head>
<title>Web SSH min</title> <title>Web SSH min</title>
<link rel="stylesheet" href="/webssh2.css" />
<script src="/webssh2.bundle.js" defer></script> <script src="/webssh2.bundle.js" defer></script>
</head> </head>
<body> <body>

703
public/webssh2.bundle.js
View file

File diff suppressed because one or more lines are too long

248
public/webssh2.css Normal file
View file

@ -0,0 +1,248 @@
/**
* Copyright (c) 2014 The xterm.js authors. All rights reserved.
* Copyright (c) 2012-2013, Christopher Jeffrey (MIT License)
* https://github.com/chjj/term.js
* @license MIT
*
* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the "Software"), to deal
* in the Software without restriction, including without limitation the rights
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
* copies of the Software, and to permit persons to whom the Software is
* furnished to do so, subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in
* all copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
* THE SOFTWARE.
*
* Originally forked from (with the author's permission):
* Fabrice Bellard's javascript vt100 for jslinux:
* http://bellard.org/jslinux/
* Copyright (c) 2011 Fabrice Bellard
* The original design remains. The terminal itself
* has been extended to include xterm CSI codes, among
* other features.
*/
/**
* Default styles for xterm.js
*/
.xterm {
font-family: courier-new, courier, monospace;
font-feature-settings: "liga" 0;
position: relative;
user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
}
.xterm.focus,
.xterm:focus {
outline: none;
}
.xterm .xterm-helpers {
position: absolute;
top: 0;
/**
* The z-index of the helpers must be higher than the canvases in order for
* IMEs to appear on top.
*/
z-index: 10;
}
.xterm .xterm-helper-textarea {
/*
* HACK: to fix IE's blinking cursor
* Move textarea out of the screen to the far left, so that the cursor is not visible.
*/
position: absolute;
opacity: 0;
left: -9999em;
top: 0;
width: 0;
height: 0;
z-index: -10;
/** Prevent wrapping so the IME appears against the textarea at the correct position */
white-space: nowrap;
overflow: hidden;
resize: none;
}
.xterm .composition-view {
/* TODO: Composition position got messed up somewhere */
background: #000;
color: #FFF;
display: none;
position: absolute;
white-space: nowrap;
z-index: 1;
}
.xterm .composition-view.active {
display: block;
}
.xterm .xterm-viewport {
/* On OS X this is required in order for the scroll bar to appear fully opaque */
background-color: #000;
overflow-y: scroll;
}
.xterm canvas {
position: absolute;
left: 0;
top: 0;
}
.xterm .xterm-scroll-area {
visibility: hidden;
}
.xterm .xterm-char-measure-element {
display: inline-block;
visibility: hidden;
position: absolute;
left: -9999em;
}
.xterm.enable-mouse-events {
/* When mouse events are enabled (eg. tmux), revert to the standard pointer cursor */
cursor: default;
}
.xterm:not(.enable-mouse-events) {
cursor: text;
}
body {
font-family: helvetica, sans-serif, arial;
font-size: 1em;
color: #111;
background-color: rgb(0, 0, 0);
color: rgb(240, 240, 240);
height: 100%;
margin: 0;
}
#header {
color: rgb(240, 240, 240);
background-color: rgb(0, 128, 0);
width: 100%;
border-color: white;
border-style: none none solid none;
border-width: 1px;
text-align: center;
flex: 0 1 auto;
z-index: 99;
}
.box {
display: flex;
flex-flow: column;
height: 100%;
}
#terminal-container {
flex: 1 1 auto;
width: 100%;
margin: 0 auto;
padding: 2px;
}
#terminal-container .terminal {
background-color: #000000;
color: #fafafa;
padding: 2px;
}
#terminal-container .terminal:focus .terminal-cursor {
background-color: #fafafa;
}
#bottomdiv {
width: 100%;
background-color: rgb(50, 50, 50);
border-color: white;
border-style: solid none none none;
border-width: 1px;
z-index: 99;
flex: 0 1 30px;
}
#footer {
display: inline-block;
color: rgb(240, 240, 240);
background-color: rgb(50, 50, 50);
padding-left: 10px;
padding-right: 10px;
text-align: left;
}
#status {
display: inline-block;
color: rgb(240, 240, 240);
background-color: rgb(50, 50, 50);
padding-left: 10px;
padding-right: 10px;
border-color: white;
border-style: none solid none solid;
border-width: 1px;
text-align: left;
z-index: 100;
}
#credentials {
display: inline-block;
color: rgb(51, 51, 51);
background-color: rgb(255, 127, 0);
padding-left: 10px;
padding-right: 10px;
border-color: white;
border-style: none solid none none;
border-width: 1px;
text-align: left;
z-index: 100;
}
a.credentials {
color: rgb(51, 51, 51);
text-decoration: none;
}
#downloadLog {
display: inline-block;
color: rgb(240, 240, 240);
background-color: rgb(255, 127, 0);
padding-left: 10px;
padding-right: 10px;
border-color: white;
border-style: none solid none none;
border-width: 1px;
text-align: left;
z-index: 100;
}
a.downloadLog {
color: rgb(240, 240, 240);
text-decoration: none;
}
#toggleLog {
display: inline-block;
color: rgb(240, 240, 240);
background-color: rgb(0, 127, 0);
padding-left: 10px;
padding-right: 10px;
border-color: white;
border-style: none solid none none;
border-width: 1px;
text-align: left;
z-index: 100;
}
a.toggleLog {
color: rgb(240, 240, 240);
text-decoration: none;
}

1
src/client-full.htm
View file

@ -1,6 +1,7 @@
<html> <html>
<head> <head>
<title>Web SSH full</title> <title>Web SSH full</title>
<link rel="stylesheet" href="/webssh2.css" />
<script src="/webssh2.bundle.js" defer></script> <script src="/webssh2.bundle.js" defer></script>
</head> </head>
<body> <body>

1
src/client-min.htm
View file

@ -1,6 +1,7 @@
<html> <html>
<head> <head>
<title>Web SSH min</title> <title>Web SSH min</title>
<link rel="stylesheet" href="/webssh2.css" />
<script src="/webssh2.bundle.js" defer></script> <script src="/webssh2.bundle.js" defer></script>
</head> </head>
<body> <body>

14
webpack.common.js
View file

@ -1,6 +1,7 @@
const path = require('path') const path = require('path')
const CleanWebpackPlugin = require('clean-webpack-plugin') const CleanWebpackPlugin = require('clean-webpack-plugin')
const CopyWebpackPlugin = require('copy-webpack-plugin') const CopyWebpackPlugin = require('copy-webpack-plugin')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
module.exports = { module.exports = {
entry: { entry: {
@ -12,15 +13,22 @@ module.exports = {
'./src/client-full.htm', './src/client-full.htm',
'./src/client-min.htm', './src/client-min.htm',
'./src/favicon.ico' './src/favicon.ico'
]) ]),
new ExtractTextPlugin('[name].css')
], ],
output: { output: {
filename: '[name].bundle.js', filename: '[name].bundle.js',
path: path.resolve(__dirname, './public') path: path.resolve(__dirname, './public')
}, },
module: { module: {
loaders: [ rules: [
{ test: /\.css$/, loader: 'style-loader!css-loader' } {
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: 'css-loader'
})
}
] ]
} }
} }