Changed styles for docs

laravelsu · Nov 10, 2023 · 686eb0f · 686eb0f
1 parent c8e2396
commit 686eb0f
Show file tree

Hide file tree

Showing 2 changed files with 162 additions and 15 deletions.
diff --git a/resources/css/app.scss b/resources/css/app.scss
@@ -312,30 +312,58 @@ $btn-font-weight: 700;
 
 
 // PORT FROM ORCHID NEED CHANGED (AND REMOVED)
-main,
-main div {
-    line-height: 1.8em;
 
-    ul:first-of-type {
+.anchors {
+    ul{
         list-style: none;
-        padding: 0 1rem;
-        ul {
-            list-style: square;
-            padding: 0 2.5rem;
-            a {
-                opacity: 0.7;
-            }
+        padding: 0;
+        li {
+            margin: 0;
+            padding: 0;
         }
-        a {
-            @extend .link-body-emphasis;
-            text-decoration: none;
+        li.anchor-h3 {
+            margin-left: 1.5em;
+            //list-style: inside;
+        }
+
+        li.anchor-h4 {
+            margin-left: 2.5em;
+            //list-style: inside;
+        }
+    }
+    a {
+        opacity: 0.50;
+        @extend .link-body-emphasis;
+        transition: all 340ms ease;
+        text-decoration: none;
+        &:hover {
+            opacity: 1;
+        }
+        &:before{
+            content: "# ";
         }
     }
+}
+
+main,
+main div {
+    line-height: 1.8em;
+
+
+    *:last-child {
+        margin-bottom: 0!important;
+    }
+
 
     ol {
         padding: 0 1.5rem;
     }
 
+    table{
+        @extend .table;
+        @extend .table-bordered;
+    }
+
     .h2,
     .h3,
     h2,
@@ -354,6 +382,10 @@ main div {
         > a {
             text-decoration: underline;
         }
+
+        :empty {
+            display: none;
+        }
     }
 
     code {
@@ -393,8 +425,9 @@ main {
     h5,
     h6 {
         a {
-            color: $black;
+            @extend .link-body-emphasis;
             text-decoration: none;
+            position: relative;
         }
     }
 
@@ -444,6 +477,48 @@ main {
         margin-bottom: 2em !important;
     }
 
+    /*
+    .docs-blockquote-tip, .docs-blockquote-note {
+        display: flex;
+        align-items: center;
+
+        &:before {
+            color: #fff;
+            content: '!';
+            width: 1.5em;
+            height: 1.5em;
+            border-radius: 100%;
+            text-align: center;
+            font-weight: 600;
+            font-size: 1.5em;
+            display: flex;
+            align-self: center;
+            justify-content: center;
+            align-items: center;
+            margin-right: 3em;
+        }
+    }
+
+     */
+
+    .docs-blockquote-tip {
+        background: transparentize($info, 0.85) !important;
+        //border: 1px solid transparentize($info, 0.5);
+        &:before {
+            background-color: transparentize($info, 0.65);
+            content: '💡️';
+        }
+    }
+
+    .docs-blockquote-note {
+        //border: 1px solid transparentize($danger, 0.5);
+        background: transparentize($danger, 0.90) !important;
+        &:before {
+            background-color: transparentize($danger, 0.65);
+            content: '⚠️';
+        }
+    }
+
     blockquote {
         //background: #F9F9FE;
         @extend .bg-body;
@@ -483,3 +558,20 @@ main {
         }
     }
 }
+
+
+
+ #collection-method-list > ul {
+     column-count: 3; -moz-column-count: 3; -webkit-column-count: 3; // Я думаю мы можем увеличь на больших экранах
+     column-gap: 2em; -moz-column-gap: 2em; -webkit-column-gap: 2em;
+     padding-left: 0;
+     list-style: none;
+     li{
+         padding-bottom: 0;
+     }
+ }
+
+#collection-method-list a {
+    display: block;
+}
+
diff --git a/resources/js/app.js b/resources/js/app.js
@@ -45,3 +45,58 @@ document.addEventListener('turbo:load', () => {
         Prism.highlightElement(el);
     });
 });
+
+
+
+
+
+
+
+
+window.testLolo = function highlightSupportPolicyTable() {
+
+    function highlightCells(table) {
+        const currentDate = new Date().valueOf();
+
+        Array.from(table.rows).forEach((row, rowIndex) => {
+            if (rowIndex > 0) {
+                const cells = row.cells;
+                const versionCell = cells[0];
+                const bugDateCell = getCellDate(cells[cells.length - 2]);
+                const securityDateCell = getCellDate(cells[cells.length - 1]);
+
+                if (currentDate > securityDateCell) {
+                    // End of life.
+                    versionCell.classList.add('bg-danger', 'support-policy-highlight');
+                } else if ((currentDate <= securityDateCell) && (currentDate > bugDateCell)) {
+                    // Security fixes only.
+                    versionCell.classList.add('bg-warning', 'support-policy-highlight');
+                }
+            }
+        });
+    }
+
+    const table = document.querySelector('.documentations #support-policy ~ div table:first-of-type');
+
+    if (table) {
+        highlightCells(table);
+
+        return;
+    }
+
+    // <=v9 documentation branches use the old dom structure which doesn't contain the table overflow fix. It's easier to maintain backwards compatibility than to go back and change all the <=v9 branches.
+    const oldTable = document.querySelector('.documentations #support-policy table') || document.querySelector('.documentations table:first-of-type');
+
+    if (oldTable) {
+        highlightCells(oldTable);
+    }
+
+}
+
+function getCellDate(cell) {
+    return Date.parse(cell.innerHTML.replace(/(\d+)(st|nd|rd|th)/, '$1'));
+}
+
+document.addEventListener('turbo:load', () => {
+    window.testLolo();
+})