From 0c83ed8fa7553838026088bb4ea802dc20c43334 Mon Sep 17 00:00:00 2001 From: Nikolai R Kristiansen Date: Tue, 18 Nov 2014 21:13:17 +0100 Subject: [PATCH] More compact view --- mailadmin/static/app/scripts/main.js | 25 ++-- mailadmin/static/app/styles/main.scss | 109 +++++++++++++----- mailadmin/static/app/templates/alert.html | 4 +- mailadmin/static/app/templates/list.html | 31 ++--- mailadmin/static/app/templates/new_list.html | 4 +- mailadmin/static/dist/scripts/main.js | 25 ++-- mailadmin/static/dist/scripts/templates.js | 32 ++++-- mailadmin/static/dist/styles/main.css | 113 ++++++++++++++----- mailadmin/templates/base.html | 3 +- 9 files changed, 233 insertions(+), 113 deletions(-) diff --git a/mailadmin/static/app/scripts/main.js b/mailadmin/static/app/scripts/main.js index 68a06bf..4cffa2a 100644 --- a/mailadmin/static/app/scripts/main.js +++ b/mailadmin/static/app/scripts/main.js @@ -31,8 +31,8 @@ return _.unique(emails); } - function renderAlert(msg, cssClass) { - return nunjucks.render('alert.html', {'msg': msg, 'cssClass': cssClass}); + function renderAlert(msg, alertClass, iconClass) { + return nunjucks.render('alert.html', {'msg': msg, 'alertClass': alertClass, 'iconClass': iconClass}); } @@ -72,7 +72,7 @@ var prefix = $('.new-list .prefix-select .active').attr('data-value'); new_list_name = 'NY: ' + prefix + new_list_name + "@studentersamfundet.no"; } - $('.new-list .panel-heading').text(new_list_name); + $('.js-new-list-preview').text(new_list_name); }); /* Prefix select */ $('.new-list .prefix-select a').on('click', function() { @@ -190,9 +190,9 @@ var tbody = target.closest('tbody'); var num_selected = tbody.find("[name=fwd-delete]:checked").length; if(num_selected > 0) { - tbody.find('.btn-del').addClass('visible'); + tbody.find('.link-del').addClass('visible'); } else { - tbody.find('.btn-del').removeClass('visible'); + tbody.find('.link-del').removeClass('visible'); } } /* Delete selected */ @@ -220,16 +220,17 @@ $('[data-list-name="'+list_name+'"] .result-alert').html(renderAlert('Kunne ikke fjerne epostaliaser', 'danger')); }); } + else if( target.hasClass('js-toggle-email-textarea')) { + e.preventDefault(); + var row = target.closest('tbody').find('.textarea-row'); + row.toggleClass('visible'); + } /* Add new */ else if( target.hasClass('js-new-email') ) { - // TODO not working - var email_field = target.parent().parent().find('[name=new-email]'); - console.log(email_field); - if(email_field.get(0).checkValidity() === false) { - return true; - } e.preventDefault(); - console.log(email_field.val()); + // TODO refactor logic from new list and add here + } else { + //console.log(target); } }); /* New list toggle display */ diff --git a/mailadmin/static/app/styles/main.scss b/mailadmin/static/app/styles/main.scss index cbf2e31..9a040bd 100644 --- a/mailadmin/static/app/styles/main.scss +++ b/mailadmin/static/app/styles/main.scss @@ -18,6 +18,9 @@ $icon-font-path: "../fonts/"; display: block; } } +.orgunit-list { + margin-bottom: 40px; +} /* Sidebar navigation */ .nav-sidebar > .active > a, @@ -28,30 +31,15 @@ $icon-font-path: "../fonts/"; } /* Sticky footer styles */ -html { - position: relative; - min-height: 100%; -} -body { - /* Margin bottom by footer height */ - margin-bottom: 100px; -} + .footer { - position: absolute; - bottom: 0; - width: 100%; - /* Set the fixed height of the footer here */ - height: 100px; - background-color: #f5f5f5; - padding-top: 20px; + margin-top: 40px; } /* Lists */ -.del-header { +.del-cell { text-align: center; width: 82px; -} -.del-cell { padding: 0 !important; } .del-label { @@ -65,16 +53,10 @@ body { top: 6px; } } -.btn-del { - display: none; - &.visible { - display: block; - } -} -.forwards-container table > thead > tr > th:first-child, -.forwards-container table > tbody > tr > td:first-child - { + +.forwards-container table > tbody > tr > td:first-child { padding-left: 16px; + padding-right: 16px; } .forwards-container .badge { float: right; @@ -93,9 +75,78 @@ body { float: right; margin-top: 10px; } +/* Forward list */ +.panel-heading { + font-weight: bold; + font-size: 16px; +} +.icon-faded { + font-size: 14px; + color: #ccc; + margin-right: 4px; + top: 2px; +} +.forwards-container table > tbody > tr.action-row > td:first-child, +.table-condensed > tbody > tr.action-row > td { + padding: 0; +} +.fwdlist tr:nth-child(even) > td { + background-color: #f5f5f5; +} +.action-row { + .link-add { + display: block; + } + .link-del { + display: none; + &.visible { + display: block; + } + } + a { + padding: 10px; + padding-left: 16px; + &:hover { + background-color: #f5f5f5; + } + } + textarea { + margin-bottom: 8px; + } +} +.textarea-row { + display: none; + td { + padding-right: 16px; + } + &.visible { + display: table-row; + } + .btn-add-list { + margin-bottom: 10px; + } +} /* Responsive fixes */ -@media(max-width: $screen-xs-max){ +@media(max-width: 500px){ + .panel-heading { + font-size: 13px; + font-weight: bold; + } + .panel-heading .icon-faded { + display: none; + } td { font-size: 13px; } -} \ No newline at end of file +} + +.love { + color: #faafba; +} +.credits { + margin-top: 25px; + margin-bottom: 25px; + text-align: center; + color: #666; + font-size: 12px; +} diff --git a/mailadmin/static/app/templates/alert.html b/mailadmin/static/app/templates/alert.html index 89c0ec9..efad987 100644 --- a/mailadmin/static/app/templates/alert.html +++ b/mailadmin/static/app/templates/alert.html @@ -1,4 +1,4 @@ -
+
× - {{ msg }} + {% if iconClass %} {% endif %}{{ msg }}
\ No newline at end of file diff --git a/mailadmin/static/app/templates/list.html b/mailadmin/static/app/templates/list.html index 4508d5e..2bffb58 100644 --- a/mailadmin/static/app/templates/list.html +++ b/mailadmin/static/app/templates/list.html @@ -1,24 +1,27 @@ {% for list,members in lists %}
-
{{ list }} {{members|length}}
- - - - - - - +
{{ list }} {{members|length}}
+
MedlemVelg
{% for member in members %} {% endfor %} - + + + + + + +
{{ member.forward }}
-
- - -
-
+ Legg til + + Slett +
+

Eposter

+ + +
diff --git a/mailadmin/static/app/templates/new_list.html b/mailadmin/static/app/templates/new_list.html index b617e2a..591296b 100644 --- a/mailadmin/static/app/templates/new_list.html +++ b/mailadmin/static/app/templates/new_list.html @@ -1,5 +1,5 @@
-
Ny liste
+
Ny liste
@@ -15,6 +15,6 @@

Eposter

- +
\ No newline at end of file diff --git a/mailadmin/static/dist/scripts/main.js b/mailadmin/static/dist/scripts/main.js index 68a06bf..4cffa2a 100644 --- a/mailadmin/static/dist/scripts/main.js +++ b/mailadmin/static/dist/scripts/main.js @@ -31,8 +31,8 @@ return _.unique(emails); } - function renderAlert(msg, cssClass) { - return nunjucks.render('alert.html', {'msg': msg, 'cssClass': cssClass}); + function renderAlert(msg, alertClass, iconClass) { + return nunjucks.render('alert.html', {'msg': msg, 'alertClass': alertClass, 'iconClass': iconClass}); } @@ -72,7 +72,7 @@ var prefix = $('.new-list .prefix-select .active').attr('data-value'); new_list_name = 'NY: ' + prefix + new_list_name + "@studentersamfundet.no"; } - $('.new-list .panel-heading').text(new_list_name); + $('.js-new-list-preview').text(new_list_name); }); /* Prefix select */ $('.new-list .prefix-select a').on('click', function() { @@ -190,9 +190,9 @@ var tbody = target.closest('tbody'); var num_selected = tbody.find("[name=fwd-delete]:checked").length; if(num_selected > 0) { - tbody.find('.btn-del').addClass('visible'); + tbody.find('.link-del').addClass('visible'); } else { - tbody.find('.btn-del').removeClass('visible'); + tbody.find('.link-del').removeClass('visible'); } } /* Delete selected */ @@ -220,16 +220,17 @@ $('[data-list-name="'+list_name+'"] .result-alert').html(renderAlert('Kunne ikke fjerne epostaliaser', 'danger')); }); } + else if( target.hasClass('js-toggle-email-textarea')) { + e.preventDefault(); + var row = target.closest('tbody').find('.textarea-row'); + row.toggleClass('visible'); + } /* Add new */ else if( target.hasClass('js-new-email') ) { - // TODO not working - var email_field = target.parent().parent().find('[name=new-email]'); - console.log(email_field); - if(email_field.get(0).checkValidity() === false) { - return true; - } e.preventDefault(); - console.log(email_field.val()); + // TODO refactor logic from new list and add here + } else { + //console.log(target); } }); /* New list toggle display */ diff --git a/mailadmin/static/dist/scripts/templates.js b/mailadmin/static/dist/scripts/templates.js index f8623d7..88cdd9c 100644 --- a/mailadmin/static/dist/scripts/templates.js +++ b/mailadmin/static/dist/scripts/templates.js @@ -4,8 +4,14 @@ var colno = null; var output = ""; try { output += "
\n\t×\n\t"; +if(runtime.contextOrFrameLookup(context, frame, "iconClass")) { +output += " "; +; +} output += runtime.suppressValue(runtime.contextOrFrameLookup(context, frame, "msg"), env.autoesc); output += "\n
"; cb(null, output); @@ -44,11 +50,11 @@ frame.set("loop.last", t_1 === t_2 - 1); frame.set("loop.length", t_2); output += "\n
\n\t
\n\t
"; +output += "\">\n\t
\n\t
"; output += runtime.suppressValue(t_4, env.autoesc); output += " "; output += runtime.suppressValue(env.getFilter("length").call(context, t_5), env.autoesc); -output += "
\n\t\t\n\t\t\t\n\t\t \n\t\t\t \n\t\t\t \n\t\t \n\t \n\t \n\t\t\t"; +output += "\n\t\t
MedlemVelg
\n\t \n\t\t\t"; frame = frame.push(); var t_8 = t_5; if(t_8) {var t_7 = t_8.length; @@ -81,9 +87,11 @@ output += "\">\n\t\t\t"; } } frame = frame.pop(); -output += "\n\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t
\n\t\t\t\t		\n\t\t\t\t\t Legg til\n\t\t\t\t\n\t\t\t\t\t Slett
\n\t\t
\n\t
\n
\n"; +output += "\"> Slett\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t

