Welcome to mirror list, hosted at ThFree Co, Russian Federation.

github.com/nextcloud/nextcloud.com.git - Unnamed repository; edit this file 'description' to name the repository.
summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--assets/css/custom.scss34
-rw-r--r--assets/css/modules/header.scss2
-rw-r--r--assets/css/modules/hero.scss37
-rw-r--r--assets/css/pages/features.scss55
-rw-r--r--assets/css/pages/secure.scss9
-rw-r--r--assets/js/main.js14
-rw-r--r--assets/js/modules/youtubePlayer.js32
-rw-r--r--assets/js/pages/features.js24
-rw-r--r--assets/js/require.config.js3
-rw-r--r--package.json1
-rw-r--r--page-features.php21
-rw-r--r--page-homepage.php4
-rw-r--r--page-secure.php2
-rw-r--r--yarn.lock4
14 files changed, 132 insertions, 110 deletions
diff --git a/assets/css/custom.scss b/assets/css/custom.scss
index 6d9e6577..37ed125a 100644
--- a/assets/css/custom.scss
+++ b/assets/css/custom.scss
@@ -18,12 +18,13 @@
// Importing modules
@import 'variables';
@import 'modules/normalize';
+@import 'modules/typography';
@import 'modules/no-js';
@import 'modules/alerts';
@import 'modules/header';
@import 'modules/slideshow';
@import 'modules/secondmenu';
-@import 'modules/typography';
+@import 'modules/hero';
// To remove everything above and split in other files
@@ -880,37 +881,6 @@ blockquote {
}
-/* typical background images (hero section) like enterprise, security */
-.background {
- padding-bottom: 0;
- padding-top: 0;
- background-repeat: no-repeat;
- background-size: cover;
- border-radius: 0 !important;
- height: 70vh;
- min-height: 600px;
- max-height: 800px;
- position: relative;
- opacity: 0; }
- .background h1 {
- padding-top: 0;
- color: white; }
- .background h2 {
- color: white;
- font-size: 20px;
- line-height: 1.6;
- text-shadow: 0px 0px 10px #333; }
- .background .topheader {
- position: absolute;
- top: 30%;
- margin: 0;
- padding: 0;
- max-width: 600px;
- opacity: 0; }
- @media (max-width: 991px) {
- .background .topheader {
- padding-left: 5%; } }
-
.btn-primary {
background-color: $nextcloud-blue;
font-size: 18px;
diff --git a/assets/css/modules/header.scss b/assets/css/modules/header.scss
index 7d8f252e..1accdf63 100644
--- a/assets/css/modules/header.scss
+++ b/assets/css/modules/header.scss
@@ -400,6 +400,8 @@ nav a {
z-index: 8;
display: block;
margin-right: 0;
+ border: none;
+ float: right;
&:hover {
transform: scale(1.1);
diff --git a/assets/css/modules/hero.scss b/assets/css/modules/hero.scss
new file mode 100644
index 00000000..b2ca70dc
--- /dev/null
+++ b/assets/css/modules/hero.scss
@@ -0,0 +1,37 @@
+.background {
+ padding-bottom: 0;
+ padding-top: 0;
+ background-repeat: no-repeat;
+ background-size: cover;
+ border-radius: 0 !important;
+ height: 70vh;
+ min-height: 600px;
+ max-height: 800px;
+ position: relative;
+ opacity: 0;
+
+ h1 {
+ padding-top: 0;
+ color: white;
+ opacity: 0;
+ transform: translateY(50px);
+ }
+
+ h2 {
+ color: white;
+ font-size: 20px;
+ line-height: 1.6;
+ text-shadow: 0px 0px 10px #333;
+ opacity: 0;
+ transform: translateY(50px);
+ }
+
+ .topheader {
+ position: absolute;
+ top: 30%;
+ margin: 0;
+ padding: 0;
+ max-width: 600px;
+ opacity: 0;
+ }
+}
diff --git a/assets/css/pages/features.scss b/assets/css/pages/features.scss
index 02b888ac..cd540604 100644
--- a/assets/css/pages/features.scss
+++ b/assets/css/pages/features.scss
@@ -1,11 +1,11 @@
-@import "../variables.scss";
-@import "../modules/secondmenu";
-@import "../transparent-navbar.scss";
+@import '../variables';
+@import '../modules/secondmenu';
+@import '../modules/transparent-navbar';
.features-background {
- background: url("../img/headers/yourcloud.jpg") no-repeat;
- background-position: center;
- background-size: cover;
+ background: url('../../img/headers/yourcloud.jpg') no-repeat;
+ background-position: center;
+ background-size: cover;
}
@media (max-width $break-small) {
@@ -14,9 +14,23 @@
}
}
+.img-responsive {
+ @media (min-width: $break-big) {
+ margin-bottom: 200px;
+ }
+
+ @media (min-width: $very-wide) {
+ margin-bottom: 100px;
+ }
+}
+
+.image--floated{
+ float: right;
+}
+
.acess__anywhere {
width: 400px;
- margin: 0 auto;
+ margin: 0 auto;
}
.section--files {
@@ -43,18 +57,21 @@ section {
.container-widest .row {
margin-left: 5px;
margin-right: 5px;
+ }
+
+ .section--heading-1 {
+ padding-bottom: 60px;
+ }
+
+ i[class*='fa-'] {
+ font-size: 60px;
+ display: block;
+ color: #0082c9;
+ text-align: center;
+ padding-top: 20%;
+ }
}
- .section--heading-1 {
- padding-bottom: 60px;
- }
- i[class*='fa-'] {
- font-size: 60px;
- display: block;
- color: #0082c9;
- text-align: center;
- padding-top: 20%;
- }
-}
+
.calltoaction {
- padding-bottom: 100px;
+ padding-bottom: 100px;
}
diff --git a/assets/css/pages/secure.scss b/assets/css/pages/secure.scss
index 630ec144..a36231d6 100644
--- a/assets/css/pages/secure.scss
+++ b/assets/css/pages/secure.scss
@@ -1,12 +1,9 @@
@import "../variables.scss";
-@import "../transparent-navbar.scss";
+@import "../modules/transparent-navbar.scss";
-/**
-* Secure Page
-*/
.security-background {
- background-image: url("../img/security/security.jpg");
+ background-image: url("../../img/security/security.jpg");
background-position: bottom 0 right 0;
.topheader {
@@ -448,7 +445,7 @@ section {
align-items: center;
&__logo {
- background: url("../img/security/ncc_logo.png") no-repeat center/contain;
+ background: url("../../img/security/ncc_logo.png") no-repeat center/contain;
width: 46px;
height: 46px;
}
diff --git a/assets/js/main.js b/assets/js/main.js
index f2fd9230..e7a575d3 100644
--- a/assets/js/main.js
+++ b/assets/js/main.js
@@ -8,11 +8,12 @@ define(['jquery', 'lodash', 'enquire', 'TweenMax', 'velocity'],
$(window).on('scroll.fadeOnce', _.bind(this.revealOnScroll, this, event));
this.animationOnLoadPage();
this.removeRevealOnScroll();
- this.animationOnLoadPageTimeline.play();
},
variables: {
topHeaderSelector: '.topheader',
+ heroHeading: '.topheader h1',
+ heroSubtitle: '.topheader h2',
heroSectionBackgroundSelector: '.background',
buttonDropdownSelector: $('.button--dropdown'),
buttonDropdownContentSelector: $('.dropdown-content'),
@@ -47,13 +48,12 @@ define(['jquery', 'lodash', 'enquire', 'TweenMax', 'velocity'],
},
animationOnLoadPage: function() {
- this.animationOnLoadPageTimeline = new TimelineMax ({paused: true});
- var stuff = $(this.variables.topHeaderSelector);
+ var animationOnLoadPageTimeline = new TimelineMax ();
-
- this.animationOnLoadPageTimeline.to(stuff, 1, {y: 50, autoAlpha: 1});
- // $(this.variables.topHeaderSelector).velocity('transition.slideUpBigIn');
- // $(this.variables.heroSectionBackgroundSelector).velocity('transition.fadeIn', 1000);
+ animationOnLoadPageTimeline.to($(this.variables.topHeaderSelector), 1, {autoAlpha: 1});
+ animationOnLoadPageTimeline.to($(this.variables.heroSectionBackgroundSelector), 1, {autoAlpha: 1});
+ animationOnLoadPageTimeline.to($(this.variables.heroHeading), 1, {y:0 , autoAlpha: 1});
+ animationOnLoadPageTimeline.to($(this.variables.heroSubtitle), 1, {y:0 , autoAlpha: 1}, '-= 0.6');
},
smoothScroll: function() {
diff --git a/assets/js/modules/youtubePlayer.js b/assets/js/modules/youtubePlayer.js
new file mode 100644
index 00000000..5e3dfd42
--- /dev/null
+++ b/assets/js/modules/youtubePlayer.js
@@ -0,0 +1,32 @@
+// This use the plyr plugin, for more information use the link above
+// https://github.com/sampotts/plyr
+
+define(['jquery', 'lodash', 'plyr'],
+ function ($, _, plyr) {
+ $(document).ready(function() {
+ 'use strict';
+ var YoutubePlayer = {
+ init: function() {
+ this.startPlayer();
+ this.getCss();
+ },
+
+ getCss: function() {
+ $('head').append('<link>');
+ var css = $('head').children(':last');
+ css.attr({
+ rel: 'stylesheet',
+ type: 'text/css',
+ href: 'https://cdn.plyr.io/2.0.13/plyr.css'
+ });
+ },
+
+ startPlayer: function() {
+ plyr.setup({
+ //Pass extra options here if needed
+ });
+ }
+ };
+ YoutubePlayer.init();
+ });
+ });
diff --git a/assets/js/pages/features.js b/assets/js/pages/features.js
deleted file mode 100644
index 7274dcad..00000000
--- a/assets/js/pages/features.js
+++ /dev/null
@@ -1,24 +0,0 @@
-define(["jquery", "underscore", "enquire", "jqueryUi", "youtubeplugin", "bootstrap"],
-function ($, _, enquire, jqueryui, jqyoutube) {
- $(document).ready(function() {
- 'use strict';
- var featuresPage = {
- init: function() {
- jQuery("a.youtube").YouTubePopup({ hideTitleBar: true });
-
- enquire.register('screen and (max-width: 480px)', {
- //match: _.bind(this.resultsBindMobile, this)
- });
-
- enquire.register('screen and (min-width: 481px)', {
- //match: _.bind(this.enterpriseBindDesktop, this)
- });
- },
-
- variables : {
- },
-
- }
- featuresPage.init();
- });
-});
diff --git a/assets/js/require.config.js b/assets/js/require.config.js
index 0a0fb3c8..cdacfa35 100644
--- a/assets/js/require.config.js
+++ b/assets/js/require.config.js
@@ -14,7 +14,7 @@ requirejs.config({
TweenLite: ['https://cdnjs.cloudflare.com/ajax/libs/gsap/1.13.1/TweenLite.min', '../../node_modules/gsap/src/minified/TweenLite.min'],
TimelineLite: ['https://cdnjs.cloudflare.com/ajax/libs/gsap/1.13.1/TimelineLite.min', '../../node_modules/gsap/src/minified/TimelineLite.min'],
TimelineMax: ['https://cdnjs.cloudflare.com/ajax/libs/gsap/1.13.1/TimelineMax.min', '../../node_modules/gsap/src/minified/TimelineMax.min'],
- TweenMax: ['../../node_modules/gsap/src/minified/TweenMax.min'],
+ TweenMax: ['https://cdnjs.cloudflare.com/ajax/libs/gsap/1.13.1/TweenMax.min', '../../node_modules/gsap/src/minified/TweenMax.min'],
easingEase: ['https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/easing/EasePack.min'],
velocity: ['https://cdnjs.cloudflare.com/ajax/libs/velocity/1.5.0/velocity.min', 'vendor/velocity.min'],
velocityUI: ['https://cdnjs.cloudflare.com/ajax/libs/velocity/1.5.0/velocity.ui.min', 'vendor/velocity.ui.min'],
@@ -22,6 +22,7 @@ requirejs.config({
hammer: ['https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min', 'vendor/hammer.min'],
inview: ['https://cdnjs.cloudflare.com/ajax/libs/protonet-jquery.inview/1.1.2/jquery.inview.min', 'vendor/jquery.inview'],
bootstrap: ['https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min', 'vendor/bootstrap'],
+ plyr: ['https://cdn.plyr.io/2.0.13/plyr', '../../node_modules/plyr/dist/plyr'],
youtubeplugin: 'old/vendor/jquery.youtubepopup.min',
},
shim: {
diff --git a/package.json b/package.json
index 5f9f29f1..e58f5a94 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
"jquery": "^3.2.1",
"lodash": "^4.17.4",
"modernizr": "^3.5.0",
+ "plyr": "^2.0.13",
"requirejs": "^2.3.3",
"scrollmagic": "^2.0.5"
}
diff --git a/page-features.php b/page-features.php
index ea230e59..2ce5aaaf 100644
--- a/page-features.php
+++ b/page-features.php
@@ -1,9 +1,9 @@
<head>
-<link href="<?php echo get_template_directory_uri(); ?>/assets/css/features.css" rel="stylesheet">
-<link type="text/css" href="<?php echo get_template_directory_uri(); ?>/assets/css/vendor/jquery-ui.css" rel="stylesheet" />
+<link href="<?php echo get_template_directory_uri(); ?>/assets/css/pages/features.css" rel="stylesheet">
+<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script>
require(["require.config"], function() {
- require(["pages/features", "modules/submenu"])
+ require(["modules/youtubePlayer"])
});
</script>
<script src='https://www.google.com/recaptcha/api.js'></script>
@@ -22,14 +22,10 @@
<div class="container-fluid menu" id="menuAnchor">
<div class="container buttons">
<a href="#hosting"><span class="avoidwrap"><?php echo $l->t('Your files');?></span></a>
-<!-- <a href="#files"><span class="avoidwrap"><?php echo $l->t('File access');?></span></a>-->
<a href="#security"><span class="avoidwrap"><?php echo $l->t('Security');?></span></a>
-<!-- <a href="#workflow"><span class="avoidwrap"><?php echo $l->t('Control');?></span></a> -->
<a href="#clients"><span class="avoidwrap"><?php echo $l->t('Clients');?></span></a>
<a href="#storage"><span class="avoidwrap"><?php echo $l->t('External storage');?></span></a>
<a href="#calendar"><span class="avoidwrap"><?php echo $l->t('Collaborate');?></span></a>
-<!-- <a href="#calls"><span class="avoidwrap"><?php echo $l->t('Video calls');?></a> -->
-<!-- <a href="#collabora"><span class="avoidwrap"><?php echo $l->t('Online Office');?></span></a> -->
<a href="#appstore"><span class="avoidwrap"><?php echo $l->t('More apps');?></span></a>
</div>
</div>
@@ -52,15 +48,8 @@
<section class="section--files">
<a name="files" id="files"></a>
<div class="container">
- <div class="col-md-6 revealOnScroll image--floated image--feature">
- <div class="yt-img-overlay">
- <a class="youtube" href="https://www.youtube.com/watch?v=Fe1I7wYW6hA" title="Creating anonymous upload links">
- <img src="https://img.youtube.com/vi/Fe1I7wYW6hA/hqdefault.jpg" title="Creating anonymous upload links" />
- <div class="yt-play-btn">
- <i></i>
- </div>
- </a>
- </div>
+ <div class="col-md-6 revealOnScroll image--floated">
+ <div class="youtube" data-type="youtube" data-video-id="Fe1I7wYW6hA"></div>
</div>
<div class="col-md-6 revealOnScroll feature--block">
<p class="section--paragraph__tittle"><?php echo $l->t('Share with others on your terms.');?></p>
diff --git a/page-homepage.php b/page-homepage.php
index 1a299f98..b95e7c4a 100644
--- a/page-homepage.php
+++ b/page-homepage.php
@@ -165,7 +165,3 @@
<a class="button button--blue button--arrow button--large" href="https://newsletter.nextcloud.com/?p=subscribe&id=1" role="button"><?php echo $l->t('Subscribe');?></a>
</div>
</section>
-
-<!-- <script type="text/javascript">
- javascript:!function(a){var b=a.createElement("script");b.onload=function(){TouchEmulator()},b.src="//cdn.rawgit.com/hammerjs/touchemulator/0.0.2/touch-emulator.js",a.body.appendChild(b)}(document);
-</script> -->
diff --git a/page-secure.php b/page-secure.php
index e7ee0a06..b6770996 100644
--- a/page-secure.php
+++ b/page-secure.php
@@ -1,5 +1,5 @@
<head>
- <link href="<?php echo get_template_directory_uri(); ?>/assets/css/secure.css" rel="stylesheet">
+ <link href="<?php echo get_template_directory_uri(); ?>/assets/css/pages/secure.css" rel="stylesheet">
<script>
require(["require.config"], function() {
require(["pages/secure"])
diff --git a/yarn.lock b/yarn.lock
index 6dc8b8e5..cf16b400 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1481,6 +1481,10 @@ pluralize@^4.0.0:
version "4.0.0"
resolved "https://registry.yarnpkg.com/pluralize/-/pluralize-4.0.0.tgz#59b708c1c0190a2f692f1c7618c446b052fd1762"
+plyr@^2.0.13:
+ version "2.0.13"
+ resolved "https://registry.yarnpkg.com/plyr/-/plyr-2.0.13.tgz#9b726d2444fd743338c23d3c48ca3416c97712be"
+
prelude-ls@~1.1.2:
version "1.1.2"
resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.1.2.tgz#21932a549f5e52ffd9a827f570e04be62a97da54"