cubetiq/code-server
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Update styling

Browse Source 
Just sort of winging it.
This commit is contained in:
Asher 2020-02-26 12:02:20 -06:00
parent b1760c8d29
commit 595ce6f5e3
No known key found for this signature in database
GPG Key ID: D63C1EF81242354A
11 changed files with 147 additions and 172 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/browser/pages/error.css
View File

@ -1,20 +1,28 @@
.error-display { .error-display {
box-sizing: border-box; box-sizing: border-box;
color: #fcfcfc;
padding: 20px; padding: 20px;
text-align: center; text-align: center;
} }
.error-display > .header {
font-size: 6rem;
margin: 0;
}
.error-display > .body {
color: #444;
font-size: 1.2rem;
}
.error-display > .links { .error-display > .links {
margin-top: 1rem; margin-top: 16px;
} }
.error-display > .links > .link { .error-display > .links > .link {
color: #b6b6b6; color: rgb(87, 114, 245);
text-decoration: none; text-decoration: none;
} }
.error-display > .links > .link:hover { .error-display > .links > .link:hover {
color: #fcfcfc;
text-decoration: underline; text-decoration: underline;
} }

2
src/browser/pages/error.html
View File

@ -7,7 +7,7 @@
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"
/> />
<meta http-equiv="Content-Security-Policy" content="style-src 'self'; manifest-src 'self'; img-src 'self' data:;" /> <meta http-equiv="Content-Security-Policy" content="style-src 'self'; manifest-src 'self'; img-src 'self' data:;" />
<title>code-server {{ERROR_TITLE}}</title> <title>{{ERROR_TITLE}} - code-server</title>
<link rel="icon" href="{{BASE}}/static-{{COMMIT}}/src/browser/media/favicon.ico" type="image/x-icon" /> <link rel="icon" href="{{BASE}}/static-{{COMMIT}}/src/browser/media/favicon.ico" type="image/x-icon" />
<link <link
rel="manifest" rel="manifest"

50
src/browser/pages/global.css
View File

@ -8,22 +8,68 @@ body,
body { body {
background: rgb(244, 247, 252); background: rgb(244, 247, 252);
color: #f4f4f4; color: #111;
margin: 0; margin: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji",
"Segoe UI Emoji", "Segoe UI Symbol"; "Segoe UI Emoji", "Segoe UI Symbol";
overflow: hidden; overflow: hidden;
} }
input,
button { button {
font-family: inherit; font-family: inherit;
font-size: inherit; font-size: 1rem;
line-height: 1rem;
}
.-button {
background-color: rgb(87, 114, 245);
border-radius: 5px;
border: none;
box-sizing: border-box;
color: white;
cursor: pointer;
padding: 18px 20px;
text-decoration: none;
} }
.center-container { .center-container {
align-items: center; align-items: center;
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;
flex-direction: column;
justify-content: center; justify-content: center;
padding: 20px; padding: 20px;
} }
.card-box {
background-color: rgb(250, 253, 258);
border-radius: 5px;
box-shadow: rgba(60, 66, 87, 0.117647) 0px 7px 14px 0px, rgba(0, 0, 0, 0.117647) 0px 3px 6px 0px;
max-width: 650px;
width: 100%;
}
.card-box > .header {
border-bottom: 1px solid #ddd;
color: #444;
padding: 30px;
}
.card-box > .header > .main {
margin: 0;
font-size: 1.5rem;
}
.card-box > .header > .sub {
color: #555;
margin-top: 10px;
}
.card-box > .content {
padding: 40px;
}
.card-box + .card-box {
margin-top: 26px;
}

39
src/browser/pages/home.css
View File

