Skip to content

Commit

Permalink
html: remove bulma
Browse files Browse the repository at this point in the history
  • Loading branch information
tsl0922 committed Apr 21, 2019
1 parent d5a542d commit 14670ed
Show file tree
Hide file tree
Showing 6 changed files with 182 additions and 53 deletions.
4 changes: 2 additions & 2 deletions html/index.html
Expand Up @@ -30,11 +30,11 @@
</div>
<div id="progress">
<p id="file-name"></p>
<progress id="progress-bar" class="progress is-link" max="100"></progress>
<progress id="progress-bar" class="progress" max="100"></progress>
<p id="progress-info">
<span id="bytes-received">-</span>/<span id="bytes-file">-</span> (<span id="percent-received"></span>)
transferred
<a id="skip" class="button is-link is-small is-pulled-right">Skip</a>
<a id="skip" class="button">Skip</a>
</p>
</div>
</div>
Expand Down
1 change: 0 additions & 1 deletion html/package.json
Expand Up @@ -14,7 +14,6 @@
"start": "gulp clean && webpack-serve webpack.dev.js"
},
"dependencies": {
"bulma": "^0.6.1",
"core-js": "^2.5.3",
"fast-text-encoding": "^1.0.0",
"xterm": "^3.12.2",
Expand Down
74 changes: 30 additions & 44 deletions html/sass/app.scss
@@ -1,11 +1,5 @@
@import "~bulma/sass/utilities/_all";
@import "~bulma/sass/base/helpers";
@import "~bulma/sass/elements/box";
@import "~bulma/sass/elements/button";
@import "~bulma/sass/elements/form";
@import "~bulma/sass/elements/progress";
@import "~bulma/sass/components/modal";
@import "~xterm/src/xterm.css";
@import "modal";

html, body {
height: 100%;
Expand All @@ -20,27 +14,36 @@ html, body {
margin: 0 auto;
padding: 0;
background-color: #2b2b2b;
.terminal {
padding: 5px;
}
}

#terminal-container .terminal {
padding: 5px;
#modal {
strong {
color: #268bd2;
}
span {
color: #2aa198;
}
header {
font-weight: bold;
text-align: center;
padding-bottom: 10px;
margin-bottom: 10px;
border-bottom: 1px solid #ddd;
}
}

#modal strong {
color: #268bd2;
}

#modal span {
color: #2aa198;
}

#modal header {
font-weight: bold;
text-align: center;
padding-bottom: 10px;
margin-bottom: 10px;
border-bottom: 1px solid #ddd;

#progress {
padding-top: 10px;
progress {
margin: 10px 0;
}
color: #93a1a1;
span {
font-weight: bold;
}
}

#status {
Expand All @@ -50,29 +53,12 @@ html, body {

#choose {
padding-top: 10px;
}

#choose .file-name {
border-color: transparent;
}

#progress {
padding-top: 10px;
.file-name {
border-color: transparent;
}
}

#file-name {
background-color: #fafffd;
text-align: center;
}

#progress progress {
margin: 10px 0;
}

#progress {
color: #93a1a1;
}

#progress span {
font-weight: bold;
}
149 changes: 149 additions & 0 deletions html/sass/modal.scss
@@ -0,0 +1,149 @@
.box {
background-color: #fff;
border-radius: 5px;
box-shadow: 0 2px 3px hsla(0, 0%, 4%, 0.1), 0 0 0 1px hsla(0, 0%, 4%, 0.1);
color: #4a4a4a;
display: block;
padding: 1.25rem;
}

.progress {
border: none;
border-radius: 290486px;
display: block;
height: 1rem;
overflow: hidden;
padding: 0;
width: 100%;
&:not(:last-child) {
margin-bottom: 1.5rem;
}
&::-webkit-progress-bar {
background-color: #dbdbdb;
}
&::-webkit-progress-value {
background-color: #3273dc;
}
&::-moz-progress-bar {
background-color: #3273dc;
}
&::-ms-fill {
background-color: #3273dc;
border: none;
}
}

.modal {
bottom: 0;
left: 0;
right: 0;
top: 0;
align-items: center;
display: none;
overflow: hidden;
position: fixed;
z-index: 40;
&.is-active {
display: flex;
}
}

.file-input {
height: .01em;
left: 0;
outline: none;
position: absolute;
top: 0;
width: .01em;
}

.file-cta, .file-name {
align-items: center;
box-shadow: none;
display: inline-flex;
height: 2.25em;
justify-content: flex-start;
line-height: 1.5;
position: relative;
vertical-align: top;
border-color: #dbdbdb;
border-radius: 3px;
font-size: 1em;
padding: calc(.375em - 1px) 1em;
white-space: nowrap;
}

.file-name {
border-color: #dbdbdb;
border-style: solid;
border-width: 1px 1px 1px 0;
display: block;
max-width: 16em;
overflow: hidden;
text-align: left;
text-overflow: ellipsis;
&:active, &:focus {
outline: none;
}
}

.file-cta {
background-color: #f5f5f5;
color: #4a4a4a;
&:active, &:focus {
outline: none;
}
}

.button {
float: right;
align-items: center;
border-radius: 2px;
display: inline-flex;
font-size: .75rem;
height: 2em;
line-height: 1.5;
position: relative;
vertical-align: top;
background-color: #3273dc;
border-color: transparent;
color: #fff;
cursor: pointer;
justify-content: center;
padding: calc(.375em - 1px) 0.75em;
text-align: center;
white-space: nowrap;
&:active, &:focus {
outline: none;
}
&:hover {
background-color: #276cda;
border-color: transparent;
color: #fff;
}
}

.modal-background {
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
background-color: hsla(0, 0%, 4%, 0.86);
}

.modal-content {
margin: 0 20px;
max-height: calc(100vh - 160px);
overflow: auto;
position: relative;
width: 100%;
}

@media print, screen and (min-width: 769px) {
.modal-content {
margin: 0 auto;
max-height: calc(100vh - 40px);
width: 640px;
}
}
5 changes: 0 additions & 5 deletions html/yarn.lock
Expand Up @@ -1419,11 +1419,6 @@ builtin-status-codes@^3.0.0:
resolved "https://registry.yarnpkg.com/builtin-status-codes/-/builtin-status-codes-3.0.0.tgz#85982878e21b98e1c66425e03d0174788f569ee8"
integrity sha1-hZgoeOIbmOHGZCXgPQF0eI9Wnug=

bulma@^0.6.1:
version "0.6.2"
resolved "https://registry.yarnpkg.com/bulma/-/bulma-0.6.2.tgz#f4b1d11d5acc51a79644eb0a2b0b10649d3d71f5"
integrity sha1-9LHRHVrMUaeWROsKKwsQZJ09cfU=

cacache@^10.0.4:
version "10.0.4"
resolved "https://registry.yarnpkg.com/cacache/-/cacache-10.0.4.tgz#6452367999eff9d4188aefd9a14e9d7c6a263460"
Expand Down
2 changes: 1 addition & 1 deletion src/index.html

Large diffs are not rendered by default.

0 comments on commit 14670ed

Please sign in to comment.