Release 0.4 Progress

The two issues 2519, and 2542 were both partially completed this week.

Issue 2519

I think the terminal port can't auto fit the height because the Browser can't get the size of the container. So I edit the terminal.js file and get the window's width and height, then calculate the row height and column width based on these data.
If the user has more than one screen, just refresh the screen, the terminal window will fit the new screen. The issue solved and I pull the request 2556.



However, the professor thinks it duplicates what we already have with https://www.npmjs.com/package/xterm-addon-fit. The right way to do this is to have the parent element that holds the terminal fill the available width and height, and then it will automatically use that. So I will fix my CSS for the page so that it does this.

Issue 2542

I want to do this issue by four steps.

1.An animated indication shows a build is happening.
2.The animated indicator shows the percentage being built.
3.The indicator shows how long it's been going for.
4.When it's done, the yellow animated circle becomes a green checkmark or a red ' X'.
I have done the first two steps, and the result video looks good. I edited two files and added the following code:

* {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}
.box {
  position: relative;
  height: 50px;
  width: 250px;
  background: transparent;
  border-radius: 5px;
}
.box svg {
  position: absolute;
  height: 160px;
  width: 160px;
  left: 25%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(-90deg);
}
.box svg circle {
  fill: transparent;
  stroke: #ff0;
  stroke-width: 3;
  stroke-dasharray: 500;
  stroke-dashoffset: 500;
  stroke-linecap: round;
  animation: stroke 28s steps(500) forwards;
}
.box .counter {
  position: absolute;
  top: 60%;
  left: 25%;
  transform: translate(-50%, -50%);
  width: 70%;
  height: 30px;
  color: #e6b800;
  text-align: center;
  overflow: hidden;
}
.box .counter span {
  font-size: 10px;
  line-height: 25px;
  font-weight: bold;
  /* text-align: center; */
}
.box .counter span:after {
  content: '0%\A 1%\A 2%\A 3%\A 4%\A 5%\A 6%\A 7%\A 8%\A 9%\A 10%\A 11%\A 12%\A 13%\A 14%\A 15%\A 16%\A 17%\A 18%\A 19%\A 20%\A 21%\A 22%\A 23%\A 24%\A 25%\A 26%\A 27%\A 28%\A 29%\A 30%\A 31%\A 32%\A 33%\A 34%\A 35%\A 36%\A 37%\A 38%\A 39%\A 40%\A 41%\A 42%\A 43%\A 44%\A 45%\A 46%\A 47%\A 48%\A 49%\A 50%\A 51%\A 52%\A 53%\A 54%\A 55%\A 56%\A 57%\A 58%\A 59%\A 60%\A 61%\A 62%\A 63%\A 64%\A 65%\A 66%\A 67%\A 68%\A 69%\A 70%\A 71%\A 72%\A 73%\A 74%\A 75%\A 76%\A 77%\A 78%\A 79%\A 80%\A 81%\A 82%\A 83%\A 84%\A 85%\A 86%\A 87%\A 88%\A 89%\A 90%\A 91%\A 92%\A 93%\A 94%\A 95%\A 96%\A 97%\A 98%\A 99%\A 100% ';
  position: absolute;
  white-space: pre;
  left: 50%;
  transform: translateX(-50%);
  animation: animate 10s steps(100) forwards;
}
h8 {
  color: #000;
  position: absolute;
  width: 100%;
  text-align: center;
  top: 25%;
  right: 2%;
  letter-spacing: 1px;
}
@keyframes animate {
  0% {
    top: 0%;
  }
  100% {
    top: -5000px;
  }
}
@keyframes stroke {
  100% {
    stroke-dashoffset: 0;
  }
}

The professor's opinion is that we can't use a % since we don't have any concept of where we are in a build, and we know when a build started (Datetime) and therefore can calculate how long it's been running, so we could do something like 1m 15s, yes.
I will modify the code according to the professor's suggestion.