Apply Hakatashi's comment of Design Part

index.less

@@ -593,118 +593,127 @@ button {
  .fixed-width(420px);
  position: relative;
  }
+
  .save-panel-area {
+ display: none;
  z-index: 1;
 
- .save-baroon::before {
- content: '';
- border-left: solid 10px transparent;
- border-top: solid 10px white;
- border-right: solid 10px transparent;
+ .save-balloon {
+ display: flex;
+ flex-direction: column;
  position: absolute;
- top: 100%;
- left: 50%;
- transform: translateX(-50%);
- }
- .save-baroon {
- display: none;
- background: white;
- width: 300px;
- height: 300px;
- bottom: 13%;
+ width: 250px;
+ height: 250px;
+ bottom: 17%;
  left: calc(~'50% + 173px');
  transform: translateX(-50%);
  border-radius: 6px;
- position: absolute;
+ background: white;
 
- .save-entry {
+ &::before {
+ content: '';
+ border-left: solid 10px transparent;
+ border-top: solid 10px white;
+ border-right: solid 10px transparent;
  position: absolute;
- padding: 0 1em;
- border-radius: 8px;
- bottom: 0%;
- left: 25%;
- border: none;
- outline: none;
- background-color: #ff7a00;
- color: white;
- font-family: "Arial Black", Gadget, sans-serif;
- font-size: 18px;
- line-height: 2em;
- cursor: pointer;
- transition: top .3s;
- margin: 4px 4px 10px 8px;
- box-shadow: 0 3px 3px rgba(0, 0, 0, .5);
- &:hover {
- box-shadow: 0 2px 1px rgba(0, 0, 0, .5);
- transform: translateY(2px);
- }
- &:active {
- background-color: #633e0b;
- }
- }
- .save-entries {
- list-style:none;
- font-size: 0;
- padding-left: 0;
+ top: 100%;
+ left: 50%;
+ transform: translateX(-50%);
  }
+
  .entry-wrapper {
+ flex: 1 1 0;
+ overflow-y: scroll;
  width: 100%;
- height: 74%;
- overflow-x:scroll;
- padding: 5px 3% 20px 3%;
+ padding: 5px 5px 20px 5px;
+ box-sizing: border-box;
+
+ .saved-entries {
+ list-style: none;
+ padding-left: 0;
+ margin: 0;
+ }
+
+ .saved-item {
+ display: flex;
+ margin: 0 0 10px 0;
+ }
+
+ .timestamp {
+ flex: 1 1 0;
+ position:relative;
+ padding: 6px 0px 6px 5px;
+ border-bottom-left-radius: 10px;
+ border-top-left-radius: 10px;
+ color: white;
+ font-size: 18px;
+ text-align: left;
+ background: linear-gradient(#FFAD3F, #FF9A12);
+ box-shadow: 0px 3px 0px #EA660E;
+ cursor: pointer;
+
+ &:hover {
+ box-shadow: 0px 1px 0px #EA660E;
+ transform: translateY(2px);
+ }
+
+ &:active {
+ background-color: #633e0b;
+ }
+ }
+
+ .delete {
+ flex: 0 1 15%;
+ padding: 4px 0;
+ border-bottom-right-radius: 10px;
+ border-top-right-radius: 10px;
+ font-size: 25px;
+ color: white;
+ background: linear-gradient(#FF6E51, #FF4C28);
+ box-shadow: 0px 3px 0px #EA660E;
+ cursor: pointer;
+
+ &:hover {
+ box-shadow: 0px 1px 0px #EA660E;
+ transform: translateY(2px);
+ }
+
+ &:active {
+ background-color: #4f1102;
+ }
+ }
  }
+
  .save-button-wrapper{
- width: 100%;
- height: 15%;
- padding: 5px 0px 5px 0px;
- }
- .delete {
- background-color: #ed4c34;
- border-bottom-right-radius : 5px;
- border-top-right-radius : 5px;
- border: none;
- outline: none;
- color: white;
- height: 30px;
- width: 10%;
- font-size: 18px;
- margin: 6px 0px 0px 0px;
- box-shadow: 0 2px 0px rgba(0, 0, 0, .5);
- cursor: pointer;
- }
- .delete:hover {
- box-shadow: 0 1px 0px rgba(0, 0, 0, .5);
- transform: translateY(2px);
- }
- .delete:active {
- background-color: #4f1102;
- }
- .timestamp {
- background-color: #ef9b26;
- border-bottom-left-radius : 5px;
- border-top-left-radius : 5px;
- border: none;
- outline: none;
- color: white;
- position:relative;
- height: 30px;
- width: 84%;
- margin: 6px 0px 0px 0px;
- font-size: 18px;
- box-shadow: 0 2px 0px rgba(0, 0, 0, .5);
- cursor: pointer;
- }
- .timestamp:hover {
- box-shadow: 0 1px 0px rgba(0, 0, 0, .5);
- transform: translateY(2px);
- }
- .timestamp:active {
- background-color: #633e0b;
+ flex: 0 1 13%;
+ padding: 5px 0;
+
+ .save-entry {
+ width: 60%;
+ margin: 0 20%;
+ padding: 6px 0;
+ border-radius: 8px;
+ font-size: 22px;
+ color: white;
+ background: linear-gradient(#FF7B36, #FA5B09);
+ box-shadow: 0 3px 0 #AE2700;
+ cursor: pointer;
+
+ &:hover {
+ box-shadow: 0 2px 0 #AE2700;
+ transform: translateY(2px);
+ }
+
+ &:active {
+ background-color: #633e0b;
+ }
+ }
  }
  }
  }
  }
  }
+
  .modal-layer {
  z-index: 1;
  pointer-events: none;

index.pug

@@ -128,9 +128,9 @@ html
  .mission MISSION
  .statement
  .save-panel-area
- .save-baroon
+ .save-balloon
  .entry-wrapper
- ul.save-entries
+ ul.saved-entries
  .save-button-wrapper
  button.save-entry セーブする
  .layer.result-layer

lib/stage.js

@@ -22,7 +22,6 @@ class Stage {
  this.blockSize = 50;
  this.caseIndex = 0;
  this.maxClock = 0;
- this.savePanelState = false;
 
  this.board = new Board(this.config, this.blockSize);
  this.boardElement = new BoardElement(this, this.board);
@@ -33,7 +32,7 @@ class Stage {
  this.$ranking = this.$stage.siblings('.result-layer').find('.ranking');
  this.$result = this.$stage.siblings('.result-layer').find('.result');
 
- this.$savePanel = this.$stage.find('.save-baroon');
+ this.$savePanel = this.$stage.find('.save-panel-area');
  this.updateStyles();
  this.updateClockElement();
 
@@ -126,14 +125,8 @@ class Stage {
  });
 
  this.$stage.find('button.save').click(() => {
- if (this.savePanelState) {
- this.$savePanel.hide();
- this.savePanelState = false;
- } else {
- this.updateSaveEntries();
- this.$savePanel.show();
- this.savePanelState = true;
- }
+ this.updateSaveEntries();
+ this.$savePanel.toggle();
  });
 
  this.updateIoFields();
@@ -151,17 +144,17 @@ class Stage {
 
  updateSaveEntries() {
  const entries = this.game.getSaveEntries(this.config.name);
- this.$savePanel.find('.save-entries').empty().append(entries.map((entry) => (
+ this.$savePanel.find('.saved-entries').empty().append(entries.map((entry) => (
  $('<li/>', {
- class: 'index',
+ class: 'saved-item',
  }).append([
  $('<button/>', {
  class: 'timestamp',
  text: util.translateDateFromUnixTime(entry.timestamp),
  }),
  $('<button/>', {
  class: 'delete',
- text: 'x',
+ text: '×',
  }),
  ])
  )));