DEV: CSS refactor and style fixes (#6)

DEV: CSS refactor and style fixes (#6)

  • removes white-space characters

  • adds margins between user icons and counts

  • removes outdated styles

we don’t use <i> tags anymore

  • small padding adjustment

  • removes unnecessary styles

  • removes unwanted styles

  • wraps user counts with markup

  • adjusts line height for policy footer

  • uses font size variable instead

  • adjusts user avatar margins

we need top / bottom margins if there’s a lot of users.

  • Alignment and font size fixes

  • adds user-check icon for users who accepted the policy

This is consistent with what we do for users who have not accepted the policy where we user the user-times icon

  • font-size adjustment

  • change the horder of the markup for user-count and icons

This is more consistent with the way we handle post flags and likes

  • alignment adjustments

  • relocates editor policy styles

  • Relocates policy settings styles

  • reduces specificity

  • reduces specificity

  • padding adjustment

  • reduces specificity and removes unused styles

  • removes unwanted styles

  • removes unused styles

  • padding / margin adjustments

  • removes duplicate class added to icons

instead of adding the same class to both the icon and the anchor, we only add it to the anchor and check if the parent has that class.

Not using duplicate classes results in cleaner CSS and has the added benefit of making the toggle works no matter where you click, the count or the icon

  • uses em units instead of px

  • selector and style improvements

no visual changes here

  • removes duplicate styles

  • uses a block element instead of an inline element

  • don’t wrap button text in policy footer

diff --git a/assets/javascripts/initializers/extend-for-policy.js.es6 b/assets/javascripts/initializers/extend-for-policy.js.es6
index b7a952d..cc237aa 100644
--- a/assets/javascripts/initializers/extend-for-policy.js.es6
+++ b/assets/javascripts/initializers/extend-for-policy.js.es6
@@ -63,21 +63,27 @@ function initializePolicy(api) {
         I18n.t("discourse_policy.not_accepted_tooltip")
       );
       if (accepted.length > 0) {
-        countNotAcceptedHtml = "<span class='seperator'></span>";
+        countNotAcceptedHtml = "<div class='seperator'></div>";
       }
-      let iconN = iconHTML("user-times", { class: "toggle-not-accepted" });
-      countNotAcceptedHtml += `<a class='toggle toggle-not-accepted' title='${title}'>${iconN} ${
-        notAccepted.length
-      }</a>`;
+      let iconN = iconHTML("user-times");
+      countNotAcceptedHtml += `<a class='toggle toggle-not-accepted' title='${title}'>
+                                 <span class="user-count">
+                                   ${notAccepted.length}
+                                 </span>
+                                 ${iconN}
+                               </a>`;
     }
 
     let countAcceptedHtml = "";
     if (accepted.length > 0) {
       let title = escapeExpression(I18n.t("discourse_policy.accepted_tooltip"));
-      let iconA = iconHTML("user", { class: "toggle-accepted" });
-      countAcceptedHtml = `<a class='toggle toggle-accepted' title='${title}'>${iconA} ${
-        accepted.length
-      }</a>`;
+      let iconA = iconHTML("user-check");
+      countAcceptedHtml = `<a class='toggle toggle-accepted' title='${title}'>
+                             <span class="user-count">
+                               ${accepted.length}
+                             </span>
+                             ${iconA}
+                           </a>`;
     }
     const revokeText = escapeExpression(
       $policy.data("revoke") || I18n.t("discourse_policy.revoke_policy")
@@ -415,7 +421,10 @@ function initializePolicy(api) {
         return false;
       }
 
-      if ($target.hasClass("toggle-accepted")) {
+      if (
+        $target.hasClass("toggle-accepted") ||
+        $target.parent().hasClass("toggle-accepted")
+      ) {
         const $policy = $target.closest(".policy");
         const post = findPost();
 
@@ -424,7 +433,10 @@ function initializePolicy(api) {
         render($policy, post);
       }
 
-      if ($target.hasClass("toggle-not-accepted")) {
+      if (
+        $target.hasClass("toggle-not-accepted") ||
+        $target.parent().hasClass("toggle-not-accepted")
+      ) {
         const $policy = $target.closest(".policy");
         const post = findPost();
 
diff --git a/assets/stylesheets/common/discourse-policy.scss b/assets/stylesheets/common/discourse-policy.scss
index 5afab6c..91dfc8a 100644
--- a/assets/stylesheets/common/discourse-policy.scss
+++ b/assets/stylesheets/common/discourse-policy.scss
@@ -1,92 +1,92 @@
-.cooked .policy,
-.d-editor-preview .policy {
+// Policy in post styles
+.cooked .policy {
   position: relative;
-  padding: 0;
   border: 1px solid $primary-low;
 
   .policy-body {
-    padding: 10px;
+    padding: 0.75em;
+    margin-bottom: 2em;
   }
 
   .policy-footer {
     border-top: 1px solid $primary-low;
-    padding: 10px 8px;
-    margin-top: 30px;
-
-    display: flex;
+    padding: 0.75em;
     align-items: center;
+    display: flex;
     justify-content: space-between;
 
-    .user-lists {
-      padding-left: 10px;
-      display: flex;
-      align-items: center;
-      a.toggle {
-        display: flex;
-        align-items: center;
-        font-size: 18px;
-        position: relative;
-        top: 2px;
-        i {
-          margin-right: 5px;
-          position: relative;
-          top: -1px;
-        }
-        margin-right: 10px;
-      }
-      .seperator {
-        height: 28px;
-        width: 3px;
-        border-right: 2px solid $primary-low;
-      }
+    .btn {
+      white-space: nowrap;
+    }
+  }
 
-      .users {
-        margin-right: 5px;
-        img {
-          margin-right: 1px;
-        }
-      }
+  .toggle {
+    display: flex;
+    align-items: center;
+
+    &.toggle-accepted {
+      color: $success;
     }
 
-    a.toggle-not-accepted {
-      color: dark-light-choose($primary-medium, $secondary-medium);
-      margin-left: 15px;
-      margin-right: 5px;
+    &.toggle-not-accepted {
+      color: $primary-medium;
     }
 
-    a.toggle-accepted {
-      color: green;
-      margin-right: 5px;
+    .user-count {
+      display: flex;
+      align-items: center;
+      margin-right: 0.25em;
     }
 
-    .d-icon-user-times {
-      color: dark-light-choose($primary-medium, $secondary-medium);
+    .d-icon {
+      line-height: $line-height-large;
     }
+  }
 
-    .users.not-accepted,
-    .users.accepted {
-      display: inline-block;
+  .user-lists {
+    padding-left: 0.75em;
+    display: flex;
+    font-size: $font-up-1;
+
+    .users {
+      margin-left: 0.5em;
+      display: flex;
+      align-items: center;
+      flex-wrap: wrap;
+
+      .avatar {
+        margin: 1px;
+      }
     }
   }
 
+  .seperator {
+    border-right: 2px solid $primary-low;
+    margin: 0 0.5em;
+    padding: 0.75em 0em;
+  }
+
   .see-policy-settings-btn,
   .edit-policy-settings-btn {
     position: absolute;
-    top: 5px;
-    right: 5px;
+    top: 0.25em;
+    right: 0.25em;
     background: none;
-    color: $primary-medium;
+    padding: 0.5em;
 
     &:hover {
       color: $primary-very-low;
       background: $primary-medium;
     }
   }
+}
 
+// Policy settings styles
+.cooked .policy {
   .policy-settings {
+    display: none; // JS override kicks in when needed.
     border-top: 1px solid $primary-low;
-    padding: 10px 8px;
-    display: none;
+    padding: 0.75em;
     flex-direction: column;
 
     .visible-settings {
@@ -95,34 +95,32 @@
 
     .save-policy-settings-btn {
       margin-left: auto;
-      margin-top: 10px;
     }
   }
 
   .settings-list {
     display: flex;
-    flex: 1;
     flex-direction: column;
 
     .setting {
       display: flex;
       align-items: center;
-      justify-content: flex-start;
-      margin-bottom: 5px;
-
-      &:last-child {
-        margin-bottom: 0;
-      }
+      margin-bottom: 0.75em;
+    }
 
-      .policy-setting-name {
-        flex: 1;
-        margin-right: 5px;
-      }
+    .policy-setting-name {
+      flex: 1;
+    }
 
-      .policy-setting-value {
-        flex: 4;
-        margin-bottom: 0;
-      }
+    .policy-setting-value {
+      flex: 4;
+      margin-bottom: 0;
     }
   }
 }
+
+// Policy in editor styles
+.d-editor-preview .policy {
+  padding: 0 0.5em;
+  border: 1px solid $primary-low;
+}
diff --git a/plugin.rb b/plugin.rb
index aba5a80..ab79eab 100644
--- a/plugin.rb
+++ b/plugin.rb
@@ -8,6 +8,8 @@
 
 register_asset "stylesheets/common/discourse-policy.scss"
 
+register_svg_icon "user-check" if respond_to?(:register_svg_icon)
+
 enabled_site_setting :policy_enabled
 
 PLUGIN_NAME ||= "discourse_policy".freeze

GitHub sha: 69ba2cd2

1 Like