TagesschuleElementa/www.tagesschule-elementa.ch
3
0
Fork 1
Code Issues Pull Requests 1 Releases Wiki Activity

memberzone

Browse Source
This commit is contained in:
Simon Caminada
2018-03-21 20:26:24 +01:00
parent 25604d1038
commit a74f6d0ee4
39 changed files with 1741 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

89
private/js/modules/control-panel.js Normal file
View 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
View 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
private/scss/_config.scss
View File

@@ -1,4 +1,5 @@
$white: #FFFFFF;
$white_gray: #F9F9F9;
$light_gray: #F4F4F4;
$medium_light_gray: #E6E6E6;
$gray: #ADADAD;

2
private/scss/main.scss
View File

@@ -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
View 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
View 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;
}

2
private/scss/modules/plugins/_download_section.scss
View File

@@ -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: '';