Merge pull request #9 from danrusu/feedback-responsive-layout

responsive feedback layout
danrusu · Jan 20, 2025 · 8ee893c · 8ee893c
2 parents c3e69a9 + 8759734
commit 8ee893c
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 19 deletions.
diff --git a/src/html/feedback.html b/src/html/feedback.html
@@ -3,31 +3,34 @@
 
 <head>
   <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width,initial-scale=1" />
   <title>Feedback</title>
   <link rel="stylesheet" href="feedback.css">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
 </head>
 
 <body>
-  <div class="grid-container">
-    <div>
+  <div class="grid-container"> 
+    <div></div>   
+    <div id="app">
       <h1>
         <a title="feedbacks" href="https://github.com/danrusu/anonymous-feedback.git">
           Anonymous Feedback
         </a>
       </h1>
+
       <h2>
         JS For Testers Workshop
       </h2>
 
-      <div id="form">
-        <textarea id="question" type="textarea" rows="15" cols="50"
-          placeholder="Type your feedback here. You can use markdown.">
-        </textarea>
-        <button onclick="submitFeedback()">SUBMIT</button>
-        <div id="notification"></div>
-      </div>
+      <textarea id="question" type="textarea" rows="20" cols="40" placeholder="Type your feedback here. You can use markdown.">
+      </textarea>      
+
+      <button onclick="submitFeedback()">SUBMIT</button>
+
+      <div id="notification"></div>
     </div>
+    <div></div>   
   </div>
 
   <script src="feedback.js" async defer></script>

diff --git a/src/html/index.html b/src/html/index.html
@@ -3,6 +3,7 @@
 
 <head>
   <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width,initial-scale=1" />
   <title>testutils</title>
   <link rel="stylesheet" href="main.css">
   <link rel="icon" type="image/x-icon" href="favicon.ico">

diff --git a/src/html/public/feedback.css b/src/html/public/feedback.css
@@ -6,11 +6,17 @@
 .grid-container {
   min-height: 100vh;
   display: grid;
-  grid-template-columns: 1fr;
+  grid-template-columns: repeat(3, 1fr);
   align-items: center;
   justify-content: center;
 }
 
+#app {
+  display: grid;
+  grid-template-columns: 1fr;
+  align-items: center;
+}
+
 h1 {
   font-size: 2rem;
   text-align: center;
@@ -22,20 +28,20 @@ h2 {
   text-align: center;
 }
 
-#form {
-  font-size: 1rem;
+textarea{
+  min-width: 500px;
   margin-top: 1.5rem;
+  font-size: 0.8rem;
 }
 
-button,
-textarea,
-#notification {
-  margin: auto;
-  display: block;
+textarea:valid {
+  border: 2px solid orange;
+  resize: vertical;
 }
 
 button {
   margin-top: 1.5rem;
+  font-size: 0.8rem;
 }
 
 a {
@@ -48,6 +54,30 @@ a {
   text-align: center;
 }
 
-textarea:valid {
-  border: 2px solid orange;
+@media (max-width: 500px) {
+  .grid-container{
+    grid-template-columns: 1fr;
+    justify-items: left;
+    align-items: start;
+  }
+  .grid-container > div:not(:has(textarea)){
+    display: none;
+  }
+  h1{
+    font-size: 1rem;
+    text-align: left;
+    margin-top: 0;
+  }
+  h2{
+    font-size: 0.8rem;
+    margin-top: 0;
+    text-align: left;
+  }
+  button {
+    margin-top: 0.5rem;
+  }
+  textarea{
+    margin-top: 0.5rem;
+    min-width: auto;    
+  }
 }