From e78c6895c0fd5ae537a330fcf91b3d29a0c9f012 Mon Sep 17 00:00:00 2001 From: dobromirts Date: Wed, 3 Apr 2024 22:18:50 +0300 Subject: [PATCH 1/4] Add appbuilder theme --- gulpfile.js | 4 +- src/styles/appbuilder/_variables.scss | 3 + src/styles/appbuilder/main.scss | 62 ++ src/styles/shared/components/_footer.scss | 2 +- .../shared/components/header/_navbar.scss | 2 +- template/conceptual.html.primary.js | 2 +- template/layout/_master.tmpl | 8 + .../appbuilder/appbuilderfoot.ja.tmpl.partial | 92 ++ .../appbuilder/appbuilderfoot.tmpl.partial | 92 ++ .../partials/appbuilder/footer.tmpl.partial | 13 + .../partials/appbuilder/navbar.tmpl.partial | 882 ++++++++++++++++++ template/partials/head.tmpl.partial | 44 + template/partials/navbar.tmpl.partial | 1 + template/partials/scripts.tmpl.partial | 10 + webpack.dev.js | 3 +- webpack.prod.js | 3 +- 16 files changed, 1217 insertions(+), 6 deletions(-) create mode 100644 src/styles/appbuilder/_variables.scss create mode 100644 src/styles/appbuilder/main.scss create mode 100644 template/partials/appbuilder/appbuilderfoot.ja.tmpl.partial create mode 100644 template/partials/appbuilder/appbuilderfoot.tmpl.partial create mode 100644 template/partials/appbuilder/footer.tmpl.partial create mode 100644 template/partials/appbuilder/navbar.tmpl.partial diff --git a/gulpfile.js b/gulpfile.js index 731d0e01..fcd24fc9 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -46,7 +46,9 @@ const generateBundlingGlobalMetadata = (done, dev=false) => { {name:"lunr-search", ext: "js"}, {name:"runtime", ext: "js"}, {name:"igniteui", ext: "css"}, - {name:"slingshot", ext: "css"}] + {name:"slingshot", ext: "css"}, + {name:"appbuilder", ext: "css"}, + ] if(!dev) { outputBuildFiles = fs.readdirSync(path.join(__dirname, WEBPACK_BUILD_DIST)); } diff --git a/src/styles/appbuilder/_variables.scss b/src/styles/appbuilder/_variables.scss new file mode 100644 index 00000000..636a1e11 --- /dev/null +++ b/src/styles/appbuilder/_variables.scss @@ -0,0 +1,3 @@ +@import '../ignite-ui/variables'; + +$link-decoration: none; \ No newline at end of file diff --git a/src/styles/appbuilder/main.scss b/src/styles/appbuilder/main.scss new file mode 100644 index 00000000..e26b38b3 --- /dev/null +++ b/src/styles/appbuilder/main.scss @@ -0,0 +1,62 @@ +@import '~highlight.js/scss/vs2015.scss'; +@import '../shared/mixins'; +@import './variables'; +@import '../shared/global'; + +@media (max-width: 991px) { + .sidenav-container { + max-width: 100%; + } +} +@media (min-width: 768px) { + .article-container { + max-width: 100%; + } +} + +@media only screen and (min-width: 1281px) { + .mega-sticky-wrapper{ + height: 120px !important; + } + #mega-menu-wrap-max_mega_menu_2{ + height: 120px !important; + } +} + +@media only screen and (max-width: 1281px) { + .mega-sticky-wrapper{ + height: unset !important; + } + #mega-menu-wrap-max_mega_menu_2{ + height: unset !important; + } +} + +@media only screen and (max-width: 1281px) { + #main{ + padding-top: rem(16px); + } +} + +#mega-menu-wrap-max_mega_menu_2 { + background: white; + box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2); +} + +.footer { + background: #282561 !important; + padding: 0; +} + +.footer.footer-utils { + background: #19193d !important; + padding-top: 1.5rem !important; + padding-bottom: 1.5rem !important; +} + +.footer.footer-copyright { + background: #19193d !important; + color: #999 !important; + padding: 0 0 1rem !important; + text-align: center !important; +} diff --git a/src/styles/shared/components/_footer.scss b/src/styles/shared/components/_footer.scss index a766da5f..72ca3540 100644 --- a/src/styles/shared/components/_footer.scss +++ b/src/styles/shared/components/_footer.scss @@ -4,7 +4,7 @@ footer { } .footer { - border-top: 1px solid $border-color; + //border-top: 1px solid $border-color; background-color: $footer-bg; padding: 15px 0; } diff --git a/src/styles/shared/components/header/_navbar.scss b/src/styles/shared/components/header/_navbar.scss index bee87668..f496d599 100644 --- a/src/styles/shared/components/header/_navbar.scss +++ b/src/styles/shared/components/header/_navbar.scss @@ -78,7 +78,7 @@ display: none !important; } -.btn-secondary { +.btn-secondary:not(.px-3) { padding: 0px 8px 0px 0px !important; color: #9d9d9d; font-size: 0.825rem; diff --git a/template/conceptual.html.primary.js b/template/conceptual.html.primary.js index bd6720f9..a24b57a0 100644 --- a/template/conceptual.html.primary.js +++ b/template/conceptual.html.primary.js @@ -60,7 +60,7 @@ exports.transform = function (model) { } else if (model._platform === "appbuilder") { model._isAppBuilder = true; model._isIgnite = true; - model._showHelloBar = true; + model._showHelloBar = false; } else if (model._platform === "blazor") { model._isBlazor = true; model._isIgnite = true; diff --git a/template/layout/_master.tmpl b/template/layout/_master.tmpl index 4c0e1bb4..ac260af5 100644 --- a/template/layout/_master.tmpl +++ b/template/layout/_master.tmpl @@ -21,6 +21,10 @@ {{^_disableNavbar}} {{>partials/slingshot/navbar}} {{/_disableNavbar}} {{/slingshotTheme}} + {{#appbuilderTheme}} + {{^_disableNavbar}} {{>partials/appbuilder/navbar}} {{/_disableNavbar}} + {{/appbuilderTheme}} + {{#igniteuiTheme}} {{^_disableNavbar}} {{>partials/navbar}} {{/_disableNavbar}} {{/igniteuiTheme}} @@ -63,6 +67,10 @@ {{^_disableFooter}} {{>partials/slingshot/footer}} {{/_disableFooter}} {{/slingshotTheme}} + {{#appbuilderTheme}} + {{^_disableFooter}} {{>partials/appbuilder/footer}} {{/_disableFooter}} + {{/appbuilderTheme}} + {{#igniteuiTheme}} {{^_disableFooter}} {{>partials/footer}} {{/_disableFooter}} {{/igniteuiTheme}} diff --git a/template/partials/appbuilder/appbuilderfoot.ja.tmpl.partial b/template/partials/appbuilder/appbuilderfoot.ja.tmpl.partial new file mode 100644 index 00000000..c1e84dab --- /dev/null +++ b/template/partials/appbuilder/appbuilderfoot.ja.tmpl.partial @@ -0,0 +1,92 @@ + + + \ No newline at end of file diff --git a/template/partials/appbuilder/appbuilderfoot.tmpl.partial b/template/partials/appbuilder/appbuilderfoot.tmpl.partial new file mode 100644 index 00000000..c1e84dab --- /dev/null +++ b/template/partials/appbuilder/appbuilderfoot.tmpl.partial @@ -0,0 +1,92 @@ + + + \ No newline at end of file diff --git a/template/partials/appbuilder/footer.tmpl.partial b/template/partials/appbuilder/footer.tmpl.partial new file mode 100644 index 00000000..8921535c --- /dev/null +++ b/template/partials/appbuilder/footer.tmpl.partial @@ -0,0 +1,13 @@ + diff --git a/template/partials/appbuilder/navbar.tmpl.partial b/template/partials/appbuilder/navbar.tmpl.partial new file mode 100644 index 00000000..c3023724 --- /dev/null +++ b/template/partials/appbuilder/navbar.tmpl.partial @@ -0,0 +1,882 @@ + diff --git a/template/partials/head.tmpl.partial b/template/partials/head.tmpl.partial index 1c3baa6f..6cb3470d 100644 --- a/template/partials/head.tmpl.partial +++ b/template/partials/head.tmpl.partial @@ -43,6 +43,50 @@ full license information.}} + + {{#_isAppBuilder}} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + {{/_isAppBuilder}} + + +{{#_isAppBuilder}} + + + + + +{{/_isAppBuilder}} diff --git a/webpack.dev.js b/webpack.dev.js index 5e92500b..188ea41c 100644 --- a/webpack.dev.js +++ b/webpack.dev.js @@ -8,7 +8,8 @@ module.exports = { entry: { main: './src/app/docfx.ts', igniteui: './src/styles/ignite-ui/main.scss', - slingshot: './src/styles/slingshot/main.scss' + slingshot: './src/styles/slingshot/main.scss', + appbuilder: './src/styles/appbuilder/main.scss' }, devtool: 'eval-source-map', externals: { diff --git a/webpack.prod.js b/webpack.prod.js index f2c29f18..c492e4ec 100644 --- a/webpack.prod.js +++ b/webpack.prod.js @@ -8,7 +8,8 @@ module.exports = { entry: { main: './src/app/docfx.ts', igniteui: './src/styles/ignite-ui/main.scss', - slingshot: './src/styles/slingshot/main.scss' + slingshot: './src/styles/slingshot/main.scss', + appbuilder: './src/styles/appbuilder/main.scss' }, externals: { jquery: 'jQuery' From 6184b593a8b7bb89f28706b687e9052e0d264ea8 Mon Sep 17 00:00:00 2001 From: dobromirts Date: Thu, 4 Apr 2024 12:51:05 +0300 Subject: [PATCH 2/4] chore(*): update text styles and import scripts --- src/styles/appbuilder/_variables.scss | 52 +++++++++++++++++++++++++- src/styles/appbuilder/main.scss | 28 ++++++++++++++ template/partials/head.tmpl.partial | 28 ++------------ template/partials/scripts.tmpl.partial | 28 ++++++++++---- 4 files changed, 104 insertions(+), 32 deletions(-) diff --git a/src/styles/appbuilder/_variables.scss b/src/styles/appbuilder/_variables.scss index 636a1e11..f54e6ce2 100644 --- a/src/styles/appbuilder/_variables.scss +++ b/src/styles/appbuilder/_variables.scss @@ -1,3 +1,53 @@ @import '../ignite-ui/variables'; -$link-decoration: none; \ No newline at end of file +$link-decoration: none; + +// Font +$global-font-family: 'Nunito-Sans', sans-serif; +$global-font-weight: 400; +$global-radius: 0; +$global-line-height: 24px; + +// Text +$text-base: #0a0a0a; +$text-light: #fff; +$text-dim-light: #ddd; +$black: #000; +$text-dark: #222; +$title-color: $text-base; + +// Toc +$toc-font-size: rem(14px); + +// h1 +$h1-f-family: "Figtree", sans-serif; +$h1-f-size: 56px; +$h1-f-weight: bold; +$h1-l-height: 56px; +$h1-m-top: 36px; +$h1-m-bottom: 30px; + +// h2 +$h2-f-family: "Figtree", sans-serif; +$h2-f-size: 48px; +$h2-f-weight: bold; +$h2-l-height: 55px; +$h2-m-top: 36px; +$h2-m-bottom: 16px; + +// h3 +$h3-f-family: "Figtree", sans-serif; + +// h4 +$h4-f-family: "Figtree", sans-serif; + +// h5 +$h5-f-family: "Figtree", sans-serif; + +// h6 +$h6-f-family: "Figtree", sans-serif; +$h6-f-weight: normal; + +// Paragraph +$p-l-height: 30px; +$p-m-bottom: 1.5rem; \ No newline at end of file diff --git a/src/styles/appbuilder/main.scss b/src/styles/appbuilder/main.scss index e26b38b3..9c0b8db3 100644 --- a/src/styles/appbuilder/main.scss +++ b/src/styles/appbuilder/main.scss @@ -43,6 +43,30 @@ box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2); } +.nav-page-headings { + margin-top: unset; +} + +@media only screen and (max-width: 1281px) { + .w-m-100 { + width: 100% !important; + padding-left: rem(16px) !important; + padding-right: rem(16px) !important; + } +} + +.anchorjs-link { + font-size: rem(26px); +} + +.affix ul > li > a { + font-size: rem(14px) !important; +} + +.sidenav__header { + font-size: rem(14px) !important; +} + .footer { background: #282561 !important; padding: 0; @@ -60,3 +84,7 @@ padding: 0 0 1rem !important; text-align: center !important; } + +p { + font-size: rem(20px); +} diff --git a/template/partials/head.tmpl.partial b/template/partials/head.tmpl.partial index 6cb3470d..d59da9ff 100644 --- a/template/partials/head.tmpl.partial +++ b/template/partials/head.tmpl.partial @@ -48,11 +48,12 @@ full license information.}} - - - + + + + @@ -64,27 +65,6 @@ full license information.}} - - - - - - - - - - - - - - - - - - - {{/_isAppBuilder}} diff --git a/template/partials/scripts.tmpl.partial b/template/partials/scripts.tmpl.partial index 08b43fb3..77203d59 100644 --- a/template/partials/scripts.tmpl.partial +++ b/template/partials/scripts.tmpl.partial @@ -16,12 +16,26 @@ full license information.}} {{#_isAppBuilder}} - - - - - + + + + + + + + + + + + + + + + + + + {{/_isAppBuilder}} From 6330cf2f428676a5894984c4c25a7202139dc06f Mon Sep 17 00:00:00 2001 From: dobromirts Date: Thu, 4 Apr 2024 14:13:46 +0300 Subject: [PATCH 3/4] chore(*); update navigation links --- .../appbuilder/appbuilderfoot.ja.tmpl.partial | 92 ------------------- .../appbuilder/appbuilderfoot.tmpl.partial | 2 +- .../partials/appbuilder/footer.tmpl.partial | 7 -- .../partials/appbuilder/navbar.tmpl.partial | 78 +++++++--------- 4 files changed, 33 insertions(+), 146 deletions(-) delete mode 100644 template/partials/appbuilder/appbuilderfoot.ja.tmpl.partial diff --git a/template/partials/appbuilder/appbuilderfoot.ja.tmpl.partial b/template/partials/appbuilder/appbuilderfoot.ja.tmpl.partial deleted file mode 100644 index c1e84dab..00000000 --- a/template/partials/appbuilder/appbuilderfoot.ja.tmpl.partial +++ /dev/null @@ -1,92 +0,0 @@ - - - \ No newline at end of file diff --git a/template/partials/appbuilder/appbuilderfoot.tmpl.partial b/template/partials/appbuilder/appbuilderfoot.tmpl.partial index c1e84dab..e12369fd 100644 --- a/template/partials/appbuilder/appbuilderfoot.tmpl.partial +++ b/template/partials/appbuilder/appbuilderfoot.tmpl.partial @@ -21,7 +21,7 @@
  • - Figma
  • @@ -262,7 +254,7 @@ class="mega-menu-item mega-menu-item-type-custom mega-menu-item-object-custom mega-menu-item-8124" id="mega-menu-item-8124" > - Sketch @@ -303,7 +295,7 @@ > Components @@ -313,7 +305,7 @@ > Themes @@ -321,7 +313,7 @@ class="mega-menu-item mega-menu-item-type-custom mega-menu-item-object-custom mega-menu-item-8127" id="mega-menu-item-8127" > - Views @@ -331,7 +323,7 @@ > Data Sources @@ -363,7 +355,7 @@ >

    |

    Request a Demo CTO @@ -443,7 +435,7 @@ > Dev Team Leader @@ -453,7 +445,7 @@ > Enterprise Architect @@ -463,7 +455,7 @@ > Developer @@ -495,7 +487,7 @@ >

    |

    Request a Demo - Videos @@ -630,7 +622,7 @@ class="mega-menu-item mega-menu-item-type-custom mega-menu-item-object-custom mega-menu-item-8137" id="mega-menu-item-8137" > - Sample Apps @@ -638,7 +630,7 @@ class="mega-menu-item mega-menu-item-type-custom mega-menu-item-object-custom mega-menu-item-8138" id="mega-menu-item-8138" > - Documentation @@ -677,7 +669,7 @@ class="mega-menu-item mega-menu-item-type-custom mega-menu-item-object-custom mega-menu-item-8139" id="mega-menu-item-8139" > - Discord @@ -685,7 +677,7 @@ class="mega-menu-item mega-menu-item-type-custom mega-menu-item-object-custom mega-menu-item-8140" id="mega-menu-item-8140" > - Twitter @@ -693,7 +685,7 @@ class="mega-menu-item mega-menu-item-type-custom mega-menu-item-object-custom mega-menu-item-8141" id="mega-menu-item-8141" > - YouTube @@ -725,7 +717,7 @@ >

    |

    Request a Demo Pricing @@ -755,7 +747,7 @@ id="mega-menu-item-8143" > Try App Builder for Free - English (USA) - -
  • - English (UK) + English
  • - Spanish + Spanish
  • - Japanese + Japanese
  • - Korean + Korean
  • @@ -858,7 +844,7 @@
  • Contact UsSign In From 04a8f98a83110713e3531e891657fb9c3454c13b Mon Sep 17 00:00:00 2001 From: dobromirts Date: Thu, 4 Apr 2024 15:38:49 +0300 Subject: [PATCH 4/4] chore(*): add replacement script --- src/styles/appbuilder/main.scss | 6 ++ template/partials/head.tmpl.partial | 125 +++++++++++++++++++++++++++- 2 files changed, 130 insertions(+), 1 deletion(-) diff --git a/src/styles/appbuilder/main.scss b/src/styles/appbuilder/main.scss index 9c0b8db3..616cbdbb 100644 --- a/src/styles/appbuilder/main.scss +++ b/src/styles/appbuilder/main.scss @@ -67,6 +67,12 @@ font-size: rem(14px) !important; } +#LblacceptGDPRFormSubmission_2 > p { + display: block; + text-align: left; + padding: 0px; + white-space: normal; +} .footer { background: #282561 !important; padding: 0; diff --git a/template/partials/head.tmpl.partial b/template/partials/head.tmpl.partial index d59da9ff..33f302b0 100644 --- a/template/partials/head.tmpl.partial +++ b/template/partials/head.tmpl.partial @@ -64,7 +64,130 @@ full license information.}} - + + {{/_isAppBuilder}}