forked from TagesschuleElementa/www.tagesschule-elementa.ch
memberzone
This commit is contained in:
89
private/js/modules/control-panel.js
Normal file
89
private/js/modules/control-panel.js
Normal file
@@ -0,0 +1,89 @@
|
||||
$(function() {
|
||||
'use strict';
|
||||
|
||||
var $body = $('body');
|
||||
|
||||
$body.on('click', '.control__item__open', function(event) {
|
||||
event.preventDefault();
|
||||
var $button = $(this);
|
||||
var $control_item = $button.parents('.control__item');
|
||||
$control_item.addClass('loading');
|
||||
|
||||
$.get($button.attr('data-href'), function(data) {
|
||||
var $control_item_content = $control_item.find('.control__item__content');
|
||||
var $control_item_content_main = $control_item_content.find('.control__item__content__main');
|
||||
|
||||
var cleaned_data = data.replace(/autofocus/g, '');
|
||||
$control_item_content_main.html(cleaned_data);
|
||||
|
||||
$control_item_content.height($control_item_content_main.outerHeight(true));
|
||||
|
||||
$control_item.addClass('active');
|
||||
|
||||
window.on_transitionend($control_item_content, function(event) {
|
||||
if (!event || event.target === $control_item_content[0]) {
|
||||
$control_item_content.off(window.transitionend);
|
||||
$control_item_content.removeAttr('style');
|
||||
$control_item.removeClass('loading');
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
$body.on('click', '.control__item__close', function(event) {
|
||||
event.preventDefault();
|
||||
var $button = $(this);
|
||||
var $control_item = $button.parents('.control__item');
|
||||
|
||||
var $control_item_content = $control_item.find('.control__item__content');
|
||||
var $control_item_content_main = $control_item_content.find('.control__item__content__main');
|
||||
$control_item_content.height($control_item_content_main.outerHeight(true));
|
||||
|
||||
window.on_transitionend($control_item_content, function(event) {
|
||||
if (!event || event.target === $control_item_content[0]) {
|
||||
$control_item_content.off(window.transitionend);
|
||||
$control_item_content_main.html('');
|
||||
}
|
||||
});
|
||||
|
||||
window.requestAnimationFrame(function() {
|
||||
$control_item.removeClass('active');
|
||||
$control_item_content.removeAttr('style');
|
||||
});
|
||||
});
|
||||
|
||||
$body.on('submit', '.control__item form', function(event) {
|
||||
event.preventDefault();
|
||||
var $form = $(this);
|
||||
$.ajax({
|
||||
type: $form.attr('method'),
|
||||
url: $form.attr('action'),
|
||||
data: $form.serialize(),
|
||||
success: function(data) {
|
||||
if ($(data).hasClass('control__item__success')) {
|
||||
var $control_item = $form.parents('.control__item');
|
||||
$control_item.find('.control__item__close').trigger('click');
|
||||
} else {
|
||||
$form.replaceWith(data);
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
var $task_form = $('.task__form');
|
||||
|
||||
if ($task_form.hasClass('errors')) {
|
||||
window.location = '#form';
|
||||
}
|
||||
|
||||
$task_form.formset();
|
||||
$task_form.on('formAdded', function(event) {
|
||||
var $title = $(event.target).find('h3');
|
||||
var id = parseInt($title.attr('data-id').match(/\d+/)[0]);
|
||||
$title.html($title.html().replace('%(id)', id + 1));
|
||||
});
|
||||
|
||||
$task_form.on('formDeleted', function(event) {
|
||||
$(event.target).hide();
|
||||
});
|
||||
});
|
||||
47
private/js/modules/downloads.js
Normal file
47
private/js/modules/downloads.js
Normal file
@@ -0,0 +1,47 @@
|
||||
$(function() {
|
||||
'use strict';
|
||||
|
||||
var $body = $('body');
|
||||
|
||||
var download_texts = [];
|
||||
|
||||
$('.downloads__item__text').each(function() {
|
||||
var text = $(this).text().toLowerCase();
|
||||
text = text + '' + $(this).next().text().toLowerCase();
|
||||
download_texts.push({
|
||||
$element: $(this).parents('.downloads__item__frame'),
|
||||
text: text
|
||||
});
|
||||
});
|
||||
|
||||
$body.on('input', '#downloads_search', function(event) {
|
||||
var query = $(this).val().toLowerCase();
|
||||
var query_list = $.trim(query).split(' ');
|
||||
var matches = [];
|
||||
|
||||
for (var i = 0; i < download_texts.length; i++) {
|
||||
var download_text_item = download_texts[i];
|
||||
var matched = false;
|
||||
if (!matched) {
|
||||
for (var ii = 0; ii < query_list.length; ii++) {
|
||||
var query_item = query_list[ii];
|
||||
if (download_text_item.text.indexOf(query_item) >= 0) {
|
||||
matched = true;
|
||||
matches.push(download_text_item.$element);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
$('.downloads__item__frame').each(function() {
|
||||
$(this).parents('.downloads__section').css('display', 'none');
|
||||
$(this).css('display', 'none');
|
||||
});
|
||||
for (i = 0; i < matches.length; i++) {
|
||||
matches[i].removeAttr('style');
|
||||
matches[i].parents('.downloads__section').removeAttr('style');
|
||||
}
|
||||
});
|
||||
|
||||
$('#downloads_search').trigger('input');
|
||||
});
|
||||
@@ -1,4 +1,5 @@
|
||||
$white: #FFFFFF;
|
||||
$white_gray: #F9F9F9;
|
||||
$light_gray: #F4F4F4;
|
||||
$medium_light_gray: #E6E6E6;
|
||||
$gray: #ADADAD;
|
||||
|
||||
@@ -13,6 +13,8 @@
|
||||
@import "modules/_contact.scss";
|
||||
@import "modules/_content.scss";
|
||||
@import "modules/_admin_editor.scss";
|
||||
@import "modules/_downloads.scss";
|
||||
@import "modules/_control-panel.scss";
|
||||
@import "modules/plugins/_quote.scss";
|
||||
@import "modules/plugins/_slider.scss";
|
||||
@import "modules/plugins/_section.scss";
|
||||
|
||||
195
private/scss/modules/_control-panel.scss
Normal file
195
private/scss/modules/_control-panel.scss
Normal file
@@ -0,0 +1,195 @@
|
||||
.control_panel {
|
||||
width: 100%;
|
||||
padding: em(100px) 0;
|
||||
will-change: transform, height;
|
||||
&.reveal_animation {
|
||||
transition: background $reveal_duration $reveal_timing_function;
|
||||
&.reveal {
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
.load__replace {
|
||||
margin-top: em(40px);
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
.control__list {
|
||||
li {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.control_panel__content {
|
||||
max-width: em(1440px);
|
||||
margin: 0 auto;
|
||||
padding: 0 em(80px);
|
||||
font-size: 0;
|
||||
@media screen and (max-width: $large_breakpoint) {
|
||||
padding: 0 em(60px);
|
||||
}
|
||||
@media screen and (max-width: $medium_breakpoint) {
|
||||
max-width: em(600px);
|
||||
padding: 0 em(30px);
|
||||
}
|
||||
}
|
||||
|
||||
.control__item {
|
||||
display: block;
|
||||
background: $white_gray;
|
||||
text-decoration: none;
|
||||
width: 100%;
|
||||
margin-bottom: em(15px);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.control__item__open {
|
||||
opacity: 1;
|
||||
z-index: 2;
|
||||
transition: opacity 0.2s $easeOutQuad;
|
||||
.active & {
|
||||
opacity: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.control__item__close {
|
||||
opacity: 0;
|
||||
z-index: 1;
|
||||
transition: opacity 0.2s $easeOutQuad;
|
||||
.active & {
|
||||
opacity: 1;
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
|
||||
.control__item__success {
|
||||
max-width: em(350px);
|
||||
.tag {
|
||||
display: block;
|
||||
}
|
||||
.button {
|
||||
margin-top: em(20px);
|
||||
}
|
||||
}
|
||||
|
||||
.control__item__title {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: em(22px) em(30px);
|
||||
position: relative;
|
||||
font-size: em(18px);
|
||||
color: $dark_gray;
|
||||
.control__item--button & {
|
||||
padding-right: em(240px);
|
||||
.button {
|
||||
position: absolute;
|
||||
top: em(16px);
|
||||
right: em(30px);
|
||||
width: em(210px);
|
||||
}
|
||||
@media screen and (max-width: $small_breakpoint) {
|
||||
padding-right: em(30px);
|
||||
padding-bottom: em(75px);
|
||||
.button {
|
||||
top: auto;
|
||||
right: auto;
|
||||
left: em(30px);
|
||||
bottom: em(22px);
|
||||
}
|
||||
}
|
||||
}
|
||||
.control__item--status & {
|
||||
padding-left: em(85px);
|
||||
}
|
||||
.control__item--arrow & {
|
||||
padding-right: em(85px);
|
||||
&:hover {
|
||||
.control__item__arrow {
|
||||
transform: translateX(em(5px));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.control__item__content {
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
transition: height 0.5s $easeOutQuad;
|
||||
will-change: height;
|
||||
.active & {
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.control__item__content__main {
|
||||
border-top: 1px solid $gray;
|
||||
padding: em(30px);
|
||||
}
|
||||
|
||||
.control__item__fields {
|
||||
margin: em(10px) 0 em(50px);
|
||||
}
|
||||
|
||||
.control__item__status {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: em(20px);
|
||||
margin-top: em(-20px);
|
||||
border-radius: 50%;
|
||||
border: 2px solid $gray;
|
||||
svg {
|
||||
display: block;
|
||||
width: em(36px);
|
||||
height: em(36px);
|
||||
fill: $white;
|
||||
}
|
||||
.control__item--status--active & {
|
||||
background: $green;
|
||||
border-color: $green;
|
||||
}
|
||||
.control__item--status--expired & {
|
||||
background: $red;
|
||||
border-color: $red;
|
||||
}
|
||||
}
|
||||
|
||||
.control__item__arrow {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: em(20px);
|
||||
margin-top: em(-20px);
|
||||
transform: none;
|
||||
transition: transform 0.3s $easeOutQuart;
|
||||
svg {
|
||||
display: block;
|
||||
width: em(40px);
|
||||
height: em(40px);
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
.fill {
|
||||
fill: $green;
|
||||
}
|
||||
}
|
||||
|
||||
.todo {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
width: 48%;
|
||||
margin-right: 4%;
|
||||
@media screen and (max-width: $large_breakpoint) {
|
||||
width: 100%;
|
||||
margin: 0 0 em(40px) 0;
|
||||
}
|
||||
}
|
||||
|
||||
.settings {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
width: 48%;
|
||||
@media screen and (max-width: $large_breakpoint) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
66
private/scss/modules/_downloads.scss
Normal file
66
private/scss/modules/_downloads.scss
Normal file
@@ -0,0 +1,66 @@
|
||||
.downloads__frame {
|
||||
width: 100%;
|
||||
padding: em(80px) 0 em(150px);
|
||||
position: relative;
|
||||
will-change: transform;
|
||||
.downloads {
|
||||
li {
|
||||
width: 33.3333%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.downloads__content {
|
||||
max-width: em(1440px);
|
||||
margin: 0 auto;
|
||||
padding: 0 em(80px);
|
||||
@media screen and (max-width: $large_breakpoint) {
|
||||
padding: 0 em(60px);
|
||||
}
|
||||
@media screen and (max-width: $medium_breakpoint) {
|
||||
max-width: em(600px);
|
||||
padding: 0 em(30px);
|
||||
}
|
||||
}
|
||||
|
||||
.downloads__section {
|
||||
margin-top: em(80px);
|
||||
.downloads--flat & {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.downloads__section__title {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
h3 {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
&:after {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
background: $white;
|
||||
width: 100vw;
|
||||
height: em(3px);
|
||||
opacity: 0.15;
|
||||
top: em(10.5px);
|
||||
left: 100%;
|
||||
margin-left: em(20px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.downloads__section__title--flat {
|
||||
h3 {
|
||||
&:after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.downloads__list {
|
||||
display: block;
|
||||
margin: 0 em(-10px);
|
||||
font-size: 0;
|
||||
}
|
||||
@@ -67,6 +67,8 @@
|
||||
font-size: em(11px);
|
||||
color: $white;
|
||||
font-weight: 500;
|
||||
padding: 0 em(5px);
|
||||
text-shadow: 0 1px 0 $green, 1px 0 0 $green, 0 -1px 0 $green, -1px 0 0 $green;
|
||||
&:before, &:after {
|
||||
display: block;
|
||||
content: '';
|
||||
|
||||
Reference in New Issue
Block a user