Eposter

\n \t\t\t\t\n \t\t\t\t\n \t\t\t\n \t\t\t\n\t\t\t\n\t\t\n\t\t
\n\t
\n
\n"; ; } } else { @@ -103,11 +111,11 @@ frame.set("loop.last", t_1 === t_2 - 1); frame.set("loop.length", t_2); output += "\n
\n\t
\n\t
"; +output += "\">\n\t
\n\t
"; output += runtime.suppressValue(t_10, env.autoesc); output += " "; output += runtime.suppressValue(env.getFilter("length").call(context, t_11), env.autoesc); -output += "
\n\t\t\n\t\t\t\n\t\t \n\t\t\t \n\t\t\t \n\t\t \n\t \n\t \n\t\t\t"; +output += "\n\t\t
MedlemVelg
\n\t \n\t\t\t"; frame = frame.push(); var t_14 = t_11; if(t_14) {var t_13 = t_14.length; @@ -140,9 +148,11 @@ output += "\">\n\t\t\t"; } } frame = frame.pop(); -output += "\n\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t
\n\t\t\t\t		\n\t\t\t\t\t Legg til\n\t\t\t\t\n\t\t\t\t\t Slett
\n\t\t
\n\t
\n
\n"; +output += "\"> Slett\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t

Eposter

