Merge pull request #184 from gm3dmo/glossybutton

Adding a glossy button
gm3dmo · Jun 2, 2024 · 11ce33c · 11ce33c
2 parents ec97e72 + 83c1f6c
commit 11ce33c
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 6 deletions.
diff --git a/cmp/static/cmp/css/base.css b/cmp/static/cmp/css/base.css
@@ -114,4 +114,41 @@
       .content-table tbody tr.active-row {
         font-weight: bold;
         color: #8B0000;
+      }
+
+      .glossy-button {
+          background: #1b3003; /* fallback for old browsers */
+          background: -webkit-linear-gradient(top, #487910, #36670c); /* Chrome 10-25, Safari 5.1-6 */
+          background: linear-gradient(to bottom, #254205, #3b6b12); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
+          border: none;
+          color: white;
+          padding: 3px 8px;
+          text-align: center;
+          text-decoration: none;
+          display: inline-block;
+          font-size: 14px;
+          margin: 4px 2px;
+          cursor: pointer;
+          border-radius: 5px;
+          box-shadow: 0 5px 15px rgba(0,0,0,0.2);
+          position: relative;
+          overflow: hidden;
+      }
+
+      .glossy-button:after {
+          content: "";
+          background: rgba(255,255,255,0.2);
+          display: block;
+          position: absolute;
+          width: 100%;
+          height: 50%;
+          left: 0;
+          top: 0;
+          z-index: 1;
+          transform: skewX(-45deg) translateX(-100%);
+          transition: all 0.7s ease-in-out;
+      }
+
+      .glossy-button:hover:after {
+          transform: skewX(-45deg) translateX(100%);
       }
diff --git a/templates/cmp/search-soldiers.html b/templates/cmp/search-soldiers.html
@@ -15,24 +15,26 @@ <h1>Search Soldiers</h1>
 <div>
 {% for soldier in page_obj %}
 <p class="soldier-details">
-  <button class="edit-button" onclick="location.href='{% url 'edit-soldiers' soldier.id %}'" type="button">Edit</button> 
+  <button class="glossy-button" onclick="location.href='{% url 'edit-soldiers' soldier.id %}'" type="button">Edit</button> 
   <span class="soldier-info">{{ soldier.surname }}</span>
   <span class="soldier-info">{{ soldier.initials }}</span>
   <span class="soldier-info">{{ soldier.rank }}</span>
 </p>
 {% endfor %}
 </div>
 
-<div>
-  {% if page_obj.has_previous %}
+<p>Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}</p>
+
+{% for soldier in page_obj %}
+    <!-- Display the soldier -->
+{% endfor %}
+
+{% if page_obj.has_previous %}
     <a href="?q={{ request.GET.q }}&page={{ page_obj.previous_page_number }}">Previous</a>
 {% endif %}
 
 {% if page_obj.has_next %}
     <a href="?q={{ request.GET.q }}&page={{ page_obj.next_page_number }}">Next</a>
 {% endif %}
-</div>
-
-
 
 {% endblock %}