This is an automated email from the ASF dual-hosted git repository.

vpyatkov pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/ignite-website.git


The following commit(s) were added to refs/heads/master by this push:
     new 214f0129a1 Added horizontal scroll for railroad diagrams (#145)
214f0129a1 is described below

commit 214f0129a1a785682a24bb675429d28ce1fcc430
Author: Alexey Alexandrov <[email protected]>
AuthorDate: Wed Nov 23 11:42:48 2022 +0200

    Added horizontal scroll for railroad diagrams (#145)
    
    Co-authored-by: Alexey Alexandrov <[email protected]>
---
 _docs/_sass/railroad-diagram.scss |  1 +
 assets/css/docs.css.map           |  2 +-
 assets/css/styles.css             |  2 ++
 assets/css/styles.css.map         | 30 +++++++++++++++---------------
 4 files changed, 19 insertions(+), 16 deletions(-)

diff --git a/_docs/_sass/railroad-diagram.scss 
b/_docs/_sass/railroad-diagram.scss
index 245a81778d..04526f0c00 100644
--- a/_docs/_sass/railroad-diagram.scss
+++ b/_docs/_sass/railroad-diagram.scss
@@ -1,4 +1,5 @@
 .diagram-container {
+  overflow-y: auto;
 
   svg {
     background-color: hsl(0, 0%, 100%);
diff --git a/assets/css/docs.css.map b/assets/css/docs.css.map
index 8ff24b9680..22bfe17934 100644
--- a/assets/css/docs.css.map
+++ b/assets/css/docs.css.map
@@ -5,7 +5,7 @@
                "docs.scss"
        ],
        "sourcesContent": [
-               "// Docs-specific global styles\r\nbody {\r\n}\r\n"
+               "// Docs-specific global styles\nbody {\n}\n"
        ],
        "names": [],
        "mappings": ""
diff --git a/assets/css/styles.css b/assets/css/styles.css
index f51d64bd20..2892772e51 100644
--- a/assets/css/styles.css
+++ b/assets/css/styles.css
@@ -357,6 +357,8 @@ body > footer { border-top: 2px solid #dddddd; height: 
var(--footer-height); fon
 
 @media (max-width: 570px) { body > footer .copyright__extra { display: none; } 
}
 
+.diagram-container { overflow-y: auto; }
+
 .diagram-container svg { background-color: white; }
 
 .diagram-container path { stroke-width: 2; stroke: black; fill: rgba(0, 0, 0, 
0); }
diff --git a/assets/css/styles.css.map b/assets/css/styles.css.map
index d63ad75fa2..e28a1835b3 100644
--- a/assets/css/styles.css.map
+++ b/assets/css/styles.css.map
@@ -18,21 +18,21 @@
                "_sass/asciidoc-pygments.scss"
        ],
        "sourcesContent": [
-               "@import \"variables\";\r\n@import \"header\";\r\n@import 
\"code\";\r\n@import \"rouge-base16-solarized\";\r\n@import 
\"text\";\r\n@import \"callouts\";\r\n@import \"layout\";\r\n@import 
\"left-nav\";\r\n@import \"right-nav\";\r\n@import \"footer\";\r\n@import 
\"railroad-diagram\";\r\n\r\n@import \"docs\";\r\n\r\n@import 
\"asciidoc-pygments\";",
-               ":root {\r\n    --gg-red: #ec1c24;\r\n    --gg-orange: 
#ec1c24;\r\n    --gg-orange-dark: #bc440b;\r\n    --gg-orange-filter: 
invert(47%) sepia(61%) saturate(1950%) hue-rotate(345deg) brightness(100%) 
contrast(95%);\r\n    --gg-dark-gray: #333333;\r\n    --orange-line-thickness: 
3px;\r\n    --block-code-background: rgba(241, 241, 241, 20%);\r\n    
--inline-code-background: rgba(241, 241, 241, 90%);\r\n    --padding-top: 25px; 
\r\n    --link-color: #ec1c24;\r\n    --body-background: #fcf [...]
-               "header {\r\n\r\n    min-height: var(--header-height);\r\n    
background: white;\r\n    box-shadow: 0 4px 10px 0 #eeeeee, 0 0 4px 0 
#d5d5d5;\r\n    \r\n\r\n    z-index: 1;\r\n\r\n    #promotion-bar {\r\n        
background-color: #333333;\r\n        padding: 8px;\r\n        \r\n        p 
{\r\n            font-size: 14px;\r\n            line-height: 1.4em;\r\n        
    font-weight: 600;\r\n            padding: 0;\r\n            margin: 
0;\r\n\r\n            color: #f0f0f0;\r\n          [...]
-               "pre, pre.rouge {\r\n    padding: 8px 15px;\r\n    background: 
var(--block-code-background) !important;\r\n    border-radius: 5px;\r\n    
border: 1px solid #e5e5e5;\r\n    overflow-x: auto;\r\n    // So code copy 
button doesn't overflow\r\n    min-height: 36px;\r\n\tline-height: 18px;\r\n    
color: #545454;\r\n}\r\n\r\ncode {\r\n    color: #545454;\r\n}\r\n\r\npre.rouge 
code {\r\n    background: none !important;\r\n}\r\n\r\npre.rouge .tok-err {\r\n 
 \tborder: none !important;\r\n  }\r\ [...]
-               ".highlight table td { padding: 5px; }\r\n.highlight table pre 
{ margin: 0; }\r\n.highlight, .highlight .w {\r\n  color: 
#586e75;\r\n}\r\n.highlight .err {\r\n  color: #002b36;\r\n  background-color: 
#dc322f;\r\n}\r\n.highlight .c, .highlight .cd, .highlight .cm, .highlight .c1, 
.highlight .cs {\r\n  color: #657b83;\r\n}\r\n.highlight .cp {\r\n  color: 
#b58900;\r\n}\r\n.highlight .nt {\r\n  color: #b58900;\r\n}\r\n.highlight .o, 
.highlight .ow {\r\n  color: #93a1a1;\r\n}\r\n.highlight  [...]
-               "body {\r\n    font-family: 'Open Sans', 
sans-serif;\r\n}\r\n\r\nh1, h2, h3, h4 {\r\n    color: #000;\r\n    
font-weight: normal;\r\n    font-family: 'Open Sans';\r\n}\r\n\r\nh1 {\r\n    
font-size: 36px;\r\n    line-height: 40px;\r\n}\r\n\r\na {\r\n    
text-decoration: none;\r\n    color: var(--link-color);\r\n}\r\n\r\n\r\nsection 
{\r\n    color: #545454;\r\n}\r\n\r\ntable {\r\n    border-collapse: 
collapse;\r\n\r\n    td, th {\r\n        text-align: left;\r\n        padding: 
5px 10px; [...]
-               ".admonitionblock {\r\n    border-left: 6px solid 
var(--callout-border);\r\n    background: var(--callout-background);\r\n    
color: var(--callout-text);\r\n    margin-left: 0;\r\n    \r\n    position: 
relative;\r\n    display: flex;\r\n    margin-bottom: 16px;\r\n\t\r\n\ttable 
{\r\n        margin: 0 !important;\r\n        width: 100%;\r\n\r\n        td 
{\r\n            width: 100%;\r\n        }\r\n\t}\r\n\r\n    &+aside {\r\n      
  margin-top: 1em;\r\n    }\r\n\r\n    .icon {\r\n     [...]
-               "body {\r\n    --header-height: 64px;\r\n    
--promotion-bar-height: 35px;\r\n    --footer-height: 104px;\r\n    
--footer-gap: 60px;\r\n\r\n    // @media (min-width: 451px) and (max-width: 
850px) {\r\n    //     --header-height: 111px;        \r\n    // }\r\n\r\n    
padding: 0;\r\n    margin: 0;\r\n    display: flex;\r\n    flex-direction: 
column;\r\n    min-height: 100vh;\r\n    background-color: 
var(--body-background);\r\n    font-family: 'Open Sans',sans-serif;\r\n\r\n    
&>section  [...]
-               ".left-nav {\r\n    padding: 10px 20px;\r\n    width: 
289px;\r\n    overflow-y: auto;\r\n    top: calc(var(--header-height) + 
var(--promotion-bar-height));\r\n    height: calc(100vh - var(--header-height) 
- var(--promotion-bar-height));\r\n    font-family: 'Open Sans';\r\n    
padding-top: var(--padding-top);\r\n    background-color: 
var(--body-background);\r\n\r\n    li {\r\n        list-style: none;\r\n    }   
 \r\n    a, button {\r\n        text-decoration: none;\r\n        color: #7 
[...]
-               ".right-nav {\r\n    width: 289px;\r\n    padding: 12px 
26px;\r\n    overflow-y: auto;\r\n    height: calc(100vh - 
var(--header-height));\r\n    top: var(--header-height);\r\n    position: 
-webkit-sticky;\r\n    position: sticky;\r\n    display: flex;\r\n    
flex-direction: column;\r\n    font-family: 'Open sans';\r\n    padding-top: 
var(--padding-top);\r\n    background-color: #ffffff;\r\n    \r\n    h6 {\r\n   
     margin: 12px 0;\r\n        font-size: 16px;\r\n        font-weight: n [...]
-               "body > footer {\r\n    border-top: 2px solid #dddddd;\r\n    
height: var(--footer-height);\r\n    font-size: 16px;\r\n    color: 
#393939;\r\n    display: flex;\r\n    justify-content: space-between;\r\n    
align-items: center;\r\n\r\n\r\n    @media (max-width: 570px) {\r\n        
.copyright__extra {\r\n            display: none;\r\n        }\r\n    
}\r\n}\r\n// .right-nav footer {\r\n//     font-size: 12px;\r\n//     padding: 
calc(var(--footer-gap) * 0.3) 0 5px;;\r\n//     text-align: [...]
-               ".diagram-container {\r\n\r\n  svg {\r\n    background-color: 
hsl(0, 0%, 100%);\r\n  }\r\n\r\n  path {\r\n    stroke-width: 2;\r\n    stroke: 
black;\r\n    fill: rgba(0, 0, 0, 0);\r\n  }\r\n\r\n  text {\r\n    font: bold 
14px monospace;\r\n    text-anchor: middle;\r\n    white-space: pre;\r\n\r\n    
&.diagram-text {\r\n      font-size: 12px;\r\n    }\r\n\r\n    &.diagram-arrow 
{\r\n      font-size: 16px;\r\n    }\r\n\r\n    &.label {\r\n      text-anchor: 
start;\r\n    }\r\n\r\n    &.c [...]
-               "section.page-docs {\r\n    display: grid;\r\n    transition: 
grid-template-columns 0.15s;\r\n    grid-template-columns: auto 1fr auto;\r\n   
 grid-template-rows: 100%;\r\n    grid-template-areas: 'left-nav content 
right-nav';\r\n    line-height: 20px;\r\n    max-width: 1440px;\r\n    margin: 
auto;\r\n    width: 100%;\r\n\r\n    &>article {\r\n        // box-shadow: -1px 
13px 20px 0 #696c70;\r\n        border-left: 1px solid #eeeeee;\r\n        
background-color: #ffffff;\r\n        pad [...]
-               "pre.pygments .hll { background-color: #ffffcc 
}\r\npre.pygments, pre.pygments code { background: #ffffff; }\r\npre.pygments 
.tok-c { color: #008000 } /* Comment */\r\npre.pygments .tok-err { border: 1px 
solid #FF0000 } /* Error */\r\npre.pygments .tok-k { color: #0000ff } /* 
Keyword */\r\npre.pygments .tok-ch { color: #008000 } /* Comment.Hashbang 
*/\r\npre.pygments .tok-cm { color: #008000 } /* Comment.Multiline 
*/\r\npre.pygments .tok-cp { color: #0000ff } /* Comment.Preproc */\r\np [...]
+               "@import \"variables\";\n@import \"header\";\n@import 
\"code\";\n@import \"rouge-base16-solarized\";\n@import \"text\";\n@import 
\"callouts\";\n@import \"layout\";\n@import \"left-nav\";\n@import 
\"right-nav\";\n@import \"footer\";\n@import \"railroad-diagram\";\n\n@import 
\"docs\";\n\n@import \"asciidoc-pygments\";",
+               ":root {\n    --gg-red: #ec1c24;\n    --gg-orange: #ec1c24;\n   
 --gg-orange-dark: #bc440b;\n    --gg-orange-filter: invert(47%) sepia(61%) 
saturate(1950%) hue-rotate(345deg) brightness(100%) contrast(95%);\n    
--gg-dark-gray: #333333;\n    --orange-line-thickness: 3px;\n    
--block-code-background: rgba(241, 241, 241, 20%);\n    
--inline-code-background: rgba(241, 241, 241, 90%);\n    --padding-top: 25px; 
\n    --link-color: #ec1c24;\n    --body-background: #fcfcfc;\n}\n\n@font-face  
[...]
+               "header {\n\n    min-height: var(--header-height);\n    
background: white;\n    box-shadow: 0 4px 10px 0 #eeeeee, 0 0 4px 0 #d5d5d5;\n  
  \n\n    z-index: 1;\n\n    #promotion-bar {\n        background-color: 
#333333;\n        padding: 8px;\n        \n        p {\n            font-size: 
14px;\n            line-height: 1.4em;\n            font-weight: 600;\n         
   padding: 0;\n            margin: 0;\n\n            color: #f0f0f0;\n         
   text-align: center;\n\n            a {\ [...]
+               "pre, pre.rouge {\n    padding: 8px 15px;\n    background: 
var(--block-code-background) !important;\n    border-radius: 5px;\n    border: 
1px solid #e5e5e5;\n    overflow-x: auto;\n    // So code copy button doesn't 
overflow\n    min-height: 36px;\n\tline-height: 18px;\n    color: 
#545454;\n}\n\ncode {\n    color: #545454;\n}\n\npre.rouge code {\n    
background: none !important;\n}\n\npre.rouge .tok-err {\n  \tborder: none 
!important;\n  }\n\ncode-tabs.code-tabs__initialized {\n    dis [...]
+               ".highlight table td { padding: 5px; }\n.highlight table pre { 
margin: 0; }\n.highlight, .highlight .w {\n  color: #586e75;\n}\n.highlight 
.err {\n  color: #002b36;\n  background-color: #dc322f;\n}\n.highlight .c, 
.highlight .cd, .highlight .cm, .highlight .c1, .highlight .cs {\n  color: 
#657b83;\n}\n.highlight .cp {\n  color: #b58900;\n}\n.highlight .nt {\n  color: 
#b58900;\n}\n.highlight .o, .highlight .ow {\n  color: #93a1a1;\n}\n.highlight 
.p, .highlight .pi {\n  color: #93a1a1;\n} [...]
+               "body {\n    font-family: 'Open Sans', sans-serif;\n}\n\nh1, 
h2, h3, h4 {\n    color: #000;\n    font-weight: normal;\n    font-family: 
'Open Sans';\n}\n\nh1 {\n    font-size: 36px;\n    line-height: 40px;\n}\n\na 
{\n    text-decoration: none;\n    color: var(--link-color);\n}\n\n\nsection 
{\n    color: #545454;\n}\n\ntable {\n    border-collapse: collapse;\n\n    td, 
th {\n        text-align: left;\n        padding: 5px 10px;\n        
border-bottom: 1px solid hsl(0, 0%, 85%);\n        [...]
+               ".admonitionblock {\n    border-left: 6px solid 
var(--callout-border);\n    background: var(--callout-background);\n    color: 
var(--callout-text);\n    margin-left: 0;\n    \n    position: relative;\n    
display: flex;\n    margin-bottom: 16px;\n\t\n\ttable {\n        margin: 0 
!important;\n        width: 100%;\n\n        td {\n            width: 100%;\n   
     }\n\t}\n\n    &+aside {\n        margin-top: 1em;\n    }\n\n    .icon {\n  
      background-image: var(--callout-icon);\n     [...]
+               "body {\n    --header-height: 64px;\n    
--promotion-bar-height: 35px;\n    --footer-height: 104px;\n    --footer-gap: 
60px;\n\n    // @media (min-width: 451px) and (max-width: 850px) {\n    //     
--header-height: 111px;        \n    // }\n\n    padding: 0;\n    margin: 0;\n  
  display: flex;\n    flex-direction: column;\n    min-height: 100vh;\n    
background-color: var(--body-background);\n    font-family: 'Open 
Sans',sans-serif;\n\n    &>section {\n        flex: 1;\n    }\n}\nheade [...]
+               ".left-nav {\n    padding: 10px 20px;\n    width: 289px;\n    
overflow-y: auto;\n    top: calc(var(--header-height) + 
var(--promotion-bar-height));\n    height: calc(100vh - var(--header-height) - 
var(--promotion-bar-height));\n    font-family: 'Open Sans';\n    padding-top: 
var(--padding-top);\n    background-color: var(--body-background);\n\n    li 
{\n        list-style: none;\n    }    \n    a, button {\n        
text-decoration: none;\n        color: #757575;\n        font-size: 16p [...]
+               ".right-nav {\n    width: 289px;\n    padding: 12px 26px;\n    
overflow-y: auto;\n    height: calc(100vh - var(--header-height));\n    top: 
var(--header-height);\n    position: -webkit-sticky;\n    position: sticky;\n   
 display: flex;\n    flex-direction: column;\n    font-family: 'Open sans';\n   
 padding-top: var(--padding-top);\n    background-color: #ffffff;\n    \n    h6 
{\n        margin: 12px 0;\n        font-size: 16px;\n        font-weight: 
normal;\n    }\n\n    ul {\n        [...]
+               "body > footer {\n    border-top: 2px solid #dddddd;\n    
height: var(--footer-height);\n    font-size: 16px;\n    color: #393939;\n    
display: flex;\n    justify-content: space-between;\n    align-items: 
center;\n\n\n    @media (max-width: 570px) {\n        .copyright__extra {\n     
       display: none;\n        }\n    }\n}\n// .right-nav footer {\n//     
font-size: 12px;\n//     padding: calc(var(--footer-gap) * 0.3) 0 5px;;\n//     
text-align: left;\n//     margin: auto 0 0;\n\n// [...]
+               ".diagram-container {\n  overflow-y: auto;\n\n  svg {\n    
background-color: hsl(0, 0%, 100%);\n  }\n\n  path {\n    stroke-width: 2;\n    
stroke: black;\n    fill: rgba(0, 0, 0, 0);\n  }\n\n  text {\n    font: bold 
14px monospace;\n    text-anchor: middle;\n    white-space: pre;\n\n    
&.diagram-text {\n      font-size: 12px;\n    }\n\n    &.diagram-arrow {\n      
font-size: 16px;\n    }\n\n    &.label {\n      text-anchor: start;\n    }\n\n  
  &.comment {\n      font: italic 12px mon [...]
+               "section.page-docs {\n    display: grid;\n    transition: 
grid-template-columns 0.15s;\n    grid-template-columns: auto 1fr auto;\n    
grid-template-rows: 100%;\n    grid-template-areas: 'left-nav content 
right-nav';\n    line-height: 20px;\n    max-width: 1440px;\n    margin: 
auto;\n    width: 100%;\n\n    &>article {\n        // box-shadow: -1px 13px 
20px 0 #696c70;\n        border-left: 1px solid #eeeeee;\n        
background-color: #ffffff;\n        padding: 0 50px 30px;\n        gr [...]
+               "pre.pygments .hll { background-color: #ffffcc }\npre.pygments, 
pre.pygments code { background: #ffffff; }\npre.pygments .tok-c { color: 
#008000 } /* Comment */\npre.pygments .tok-err { border: 1px solid #FF0000 } /* 
Error */\npre.pygments .tok-k { color: #0000ff } /* Keyword */\npre.pygments 
.tok-ch { color: #008000 } /* Comment.Hashbang */\npre.pygments .tok-cm { 
color: #008000 } /* Comment.Multiline */\npre.pygments .tok-cp { color: #0000ff 
} /* Comment.Preproc */\npre.pygments .tok [...]
        ],
        "names": [],
-       "mappings": 
"CCAC,AAAD,IAAK,CAAC,EACF,QAAQ,CAAA,QAAC,EACT,WAAW,CAAA,QAAC,EACZ,gBAAgB,CAAA,QAAC,EACjB,kBAAkB,CAAA,yFAAC,EACnB,cAAc,CAAA,QAAC,EACf,uBAAuB,CAAA,IAAC,EACxB,uBAAuB,CAAA,yBAAC,EACxB,wBAAwB,CAAA,yBAAC,EACzB,aAAa,CAAA,KAAC,EACd,YAAY,CAAA,QAAC,EACb,iBAAiB,CAAA,QAAC,GACrB;;AAED,UAAU,GACN,WAAW,EAAE,WAAW,EACxB,WAAW,EAAE,GAAG,EAChB,YAAY,EAAE,IAAI,EAClB,UAAU,EAAE,MAAM;;AClBtB,AAAA,MAAM,CAAC,EAEH,UAAU,EAAE,oBAAoB,EAChC,UAAU,EAAE,KAAK,EACjB,UAAU,EAAE,uCAAuC,EAGnD,OAAO,EAAE,CAAC,GAiYb;;A
 [...]
+       "mappings": 
"CCAC,AAAD,IAAK,CAAC,EACF,QAAQ,CAAA,QAAC,EACT,WAAW,CAAA,QAAC,EACZ,gBAAgB,CAAA,QAAC,EACjB,kBAAkB,CAAA,yFAAC,EACnB,cAAc,CAAA,QAAC,EACf,uBAAuB,CAAA,IAAC,EACxB,uBAAuB,CAAA,yBAAC,EACxB,wBAAwB,CAAA,yBAAC,EACzB,aAAa,CAAA,KAAC,EACd,YAAY,CAAA,QAAC,EACb,iBAAiB,CAAA,QAAC,GACrB;;AAED,UAAU,GACN,WAAW,EAAE,WAAW,EACxB,WAAW,EAAE,GAAG,EAChB,YAAY,EAAE,IAAI,EAClB,UAAU,EAAE,MAAM;;AClBtB,AAAA,MAAM,CAAC,EAEH,UAAU,EAAE,oBAAoB,EAChC,UAAU,EAAE,KAAK,EACjB,UAAU,EAAE,uCAAuC,EAGnD,OAAO,EAAE,CAAC,GAiYb;;A
 [...]
 }
\ No newline at end of file

Reply via email to