Merge pull request #86 from we-have-TTA/fix/RoomStyle

style:room的樣式

Author: Yojijun

app/javascript/controllers/editor_controller.js

@@ -33,13 +33,13 @@ export default class extends Controller {
       language: language,
       uuid: uuid
     }
-    
+
     const resultText = document.getElementById("run_result")
     const resultBox = document.getElementById("result-box")
     const runText = document.getElementById("run-text")
     resultText.textContent = ""
     runText.textContent = "執行中....."
-    resultBox.style.cssText = "width: 600px;display: block"
+    resultBox.style.cssText = "display: block"
     Rails.ajax({
       url: `/api/v1/rooms/${roomID}/run`,
       type: "post",
@@ -49,7 +49,7 @@ export default class extends Controller {
         runText.textContent = "執行結果："
         resultText.textContent = result
         setTimeout(() => {
-          resultBox.style.cssText = "width: 600px;display: none"
+          resultBox.style.cssText = "display: none"
 
         }, 5000)
       },

app/javascript/stylesheets/rooms/room.scss

@@ -25,6 +25,8 @@
   }
   .candidate-input {
     @apply w-1/2 bg-black p-2;
+    position: relative;
+
     .control-panel {
       button {
         @apply border-2 bg-black text-white hover:bg-green-900 text-base rounded px-5 py-2;
@@ -37,6 +39,13 @@
         @apply border-gray-300;
       }
     }
+    .result-box {
+      @apply  bg-gray-700 rounded-md p-2;
+      width: calc(100% - 65px);
+      position: absolute;
+      left: 50px;
+      bottom: 20px;
+    }    
   }
   .web-console {
     @apply w-1/2 bg-black p-2;
@@ -69,3 +78,14 @@
   margin-top: 10px;
   tab-size: 2;
 }
+
+.codejar-wrap {
+  position: relative;
+  height: calc(100vh - 165px);
+  .editor{
+    height: 100%;
+  }
+}
+
+
+

app/views/rooms/_room.html.erb

@@ -13,16 +13,14 @@
         <button id="current_language">語言選擇</button>
       </div>
     </div>
-
     <%= render "editor" %>
-    <div id="result-box" class="absolute bottom-56 left-5 bg-gray-700 rounded-md p-2" style="width: 600px;display: none">
+    <div id="result-box" class="result-box" style="display: none">
       <br>
       <div id = "run-text" class="text-xl text-white "></div>
       <br>
       <div class="text-base text-white " id="run_result"></div>
       <br>
     </div>
-    
   </div>
   <div
     class="web-console"

app/views/rooms/_webconsole.html.erb

@@ -1,9 +1,9 @@
 <div class="flex justify-between">
-  <ul class="right-header flex">
+  <%# <ul class="right-header flex">
     <li class="text-xl text-white hover:underline mr-5">執行結果</li>
     <li class="text-xl text-white hover:underline">指示</li>
   </ul>
-  <button class="bg-red-700 border border-red-900 hover:bg-red-800 text-white text-sm rounded px-5 py-2">重啟</button>
+  <button class="bg-red-700 border border-red-900 hover:bg-red-800 text-white text-sm rounded px-5 py-2">重啟</button> %>
 </div>
 <div>
   <% language_set = %w[Ruby JavaScript] %>