Merge pull request #22 from PiXeL99-eng/pixel-branch-modify

Made the header responsive with CSS, HTML
Rishit30G · Oct 9, 2022 · 6a291a4 · 6a291a4
2 parents b394802 + 709c0bc
commit 6a291a4
Show file tree

Hide file tree

Showing 8 changed files with 8,859 additions and 31 deletions.
diff --git a/dist/assets/styles/app.css b/dist/assets/styles/app.css
@@ -13,11 +13,11 @@ body {
 header {
   background: #47bae7;
   width: 100%;
-  height: 4rem;
   display: flex;
   justify-content: center;
   align-items: center;
   box-shadow: 0 2px 6px rgba(0, 0, 0, 0.26);
+  padding: 0.8rem;
 }
 
 header h1 {
@@ -120,3 +120,21 @@ button:disabled:active {
     width: 30rem;
   }
 }
+
+#tglBtn{
+  position: absolute;
+  right: 4rem;
+  padding: 7px;
+  margin: 0;
+}
+
+@media (max-width: 550px) {
+  #tglBtn{
+    display: block;
+    position: relative;
+    right: 0px
+  }
+  header {
+    flex-direction: column;
+  }
+}
diff --git a/dist/assets/styles/dark-my-place.css b/dist/assets/styles/dark-my-place.css
@@ -1,5 +1,6 @@
 
 #selected-place {
+  position: relative;
   width: 40rem;
   height: 25rem;
   max-width: 90%;
@@ -17,7 +18,7 @@
 
 #menu {
   position: absolute;
-  top: 97px;
+  top: 1px;
   padding-left: 4px;
   flex: 100%;
   display: flex;

diff --git a/dist/assets/styles/dark-share-place.css b/dist/assets/styles/dark-share-place.css
@@ -25,6 +25,7 @@ input:focus {
 }
 
 #selected-place {
+  position: relative;
   width: 40rem;
   height: 25rem;
   max-width: 90%;
@@ -43,7 +44,7 @@ input:focus {
 
 #menu {
   position: absolute;
-  top: 97px;
+  top: 1px;
   padding-left: 4px;
   flex: 100%;
   display: flex;
@@ -78,3 +79,7 @@ input:focus {
   padding: 1rem;
   text-align: center;
 }
+.box-border-custom {
+  border: 1.5px solid rgb(194, 194, 194);
+  border-radius: 9px;
+}
diff --git a/dist/assets/styles/dark.css b/dist/assets/styles/dark.css
@@ -14,10 +14,10 @@
   header {
     background: #212121;
     width: 100%;
-    height: 4rem;
     display: flex;
     justify-content: center;
     align-items: center;
+    padding: 0.8rem;
   }
 
   header h1 {
@@ -120,4 +120,22 @@
       width: 30rem;
     }
   }
+
+  #tglBtn{
+    position: absolute;
+    right: 4rem;
+    padding: 7px;
+    margin: 0;
+  }
+
+  @media (max-width: 550px) {
+    #tglBtn{
+      display: block;
+      position: relative;
+      right: 0px
+    }
+    header {
+      flex-direction: column;
+    }
+  }
 
diff --git a/dist/assets/styles/share-place.css b/dist/assets/styles/share-place.css
@@ -25,6 +25,7 @@ input:focus {
 }
 
 #selected-place {
+  position: relative;
   width: 40rem;
   height: 25rem;
   max-width: 90%;
@@ -42,7 +43,7 @@ input:focus {
 
 #menu {
   position: absolute;
-  top: 97px;
+  top: 1px;
   padding-left: 4px;
   flex: 100%;
   display: flex;
@@ -59,7 +60,6 @@ input:focus {
   width: 40rem;
   max-width: 90%;
   margin: 2rem auto;
-  border: 1px solid #ccc;
   padding: 1rem;
   text-align: center;
 }
@@ -72,7 +72,11 @@ input:focus {
   width: 40rem;
   max-width: 90%;
   margin: 2rem auto;
-  border: 1px solid #ccc;
   padding: 1rem;
   text-align: center;
 }
+
+.box-border-custom {
+  border: 1.5px solid black;
+  border-radius: 9px;
+}
diff --git a/dist/index.html b/dist/index.html
@@ -28,8 +28,7 @@
 
   <header>
     <h1>Share a Place!</h1>
-    <button id="tglBtn" class="btn-toogle" type="button"
-      style="padding: 5px; position: relative; left: 200px;">Dark</button>
+    <button id="tglBtn" class="btn-toogle" type="button">Dark Mode</button>
   </header>
 
   <section id="selected-place">
@@ -52,15 +51,15 @@ <h1>Share a Place!</h1>
     </div>
   </section>
 
-  <section id="share-controls">
-    <input id="share-link" type="text" readonly value="Select a place to get a sharable link." />
+  <section id="share-controls" class="box-border-custom">
+    <input id="share-link" type="text" readonly value="Select a place to get a sharable link." class="box-border-custom"/>
     <button id="share-btn" disabled>Share Place</button>
   </section>
 
-  <section id="place-data">
+  <section id="place-data" class="box-border-custom">
     <form>
       <label for="address" style="font-size: 25px; color: grey;">Address</label>
-      <input type="text" />
+      <input type="text" class="box-border-custom"/>
       <button type="submit">Find Place</button>
     </form>
     <button id="locate-btn">Get Current Location</button>
@@ -79,12 +78,12 @@ <h1>Share a Place!</h1>
         console.log("DARK");
         theme.href = "assets/styles/app.css";
         sharePlaceTheme.href = "assets/styles/share-place.css";
-        document.querySelector(".btn-toogle").innerHTML = "Dark";
+        document.querySelector(".btn-toogle").innerHTML = "Dark Mode";
       } else {
         console.log("LIGHT");
         theme.href = "assets/styles/dark.css";
         sharePlaceTheme.href = "assets/styles/dark-share-place.css"
-        document.querySelector(".btn-toogle").innerHTML = "Light";
+        document.querySelector(".btn-toogle").innerHTML = "Light Mode";
       }
     }
   </script>

diff --git a/dist/my-place/index.html b/dist/my-place/index.html
@@ -17,8 +17,7 @@
 <body>
   <header>
     <h1></h1>
-    <button id="tglBtn" class="btn-toogle" type="button"
-      style="padding: 5px; position: relative; left: 200px;">Dark</button>
+    <button id="tglBtn" class="btn-toogle" type="button">Dark Mode</button>
   </header>
 
   <section id="selected-place">