Author: dmagda Date: Thu Mar 5 05:26:52 2020 New Revision: 1874817 URL: http://svn.apache.org/viewvc?rev=1874817&view=rev Log: merged the last changes by Mauricio
Modified: ignite/site/branches/ignite-redisign/css/ignite-redesign.css ignite/site/branches/ignite-redisign/includes/footer.html ignite/site/branches/ignite-redisign/includes/header.html ignite/site/branches/ignite-redisign/includes/scripts.html ignite/site/branches/ignite-redisign/index.html ignite/site/branches/ignite-redisign/scss/ignite-redesign.scss Modified: ignite/site/branches/ignite-redisign/css/ignite-redesign.css URL: http://svn.apache.org/viewvc/ignite/site/branches/ignite-redisign/css/ignite-redesign.css?rev=1874817&r1=1874816&r2=1874817&view=diff ============================================================================== --- ignite/site/branches/ignite-redisign/css/ignite-redesign.css (original) +++ ignite/site/branches/ignite-redisign/css/ignite-redesign.css Thu Mar 5 05:26:52 2020 @@ -7401,22 +7401,30 @@ body { strong { font-weight: 600; } +.sticky-top { + box-shadow: 0px 4px 8px 0px #E5E2E5; + background-color: #ffffff; } + /** start header */ #header #nav { padding: 0.5rem 0; margin-bottom: 0 !important; } #header #nav .navbar-brand img { - width: 12rem; } + width: 12rem; + transition: all 0.5s ease; } #header #nav .navbar-nav { position: absolute; right: 0; } #header #nav .navbar-nav > li.nav-item { - font-size: 16px; } + font-size: 16px; + transition: width 0.2 ease, font-size 0.5s ease; + width: 130px; } #header #nav .navbar-nav li.nav-item a { display: inline-block; padding-right: 1.3em; padding-left: 1.3em; - cursor: pointer; } + cursor: pointer; + transition: padding 0.5s ease; } #header #nav .navbar-nav li.nav-item .dropdown-toggle:after { display: none; } #header #nav .navbar-nav li.nav-item ul.dropdown-menu { @@ -7445,9 +7453,17 @@ strong { padding-bottom: 1em; margin-bottom: -5px; } #header #nav .navbar-nav li.nav-item.show > a.dropdown-toggle { - font-weight: 700; - padding-right: 1.15em; - padding-left: 1.15em; } + font-weight: 700; } + +#header.shrink #nav .navbar-nav > li.nav-item { + font-size: 15px !important; + width: 120px; } + +#header.shrink .btn-secondary { + padding: 0.3rem 1.2rem 0.4rem !important; } + +#header.shrink img { + width: 8rem !important; } #footer { box-shadow: inset 0px 15px 8px -10px #e5e5e5, inset 0px -15px 8px -10px #e5e5e5; } @@ -7480,13 +7496,13 @@ strong { box-shadow: inset 0px 15px 8px -10px #e5e5e5, inset 0px -15px 8px -10px #e5e5e5; } #main-banner .wrapper { background: #187ccc; - background: -moz-linear-gradient(45deg, #187ccc 0%, #0a5a9a 5%, rgba(242, 242, 242, 0) 5%); - background: -webkit-linear-gradient(45deg, #187ccc 0%, #0a5a9a 5%, rgba(242, 242, 242, 0) 5%); - background: linear-gradient(45deg, #187ccc 0%, #0a5a9a 5%, rgba(242, 242, 242, 0) 5%); - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#187ccc",endColorstr="#f2f2f2",GradientType=1); + background: -moz-linear-gradient(45deg, #187ccc 0%, #0a5a9a 5%, rgba(242, 242, 242, 0) 5%, rgba(242, 242, 242, 0) 80%, #0a5a9a 80%, #187ccc 100%); + background: -webkit-linear-gradient(45deg, #187ccc 0%, #0a5a9a 5%, rgba(242, 242, 242, 0) 5%, rgba(242, 242, 242, 0) 80%, #0a5a9a 80%, #187ccc 100%); + background: linear-gradient(45deg, #187ccc 0%, #0a5a9a 5%, rgba(242, 242, 242, 0) 5%, rgba(242, 242, 242, 0) 80%, #0a5a9a 80%, #187ccc 100%); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#187ccc",endColorstr="#187ccc",GradientType=1); padding: 3em 0; } #main-banner h1 { - font-weight: 400; + font-weight: 300; font-size: 30px; line-height: 1.4em; margin-bottom: 1.5em; } @@ -7528,58 +7544,55 @@ strong { padding: 4rem 0; background-color: #ffffff; box-shadow: inset 0px 15px 8px -10px #e5e5e5; } - #home-use-cases h2 { - margin-bottom: 4.5rem; } - #home-use-cases #use-cases-tabs { - display: flex; - justify-content: space-between; - width: 62%; - margin: 0 auto; } - #home-use-cases #use-cases-tabs li { - width: 45%; } - #home-use-cases #use-cases-tabs .btn { + #home-use-cases #intro-text { + margin-bottom: 50px; } + #home-use-cases #intro-text p { background-color: #f2f2f2; + border-radius: 5px; + padding: 40px 90px; font-size: 18px; - width: 100%; - padding: 1em 0.8em; } - #home-use-cases #use-cases-tabs .btn.active { - color: #b02032; - font-weight: 600; } - #home-use-cases #use-cases-tabs .active:after { - content: ""; - width: 0; - height: 0; - border-left: 15px solid transparent; - border-right: 15px solid transparent; - display: block; - border-top: 15px solid #b02032; - left: calc(34% - 15px); - top: 3.2em; - position: absolute; } - #home-use-cases #use-cases-tabs li:last-child .active:after { - left: calc(67% - 15px); } - #home-use-cases #use-cases-tabs .btn:focus, #home-use-cases #use-cases-tabs .btn:active { - outline: none !important; - box-shadow: none !important; } - #home-use-cases #tabsContent { + line-height: 2em; } + #home-use-cases #intro-text:after { + content: ""; + width: 25vw; + height: 6px; + background-color: #f2f2f2; + display: block; + margin: 40px auto 50px; + border-radius: 5px; } + #home-use-cases .container .row { + margin-bottom: 25px; } + #home-use-cases .container h2 { + margin-bottom: 4.5rem; } + #home-use-cases .container a.simplified-img-a { + cursor: zoom-in; } + #home-use-cases .container img { + max-width: 100%; + margin: 30px auto; + display: block; + max-height: 300px; } + #home-use-cases .container .txt-wrapper { + display: block; padding: 30px; } - #home-use-cases #tabsContent img { - max-width: 45rem; - margin: 0 auto; - display: block; } - #home-use-cases #tabsContent .txt-wrapper { - background-color: #f2f2f2; - width: 45vw; - display: block; - margin: 20px auto 0; - text-align: center; - padding: 30px; } - #home-use-cases #tabsContent .txt-wrapper p { - font-size: 15px; - line-height: 2em; - margin-bottom: 20px; } - #home-use-cases #tabsContent .txt-wrapper .btn { - padding: 8px 15px; } + #home-use-cases .container .txt-wrapper h3 { + font-size: 20px; + margin-bottom: 15px; + font-weight: 600; } + #home-use-cases .container .txt-wrapper p { + font-size: 16px; + line-height: 2em; + margin-bottom: 20px; } + #home-use-cases .container .txt-wrapper .btn { + padding: 8px 15px; } + #home-use-cases #diagramModal .modal-dialog { + max-width: 90vw !important; } + #home-use-cases #diagramModal .modal-dialog .modal-content button.close { + width: 40px; + position: absolute; + right: 10px; + top: 10px; } + #home-use-cases #diagramModal .modal-dialog .modal-content img { + height: 90vh; } section.section-block h2 { text-align: center; @@ -7662,7 +7675,7 @@ section.section-block h2 { font-weight: 600; } #home-extras #home-links ul li a:hover { background-color: #f2f2f2 !important; - border-radius: 10px; + border-radius: 5px; text-decoration: none; } #home-extras #home-links ul li a:hover svg { background-color: #055799; } @@ -7735,6 +7748,11 @@ section.internal-page { display: none; } @media (max-width: 1199.98px) { + #main-banner .wrapper { + background: -moz-linear-gradient(45deg, #187ccc 0%, #0a5a9a 5%, rgba(242, 242, 242, 0) 5%, rgba(242, 242, 242, 0) 90%, #0a5a9a 90%, #187ccc 100%); + background: -webkit-linear-gradient(45deg, #187ccc 0%, #0a5a9a 5%, rgba(242, 242, 242, 0) 5%, rgba(242, 242, 242, 0) 90%, #0a5a9a 90%, #187ccc 100%); + background: linear-gradient(45deg, #187ccc 0%, #0a5a9a 5%, rgba(242, 242, 242, 0) 5%, rgba(242, 242, 242, 0) 90%, #0a5a9a 90%, #187ccc 100%); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#187ccc",endColorstr="#187ccc",GradientType=1); } #home-use-cases #use-cases-tabs { width: 85%; } #home-use-cases #use-cases-tabs .active:after { @@ -7785,6 +7803,11 @@ section.internal-page { @media (max-width: 767.98px) { .twitter-follow { display: none; } + #main-banner .wrapper { + background: -moz-linear-gradient(45deg, #187ccc 0%, #0a5a9a 5%, rgba(242, 242, 242, 0) 5%, rgba(242, 242, 242, 0) 95%, #0a5a9a 95%, #187ccc 100%); + background: -webkit-linear-gradient(45deg, #187ccc 0%, #0a5a9a 5%, rgba(242, 242, 242, 0) 5%, rgba(242, 242, 242, 0) 95%, #0a5a9a 95%, #187ccc 100%); + background: linear-gradient(45deg, #187ccc 0%, #0a5a9a 5%, rgba(242, 242, 242, 0) 5%, rgba(242, 242, 242, 0) 95%, #0a5a9a 95%, #187ccc 100%); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#187ccc",endColorstr="#187ccc",GradientType=1); } #home-use-cases #tabsContent { padding: 0; } #home-use-cases #tabsContent .txt-wrapper { Modified: ignite/site/branches/ignite-redisign/includes/footer.html URL: http://svn.apache.org/viewvc/ignite/site/branches/ignite-redisign/includes/footer.html?rev=1874817&r1=1874816&r2=1874817&view=diff ============================================================================== --- ignite/site/branches/ignite-redisign/includes/footer.html (original) +++ ignite/site/branches/ignite-redisign/includes/footer.html Thu Mar 5 05:26:52 2020 @@ -9,6 +9,7 @@ <li><a href="/docs-and-apis.html">Documentation</a></li> <li><a href="/community/resources.html">Ask Question</a></li> <li><a href="/download.cgi">Download</a></li> + <li><a href="/community/resources.html">Contact Info</a></li> </ul> <ul class="social-networks list-unstyled"> Modified: ignite/site/branches/ignite-redisign/includes/header.html URL: http://svn.apache.org/viewvc/ignite/site/branches/ignite-redisign/includes/header.html?rev=1874817&r1=1874816&r2=1874817&view=diff ============================================================================== --- ignite/site/branches/ignite-redisign/includes/header.html (original) +++ ignite/site/branches/ignite-redisign/includes/header.html Thu Mar 5 05:26:52 2020 @@ -1,8 +1,8 @@ <!-- REMEMBER TO COPY ALL CHANGES TO download.html --> - <header id="header" class="affix header" data-spy="affix" data-offset-top="0"> + <header id="header" class="affix header sticky-top " data-spy="affix" data-offset-top="0"> <div class="container"> - <nav id="nav" class="navbar navbar-expand-lg d-flex bd-highlight mb-3" role="navigation"> + <nav id="nav" class=" navbar navbar-expand-lg d-flex bd-highlight mb-3" role="navigation"> <a href="/" class="mr-auto p-2 bd-highlight navbar-brand" aria-label="Ignite Homepage"><img src="/images/ignite_logo_full.svg" alt="Apache Ignite Logo"></a> @@ -127,7 +127,7 @@ <li class="dropdown-item"><a href="/docs-and-apis.html#docs">Technical Docs</a></li> <li class="dropdown-subtitle" role="presentation">Learning Ignite</li> - <li class="dropdown-item"><a href="/screencasts.html">Videos</a></li> + <li class="dropdown-item"><a href="/screencasts.html">Video Tutorials</a></li> <li class="dropdown-item"><a href="https://github.com/apache/ignite/tree/master/examples" target="_blank" rel="noopener"> Examples <i class="fa fa-external-link" style="padding-left:5px;"></i></a></li> <li class="dropdown-item"><a href="/events.html">Upcoming Events</a></li> Modified: ignite/site/branches/ignite-redisign/includes/scripts.html URL: http://svn.apache.org/viewvc/ignite/site/branches/ignite-redisign/includes/scripts.html?rev=1874817&r1=1874816&r2=1874817&view=diff ============================================================================== --- ignite/site/branches/ignite-redisign/includes/scripts.html (original) +++ ignite/site/branches/ignite-redisign/includes/scripts.html Thu Mar 5 05:26:52 2020 @@ -23,6 +23,17 @@ ); document.querySelector('head').appendChild(msViewportStyle) } + + const onScroll = function(){ + if(jQuery(document).scrollTop() > 110) { + jQuery('#header').addClass('shrink'); + }else { + jQuery('#header').removeClass('shrink'); + } + }; + + jQuery(window).scroll(onScroll); + jQuery(document).ready(onScroll); </script> Modified: ignite/site/branches/ignite-redisign/index.html URL: http://svn.apache.org/viewvc/ignite/site/branches/ignite-redisign/index.html?rev=1874817&r1=1874816&r2=1874817&view=diff ============================================================================== --- ignite/site/branches/ignite-redisign/index.html (original) +++ ignite/site/branches/ignite-redisign/index.html Thu Mar 5 05:26:52 2020 @@ -195,71 +195,87 @@ under the License. </section> <section id="home-use-cases" class="section-block"> - <h2>Apache Ignite <strong>Use Cases</strong></h2> - <div class="container"> + <div id="intro-text" class="container"> - <div class="row"> + <p>Apache Ignite® is an in-memory computing platform for transactional, analytical, and streaming workloads +delivering in-memory speeds at petabyte scale. Can be deployed as an in-memory data grid or an +in-memory database for transactional, analytical, hybrid transactional/analytical, and streaming workloads.</p> - <div class="col-12"> - <ul id="use-cases-tabs" class="nav"> - <li class=""> - <a href="#tab-datagrid" data-toggle="tab" role="tab" aria-controls="datagrid" - aria-selected="true" id="datagrid-tab" class="btn active">In-Memory Data Grid and - Cache</a> - </li> - - <li class=""> - <a href="#tab-database" - data-toggle="tab" role="tab" aria-controls="database" - aria-selected="true" class="btn ">In-Memory Database</a> - </li> + </div> - </ul> - <div id="tabsContent" class="tab-content"> - <div id="tab-datagrid" class="tab-pane fade active show" role="tabpanel" - aria-labelledby="datagrid-tab"> - <img src="/images/svg-diagrams/in-memory-data-grid.svg"/> - - <div class="txt-wrapper"> - <p> - Accelerate existing services and databases with Apache Ignite® deployed as an - in-memory data grid or cache that keeps your underlying stores in sync and supports - ANSI SQL, ACID transactions, co-located computations with machine learning. - </p> - - <a href="/use-cases/datagrid.html" class="btn btn-primary" - onclick="ga('send', 'event', 'apache_ignite_use_cases', 'homepage_click', 'data_grid');"> - Learn About In-Memory Data Grid</a> - </div> - </div> - <div id="tab-database" class="tab-pane fade" role="tabpanel" aria-labelledby="database-tab"> - - <img src="/images/svg-diagrams/in-memory-database.svg"/> - <div class="txt-wrapper"> - <p> - Combine advantages of in-memory and disk-based systems deploying Apache Ignite® - as an in-memory database that treats disk as an active storage layer. Cache a - subset of the data in memory, execute advanced queries including SQL over both - in-memory and disk-only records, and skip time-consuming memory warm-ups on - startup. - </p> - - <a href="/use-cases/in-memory-database.html" class="btn btn-primary" - onclick="ga('send', 'event', 'apache_ignite_use_cases', 'homepage_click', 'database');"> - Learn About In-Memory Database</a> - </div> - </div> + <h2>Apache Ignite <strong>Use Cases</strong></h2> + + <div class="container"> + + <div class="row"> + <div class="col-md-6"> + + + <div class="txt-wrapper"> + <h3>In-Memory Data Grid and Cache</h3> + + <p> + Accelerate existing services and databases with Apache Ignite® deployed as an + in-memory data grid or cache that keeps your underlying stores in sync and supports + ANSI SQL, ACID transactions, co-located computations with machine learning. + </p> + + <a href="/use-cases/datagrid.html" class="btn btn-primary" + onclick="ga('send', 'event', 'apache_ignite_use_cases', 'homepage_click', 'data_grid');"> + Learn About In-Memory Data Grid</a> </div> + </div> + <div class="col-md-6"> + <a href="#" class="simplified-img-a" data-target="#diagramModal" data-toggle="modal" data-diagram="data-grid"><img src="/images/svg-diagrams/in-memory-data-grid--simplified.svg"/></a> + </div> + + </div> + <div class="row"> + <div class="col-md-6 order-last order-md-first"> + <a href="#" class="simplified-img-a" data-target="#diagramModal" data-toggle="modal" data-diagram="database"><img src="/images/svg-diagrams/in-memory-database--simplified.svg"/></a> + </div> + <div class="col-md-6 order-first order-md-last"> + + <div class="txt-wrapper"> + <h3>In-Memory Database</h3> + + <p> + Combine advantages of in-memory and disk-based systems deploying Apache Ignite® + as an in-memory database that treats disk as an active storage layer. Cache a + subset of the data in memory, execute advanced queries including SQL over both + in-memory and disk-only records, and skip time-consuming memory warm-ups on + startup. + </p> + + <a href="/use-cases/in-memory-database.html" class="btn btn-primary" + onclick="ga('send', 'event', 'apache_ignite_use_cases', 'homepage_click', 'database');"> + Learn About In-Memory Database</a> + </div> </div> </div> </div> + + <div class="modal fade" id="diagramModal" tabindex="-1" role="dialog" aria-labelledby="diagramModal" aria-hidden="true"> + <div class="modal-dialog" role="document"> + <div class="modal-content"> + + <button type="button" class="close" data-dismiss="modal" aria-label="Close"> + <span aria-hidden="true">×</span> + </button> + + <img src="" /> + + </div> + </div> + </div> + </section> <section id="home-features" class="section-block bg-gray-shadow"> @@ -267,7 +283,7 @@ under the License. <div class="container"> <h2>Apache Ignite <strong>Features</strong></h2> <div class="row"> - <div class="col-md-4 feature"> + <div class="col-sm-6 col-md-4 feature"> <a href="/arch/multi-tier-storage.html" onclick="ga('send', 'event', 'apache_ignite_features', 'homepage_click', 'multi-tier-storage');" title="Apache Ignite Multi-Tier Storage" @@ -368,7 +384,7 @@ under the License. <div class="container"> <div class="row"> - <section id="home-links" class="col-sm-6"> + <section id="home-links" class="col-sm-8"> <h2>Quick <strong>Links</strong></h2> <ul> <li><a href="/docs-and-apis.html#docs"> @@ -381,24 +397,24 @@ under the License. <svg> <use xlink:href="#index-icons--API"></use> </svg> - <span>API<br/>References</span> + <span>API References</span> </a></li> <li><a href="/events.html"> <svg> <use xlink:href="#index-icons--Community"></use> </svg> - <span>Community<br/>Events</span> + <span>Community Events</span> </a></li> <li><a href="/use-cases/provenusecases.html"> <svg> <use xlink:href="#index-icons--Company"></use> </svg> - <span>Companies<br/>Using Ignite</span> + <span>Companies Using Ignite</span> </a></li> </ul> </section> - <section id="home-twitter" class="col-sm-6"> + <section id="home-twitter" class="col-sm-4"> <!--Ignite events --> <h2>Latest <strong>Tweets</strong></h2> @@ -420,5 +436,11 @@ under the License. <!--#include virtual="/includes/scripts.html" --> +<script type="text/javascript"> + jQuery('#diagramModal').on('show.bs.modal', function(event){ + const diagram = jQuery(event.relatedTarget).data('diagram'); + jQuery(this).find('img').attr('src', '/images/svg-diagrams/in-memory-'+diagram+'.svg'); + }); +</script> </body> </html> Modified: ignite/site/branches/ignite-redisign/scss/ignite-redesign.scss URL: http://svn.apache.org/viewvc/ignite/site/branches/ignite-redisign/scss/ignite-redesign.scss?rev=1874817&r1=1874816&r2=1874817&view=diff ============================================================================== Binary files - no diff available.