Group button styling updated| added 3rd group content

ali-rasheed · Oct 31, 2019 · 0337eb9 · 0337eb9
1 parent 15cb7cf
commit 0337eb9
Show file tree

Hide file tree

Showing 5 changed files with 94 additions and 43 deletions.
diff --git a/css/styles.css b/css/styles.css
@@ -26,7 +26,8 @@ h1 strong {
 }
 
 p,
-a, label {
+a,
+label {
   font-family: var(--secondary-font);
   font-weight: 400;
 }
@@ -57,14 +58,17 @@ label {
 .keylime-logotype {
   letter-spacing: -0.14em;
 }
-#billing{
+
+#billing {
   padding: 10vh 10vw;
   margin-top: 5vh;
 }
-#billing input[type="submit"]{
+
+#billing input[type="submit"] {
   width: 100%;
   /* font-family: ; */
 }
+
 /* --------------nav------------ */
 .top-bar {
   position: fixed;
@@ -156,6 +160,19 @@ aside {
   margin: 0.1rem;
 }
 
+.post-cont figcaption {
+  padding: 1rem 0 0 1.5rem;
+  font-weight: 500;
+  font-size: 1rem;
+}
+
+.post-cont input[type="text"] {
+  border-width: 1px;
+  border-color: lightgrey;
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
+
 .account figure {
   margin: 0.1rem;
 }
@@ -195,7 +212,8 @@ p {}
 .new-user .text-container input {
   opacity: 0;
   position: fixed;
-  width: 0;}
+  width: 0;
+}
 
 .new-user .text-container input[type="radio"]:checked+label {
   background-color: var(--primary-highlight-color);
@@ -216,9 +234,11 @@ p {}
 }
 
 sub .stats-cont h3 {}
+
 .payment-form-div {
-  padding:3rem;
+  padding: 3rem;
 }
+
 /* ~~~ https://www.w3schools.com/howto/howto_css_checkout_form.asp used for checkout form  ~~~ */
 
 .col-25 {
@@ -249,7 +269,7 @@ sub .stats-cont h3 {}
 label {
   margin-bottom: 10px;
   display: block;
-  margin-top:1rem;
+  margin-top: 1rem;
 }
 
 .icon-container {
@@ -349,6 +369,16 @@ main#login {
   /* transform: scale(1.1); */
 }
 
+::placeholder {
+  padding-left: 0.5rem;
+  opacity: 1;
+}
+:-ms-input-placeholder {  padding-left: 0.5rem;
+}
+::-ms-input-placeholder {
+  padding-left: 0.5rem;
+}
+
 section.new-user {
   padding: 5rem 6rem;
 }
@@ -400,7 +430,7 @@ hr {
 
 .post-cont,
 .new-post-cont {
-  margin-bottom: 3rem;
+  margin-bottom: 2rem;
   background-color: #FFFFFF;
   border: 0.5px solid lightgrey;
   border-radius: 3px;
@@ -535,7 +565,9 @@ button {
 }
 
 button:hover,
-button:focus {
+button:focus,
+button:active,
+button.active {
   color: white;
   background-color: var(--primary-highlight-color);
 }
@@ -550,12 +582,27 @@ button:focus {
   border: 1px solid #ccc;
   border-top: none;
 }
-
-.group-tabs button{
+.group-tabs{
+  margin-bottom: 1rem;;
+}
+.group-tabs button {
+  margin: 0;
   font-size: 0.9rem;
   border-color: var(--secondary-highlight-color);
-border: solid 1px}
-
+  border: solid 1px;
+  border-radius: 0;
+}
+.group-tabs button.active{
+  border: none;
+}
+.group-tabs button:first-child{
+  border-top-left-radius: 3px;
+  border-bottom-left-radius: 3px;
+}
+.group-tabs button:last-child{
+  border-top-right-radius: 3px;
+  border-bottom-right-radius: 3px;
+}
 
 .text-link p {
   padding: 1rem;
@@ -634,9 +681,7 @@ a.img-link>img:hover,
   padding-left: 0.1rem;
 }
 
-#login-cont input {
-
-}
+#login-cont input {}
 
 #new-user-form div {
   padding: 0rem 0rem 2rem 0rem;

diff --git a/homepage.html b/homepage.html
@@ -62,7 +62,7 @@ <h3> About </h3>
 
     <section id="feed">
       <div class="group-tabs" id="feed-tab">
-        <button class="group-tab" onclick="switchTab(event,'tsawwassen')">Tsawwassen Hiking group</button>
+        <button id="defGroup"   class="group-tab" onclick="switchTab(event,'tsawwassen')">Tsawwassen Hiking group</button>
         <button class="group-tab" onclick="switchTab(event,'juno')">Juno Highschool 2013</button>
         <button class="group-tab" onclick="switchTab(event,'dank')">Dank memes</button>
       </div>
@@ -81,39 +81,42 @@ <h3> Create Post </h3>
           <h3> Jane Wensley </h3>
           </div>
           <figure>
-            <img src="images/post-image1.jpeg" alt="Post Image">
-          </figure>
+            <img src="images/hike1.jpeg" alt="hiking in forest">
+            <figcaption>Gone to Boundary Bay</figcaption>
+          </figure> 
 
           <h3> Comments </h3>
           <p> <strong> Julan Frohen </strong> &nbsp;&nbsp; Beautiful photo! When are you heading back home?</p>
+          <input type="text" name="" placeholder="Add a comment" id="">
 
 
-        </article>
-        <article class="post-cont">
-
-          <h3> Collin Maeda </h3>
-          <p> Hey guys, would anyone happen to have a place for me to stay tomorrow night in Van? </p>
-
-          <hr>
-
-          <h3> Comments </h3>
-
-          <p> <strong> Eve Feller </strong> &nbsp;&nbsp; Try Lynn!! I think she has a place you can stay</p>
-
 
         </article>
         <article class="post-cont">
           <h3> Lee Travis </h3>
           </div>
           <figure>
-            <img src="images/post-image2.jpg" alt="Post Image">
+            <img src="images/hike2.jpg" alt="Trekking in a valley">
           </figure>
 
           <h3> Comments </h3>
           <p> <strong> Tomos Miles </strong> &nbsp;&nbsp; Beautiful photo! When are you heading back home?</p>
-
-
         </article>
+
+          <article class="post-cont">
+
+            <h3> Collin Maeda </h3>
+            <p> Hey guys, would anyone happen to have a place for me to stay tomorrow night in Van? </p>
+
+            <hr>
+
+            <h3> Comments </h3>
+
+            <p> <strong> Eve Feller </strong> &nbsp;&nbsp; Try Lynn!! I think she has a place you can stay</p>
+
+
+          </article>
+
 
         <article class="post-cont">
           <h3> Rheanna Meyers </h3>
@@ -129,7 +132,7 @@ <h3> Comments </h3>
         </article>
       </section>
 
-      <section id="dank" class="tab-content">
+      <section id="juno" class="tab-content">
 
           <article class="post-cont">
             <h3> Alex Mars </h3>
@@ -183,17 +186,18 @@ <h3> Comments </h3>
           </article>
         </section>
 
-        <section id="juno" class="tab-content">
+        <section id="dank" class="tab-content">
 
             <article class="post-cont">
-              <h3> Jane Wensley </h3>
+              <h3> dankify </h3>
               </div>
               <figure>
-                <img src="images/post-image1.jpeg" alt="Post Image">
+                <img src="https://i.kym-cdn.com/entries/icons/original/000/013/564/doge.jpg" alt="Doge">
+                <figcaption>doge is doge</figcaption>
               </figure>
 
               <h3> Comments </h3>
-              <p> <strong> Julan Frohen </strong> &nbsp;&nbsp; Beautiful photo! When are you heading back home?</p>
+              <p> <strong> Julan Frohen </strong> &nbsp;&nbsp; LOL bro</p>
 
 
             </article>

diff --git a/images/post-image1.jpeg → images/hike1.jpeg b/images/post-image1.jpeg → images/hike1.jpeg
diff --git a/images/hike2.jpg b/images/hike2.jpg
diff --git a/js/scripts.js b/js/scripts.js
@@ -1,22 +1,24 @@
 //   https://www.w3schools.com/howto/howto_js_tabs.asp
+
 function switchTab(evt, groupName) {
     console.log("function hit"+groupName);
 
     var i, tabcontent, tablinks;
-
+    
     // Get all elements with class="tabcontent" and hide them
     tabcontent = document.getElementsByClassName("tab-content");
     for (i = 0; i < tabcontent.length; i++) {
       tabcontent[i].style.display = "none";
     }
-
+    
     // Get all elements with class="tablinks" and remove the class "active"
     tablinks = document.getElementsByClassName("group-tab");
     for (i = 0; i < tablinks.length; i++) {
-      tablinks[i].className = tablinks[i].className.replace(" active", "");
+        tablinks[i].className = tablinks[i].className.replace(" active", "");
     }
-
+    
     // Show the current tab, and add an "active" class to the button that opened the tab
     document.getElementById(groupName).style.display = "block";
     evt.currentTarget.className += " active";
-  }
+}
+document.getElementById("defGroup").click();