\n \t\t\t\t\n \t\t\t\t\n \t\t\t\n \t\t\t\n\t\t\t\n\t\t\n\t\t
\n\t
\n
\n"; ; } } @@ -165,7 +175,7 @@ var lineno = null; var colno = null; var output = ""; try { -output += "
\n
Ny liste
\n
\n \t
\n\t\t\n\t\t\t\n\t\t\t
    \n\t\t\t"; frame = frame.push(); @@ -195,7 +205,7 @@ output += "-\n\t\t\t"; } } frame = frame.pop(); -output += "\n\t\t\t
\n\t\t\n\t\t\n\t\t@studentersamfundet.no\n\t
\n \t

Eposter

\n \n \n
\n
"; +output += "\n\t\t\t\n\t\t\n\t\t\n\t\t@studentersamfundet.no\n\t
\n \t

Eposter

\n \n \n
\n
"; cb(null, output); ; } catch (e) { diff --git a/mailadmin/static/dist/styles/main.css b/mailadmin/static/dist/styles/main.css index 3307f78..0331abc 100644 --- a/mailadmin/static/dist/styles/main.css +++ b/mailadmin/static/dist/styles/main.css @@ -6534,6 +6534,10 @@ button.close { } } +.orgunit-list { + margin-bottom: 40px; +} + /* Sidebar navigation */ .nav-sidebar > .active > a, .nav-sidebar > .active > a:hover, @@ -6543,33 +6547,14 @@ button.close { } /* Sticky footer styles */ -html { - position: relative; - min-height: 100%; -} - -body { - /* Margin bottom by footer height */ - margin-bottom: 100px; -} - .footer { - position: absolute; - bottom: 0; - width: 100%; - /* Set the fixed height of the footer here */ - height: 100px; - background-color: #f5f5f5; - padding-top: 20px; + margin-top: 40px; } /* Lists */ -.del-header { +.del-cell { text-align: center; width: 82px; -} - -.del-cell { padding: 0 !important; } @@ -6585,16 +6570,9 @@ body { top: 6px; } -.btn-del { - display: none; -} -.btn-del.visible { - display: block; -} - -.forwards-container table > thead > tr > th:first-child, .forwards-container table > tbody > tr > td:first-child { padding-left: 16px; + padding-right: 16px; } .forwards-container .badge { @@ -6618,9 +6596,84 @@ body { margin-top: 10px; } +/* Forward list */ +.panel-heading { + font-weight: bold; + font-size: 16px; +} + +.icon-faded { + font-size: 14px; + color: #ccc; + margin-right: 4px; + top: 2px; +} + +.forwards-container table > tbody > tr.action-row > td:first-child, +.table-condensed > tbody > tr.action-row > td { + padding: 0; +} + +.fwdlist tr:nth-child(even) > td { + background-color: #f5f5f5; +} + +.action-row .link-add { + display: block; +} +.action-row .link-del { + display: none; +} +.action-row .link-del.visible { + display: block; +} +.action-row a { + padding: 10px; + padding-left: 16px; +} +.action-row a:hover { + background-color: #f5f5f5; +} +.action-row textarea { + margin-bottom: 8px; +} + +.textarea-row { + display: none; +} +.textarea-row td { + padding-right: 16px; +} +.textarea-row.visible { + display: table-row; +} +.textarea-row .btn-add-list { + margin-bottom: 10px; +} + /* Responsive fixes */ -@media (max-width: 767px) { +@media (max-width: 500px) { + .panel-heading { + font-size: 13px; + font-weight: bold; + } + + .panel-heading .icon-faded { + display: none; + } + td { font-size: 13px; } } +.love { + color: #faafba; +} + +.credits { + margin-top: 25px; + margin-bottom: 25px; + text-align: center; + color: #666; + font-size: 12px; +} diff --git a/mailadmin/templates/base.html b/mailadmin/templates/base.html index 905ee08..f38fd4b 100644 --- a/mailadmin/templates/base.html +++ b/mailadmin/templates/base.html @@ -16,7 +16,8 @@ {% block "body" %}{% endblock %}