Add more CSS changes

software-students-spring2024 · May 6, 2024 · b927309 · b927309
1 parent 38c3844
commit b927309
Show file tree

Hide file tree

Showing 6 changed files with 51 additions and 45 deletions.
diff --git a/src/static/style.css b/src/static/style.css
@@ -187,6 +187,7 @@ footer {
 
 .listing {
   height: 350px;
+  width: 366px;
   border: 3px solid #56018d;
   box-sizing: border-box;
   border-radius: 1rem;
@@ -196,6 +197,10 @@ footer {
 .listing-image {
   height: 250px;
   overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #cacaca;
 }
 
 .listing img {
@@ -216,11 +221,17 @@ footer {
   align-items: center;
   height: 20px;
   font-weight: bold;
-  margin-bottom: 4px;
+  margin-bottom: 8px;
+}
+
+.details-primary > p {
+  height: 20px;
+  max-width: 200px;
+  overflow: hidden;
 }
 
 .details > p {
-  height: 38px;
+  height: 40px;
   overflow: hidden;
 }
 
@@ -515,14 +526,21 @@ form div label {
 #friends {
   margin: 1em;
 }
+
+#friends a {
+  text-decoration: none;
+}
+
 .friend-listing {
   display: grid;
   grid-template-columns: 1fr 2fr;
   border: #56018d solid 2px;
   border-radius: 10px;
   padding: 1em;
   margin: 1em;
+  align-items: center;
 }
+
 .friend-user {
   font-size: 2em;
   color: #56018d;
@@ -589,14 +607,11 @@ form div label {
   flex-direction: column;
   align-items: center;
   min-height: 80vh;
-  gap: 1rem;
-  padding: 1rem 0rem 0rem 0rem;
 }
 
 .offer-sent {
   box-sizing: border-box;
   width: 100%;
-  border-top: 3px solid #56018d;
   border-bottom: 3px solid #56018d;
 }
 
@@ -605,6 +620,7 @@ form div label {
   height: 150px;
   display: flex;
   align-items: center;
+  justify-content: center;
   overflow: hidden;
   border: 3px solid #56018d;
   border-radius: 16px;
@@ -622,7 +638,7 @@ form div label {
 
 .offer-sent img {
   height: 100%;
-  width: 100px;
+  width: 100%;
 }
 
 .offer-content {
@@ -634,15 +650,15 @@ form div label {
 
 .item-wanted {
   width: 183px;
-  height: 180px;
+  height: 150px;
   display: flex;
   justify-content: flex-end;
   align-items: flex-end;
 }
 
 .swap-icon {
   width: 60px;
-  height: 96px;
+  height: 48px;
   display: flex;
   justify-content: center;
   align-items: flex-end;
@@ -655,7 +671,7 @@ form div label {
 
 .items-offered {
   width: 183px;
-  height: 120px;
+  height: 150px;
 }
 
 
@@ -698,12 +714,11 @@ form div label {
 
 .item-buttons-alt {
   display: flex;
-  justify-content: space-evenly;
-  margin: 1rem;
+  justify-content: center;
 }
 
 .item-buttons-alt a{
-  width: 45%;
+  width: 33%;
   text-align: center;
   box-sizing: border-box;
   background-color: #56018d;
@@ -712,6 +727,7 @@ form div label {
   cursor: pointer;
   padding: 0.75rem;
   border-radius: 0.5rem;
+  margin: 1rem;
 }
 
 #browse {

diff --git a/src/templates/friends.html b/src/templates/friends.html
@@ -6,20 +6,19 @@ <h1>Friends</h1>
     <div>No friends :C</div>
     {%else%}
     {% for friend in friends %}
-    <a href ="{{url_for('view_user', user_name = friend.username)}}"><div class="friend-listing">
-      <div class="friend-image">
-        <img
-          src="{{ friend.pic }}"
-          width="80px"
-          height="80px"
-          alt="{{ friend.username }}"
-          referrerpolicy="no-referrer"
-        />
+    <a href ="{{url_for('view_user', user_name = friend.username)}}">
+      <div class="friend-listing">
+        <div class="friend-image">
+          <img
+            src="{{ friend.pic }}"
+            width="80px"
+            height="80px"
+            alt="{{ friend.username }}"
+            referrerpolicy="no-referrer"
+          />
+        </div>
+        <div class="friend-user">{{ friend.username }}</div>
       </div>
-      <div class="friend-user">
-        <p>{{ friend.username }}</p>
-      </div>
-    </div>
     </a>
     {% endfor %} {% endif %}
 </div>

diff --git a/src/templates/offer.html b/src/templates/offer.html
@@ -37,7 +37,7 @@
         />
         <input type="submit" value="NEW LISTING" />
       </div>
-      {%endif%} {% for doc in docs %}
+      {%else%}{% for doc in docs %}
       <div class="listing-alt">
         <div class="listing-context-alt">
           <div class="listing-image-alt">
@@ -60,6 +60,7 @@
       </div>
       {%endfor%}
       <input type="submit" id="offer-submit" />
+      {%endif%} 
     </div>
   </form>
 </div>

diff --git a/src/templates/recievedoffers.html b/src/templates/recievedoffers.html
@@ -23,9 +23,9 @@
   </div>
   {% else %} {% for offer in offers %}
   <div class="offer-sent">
-    <div class="offer-header">
-      <div>Your Item</div>
-      <div>Their Item(s)</div>
+    <div class="offer-header" style="margin: 1rem 1rem calc(1rem * {{ offer.offereditems|length }}) 1rem;">
+      <div>{{offer.offerforid.username|capitalize}}'s Item</div>
+      <div>Your Item{% if offer.offereditems|length > 1 %}s{% endif %}</div>
     </div>
 
     <div class="offer-content">
@@ -79,7 +79,7 @@
       </div>
     </div>
 
-    <div class="item-buttons">
+    <div class="item-buttons-alt">
       <a href="{{url_for('rejectoffer', offer_id = offer._id)}}"
         >Reject Offer</a
       >

diff --git a/src/templates/sentoffers.html b/src/templates/sentoffers.html
@@ -9,7 +9,6 @@
       alt="user profile image"
       width="400px"
     />
-
     <div id="browse-collection" onclick="window.location.href='/'">
       <div>
         <img
@@ -24,12 +23,10 @@
   </div>
   {% else %} {% for offer in offers %}
   <div class="offer-sent">
-    <div><li>Status:{{offer.status}}</li></div>
-    <div class="offer-header">
-      <div>Their Item</div>
-      <div>Your Item(s)</div>
+    <div class="offer-header" style="margin: 1rem 1rem calc(1rem * {{ offer.offereditems|length }}) 1rem;">
+      <div>{{offer.offerforid.username|capitalize}}'s Item</div>
+      <div>Your Item{% if offer.offereditems|length > 1 %}s{% endif %}</div>
     </div>
-
     <div class="offer-content">
       <div class="item-wanted">
         <div class="offer-image">
@@ -40,7 +37,6 @@
           />
         </div>
       </div>
-
       <div class="swap-icon">
         <img
           src="https://cdn-icons-png.freepik.com/512/10477/10477833.png"
@@ -49,7 +45,6 @@
           height="30px"
         />
       </div>
-
       <div class="items-offered">
         <div class="items-transformed">
           {% for item in offer.offereditems %}
@@ -64,14 +59,12 @@
         </div>
       </div>
     </div>
-
     <div class="offer-details-alt">
       <div>
         <ul>
           <li>{{offer.offerforid.name}}</li>
         </ul>
       </div>
-
       <div>
         <ul>
           {% for item in offer.offereditems %}
@@ -80,13 +73,10 @@
         </ul>
       </div>
     </div>
-
     <div class="item-buttons-alt">
       <a href="{{url_for('deleteoffer', offer_id = offer._id)}}">Edit Offer</a>
       <br />
-      <a href="{{url_for('deleteoffer', offer_id = offer._id)}}"
-        >Delete Offer</a
-      >
+      <a href="{{url_for('deleteoffer', offer_id = offer._id)}}">Delete Offer</a>
     </div>
   </div>
   {% endfor %} {% endif %}

diff --git a/src/templates/viewProfile.html b/src/templates/viewProfile.html
@@ -27,7 +27,7 @@
   {% else %} {% for doc in docs %} {% if doc.public == True %}
   <div class="listing-alt" onclick="window.location.href='/item/{{ doc._id }}'">
     <div class="listing-context-alt">
-      <div class="listing-alt-image">
+      <div class="listing-image-alt">
         <img
           src="{{ doc.image_url }}"
           alt="{{ doc.title }}"