Merge local branch 'button_styles'

yammmt · Nov 10, 2024 · 0aadcb7 · 0aadcb7
2 parents 79c6e15 + 79a3766
commit 0aadcb7
Show file tree

Hide file tree

Showing 11 changed files with 43 additions and 41 deletions.
diff --git a/src/tests.rs b/src/tests.rs
@@ -110,12 +110,9 @@ fn detail_page() {
         assert!(body.contains("Task name"));
         assert!(body.contains("Description"));
         assert!(body.contains("Last updated"));
-        assert!(body.contains(
-            r#"<button class="button is-primary is-light" type="submit">Update</button>"#
-        ));
-        assert!(body.contains(
-            r#"<button class="button is-link is-light" onclick="location.href='../'">Back to index page</button>"#
-        ));
+        // dirty sentence: a part of the HTML button string
+        assert!(body.contains(r#"type="submit">Update</button>"#));
+        assert!(body.contains(r#"onclick="location.href='../'"#));
     })
 }
 
@@ -203,14 +200,10 @@ fn confirm_page() {
 
         // Ensure confirm page shows buttons
         let body = res.into_string().await.unwrap();
-        assert!(body.contains(
-            r#"<button class="button is-danger is-light" type="submit">Delete</button>"#
-        ));
+        assert!(body.contains(r#"type="submit">Delete</button>"#));
         // If I write full button HTML, `cargo test` hangs up. I don't know why.
         assert!(body.contains("Back to task</button>"));
-        assert!(body.contains(
-            r#"<button class="button is-link is-light" onclick="location.href='/'">Back to index page</button>"#
-        ));
+        assert!(body.contains(r#"onclick="location.href='/'"#));
     })
 }
 
@@ -235,13 +228,9 @@ fn label_confirm_page() {
 
         // Ensure confirm page shows buttons
         let body = res.into_string().await.unwrap();
-        assert!(body.contains(
-            r#"<button class="button is-danger is-light" type="submit">Delete</button>"#
-        ));
+        assert!(body.contains(r#"type="submit">Delete</button>"#));
         assert!(body.contains("Back to label</button>"));
-        assert!(body.contains(
-            r#"<button class="button is-link is-light" onclick="location.href='/'">Back to index page</button>"#
-        ));
+        assert!(body.contains(r#"onclick="location.href='/'"#));
     })
 }
 

diff --git a/static/bulma b/static/bulma
diff --git a/static/css/mystyles.css b/static/css/mystyles.css
diff --git a/static/label/confirm.html.tera b/static/label/confirm.html.tera
@@ -16,15 +16,15 @@
         <div class="container">
             <form class="inline" action="/label/{{ label.id }}" method="post">
                 <input type="hidden" name="_method" value="delete" />
-                <button class="button is-danger is-light" type="submit">Delete</button>
+                <button class="button button-delete is-light" type="submit">Delete</button>
             </form>
         </div>
     </section>
 
     <section class="section">
         <div class="container">
-            <button class="button is-link is-light" onclick="location.href='./edit'">Back to label</button>
-            <button class="button is-link is-light" onclick="location.href='/'">Back to index page</button>
+            <button class="button button-back is-light" onclick="location.href='./edit'">Back to label</button>
+            <button class="button button-back is-light" onclick="location.href='/'">Back to index page</button>
         </div>
     </section>
 {% endblock content %}
diff --git a/static/label/edit.html.tera b/static/label/edit.html.tera
@@ -31,21 +31,21 @@
 
                 <div class="field">
                     <div class="control">
-                        <button class="button is-primary is-light" type="submit">Update</button>
+                        <button class="button button-update is-light" type="submit">Update</button>
                     </div>
                 </div>
             </form>
         </div>
 
         <div class="container">
-            <button class="button is-danger is-light" onclick="location.href='./confirm'">Delete this label</button>
+            <button class="button button-delete is-light" onclick="location.href='./confirm'">Delete this label</button>
         </div>
     </section>
 
     <section class="section">
         <div class="container">
-            <button class="button is-link is-light" onclick="location.href='../'">Back to label list page</button>
-            <button class="button is-link is-light" onclick="location.href='../../'">Back to index page</button>
+            <button class="button button-back is-light" onclick="location.href='../'">Back to label list page</button>
+            <button class="button button-back is-light" onclick="location.href='../../'">Back to index page</button>
         </div>
     </section>
 {% endblock content %}
diff --git a/static/label/index.html.tera b/static/label/index.html.tera
@@ -19,7 +19,7 @@
                     name="name" id="name" value="" autofocus>
                 <input type="text" placeholder="new label color?"
                     name="color" id="color" value="#90ee90">
-                <button class="button is-small is-info is-light" type="submit">add</button>
+                <button class="button button-add-small is-light" type="submit">add</button>
             </form>
 
             <table class="table">
@@ -32,7 +32,7 @@
                         {% for label in labels %}
                         <tr>
                             <td>
-                                <button class="button is-outlined label-button" style="background-color: {{ label.color_hex }}" onclick="location.href='/label/{{ label.id }}'">
+                                <button class="button label-button" style="background-color: {{ label.color_hex }}" onclick="location.href='/label/{{ label.id }}'">
                                     {{ label.name }}
                                 </button>
                             </td>
@@ -51,7 +51,7 @@
 
     <section class="section">
         <div class="container">
-            <button class="button is-link is-light" onclick="location.href='../'">Back to index page</button>
+            <button class="button button-back is-light" onclick="location.href='../'">Back to index page</button>
         </div>
     </section>
 {% endblock content %}
diff --git a/static/mystyles.scss b/static/mystyles.scss
@@ -23,4 +23,17 @@ $section-padding: 1rem 1.5rem;
 // to avoid buttons with inappropriately low contrast.
 //     Note that button's background color is decided by the user.
 .button.label-button { color: black; }
+.button.button-add-small {
+    @extend .is-small;
+    @extend .is-info;
+}
+.button.button-back {
+    @extend .is-link;
+}
+.button.button-delete {
+    @extend .is-danger;
+}
+.button.button-update {
+    @extend .is-primary;
+}
 .tag.label-tag { color: black; }
diff --git a/static/task/bylabel.html.tera b/static/task/bylabel.html.tera
@@ -28,7 +28,7 @@
                             <td>
                                 <form class="inline" action="{{ task.id }}/date" method="post">
                                     <input type="hidden" name="_method" value="post" />
-                                    <button class="button is-primary is-light" type="submit">I did it today!</button>
+                                    <button class="button button-update is-light" type="submit">I did it today!</button>
                                 </form>
                             </td>
                         </tr>
@@ -41,7 +41,7 @@
 
     <section class="section">
         <div class="container">
-            <button class="button is-link is-light" onclick="location.href='../'">Back to index page</button>
+            <button class="button button-back is-light" onclick="location.href='../'">Back to index page</button>
         </div>
     </section>
 {% endblock content %}
diff --git a/static/task/confirm.html.tera b/static/task/confirm.html.tera
@@ -16,15 +16,15 @@
         <div class="container">
             <form class="inline" action="/{{ task.id }}" method="post">
                 <input type="hidden" name="_method" value="delete" />
-                <button class="button is-danger is-light" type="submit">Delete</button>
+                <button class="button button-delete is-light" type="submit">Delete</button>
             </form>
         </div>
     </section>
 
     <section class="section">
         <div class="container">
-            <button class="button is-link is-light" onclick="location.href='/{{ task.id }}'">Back to task</button>
-            <button class="button is-link is-light" onclick="location.href='/'">Back to index page</button>
+            <button class="button button-back is-light" onclick="location.href='/{{ task.id }}'">Back to task</button>
+            <button class="button button-back is-light" onclick="location.href='/'">Back to index page</button>
         </div>
     </section>
 {% endblock content %}
diff --git a/static/task/edit.html.tera b/static/task/edit.html.tera
@@ -56,20 +56,20 @@
 
                 <div class="field">
                     <div class="control">
-                        <button class="button is-primary is-light" type="submit">Update</button>
+                        <button class="button button-update is-light" type="submit">Update</button>
                     </div>
                 </div>
             </form>
         </div>
 
         <div class="container">
-            <button class="button is-danger is-light" onclick="location.href='{{ task.id }}/confirm'">Delete this task</button>
+            <button class="button button-delete is-light" onclick="location.href='{{ task.id }}/confirm'">Delete this task</button>
         </div>
     </section>
 
     <section class="section">
         <div class="container">
-            <button class="button is-link is-light" onclick="location.href='../'">Back to index page</button>
+            <button class="button button-back is-light" onclick="location.href='../'">Back to index page</button>
         </div>
     </section>
 {% endblock content %}
diff --git a/static/task/index.html.tera b/static/task/index.html.tera
@@ -17,7 +17,7 @@
             <form class="inline" action="/" method="post">
                 <input type="text" placeholder="new task name?"
                     name="name" id="name" value="" autofocus>
-                <button class="button is-small is-info is-light" type="submit">add</button>
+                <button class="button button-add-small is-info is-light" type="submit">add</button>
             </form>
 
             <table class="table">
@@ -35,7 +35,7 @@
                                 {% if task.label_id %}
                                 {% for label in labels %}
                                 {% if label.id == task.label_id %}
-                                <button class="button is-outlined label-button" style="background-color: {{ label.color_hex }}" onclick="location.href='/label/{{ task.label_id }}'">
+                                <button class="button label-button" style="background-color: {{ label.color_hex }}" onclick="location.href='/label/{{ task.label_id }}'">
                                     {{ label.name }}
                                 </button>
                                 {% break %}
@@ -50,7 +50,7 @@
                             <td>
                                 <form class="inline" action="{{ task.id }}/date" method="post">
                                     <input type="hidden" name="_method" value="post" />
-                                    <button class="button is-primary is-light" type="submit">I did it today!</button>
+                                    <button class="button button-update is-light" type="submit">I did it today!</button>
                                 </form>
                             </td>
                         </tr>