Make textarea size and view source button position relative (mholt#27)

* Make textarea rows height relative to screen size Signed-off-by: Prasad Ghangal <[email protected]> * Add credits sections Make view source position dynamic Signed-off-by: Prasad Ghangal <[email protected]>
phongthien99 · Oct 16, 2019 · f9333ca · f9333ca
1 parent 5489352
commit f9333ca
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 8 deletions.
diff --git a/frontend/index.html b/frontend/index.html
@@ -47,23 +47,27 @@
     </div>
     <div class="container">
       <!-- Example row of columns -->
-      <div class="position-relative row d-flex justify-content-between mt-4">
-        <div class="position-relative form-group apply_space">
+      <div class="position-relative row d-flex justify-content-between mt-4" style="height:65%;">
+        <div class="position-relative form-group apply_space" style="height:85%;">
           <label for="yaml">YAML</label>
-          <textarea class="form-control codemirror-textarea" id="yamlGenerator" rows="15"></textarea>
+          <textarea class="form-control codemirror-textarea" id="yamlGenerator"></textarea>
           <img src="./image/icn_delete.png" alt="delete" class="clear_code pointer" id="clearYaml" />
         </div>
         <div class="button_yaml">
           <button class="btn" id="convert" title="Convert to Go"><i class="fa fa-arrow-circle-right fa-2x"></i></button>
         </div>
         <i class="glyphicon glyphicon-calendar"></i>
-        <div class="position-relative form-group apply_space">
+        <div class="position-relative form-group apply_space" style="height:85%;">
           <label for="goGenerator">GO</label>
           <textarea class="form-control codemirror-textarea" id="goGenerator" rows="15"></textarea>
           <img src="./image/icn_delete.png" alt="delete" class="clear_code pointer" id="clearGo" />
         </div>
       </div>
       <hr>
+      <p class="credits">
+      We would love your input. Please feel free to send PRs and open issues on the <a href="https://github.com/PrasadG193/yaml2go"> Github repo</a><br>
+      The Go Gopher is originally by <a href="http://reneefrench.blogspot.com">Renee French</a><br>
+      This artwork is borrowed from an awesome artwork collection by <a href="https://github.com/egonelbre/gophers">Egon Elbre</a><br>
     </div> <!-- /container -->
   </main>
   <script src="https://code.jquery.com/jquery-3.4.1.min.js"
@@ -74,4 +78,4 @@
   <script src="./index.js"></script>
 </body>
 
-</html>
+</html>
diff --git a/frontend/index.js b/frontend/index.js
@@ -60,6 +60,24 @@ $(document).ready(function(){
     	lineNumbers : true,
         mode: "text/x-go"
     });
+
+    editor.setValue('# Paste your yaml here...\n'+
+    'kind: test\n' +
+    'metadata:\n' +
+    '  name: cluster\n' +
+    '  namespace: test-ns\n')
+
+    go.setValue('// Yaml2Go'+
+    'type Yaml2Go struct {\n' +
+    '	Kind     string   `yaml:"kind"`\n' +
+    '	Metadata Metadata `yaml:"metadata"`\n' +
+    '}\n' +
+    '\n' +
+    '// Metadata\n' +
+    'type Metadata struct {\n' +
+    '	Name      string `yaml:"name"`\n' +
+    '	Namespace string `yaml:"namespace"`\n' +
+    '}\n')
 });
 
 function displayError(err){

diff --git a/frontend/style.css b/frontend/style.css
@@ -1,3 +1,7 @@
+html, body, main {
+    height:100%;
+}
+
 .apply_space{
     width: 45%;
 }
@@ -40,6 +44,7 @@
 
 .container{
     max-width: 80%;
+    height: 100%;
 }
 
 .coversion{
@@ -69,6 +74,7 @@
 
 .infoData{
   margin: 16px 42px;
+  width: 50%
 }
 
 .k2Go{
@@ -96,7 +102,9 @@ button:focus{
 
 .CodeMirror {
   border: 1px solid lavender !important;
+  height: 100%;
 }
+
 #error{
   width: 50%;
   margin: auto;
@@ -106,19 +114,30 @@ button:focus{
   text-align: center;
   color: red;
 }
+
 #view-source{
-  margin-top: 50px;
-  margin-left: 470px;
+  margin-top: 40px;
+  width: 60%;
+  text-align: right;
+  margin-right: 100px;
 }
+
 #view-source-link{
   border: 1px solid steelblue;
   padding: 10px;
   color: steelblue;
 
 }
+
 #view-source a{
   text-decoration: none !important;
 }
+
 #view-source-link:hover{
   background-color: white;
-}
+}
+
+.credits {
+  color: gray;
+  text-align: center;
+}