From 3c77f292f898e8cbd3d6dfefd5ba4f45b870548b Mon Sep 17 00:00:00 2001 From: Sven Hoehn Date: Fri, 17 Nov 2017 18:15:01 +0100 Subject: [PATCH] Feature page complete page markup and added new icons Index page fixed bug 11545 (Learn more button goes nowhere) --- static/css/style.css | 101 ++- static/img/icons/icon-server.svg | 3 + static/img/icons/icon-verified.svg | 6 + static/img/icons/icon-warning.svg | 6 + static/img/icons/icon-wifi.svg | 6 + static/js/jquery-scrollto.js | 260 ++++++++ static/scss/_icons.scss | 30 + static/scss/_nav.scss | 2 +- .../bootstrap-4.0.0-alpha.6/css/bootstrap.css | 2 +- .../bootstrap-4.0.0-alpha.6/scss/_custom.scss | 21 + static/scss/style.scss | 20 +- templates/base.html | 2 +- templates/index.html | 2 +- templates/static/features.html | 578 +++++++++--------- 14 files changed, 725 insertions(+), 314 deletions(-) create mode 100644 static/img/icons/icon-server.svg create mode 100644 static/img/icons/icon-verified.svg create mode 100644 static/img/icons/icon-warning.svg create mode 100644 static/img/icons/icon-wifi.svg create mode 100755 static/js/jquery-scrollto.js diff --git a/static/css/style.css b/static/css/style.css index 0057d2d..7b2145a 100644 --- a/static/css/style.css +++ b/static/css/style.css @@ -2025,6 +2025,64 @@ tbody.collapse.show { .navbar-inverse .navbar-text { color: rgba(255, 255, 255, 0.5); } +.badge { + display: inline-block; + padding: 0.25em 0.4em; + font-size: 100%; + font-weight: bold; + line-height: 1; + color: #fff; + text-align: center; + white-space: nowrap; + vertical-align: baseline; + border-radius: 0.25rem; } + .badge:empty { + display: none; } + +.btn .badge { + position: relative; + top: -1px; } + +a.badge:focus, a.badge:hover { + color: #fff; + text-decoration: none; + cursor: pointer; } + +.badge-pill { + padding-right: 0.6em; + padding-left: 0.6em; + border-radius: 10rem; } + +.badge-default { + background-color: #636c72; } + .badge-default[href]:focus, .badge-default[href]:hover { + background-color: #4b5257; } + +.badge-primary { + background-color: #0275d8; } + .badge-primary[href]:focus, .badge-primary[href]:hover { + background-color: #025aa5; } + +.badge-success { + background-color: #5cb85c; } + .badge-success[href]:focus, .badge-success[href]:hover { + background-color: #449d44; } + +.badge-info { + background-color: #5bc0de; } + .badge-info[href]:focus, .badge-info[href]:hover { + background-color: #31b0d5; } + +.badge-warning { + background-color: #f0ad4e; } + .badge-warning[href]:focus, .badge-warning[href]:hover { + background-color: #ec971f; } + +.badge-danger { + background-color: #d9534f; } + .badge-danger[href]:focus, .badge-danger[href]:hover { + background-color: #c9302c; } + @keyframes progress-bar-stripes { from { background-position: 1rem 0; } @@ -4721,7 +4779,7 @@ h5.fireinfo { #sidebar { padding: 0; } - @media (max-width: 991px) { + @media (max-width: 767px) { #sidebar { box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16), 0 1px 2px 0 rgba(0, 0, 0, 0.23); position: fixed; @@ -4974,8 +5032,45 @@ button:focus { vertical-align: top; transform: translateY(-0.1rem); } +.i_features { + width: 40px; + height: 40px; + margin: auto; } + +.outline_i { + border: solid 4px; + width: 80px; + height: 80px; + display: flex; + align-items: center; } + +.i_verified { + fill: #43a047; } + +.i_warning { + fill: #b71c1c; } + +.i_wifi { + fill: #1976d2; } + +.i_server { + fill: #ff8f00; } + .amber-800 { - color: #ff8f00; } + color: #ff8f00; + border-color: #ff8f00; } + +.green-600 { + color: #43a047; + border-color: #43a047; } + +.red-900 { + color: #b71c1c; + border-color: #b71c1c; } + +.blue-700 { + color: #1976d2; + border-color: #1976d2; } img.img-fluid { width: 100%; @@ -5105,7 +5200,7 @@ section#appliances { .features-content { padding-top: 88px; margin-bottom: 40px; } - @media (min-width: 576px) { + @media (min-width: 992px) { .features-content { padding-top: 161px; } } .features-content .content { diff --git a/static/img/icons/icon-server.svg b/static/img/icons/icon-server.svg new file mode 100644 index 0000000..c966874 --- /dev/null +++ b/static/img/icons/icon-server.svg @@ -0,0 +1,3 @@ + + + diff --git a/static/img/icons/icon-verified.svg b/static/img/icons/icon-verified.svg new file mode 100644 index 0000000..ae3511c --- /dev/null +++ b/static/img/icons/icon-verified.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/static/img/icons/icon-warning.svg b/static/img/icons/icon-warning.svg new file mode 100644 index 0000000..e679fec --- /dev/null +++ b/static/img/icons/icon-warning.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/static/img/icons/icon-wifi.svg b/static/img/icons/icon-wifi.svg new file mode 100644 index 0000000..253b4f7 --- /dev/null +++ b/static/img/icons/icon-wifi.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/static/js/jquery-scrollto.js b/static/js/jquery-scrollto.js new file mode 100755 index 0000000..7d47976 --- /dev/null +++ b/static/js/jquery-scrollto.js @@ -0,0 +1,260 @@ +/*** +umd: true +***/ + +(function () { + // Prepare + var $, ScrollTo + $ = window.jQuery || require('jquery') + + // Fix scrolling animations on html/body on safari + $.propHooks.scrollTop = $.propHooks.scrollLeft = { + get: function (elem, prop) { + var result = null + if ( elem.tagName === 'HTML' || elem.tagName === 'BODY' ) { + if ( prop === 'scrollLeft' ) { + result = window.scrollX + } + else if ( prop === 'scrollTop' ) { + result = window.scrollY + } + } + if ( result == null ) { + result = elem[prop] + } + return result + } + } + $.Tween.propHooks.scrollTop = $.Tween.propHooks.scrollLeft = { + get: function (tween) { + return $.propHooks.scrollTop.get(tween.elem, tween.prop) + }, + set: function (tween) { + // Our safari fix + if ( tween.elem.tagName === 'HTML' || tween.elem.tagName === 'BODY' ) { + // Defaults + tween.options.bodyScrollLeft = (tween.options.bodyScrollLeft || window.scrollX) + tween.options.bodyScrollTop = (tween.options.bodyScrollTop || window.scrollY) + + // Apply + if ( tween.prop === 'scrollLeft' ) { + tween.options.bodyScrollLeft = Math.round(tween.now) + } + else if ( tween.prop === 'scrollTop' ) { + tween.options.bodyScrollTop = Math.round(tween.now) + } + + // Apply + window.scrollTo(tween.options.bodyScrollLeft, tween.options.bodyScrollTop) + } + // jQuery's IE8 Fix + else if ( tween.elem.nodeType && tween.elem.parentNode ) { + tween.elem[tween.prop] = tween.now + } + } + } + + // jQuery ScrollTo + ScrollTo = { + // Configuration + config: { + duration: 400, + easing: 'swing', + callback: null, + durationMode: 'each', + offsetTop: 0, + offsetLeft: 0 + }, + + // Set Configuration + configure: function (options) { + // Apply Options to Config + $.extend(ScrollTo.config, options || {}) + + // Chain + return this + }, + + // Perform the Scroll Animation for the Collections + // We use $inline here, so we can determine the actual offset start for each overflow:scroll item + // Each collection is for each overflow:scroll item + scroll: function (collections, config) { + // Prepare + var collection, $container, $target, $inline, position, + containerScrollTop, containerScrollLeft, + containerScrollTopEnd, containerScrollLeftEnd, + startOffsetTop, targetOffsetTop, targetOffsetTopAdjusted, + startOffsetLeft, targetOffsetLeft, targetOffsetLeftAdjusted, + scrollOptions, + callback + + // Determine the Scroll + collection = collections.pop() + $container = collection.$container + $target = collection.$target + + // Prepare the Inline Element of the Container + $inline = $('').css({ + 'position': 'absolute', + 'top': '0px', + 'left': '0px' + }) + position = $container.css('position') + + // Insert the Inline Element of the Container + $container.css({position: 'relative'}) + $inline.appendTo($container) + + // Determine the top offset + startOffsetTop = $inline.offset().top + targetOffsetTop = $target.offset().top + targetOffsetTopAdjusted = targetOffsetTop - startOffsetTop - parseInt(config.offsetTop, 10) + + // Determine the left offset + startOffsetLeft = $inline.offset().left + targetOffsetLeft = $target.offset().left + targetOffsetLeftAdjusted = targetOffsetLeft - startOffsetLeft - parseInt(config.offsetLeft, 10) + + // Determine current scroll positions + containerScrollTop = $container.prop('scrollTop') + containerScrollLeft = $container.prop('scrollLeft') + + // Reset the Inline Element of the Container + $inline.remove() + $container.css({position: position}) + + // Prepare the scroll options + scrollOptions = {} + + // Prepare the callback + callback = function () { + // Check + if ( collections.length === 0 ) { + // Callback + if ( typeof config.callback === 'function' ) { + config.callback() + } + } + else { + // Recurse + ScrollTo.scroll(collections, config) + } + // Return true + return true + } + + // Handle if we only want to scroll if we are outside the viewport + if ( config.onlyIfOutside ) { + // Determine current scroll positions + containerScrollTopEnd = containerScrollTop + $container.height() + containerScrollLeftEnd = containerScrollLeft + $container.width() + + // Check if we are in the range of the visible area of the container + if ( containerScrollTop < targetOffsetTopAdjusted && targetOffsetTopAdjusted < containerScrollTopEnd ) { + targetOffsetTopAdjusted = containerScrollTop + } + if ( containerScrollLeft < targetOffsetLeftAdjusted && targetOffsetLeftAdjusted < containerScrollLeftEnd ) { + targetOffsetLeftAdjusted = containerScrollLeft + } + } + + // Determine the scroll options + if ( targetOffsetTopAdjusted !== containerScrollTop ) { + scrollOptions.scrollTop = targetOffsetTopAdjusted + } + if ( targetOffsetLeftAdjusted !== containerScrollLeft ) { + scrollOptions.scrollLeft = targetOffsetLeftAdjusted + } + + // Check to see if the scroll is necessary + if ( $container.prop('scrollHeight') === $container.height() ) { + delete scrollOptions.scrollTop + } + if ( $container.prop('scrollWidth') === $container.width() ) { + delete scrollOptions.scrollLeft + } + + // Perform the scroll + if ( scrollOptions.scrollTop != null || scrollOptions.scrollLeft != null ) { + $container.animate(scrollOptions, { + duration: config.duration, + easing: config.easing, + complete: callback + }) + } + else { + callback() + } + + // Return true + return true + }, + + // ScrollTo the Element using the Options + fn: function (options) { + // Prepare + var collections, config, $container, container + collections = [] + + // Prepare + var $target = $(this) + if ( $target.length === 0 ) { + // Chain + return this + } + + // Handle Options + config = $.extend({}, ScrollTo.config, options) + + // Fetch + $container = $target.parent() + container = $container.get(0) + + // Cycle through the containers + while ( ($container.length === 1) && (container !== document.body) && (container !== document) ) { + // Check Container for scroll differences + var containerScrollTop, containerScrollLeft + containerScrollTop = $container.css('overflow-y') !== 'visible' && container.scrollHeight !== container.clientHeight + containerScrollLeft = $container.css('overflow-x') !== 'visible' && container.scrollWidth !== container.clientWidth + if ( containerScrollTop || containerScrollLeft ) { + // Push the Collection + collections.push({ + '$container': $container, + '$target': $target + }) + // Update the Target + $target = $container + } + // Update the Container + $container = $container.parent() + container = $container.get(0) + } + + // Add the final collection + collections.push({ + '$container': $('html'), + // document.body doesn't work in firefox, html works for all + // internet explorer starts at the beggining + '$target': $target + }) + + // Adjust the Config + if ( config.durationMode === 'all' ) { + config.duration /= collections.length + } + + // Handle + ScrollTo.scroll(collections, config) + + // Chain + return this + } + } + + // Apply our extensions to jQuery + $.ScrollTo = $.ScrollTo || ScrollTo + $.fn.ScrollTo = $.fn.ScrollTo || ScrollTo.fn + + // Export + return ScrollTo +}).call(this) diff --git a/static/scss/_icons.scss b/static/scss/_icons.scss index c3eb103..cc679dc 100644 --- a/static/scss/_icons.scss +++ b/static/scss/_icons.scss @@ -37,4 +37,34 @@ .i_sm { vertical-align: top; transform: translateY(-.10rem); +} + +.i_features { + width: 40px; + height: 40px; + margin: auto; +} + +.outline_i { + border: solid 4px; + width: 80px; + height: 80px; + display: flex; + align-items: center; +} + +.i_verified { + fill: $green-600; +} + +.i_warning { + fill: $red_900; +} + +.i_wifi { + fill: $blue-700; +} + +.i_server { + fill: $amber-800; } \ No newline at end of file diff --git a/static/scss/_nav.scss b/static/scss/_nav.scss index a7ea606..4a69e1d 100644 --- a/static/scss/_nav.scss +++ b/static/scss/_nav.scss @@ -229,7 +229,7 @@ body.Involved li.nav-item a.community { #sidebar { padding: 0; - @include media-breakpoint-down(md) { + @include media-breakpoint-down(sm) { box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16), 0 1px 2px 0 rgba(0, 0, 0, 0.23); position: fixed; diff --git a/static/scss/bootstrap-4.0.0-alpha.6/css/bootstrap.css b/static/scss/bootstrap-4.0.0-alpha.6/css/bootstrap.css index 0835477..2512fe1 100644 --- a/static/scss/bootstrap-4.0.0-alpha.6/css/bootstrap.css +++ b/static/scss/bootstrap-4.0.0-alpha.6/css/bootstrap.css @@ -3187,7 +3187,7 @@ tbody.collapse.show { .badge { display: inline-block; padding: 0.25em 0.4em; - font-size: 75%; + font-size: 100%; font-weight: bold; line-height: 1; color: #fff; diff --git a/static/scss/bootstrap-4.0.0-alpha.6/scss/_custom.scss b/static/scss/bootstrap-4.0.0-alpha.6/scss/_custom.scss index 6a0264f..dfd00e2 100755 --- a/static/scss/bootstrap-4.0.0-alpha.6/scss/_custom.scss +++ b/static/scss/bootstrap-4.0.0-alpha.6/scss/_custom.scss @@ -205,3 +205,24 @@ $nav-disabled-link-color: $gray-light !default; // Navbar $navbar-padding-x: $spacer; $navbar-padding-y: $spacer; + +// Badges + +$badge-default-bg: $gray-light !default; +$badge-primary-bg: $brand-primary !default; +$badge-success-bg: $brand-success !default; +$badge-info-bg: $brand-info !default; +$badge-warning-bg: $brand-warning !default; +$badge-danger-bg: $brand-danger !default; + +$badge-color: $white !default; +$badge-link-hover-color: $white !default; +$badge-font-size: 100%; +$badge-font-weight: $font-weight-bold !default; +$badge-padding-x: .4em !default; +$badge-padding-y: .25em !default; + +$badge-pill-padding-x: .6em !default; +// Use a higher than normal value to ensure completely rounded edges when +// customizing padding or font-size on labels. +$badge-pill-border-radius: 10rem !default; diff --git a/static/scss/style.scss b/static/scss/style.scss index e3b3f40..45e67dd 100644 --- a/static/scss/style.scss +++ b/static/scss/style.scss @@ -35,7 +35,7 @@ //@import "bootstrap-4.0.0-alpha.6/scss/card"; // @import "bootstrap-4.0.0-alpha.6/scss/breadcrumb"; // @import "bootstrap-4.0.0-alpha.6/scss/pagination"; -// @import "bootstrap-4.0.0-alpha.6/scss/badge"; +@import "bootstrap-4.0.0-alpha.6/scss/badge"; // @import "bootstrap-4.0.0-alpha.6/scss/jumbotron"; // @import "bootstrap-4.0.0-alpha.6/scss/alert"; @import "bootstrap-4.0.0-alpha.6/scss/progress"; @@ -77,6 +77,22 @@ body { // Colors .amber-800 { color: $amber-800; + border-color: $amber-800; +} + +.green-600 { + color: $green-600; + border-color: $green-600; +} + +.red-900 { + color: $red_900; + border-color: $red_900; +} + +.blue-700{ + color: $blue-700; + border-color: $blue-700; } // Images @@ -237,7 +253,7 @@ section#appliances { .features-content { padding-top: 88px; margin-bottom: 40px; - @include media-breakpoint-up(sm) { + @include media-breakpoint-up(lg) { padding-top: 161px; } .content { diff --git a/templates/base.html b/templates/base.html index 1921398..ab3431c 100644 --- a/templates/base.html +++ b/templates/base.html @@ -253,7 +253,7 @@ - + diff --git a/templates/index.html b/templates/index.html index bb32d36..bf68124 100644 --- a/templates/index.html +++ b/templates/index.html @@ -149,7 +149,7 @@
{{ _("Get Started") }} - {{ _("Learn more") }} + {{ _("Learn more") }}
diff --git a/templates/static/features.html b/templates/static/features.html index b8ba1cf..25c415a 100644 --- a/templates/static/features.html +++ b/templates/static/features.html @@ -5,7 +5,7 @@ {% block container %}
-