Improve mailinglist page

This commit is contained in:
nikolark committed 2014-09-07 21:41:17 +02:00
1 parent a67187d693
commit 4f8eb0f3dc
8 files changed
+1587 -4092

No files matched your search

+18 -11
View File
@@ -1,5 +1,5 @@
'use strict';
/*global moment, jQuery, document, _, $, window */
/*global moment, jQuery, document, _, $, window, List */
var program_endpoint = 'https://studentersamfundet.no/api/events/get_today/';
var inside_url = 'https://inside.studentersamfundet.no';
var inside_groups_url = inside_url + '/api/groups.php';
@@ -194,12 +194,15 @@ function mailinglist_show(q) {
_wpnonce: $('meta[name=x-inside-api-nonce]').attr('content')
},
function(data) {
var list = '<h5>Medlemmer på ' + data.meta.list +'</h5><ul id="members-result"><% _.each(members, function(m) { %>' +
var list = '<h5 class="list-members-title">Medlemmer på ' + data.meta.list +'</h5><span class="list-num-members"><%= members.length %> stk</span><ul id="members-result"><% _.each(members, function(m) { %>' +
'<li><a href="mailto:<%= m %>"><span class="dashicons dashicons-email"></span> <%= m %></a></li>' +
'<% }); %></ul>';
var html = _.template(list, data);
$('.list-members').html(html);
$('.lists-list-wrap .meta').html('<a href="#members-result" class="button radius list-members-button">Vis medlemmer på '+ data.meta.list +'</a>');
/* Highlight selected list */
$('[data-list-name=\''+q+'\']').addClass('selected');
}
);
}
@@ -302,10 +305,9 @@ jQuery(document).ready(function() {
/* Mailinglists page */
if( $('.page-mailinglists').length ) {
// TODO:
// - selected mailinglist logic and highlight
// - better mobile layout
// - sorting by list size
// TODO: better mobile layout
// TODO: dynamic show/hide of members
/* Load list of lists*/
$.getJSON(
email_endpoint,
@@ -314,19 +316,24 @@ jQuery(document).ready(function() {
_wpnonce: $('meta[name=x-inside-api-nonce]').attr('content')
},
function(data) {
// TODO, dynamic show/hide of members
var list = '<h5>Viser '+ data.meta.num +' epostlister:</h5><ul><% _.each(lists, function(l) { %>' +
'<li><a href="'+ window.location.pathname + '?q=<%= l.name %>"><%= l.name %></a><br>' +
var list = '<% _.each(lists, function(l) { %>' +
'<li data-list-name="<%= l.name %>"><a href="'+ window.location.pathname + '?q=<%= l.name %>" class="list-name"><%= l.name %></a><br>' +
'<span class="list-num-members"><%= l.num %> medlemmer</span>'+
'<a href="<%= l.admin_url %>" class="email-<%= l.type %> button-alt" title="<%= l.type %>"> '+
'<span class="dashicons dashicons-<% if( l.admin_type == "selfservice" ) { %>edit<% } else { %>email<% } %>"> </span>Endre'+
'</a></li>' +
'<% }); %></ul>';
'<% }); %>';
var html = _.template(list, data);
$('.lists-list').html(html);
/* Index list and make searchable and sortable */
var options = {
valueNames: [ 'list-name', 'list-num-members' ]
};
new List('mailinglists', options);
mailinglists_load_initial();
}
);
mailinglists_load_initial();
}
/* Profile page */
@@ -0,0 +1,18 @@
// TODO: zheight param
@mixin card($padding: rem-calc(10) 0) {
padding: $padding;
background-color: #fff;
border: 1px solid #eee;
box-shadow: rgba(0,0,0,0.14902) 0px 1px 0px 0px, rgba(0,0,0,0.09804) 0px 1px 2px 0px;
border-radius: 2px;
}
@mixin card-z1($padding) {
@include card($padding);
box-shadow: rgba(0,0,0,0.14902) 0px 1px 0px 0px, rgba(0,0,0,0.09804) 0px 1px 2px 0px;
}
@mixin card-z2($padding) {
@include card($padding);
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
}
@@ -1,5 +1,6 @@
@import 'normalize';
@import 'chosen';
@import 'mixins';
/* Colors */
$body-bg: #fafafa;
@@ -435,6 +436,7 @@ input[type=submit]{
.profile-details,
.account-details {
@include grid-column(12);
margin-bottom: rem-calc(16);
@media #{$large-up} {
@include grid-column(6);
@@ -485,12 +487,30 @@ input[type=submit]{
display: none;
}
}
.list-manipulation {
padding-top: rem-calc(10);
@include clearfix();
.lists-list {
.button-alt {
margin-bottom: rem-calc(8);
}
.sort-buttons {
@include grid-column(6);
}
.search-field {
@include grid-column(6);
}
}
.lists-list-wrap {
#mailinglists {
@include card($padding: 0);
}
margin-bottom: rem-calc(18);
ul {
list-style: none;
margin: 0;
padding: 0;
}
li {
list-style: none;
@@ -498,34 +518,51 @@ input[type=submit]{
display: block;
position: relative;
line-height: 1.15;
&:nth-child(odd) {
background-color: #f4f4f4;
border-bottom: 1px solid #eee;
border-left: 4px solid transparent;
&:last-child {
border-bottom: transparent;
}
&.selected {
border-left: 4px solid $secondary-color;
}
.button-alt {
color: #666;
background-color: transparent;
&:hover {
background-color: #eee;
}
}
}
.button-alt {
color: #666;
background-color: transparent;
&:hover {
background-color: #ccc;
}
}
}
.list-members {
.list-members-title{
line-height: 1.15;
display: inline-block;
margin-right: rem-calc(4);
}
ul {
list-style: none;
margin: 0;
@extend .card;
@include card($padding: 0);
}
li {
list-style: none;
font-size: rem-calc(14);
a {
padding: 8px 10px;
display: block;
position: relative;
border-bottom: 1px solid #eee
border-bottom: 1px solid #eee;
}
&:last-child a {
border-bottom: transparent;
}
}
}
.list-num-members {
+5 -4
View File
@@ -8,12 +8,13 @@
"moment": "~2.8.3",
"underscore": "~1.7.0",
"chosen-bower": "~1.1.0",
"history.js": "~1.8.0"
"history.js": "~1.8.0",
"list.js": "~1.1.1"
},
"devDependencies": {},
"overrides": {
"history.js": {
"main": "./scripts/bundled/html4+html5/native.history.js"
}
"history.js": {
"main": "./scripts/bundled/html4+html5/native.history.js"
}
}
}
+1 -1
View File
@@ -1 +1 @@
"use strict";function getParameterByName(e){e=e.replace(/[\[]/,"\\[").replace(/[\]]/,"\\]");var t=new RegExp("[\\?&]"+e+"=([^&#]*)"),a=t.exec(location.search);return null===a?"":decodeURIComponent(a[1].replace(/\+/g," "))}function format_posts(e){var t="",a=0;if(0===e.length)return"Idag er det stille på huset :-/";for(a=0;a<e.length;a++){var n=e[a];t+='<li class="fadein">',t+='<span class="entry-starttime">'+moment.unix(n.custom_fields._neuf_events_starttime).utc().format("HH.mm")+"</span>: ",t+='<a href="'+n.url+'">'+n.title+"</a>",t+=' <span class="entry-venue">'+n.custom_fields._neuf_events_venue+"</span>",t+="</li>"}return t}function format_results(e){var t="<table><thead><tr><th>Navn</th><th>Brukernavn</th><th>Epost</th><th>Telefon</th><th>Har medlemskap</th><th>Grupper</th></tr></thead>";if(e.error)return console.log(e.error),$(".search-result-list").html(""),void $(".search-results .meta").html("");if(0===e.meta.num_results)return $(".search-result-list").html("Uffda, ingen treff."),void $(".search-results .meta").html("");var a='<tbody><% _.each(results, function(u) { %><tr><td><a href="'+inside_url+'/?page=display-user&userid=<%= u.id %>"><%= u.firstname %> <%= u.lastname %></a></td><td><%= u.username %></td><td><a href="mailto:<%= u.email %>"><%= u.email %></a></td><td><a href="tlf:<%= u.number %>"><%= u.number %></a></td><td><% if(u.is_member != 0) { %>Ja<% } else { %>Nei<% } %></td><td class="groups"><% _.each(u.groups, function(g, i) { %><%= g.name %><% if(u.groups.length !== i +1){ %>, <% } %><% }); %></td></tr> <% }); %></tbody></table>',n=t+_.template(a,e);$(".search-result-list").html(n);var s="Antall treff: <%= meta.num_results %>";$(".search-results .meta").html(_.template(s,e))}function do_search(){var e=$('.filters [data-search-filter="has_valid_membership"]'),t="",a=$(".groups-select").val();null!==a&&(t=a.join());var n={q:$(".search-field").val(),filter_groups:t};e.hasClass("active")&&(n.has_valid_membership=!0);var s=$.param(n);window.History.pushState(null,null,"?"+s),n._wpnonce=$("meta[name=x-inside-api-nonce]").attr("content"),$.getJSON(user_search_endpoint,n,format_results)}function user_search_load_initial_values(){var e=!1,t=getParameterByName("q");t&&t.length>0&&($(".search-field").val(t),e=!0);var a=getParameterByName("has_valid_membership");a&&"true"===a&&($('.filters [data-search-filter="has_valid_membership"]').addClass("active"),e=!0);var n=getParameterByName("filter_groups"),s=[];if(n&&n.length>0){s=-1!==n.indexOf(",")?n.split(","):[n];var r=!1,i=0;for(i=0;i<s.length;i++){var l=s[i];$.isNumeric(l)||(r=!0)}r||(e=!0,$(".groups-select").val(s),$(".groups-select").trigger("chosen:updated"))}e&&do_search()}function save_user_meta(e,t){try{localStorage.setItem(e,t)}catch(a){}var n=$("meta[name=x-siteurl]").attr("content")+"/wp-admin/admin-ajax.php",s={action:"neuf_save_user_meta",meta_key:e,meta_value:t,unique:!0,user_id:parseInt($("meta[name=x-user-id]").attr("content"),10),_wpnonce:$("meta[name=x-user-meta-nonce]").attr("content")};$.post(n,s)}function get_user_meta(e,t){try{var a=localStorage.getItem(e);if(null!==a)return void t({result:a})}catch(n){}var s=$("meta[name=x-siteurl]").attr("content")+"/wp-admin/admin-ajax.php",r={action:"neuf_get_user_meta",meta_key:e,single:!0,user_id:parseInt($("meta[name=x-user-id]").attr("content"),10),_wpnonce:$("meta[name=x-user-meta-nonce]").attr("content")};$.getJSON(s,r,function(a){if(a.hasOwnProperty("result")&&""!==a.result)try{localStorage.setItem(e,a.result)}catch(n){}t(a)})}function mailinglist_show(e){$.getJSON(email_endpoint,{"do":"list",q:e,_wpnonce:$("meta[name=x-inside-api-nonce]").attr("content")},function(e){var t="<h5>Medlemmer på "+e.meta.list+'</h5><ul id="members-result"><% _.each(members, function(m) { %><li><a href="mailto:<%= m %>"><span class="dashicons dashicons-email"></span> <%= m %></a></li><% }); %></ul>',a=_.template(t,e);$(".list-members").html(a),$(".lists-list-wrap .meta").html('<a href="#members-result" class="button radius list-members-button">Vis medlemmer på '+e.meta.list+"</a>")})}function mailinglists_load_initial(){var e=getParameterByName("q");e&&e.length>0&&mailinglist_show(e)}var program_endpoint="https://studentersamfundet.no/api/events/get_today/",inside_url="https://inside.studentersamfundet.no",inside_groups_url=inside_url+"/api/groups.php",user_search_endpoint="/inside-api/",email_endpoint="/email-api/",query_params={};jQuery(document).ready(function(){moment.locale("nb");var e=jQuery;e("#menu .menu-toggle").on("click",function(t){t.preventDefault();var a=e("#menu .main-menu, #menu .user-menu-wrap");a.toggleClass("visible")}),e("#menu a.profile-badge").on("click",function(t){t.preventDefault();var a=e("#menu .user-menu");a.toggleClass("visible")}),e("[data-toggle-introduction]").on("click",function(){e(this).parent().fadeOut(600),save_user_meta("introduction_dismissed",!0)}),e(".front-page .introduction").length&&get_user_meta("introduction_dismissed",function(t){t.hasOwnProperty("resultLine truncated
"use strict";function getParameterByName(e){e=e.replace(/[\[]/,"\\[").replace(/[\]]/,"\\]");var t=new RegExp("[\\?&]"+e+"=([^&#]*)"),a=t.exec(location.search);return null===a?"":decodeURIComponent(a[1].replace(/\+/g," "))}function format_posts(e){var t="",a=0;if(0===e.length)return"Idag er det stille på huset :-/";for(a=0;a<e.length;a++){var s=e[a];t+='<li class="fadein">',t+='<span class="entry-starttime">'+moment.unix(s.custom_fields._neuf_events_starttime).utc().format("HH.mm")+"</span>: ",t+='<a href="'+s.url+'">'+s.title+"</a>",t+=' <span class="entry-venue">'+s.custom_fields._neuf_events_venue+"</span>",t+="</li>"}return t}function format_results(e){var t="<table><thead><tr><th>Navn</th><th>Brukernavn</th><th>Epost</th><th>Telefon</th><th>Har medlemskap</th><th>Grupper</th></tr></thead>";if(e.error)return console.log(e.error),$(".search-result-list").html(""),void $(".search-results .meta").html("");if(0===e.meta.num_results)return $(".search-result-list").html("Uffda, ingen treff."),void $(".search-results .meta").html("");var a='<tbody><% _.each(results, function(u) { %><tr><td><a href="'+inside_url+'/?page=display-user&userid=<%= u.id %>"><%= u.firstname %> <%= u.lastname %></a></td><td><%= u.username %></td><td><a href="mailto:<%= u.email %>"><%= u.email %></a></td><td><a href="tlf:<%= u.number %>"><%= u.number %></a></td><td><% if(u.is_member != 0) { %>Ja<% } else { %>Nei<% } %></td><td class="groups"><% _.each(u.groups, function(g, i) { %><%= g.name %><% if(u.groups.length !== i +1){ %>, <% } %><% }); %></td></tr> <% }); %></tbody></table>',s=t+_.template(a,e);$(".search-result-list").html(s);var n="Antall treff: <%= meta.num_results %>";$(".search-results .meta").html(_.template(n,e))}function do_search(){var e=$('.filters [data-search-filter="has_valid_membership"]'),t="",a=$(".groups-select").val();null!==a&&(t=a.join());var s={q:$(".search-field").val(),filter_groups:t};e.hasClass("active")&&(s.has_valid_membership=!0);var n=$.param(s);window.History.pushState(null,null,"?"+n),s._wpnonce=$("meta[name=x-inside-api-nonce]").attr("content"),$.getJSON(user_search_endpoint,s,format_results)}function user_search_load_initial_values(){var e=!1,t=getParameterByName("q");t&&t.length>0&&($(".search-field").val(t),e=!0);var a=getParameterByName("has_valid_membership");a&&"true"===a&&($('.filters [data-search-filter="has_valid_membership"]').addClass("active"),e=!0);var s=getParameterByName("filter_groups"),n=[];if(s&&s.length>0){n=-1!==s.indexOf(",")?s.split(","):[s];var r=!1,i=0;for(i=0;i<n.length;i++){var l=n[i];$.isNumeric(l)||(r=!0)}r||(e=!0,$(".groups-select").val(n),$(".groups-select").trigger("chosen:updated"))}e&&do_search()}function save_user_meta(e,t){try{localStorage.setItem(e,t)}catch(a){}var s=$("meta[name=x-siteurl]").attr("content")+"/wp-admin/admin-ajax.php",n={action:"neuf_save_user_meta",meta_key:e,meta_value:t,unique:!0,user_id:parseInt($("meta[name=x-user-id]").attr("content"),10),_wpnonce:$("meta[name=x-user-meta-nonce]").attr("content")};$.post(s,n)}function get_user_meta(e,t){try{var a=localStorage.getItem(e);if(null!==a)return void t({result:a})}catch(s){}var n=$("meta[name=x-siteurl]").attr("content")+"/wp-admin/admin-ajax.php",r={action:"neuf_get_user_meta",meta_key:e,single:!0,user_id:parseInt($("meta[name=x-user-id]").attr("content"),10),_wpnonce:$("meta[name=x-user-meta-nonce]").attr("content")};$.getJSON(n,r,function(a){if(a.hasOwnProperty("result")&&""!==a.result)try{localStorage.setItem(e,a.result)}catch(s){}t(a)})}function mailinglist_show(e){$.getJSON(email_endpoint,{"do":"list",q:e,_wpnonce:$("meta[name=x-inside-api-nonce]").attr("content")},function(t){var a='<h5 class="list-members-title">Medlemmer på '+t.meta.list+'</h5><span class="list-num-members"><%= members.length %> stk</span><ul id="members-result"><% _.each(members, function(m) { %><li><a href="mailto:<%= m %>"><span class="dashicons dashicons-email"></span> <%= m %></a></li><% }); %></ul>',s=_.template(a,t);$(".list-members").html(s),$(".lists-list-wrap .meta").html('<a href="#members-result" class="button radius list-members-button">Vis medlemmer på '+t.meta.list+"</a>"),$("[data-list-name='"+e+"']").addClass("selected")})}function mailinglists_load_initial(){var e=getParameterByName("q");e&&e.length>0&&mailinglist_show(e)}var program_endpoint="https://studentersamfundet.no/api/events/get_today/",inside_url="https://inside.studentersamfundet.no",inside_groups_url=inside_url+"/api/groups.php",user_search_endpoint="/inside-api/",email_endpoint="/email-api/",query_params={};jQuery(document).ready(function(){moment.locale("nb");var e=jQuery;e("#menu .menu-toggle").on("click",function(t){t.preventDefault();var a=e("#menu .main-menu, #menu .user-menu-wrap");a.toggleClass("visible")}),e("#menu a.profile-badge").on("click",function(t){t.preventDefault();var a=e("#menu .user-menu");a.toggleClass("visible")}),e("[data-toggle-introduction]").on("click",function(){e(this).parent().fadeOut(600),save_user_meta("intLine truncated
File diff suppressed because it is too large. Load diff
File diff suppressed because it is too large. Load diff
@@ -13,21 +13,27 @@
<div class="search-about">
<?php the_post(); the_content(); ?>
</div>
<!--<div class="sort-by">
<label>Sortér på:</label>
<ul class="button-group">
<li><a href="#" class="button-alt" data-sort-by="num">Antall medlemmer</a></li>
<li><a href="#" class="button-alt" data-sort-by="name">Navn</a></li>
</ul>
</div>-->
<div class="lists-list-wrap">
<div class="meta"></div>
<div class="lists-list"></div>
</div>
<div class="list-members-wrap">
<div class="meta"></div>
<div class="list-members"></div>
<div class="lists-list-wrap">
<div class="meta"></div>
<div id="mailinglists">
<div class="list-manipulation">
<div class="search-field">
<label>Søk i listene:</label>
<input class="search" type="text" />
</div>
<div class="sort-buttons">
<label>Sortér på:</label>
<span class="button-alt sort" data-sort="list-num-members">Antall medlemmer</span>
<span class="button-alt sort" data-sort="list-name">Navn</span>
</div>
</div>
<ul class="lists-list list"></ul>
</div>
</div>
<div class="list-members-wrap">
<div class="meta"></div>
<div class="list-members"></div>
</div>
<div class="toptoptop">
<a href="#site-header" class="button-alt">Til toppen</a>