@ -1,28 +1,8 @@
.info-blocks {
max-width: 500px;
width: 100%;
}
.info-block > .header {
font-size: 1.3rem;
margin: 1.5rem 0;
}
.info-block > .none {
color: #b6b6b6;
}
.info-block + .info-block {
border-top: 1px solid #666;
margin-top: 1rem;
}
.block-row { .block-row {
display: flex; display: flex;
} }
.block-row > .item { .block-row > .item {
color: #c4c4c4;
flex: 1; flex: 1;
} }
@ -31,16 +11,17 @@
} }
.block-row > .item > .sub { .block-row > .item > .sub {
color: #888; font-size: 0.95em;
} }
.block-row .-link { .block-row .-link {
cursor: pointer; color: rgb(87, 114, 245);
display: block;
text-decoration: none; text-decoration: none;
} }
.block-row .-link:hover { .block-row .-link:hover {
color: #fafafa; text-decoration: underline;
} }
.block-row > .item > .icon { .block-row > .item > .icon {
@ -51,8 +32,8 @@
} }
.block-row > .item > .icon.-missing { .block-row > .item > .icon.-missing {
background-color: #eee; background-color: rgb(87, 114, 245);
color: #b6b6b6; color: #fff;
text-align: center; text-align: center;
} }
@ -67,16 +48,12 @@
} }
.kill-form > .kill { .kill-form > .kill {
background-color: transparent; background-color: rgb(87, 114, 245);
border: none; border: none;
color: #b6b6b6; color: #fff;
cursor: pointer; cursor: pointer;
font-size: 1rem; font-size: 1rem;
line-height: 1rem; line-height: 1rem;
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
.kill-form > .kill:hover {
color: #fafafa;
}

48
src/browser/pages/home.html
View File

@ -20,15 +20,18 @@
</head> </head>
<body> <body>
<div class="center-container"> <div class="center-container">
<div class="info-blocks"> <!-- TEMP: Only VS Code for now. -->
<!-- TEMP: Only VS Code for now. --> <!-- <div class="info-block"> -->
<!-- <div class="info-block"> --> <!-- <h2 class="header">Running Applications</h2> -->
<!-- <h2 class="header">Running Applications</h2> --> <!-- {{APP_LIST:RUNNING}} -->
<!-- {{APP_LIST:RUNNING}} --> <!-- </div> -->
<!-- </div> -->
<div class="info-block"> <div class="card-box">
<h2 class="header">Launch</h2> <div class="header">
<h2 class="main">Launch</h2>
<div class="sub">Choose an application to launch below.</div>
</div>
<div class="content">
<div class="block-row"> <div class="block-row">
<a class="item -link" href="./vscode"> <a class="item -link" href="./vscode">
<img class="icon" src="./static-{{COMMIT}}/lib/vscode/resources/linux/code.png" /> <img class="icon" src="./static-{{COMMIT}}/lib/vscode/resources/linux/code.png" />
@ -36,22 +39,27 @@
</a> </a>
</div> </div>
</div> </div>
</div>
<div class="info-block"> <div class="card-box">
<h2 class="header">Version</h2> <div class="header">
<h2 class="main">Version</h2>
<div class="sub">Version information and updates.</div>
</div>
<div class="content">
{{UPDATE:NAME}} {{UPDATE:NAME}}
</div> </div>
<!-- <div class="info-block"> -->
<!-- <h2 class="header">Editors</h2> -->
<!-- {{APP_LIST:EDITORS}} -->
<!-- </div> -->
<!-- <div class="info-block"> -->
<!-- <h2 class="header">Other</h2> -->
<!-- {{APP_LIST:OTHER}} -->
<!-- </div> -->
</div> </div>
<!-- <div class="info-block"> -->
<!-- <h2 class="header">Editors</h2> -->
<!-- {{APP_LIST:EDITORS}} -->
<!-- </div> -->
<!-- <div class="info-block"> -->
<!-- <h2 class="header">Other</h2> -->
<!-- {{APP_LIST:OTHER}} -->
<!-- </div> -->
</div> </div>
</body> </body>
</html> </html>

53
src/browser/pages/login.css
View File

@ -1,65 +1,33 @@
body { body {
overflow: auto; overflow: auto;
} }
.center-container {
width: 100vw;
height: 100vh;
padding: 20px 40px;
min-height: 400px;
}
.login-form { .login-form {
border-radius: 5px;
box-shadow: rgba(60, 66, 87, 0.117647) 0px 7px 14px 0px, rgba(0, 0, 0, 0.117647) 0px 3px 6px 0px;
color: rgba(0, 0, 0, 0.37);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex: 1; flex: 1;
justify-content: center; justify-content: center;
padding: 20px 40px;
position: relative;
height: 300px;
min-width: 320px;
max-width: 500px;
}
.main {
font-size: 40px;
}
.login-form > .header {
align-items: center;
color: black;
}
.login-form > .header > .sub {
margin-top: 10px;
} }
.login-form > .field { .login-form > .field {
margin-top: 40px;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
width: 100%; width: 100%;
height: 50px;
} }
.login-form > .error { .login-form > .error {
color: red; color: red;
margin-top: 1rem; margin-top: 16px;
} }
.login-form > .field > .password { .login-form > .field > .password {
border: 1px solid #ddd; background-color: rgb(244, 247, 252);
background: rgb(244, 247, 252);
box-sizing: border-box;
padding: 1rem;
flex: 1;
font-size: 20px;
border-radius: 5px; border-radius: 5px;
border: 1px solid #ddd;
box-sizing: border-box;
color: black; color: black;
min-width: 100px; flex: 1;
padding: 16px;
} }
.login-form > .user { .login-form > .user {
@ -67,14 +35,5 @@ body {
} }
.login-form > .field > .submit { .login-form > .field > .submit {
font-size: 20px;
border: none;
box-sizing: border-box;
margin-left: 20px; margin-left: 20px;
background-color: rgb(87, 114, 245);
color: white;
font-family: monospace;
padding: 10px 20px;
border-radius: 5px;
} }

45
src/browser/pages/login.html
View File

@ -22,31 +22,34 @@
</head> </head>
<body> <body>
<div class="center-container"> <div class="center-container">
<form class="login-form" method="post"> <div class="card-box">
<div class="header"> <div class="header">
<div class="main">Welcome to code-server</div> <h1 class="main">Welcome to code-server</h1>
<div class="sub">Please log in below. Check code-server's logs for the generated password.</div> <div class="sub">Please log in below. Check code-server's logs for the generated password.</div>
</div> </div>
<input class="user" type="text" autocomplete="username" /> <div class="content">
<input id="base" type="hidden" name="base" value="/" /> <form class="login-form" method="post">
<div class="field"> <input class="user" type="text" autocomplete="username" />
<!-- The onfocus code places the cursor at the end of the value. --> <input id="base" type="hidden" name="base" value="/" />
<input <div class="field">
required <!-- The onfocus code places the cursor at the end of the value. -->
autofocus <input
value="{{VALUE}}" required
onfocus="const value=this.value;this.value='';this.value=value;" autofocus
class="password" value="{{VALUE}}"
type="password" onfocus="const value=this.value;this.value='';this.value=value;"
placeholder="PASSWORD" class="password"
name="password" type="password"
autocomplete="current-password" placeholder="PASSWORD"
/> name="password"
autocomplete="current-password"
<input class="submit" value="SUBMIT" type="submit" /> />
<input class="submit -button" value="SUBMIT" type="submit" />
</div>
{{ERROR}}
</form>
</div> </div>
{{ERROR}} </div>
</form>
</div> </div>
</body> </body>
<script> <script>

34
src/browser/pages/update.css
View File

@ -2,39 +2,11 @@
text-align: center; text-align: center;
} }
.update-form > .apply { .update-form > .cancel {
background-color: transparent; background-color: red;
color: #b6b6b6;
cursor: pointer;
border: 1px solid #b6b6b6;
box-sizing: border-box;
padding: 1rem 2rem;
}
.update-form > .apply:hover {
color: #fafafa;
border-color: #fafafa;
}
.update-form > .current {
margin-top: 1rem;
}
.update-form > .links {
margin-top: 1rem;
}
.update-form > .links > .link {
color: #b6b6b6;
text-decoration: none;
}
.update-form > .links > .link:hover {
color: #fcfcfc;
text-decoration: underline;
} }
.update-form > .error { .update-form > .error {
color: red; color: red;
margin-top: 1rem; margin-top: 16px;
} }

17
src/browser/pages/update.html
View File

@ -19,13 +19,18 @@
</head> </head>
<body> <body>
<div class="center-container"> <div class="center-container">
<form class="update-form" method="post"> <div class="card-box">
<h2 class="header">Update</h2> <div class="header">
{{UPDATE_STATUS}} {{ERROR}} <h1 class="main">Update</h1>
<div class="links"> <div class="sub">Update code-server.</div>
<a class="link" href="{{BASE}}">go home</a>
</div> </div>
</form> <div class="content">
<form class="update-form" method="post">
{{UPDATE_STATUS}} {{ERROR}}
<a class="cancel -button" href="{{BASE}}">Cancel</a>
</form>
</div>
</div>
</div> </div>
</body> </body>
</html> </html>

10
src/node/app/app.ts
View File

@ -166,7 +166,7 @@ export class MainHttpProvider extends HttpProvider {
if (this.update.isLatestVersion(update)) { if (this.update.isLatestVersion(update)) {
return `<div class="block-row"> return `<div class="block-row">
<div class="item"> <div class="item">
${update.version} Latest: ${update.version}
<div class="sub">Up to date</div> <div class="sub">Up to date</div>
</div> </div>
<div class="item"> <div class="item">
@ -178,13 +178,13 @@ export class MainHttpProvider extends HttpProvider {
} }
return `<div class="block-row"> return `<div class="block-row">
<a class="item -link" href="./update"> <div class="item">
${update.version} Latest: ${update.version}
<div class="sub">Out of date</div> <div class="sub">Out of date</div>
</a> </div>
<div class="item"> <div class="item">
${humanize(update.checked)} ${humanize(update.checked)}
<a class="sub -link" href="./update/check">Check now</a> <a class="sub -link" href="./update">Update now</a>
</div> </div>
<div class="item" >Current: ${this.update.currentVersion}</div> <div class="item" >Current: ${this.update.currentVersion}</div>
</div>` </div>`

5
src/node/app/update.ts
View File

@ -162,10 +162,7 @@ export class UpdateHttpProvider extends HttpProvider {
throw new Error("No update available") throw new Error("No update available")
} }
return `<button type="submit" class="apply"> return `<button type="submit" class="apply -button">Update to ${update.version}</button>`
Update to ${update.version}
</button>
<div class="current">Current: ${this.currentVersion}</div>`
} }
public async tryUpdate(route: Route): Promise<HttpResponse> { public async tryUpdate(route: Route): Promise<HttpResponse> {