docs: fix UI bug on rules index and details pages (#16082)

* fix: UI bug on rules index * fix: UI bug in rule details page * fix: UI bug on rule details page * fix: update rules scss * docs: fix UI bug on rule index and details page * docs: revamp rules style * docs: format scss file
eslint · Jul 6, 2022 · 09f6acb · 09f6acb
1 parent f5db264
commit 09f6acb
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 3 deletions.
diff --git a/docs/src/_includes/layouts/doc.html b/docs/src/_includes/layouts/doc.html
@@ -65,8 +65,10 @@ <h2 id="resources">Resources</h2>
             <div class="docs-main__content">
                 <h1>{{ title }}</h1>
                 {% if rule_meta %}
+                    {%set id = true if (rule_meta.docs.recommended or rule_meta.fixable or rule_meta.hasSuggestions) else false %}
                     <p>{{ rule_meta.docs.description | markdown | safe }}</p>
                     {{ ruleCategories({
+                    index: id,
                     recommended: rule_meta.docs.recommended,
                     fixable: rule_meta.fixable,
                     hasSuggestions: rule_meta.hasSuggestions

diff --git a/docs/src/assets/scss/components/rules.scss b/docs/src/assets/scss/components/rules.scss
@@ -1,14 +1,41 @@
 .rule-categories {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-    gap: 2rem 1rem;
+    gap: 0;
     margin-bottom: 3rem;
+    background-color: var(--lightest-background-color);
+    border: 1px solid var(--divider-color);
+    border-radius: var(--border-radius);
 
     .rule-category {
         margin: 0;
-        padding: 0;
+        padding: 1rem;
         background: none;
         border: none;
+
+        @media screen and (min-width:768px){
+            &:not(:first-child)::after {
+                content: "";
+                display: block;
+                padding: 1px;
+                border-left: 1px solid var(--divider-color);
+                left: 0px;
+            }
+        }
+
+        @media screen and (min-width:768px) and (max-width:1023px), screen and (min-width:1440px){
+            &:not(:first-child)::after {
+                height: 70%;
+                position: absolute;
+            }
+        }
+
+        @media screen and (min-width:1024px) and (max-width:1439px){
+            &:nth-child(2)::after {
+                height: 70%;
+                position: absolute;
+            }
+        }
     }
 
     .rule-category__description {
@@ -19,6 +46,7 @@
 .rule-category {
     font-size: var(--step--1);
     display: flex;
+    position: relative;
     flex-wrap: wrap;
     align-items: flex-start;
     gap: 1rem;
@@ -133,7 +161,6 @@ a.rule__name {
     }
 }
 
-
 /* related rules */
 
 .related-rules__list {