Improve layout for alert-page-header

mysociety · Dec 4, 2024 · fb7d719 · fb7d719
1 parent d9b60c1
commit fb7d719
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 17 deletions.
diff --git a/www/docs/style/sass/parts/_accordion.scss b/www/docs/style/sass/parts/_accordion.scss
@@ -26,6 +26,16 @@
 
     button, h2 {
         margin-bottom: 0;
+        margin-top: 0;
+    }
+
+    .alert-page-header__button-group {
+        display: flex;
+        flex-direction: row;
+        gap: 0.5rem;
+        input {
+            margin-bottom: 0;
+        }
     }
 }
 

diff --git a/www/includes/easyparliament/templates/html/alert/index.php b/www/includes/easyparliament/templates/html/alert/index.php
@@ -302,28 +302,28 @@
                 </form>
               </div>
               <?php } else { ?>
-              <div class="clearfix">
+
+              <div class="alert-page-header">
+                <div>
+                  <h2><?= gettext('Keywords alerts') ?></h2>
+                  <!-- Go to Create alert page -->
+                  <?php if (!$alerts) { ?>
+                    <p><?= gettext('You haven´t created any keyword alerts.') ?></p>
+                  <?php } ?>
+                </div>
+                <div class="alert-page-header__button-group">
                   <form action="<?= $actionurl ?>" method="POST" class="pull-right">
                       <input type="hidden" name="t" value="< ?= _htmlspecialchars($alert['token']) ?>">
                       <input type="submit" class="button button--negative small" name="action" value="<?= gettext('Delete All') ?>">
                   </form>
-              </div>
-
-              <div class="alert-page-header">
-                <div>
-                <h2><?= gettext('Keywords alerts') ?></h2>
-                <!-- Go to Create alert page -->
-                <?php if (!$alerts) { ?>
-                  <p><?= gettext('You haven´t created any keyword alerts.') ?></p>
-                <?php } ?>
+                  <form action="<?= $actionurl ?>" method="post">
+                      <input type="hidden" name="step" value="define">
+                      <button type="submit" class="button small" value="<?= gettext('Create new keyword alert') ?>">
+                        <span><?= gettext('Create new keyword alert') ?></span>
+                        <i aria-hidden="true" class="fi-megaphone"></i>
+                      </button>
+                  </form>
                 </div>
-                <form action="<?= $actionurl ?>" method="post">
-                    <input type="hidden" name="step" value="define">
-                    <button type="submit" class="button small" value="<?= gettext('Create new keyword alert') ?>">
-                      <span><?= gettext('Create new keyword alert') ?></span>
-                      <i aria-hidden="true" class="fi-megaphone"></i>
-                    </button>
-                </form>
               </div>
 
                 <!-- The groups alerts should be sorted by default from most recent mention to oldest one -->