Skip to content

C
clinicaltrials
Commit fbef2d00 authored by Romain Loth's avatar Romain Loth
Browse files
Options

/services/demo enhanced and tested as new root page + clarify keywords UX

parent c9378cbb
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 478 additions and 363 deletions
services/main.py
View file @ fbef2d00
......@@ -147,22 +147,13 @@ def unauthorized():
@app.route("/")
def rootstub():
"""
Root of the comex2 app is served by php,
but having this empty stub allows us to use
url_for('rootstub') when redirecting to said php
"""
pass
Root of the comex2 app (new index)
Demo CSS with alternative index (top like old index, then underneath some layout à la notebook)
# /services/demo/
@app.route(config['PREFIX']+'/demo/')
def demo():
"""
Demo CSS with alternative index (layout à la notebook)
also useful to be able to url_for('rootstub') when redirecting to php
"""
return render_template(
"alt_index.html",
foo="bar",
# current_user=current_user
"alt_index.html"
)
# /services/
......
setup/dockers/comex2_services/comex2_php_and_services.nginx.conf
View file @ fbef2d00
......@@ -34,10 +34,12 @@ server {
fastcgi_param SCRIPT_FILENAME /comex2$fastcgi_script_name;
}
# :80/ => subapp via 0.0.0.0:9090/
# - / (new index)
# :80/services => subapp via 0.0.0.0:9090/services
# - services/user (formerly known as regcomex)
# - services/api (formerly known as comex_install)
location /services {
location ~ (^/$|^/services) {
# so we point to comex2's gunicorn server
proxy_pass http://0.0.0.0:9090;
proxy_redirect off;
......
static/css/comex.css 0 → 100644
View file @ fbef2d00
/* =============================== MAIN COMEX STYLESHEET =============================== */
.white { color:#fff ;}
.red { color:#910 ;}
.green { color:#161 ;}
.grey { color:#554 ;}
.lgrey { color:#ddd ;}
.orange{ color:#F96 ;}
.blue { color:#23A ;}
/* classic look */
body {
margin: 0;
font-family: "Droid Sans", Calibri, "Helvetica Neue", Helvetica, sans-serif;
letter-spacing: -0.04em;
color: #333;
background-color: #fff;
line-height: .85em;
font-size: 14px;
}
.comex-nav-item {
vertical-align: middle;
line-height: 2em;
height: 2em;
margin-top: .2em;
/* good for scaffolding
border: 2px solid white;
*/
}
/* main content for all new pages */
div.my-box {
padding:0 20px;
line-height: 1.1em;
}
@media(max-width:768px){
/* xs */
div.my-box {
padding:0 7px;
line-height: .85em;
}
}
.page {
margin-top: 45px; /* topbar height is 40px */
}
/* for intro text */
.mini-hero {
margin-top: 5px;
font-size: 15px;
line-height: 20px;
font-family: "Droid Sans", Calibri, "Helvetica Neue", Helvetica, sans-serif;
padding-bottom: .3em;
}
.sub-hero {
margin-top: 2em;
line-height: 110%;
}
#cnil_warning {
/*text-align: center;*/
}
/* operation buttons for instance add middle name, remove box, etc */
.operation {
color: #ffc ;
cursor: pointer;
}
.operation:hover {
color: #23A;
text-shadow: .2px .3px #333;
}
/* same on dark background */
.operation-light {
color: #979797 ;
cursor: pointer;
}
.operation-light:hover {
color: rgb(170,255,120);
text-shadow: .2px .3px #eee;
}
/* same on white background */
.operation-dark {
color: #333 ;
cursor: pointer;
}
.operation-dark:hover {
color: #23A;
text-shadow: .2px .3px #333;
}
.navlink, .navlink:focus {
font-size: 1.2em;
font-weight: bold;
margin: 3px 0 0 6px;
background-color: transparent !important;
}
.navlink:hover {
color: white;
background-color: transparent !important;
}
/* for code blocks or urls */
.code {
font-family: "Fira Mono", "Droid Sans Mono", monospace;
font-weight: 500;
font-size: 75% ;
background-color: #ACA;
padding: .2em;
border-radius: .2em;
}
/* like a close window element */
.pull-up-right {
margin-top: -.5em;
float: right;
}
/* like a dialog icon */
.glyphicon-float-left {
float: left ;
display: block;
font-size: 150% ;
margin-top: -.2em;
}
.glyphicon-float-right {
float: right ;
font-size: 80% ;
margin-top: -.5em;
}
/* page sections: style snippets from old bootstrap h2 */
h2.oldstyle {
font-family: "Droid Sans", Calibri, Ubuntu, sans-serif;
font-weight: bold;
/*font-size: 2.5em;*/
}
/* "accordeon": collapsible formcats */
div.ccsection-wrap {
margin: 0 ;
padding: 0 ;
background-color: transparent;
}
a.ccsection-toggle {
margin: 0 ;
padding: 0 ;
}
a.ccsection-toggle:hover, a.ccsection-toggle:focus {
text-decoration: none;
}
.ccsection-toggle h2.ccsection, .ccsection-toggle:focus h2.ccsection {
color: #333 ; /* passive: like normal body color */
}
.ccsection-heading:hover h2.ccsection {
color: #23A ; /* active: like heading color */
text-decoration: none;
}
div.ccsection-heading {
padding: 0 1.5em .3em 1.5em ;
/*width: 25em;*/
text-align: left;
/*background-color: transparent;*/
background-color: #ddd;
border-radius: .8em .8em 0 0;
}
div.ccsection-uform-body {
background-color: #ddd;
border-radius: 0 ;
padding: 15px 30px 53px 30px;
}
div.ccsection-footer {
background-color: #ddd;
border-radius: 0 0 .8em .8em ;
padding: 0 ;
}
/**/
.our-vcard {
line-height: 110%;
}
/**/
.smallspacerrow {
height: 2em;
}
.spacerrow {
height: 8em;
}
.bigspacerrow {
height: 15em;
}
static/css/comex_user.css
View file @ fbef2d00
/* =============================== MAIN COMEX SERVICES STYLESHEET =============================== */
.white { color:#fff ;}
.red { color:#910 ;}
.green { color:#161 ;}
.grey { color:#554 ;}
.lgrey { color:#ddd ;}
.orange{ color:#F96 ;}
.blue { color:#23A ;}
/* classic look */
body {
margin: 0;
font-family: "Droid Sans", Calibri, "Helvetica Neue", Helvetica, sans-serif;
letter-spacing: -0.04em;
color: #333;
background-color: #fff;
line-height: .85em;
}
.comex-nav-item {
vertical-align: middle;
line-height: 2em;
height: 2em;
margin-top: .2em;
/* good for scaffolding
border: 2px solid white;
*/
}
/* main content for all new pages */
div.my-box {
padding:0 15px;
}
@media(max-width:991px){
/* sm and md */
div.my-box {
padding:0;
}
}
/* form content for reg, profile, login, etc.... */
div.uform {
padding: 15px 30px 53px 30px;
......@@ -80,20 +39,6 @@ p#doors_ret_msg {
.autocomp {
}
.page {
margin-top: 45px; /* topbar height is 40px */
}
/* for intro text */
.mini-hero {
margin-top: 7px;
font-size: 20px;
line-height: 27px;
font-family: "Droid Sans", Calibri, "Helvetica Neue", Helvetica, sans-serif;
padding-bottom: .3em;
}
/* a "subpage" container UNUSED */
.subpage {
width: 100%;
......@@ -144,43 +89,6 @@ input.readonly {
background-color: #303030 !important;
}
#cnil_warning {
/*text-align: center;*/
}
/* form operation buttons for instance add middle name, remove box, etc */
.operation {
color: #554 ;
cursor: pointer;
}
.operation:hover {
color: #23A;
text-shadow: .2px .3px #333;
}
/* same on dark background */
.operation-light {
color: #979797 ;
cursor: pointer;
}
.operation-light:hover {
color: rgb(170,255,120);
text-shadow: .2px .3px #eee;
}
.navlink, .navlink:focus {
font-size: 1.2em;
font-weight: bold;
margin: 3px 0 0 6px;
background-color: transparent !important;
}
.navlink:hover {
color: white;
background-color: transparent !important;
}
/* small label inside addon group*/
.smlabel {
min-width: 7.5em;
......@@ -236,23 +144,24 @@ input#my-captcha{
max-width: 9em;
background-color: #161;
border: 2px solid #ACA;
padding: .5em .4em .6em .8em;
padding: 1em .4em .6em .8em;
margin: .4em .2em .4em .5em;
border-radius: .3em;
color: #ddd;
border-radius: .4em;
color: #eed;
display: inline-block;
-webkit-transition: opacity .3s ease-in;
letter-spacing: normal;
font-weight: 500;
letter-spacing: .02em;
font-weight: bold;
font-size: .8em;
}
.box-highlight-close {
font-size: .5em;
font-size: .7em;
position: relative;
margin-top: -1em;
margin-right: -0.2em;
float: right;
right: 0px;
color: #ddd;
color: #eed;
/*background-color: #333;*/
padding: .5em;
}
......@@ -262,32 +171,6 @@ input#my-captcha{
border-bottom: 3px solid #ccc;
}
/* like a close window element */
.pull-up-right {
margin-top: -.5em;
float: right;
}
/* like a dialog icon */
.glyphicon-float-left {
float: left ;
display: block;
font-size: 150% ;
margin-top: -.2em;
}
.glyphicon-float-right {
float: right ;
font-size: 80% ;
margin-top: -.5em;
}
/* page sections: style snippets from old bootstrap h2 */
h2.oldstyle {
font-family: "Droid Sans", Calibri, Ubuntu, sans-serif;
font-weight: bold;
/*font-size: 2.5em;*/
}
/* collapsible sections */
h2.ccsection {
padding-top: 1em;
......@@ -319,50 +202,6 @@ h3.formcatfirst {
color: white;
padding-bottom: 3em
}
/* "accordeon": collapsible formcats */
div.ccsection-wrap {
margin: 0 ;
padding: 0 ;
background-color: transparent;
}
a.ccsection-toggle {
margin: 0 ;
padding: 0 ;
}
a.ccsection-toggle:hover, a.ccsection-toggle:focus {
text-decoration: none;
}
.ccsection-toggle h2.ccsection, .ccsection-toggle:focus h2.ccsection {
color: #333 ; /* passive: like normal body color */
}
.ccsection-heading:hover h2.ccsection {
color: #23A ; /* active: like heading color */
text-decoration: none;
}
div.ccsection-heading {
padding: 0 1.5em .3em 1.5em ;
/*width: 25em;*/
text-align: left;
/*background-color: transparent;*/
background-color: #ddd;
border-radius: .8em .8em 0 0;
}
div.ccsection-uform-body {
background-color: #ddd;
border-radius: 0 ;
padding: 15px 30px 53px 30px;
}
div.ccsection-footer {
background-color: #ddd;
border-radius: 0 0 .8em .8em ;
padding: 0 ;
}
/**/
ul.minilabels {
padding-top: .5em;
......@@ -388,27 +227,6 @@ li.minilabel {
color: #554 ;
}
/**/
.our-vcard {
line-height: 110%;
}
/**/
.smallspacerrow {
height: 2em;
}
.spacerrow {
height: 8em;
}
.bigspacerrow {
height: 15em;
}
/* the main validation message (a special legend) */
#main_message {
color: white ;
......
static/css/whoswho.css
View file @ fbef2d00
......@@ -151,10 +151,9 @@ border: 0px solid #ffffff;
}
input.name {
height: 28px;
font-size: 29px;
width: 250px;
height: 35px;
font-size: 29px;
width: 320px;
}
.nav > li > a.topbarlink:hover {
......@@ -233,7 +232,7 @@ input.name {
color: #333 !important ;
background-color: #979797;
border-radius: 0 1.2em 1.2em 0;
padding: .32em .4em .37em .2em;
padding: .3em .4em .33em .2em;
cursor: pointer;
opacity: 1;
}
static/js/comex_user_autocompletes.js
View file @ fbef2d00
......@@ -574,26 +574,8 @@
$kwInput.autocomplete({
// source: kwArray,
source: function( request, response ) {
// "crf, adn, swarm robotics, anticonstitu" <= extract the last term being typed
var terms = request.term.split(/\s*,\s*/)
var currentQuery = terms[terms.length-1]
response(
// recurse on same autocomplete but only on last term
$.ui.autocomplete.filter(kwArray, currentQuery )
);
},
source: kwArray,
autoFocus: true,
// search: function () {
// var terms = this.value.split(/\s*,\s*/)
// var term = terms[terms.length-1];
// // custom minLength
// if (term.length < 1) {
// return false;
// }
// },
focus: function () {
// prevent value inserted on focus
return false;
......
static/js/comex_user_shared_auth.js
View file @ fbef2d00
......@@ -356,11 +356,10 @@ cmxClt = (function(cC) {
doorsMsg = result.responseText.replace(/^"/g, '').replace(/"$/g, '')
}
else {
// POSS: user message
console.warn("Unhandled error doors login (" + result.responseText +")")
}
}
else if (apiAction == 'register'){
else if (apiAction == 'register' || apiAction == 'userExists'){
if (typeof result.responseJSON != 'undefined'
&& typeof result.responseJSON.status == 'string') {
......@@ -369,8 +368,7 @@ cmxClt = (function(cC) {
// if doorsMsg == ''
}
else {
// POSS: user message
doorsMsg = "Unhandled error doors register (" + result.responseText +")"
doorsMsg = "Unrecognized response from doors /api/"+apiAction+" (response=" + result.responseText + '[' + result.statusText +"])"
console.warn(doorsMsg)
}
}
......
static/js/whoswho.js
View file @ fbef2d00
......@@ -71,7 +71,8 @@ $(document).ready(function() {
$(header + labelization + input + closebox + footer).insertBefore("#refine");
$('#' + id3).click(closeThisBox)
console.log("whoswho.popfilter: adding autocomplete menu", $("#" + id1))
// debug
// console.log("whoswho.popfilter: adding autocomplete menu", $("#" + id1))
$("#" + id2).autocomplete({
source: function (req, resp) {
......@@ -117,38 +118,6 @@ $(document).ready(function() {
}, "fast");
});
$.widget("custom.scholarcomplete", $.ui.autocomplete, {
_renderMenu: function(ul, items) {
var categories, self;
self = this;
categories = _.groupBy(items, function(o) {
return o.category;
});
return _.each(categories, function(data, category) {
var fullname, size, term, total;
size = 0;
total = 0;
term = "";
fullname = "";
_.each(data, function(item) {
var firstname, lastname, myRender;
size = item.size;
total = item.total;
term = item.term;
firstname = $.trim(item.firstname);
lastname = $.trim(item.lastname);
fullname = $.trim("" + firstname + " " + lastname);
myRender = function(a, b) {
return $("<li></li>").data("item.autocomplete", b).append($("<a></a>").text(fullname)).appendTo(a);
};
return myRender(ul, item);
});
ul.append("<li class='ui-autocomplete-category'>" + size + "/" + total + " people</li>");
return ul.highlight(term);
});
}
});
$("#addfiltercountry").click(function() {
return popfilter("in", "countries", []);
});
......@@ -171,43 +140,55 @@ $(document).ready(function() {
$("#register").click(function() {
return window.open("/services/user/register/");
});
$("#searchname").scholarcomplete({
minLength: 2,
source: function(request, response) {
log("searchname: " + request.term);
return $.getJSON("search_scholar.php", {
category: "login",
login: request.term
}, function(data, status, xhr) {
log("results: " + data.results);
return response(data.results);
});
$("#searchname").autocomplete({
source: function (req, resp) {
$.ajax({
dataType: "json",
type: "GET",
url: "/search_scholar.php",
data: {
"category": "login",
"login": req.term,
// TODO rename s/login/uid/ in search_scholar.php
},
success: function(data){
var compList = [] ;
if (data.results) {
for (var i in data.results) {
var item = data.results[i]
compList.push({
// TODO middle initials here and in search_scholar
'label': item.firstname + ' ' + item.lastname,
'id': item.id
})
}
}
resp(compList)
},
error: function(response) {
console.log("ERROR from search_scholar AJAX", response)
}
}) ;
},
minLength: 2,
select: function(event, ui) {
console.log(ui.item);
if (ui.item != null) {
console.log("Selected: " + ui.item.firstname + " aka " + ui.item.id);
delay(100, function() {
return $("#searchname").attr("value", ui.item.firstname + " " + ui.item.lastname);
});
$("#searchname").attr("placeholder", "");
console.log("Selected: " + ui.item.label + " aka " + ui.item.id);
// NB #searchname's value <= ui.label
// (by default widget behavior)
// change the 2 onclick events
$("#print2").click(function() {
console.log("clicked on print");
return window.open("/print_scholar_directory.php?query=" + ui.item.id, "Scholar's list");
});
$("#generate2").click(function() {
hide(".hero-unit");
return $("#welcome").fadeOut("slow", function() {
show("#loading", "fast");
return window.location.href='/explorerjs.html?type="uid"&nodeidparam="' + ui.item.id + '"';
//return loadGraph("get_scholar_graph.php?login=" + ui.item.id);
});
return window.open('/explorerjs.html?type="uid"&nodeidparam="' + ui.item.id + '"');
});
}
return "" + ui.item.firstname + " " + ui.item.lastname;
}
});
})
// main form collect function
collectFilters = function(cb) {
......@@ -219,7 +200,8 @@ $(document).ready(function() {
$(".filter" + k).each(function(i, e) {
var value;
console.log('collecting (filter '+k+') from elt:' + e)
// debug
// console.log('collecting (filter '+k+') from elt:' + e)
value = $(e).val();
if (value != null && value != "") {
......@@ -262,7 +244,9 @@ $(document).ready(function() {
query = encodeURIComponent(JSON.stringify(query));
console.log("calling callback with encoded query:", query)
// debug
// console.log("calling callback with encoded query:", query)
return cb(query);
};
......@@ -272,9 +256,11 @@ $(document).ready(function() {
console.log("clicked on generate")
hide(".hero-unit");
$("#welcome").fadeOut("slow");
console.log("initiating graphexplorer")
// console.log("initiating graphexplorer")
show("#loading", "fast");
return collectFilters(function(query) {
// debug
// console.log("collected filters: " + query);
return window.location.href='/explorerjs.html?type="filter"&nodeidparam="' + escape(query) +'"';
//return loadGraph("getgraph.php?query=" + query);
});
......@@ -282,7 +268,8 @@ $(document).ready(function() {
$("#print").click(function() {
console.log("clicked on print");
return collectFilters(function(query) {
console.log("collected filters: " + query);
// debug
// console.log("collected filters: " + query);
return window.open("/print_directory.php?query=" + query, "Scholar's list");
});
});
......
templates/alt_index.html
View file @ fbef2d00
This diff is collapsed.
templates/base_layout.html
View file @ fbef2d00
......@@ -8,10 +8,11 @@
<link type=text/css rel=stylesheet href="{{ url_for('static', filename='css/topbar_bootstrap_retrocompatibility.css') }}">
<link type=text/css rel=stylesheet href="{{ url_for('static', filename='js/jquery-ui-1.12.1/jquery-ui.min.css') }}">
<link type=text/css rel=stylesheet href="{{ url_for('static', filename='js/realperson/jquery.realperson.css') }}">
<link type=text/css rel=stylesheet href="{{ url_for('static', filename='css/whoswho.css') }}">
<link type=text/css rel=stylesheet href="{{ url_for('static', filename='css/comex_user.css') }}">
<link type=text/css rel=stylesheet href="{{ url_for('static', filename='css/comex.css') }}">
<!-- for topbar search/refine -->
<link type=text/css rel=stylesheet href="{{ url_for('static', filename='css/whoswho.css') }}">
<!-- ## fonts ## -->
<link type="text/css" href="http://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet">
......@@ -55,6 +56,8 @@
<body>
{% block incipit %}
{% endblock %}
<div class="topbar" style="opacity: 0.9;">
<div class="topbar-inner">
<div class="container-fluid">
......@@ -167,7 +170,7 @@
{% block main_content %}
{% endblock %}
<div class="row bigspacerrow">&nbsp;</div>
<div class="row spacerrow">&nbsp;</div>
<!-- FOOTER TEXT AND LINKS -->
<footer>
......
templates/profile.html
View file @ fbef2d00
......@@ -255,11 +255,11 @@
<input id="keywords" name="keywords" maxlength="350"
type="text" class="form-control autocomp" placeholder="Add a keyword here"
value="{{ current_user.info.keywords }}">
<div class="input-group-addon">
<span class="glyphicon glyphicon-plus operation" onclick="cmxClt.uform.mtiPopOneTag['keywords']"></span>
<div class="input-group-addon operation-dark">
<span class="glyphicon glyphicon-plus" onclick="cmxClt.uform.mtiPopOneTag['keywords']"></span>
</div>
</div>
<p class="legend">Please enter at least 5 keywords</p>
<p class="legend">Please enter at least 5 keywords (press TAB or ENTER after each)</p>
</div>
<div class="question input-group">
......
templates/registration_full_form.html
View file @ fbef2d00
......@@ -263,7 +263,7 @@
type="text" class="form-control autocomp" placeholder="keywords"
placeholder="keywords">
</div>
<p class="legend">Please enter at least 5 comma-separated keywords</p>
<p class="legend">Please enter at least 5 keywords (press TAB or ENTER after each)</p>
</div>
<div class="question input-group">
......
templates/registration_short_form.html
View file @ fbef2d00
......@@ -261,7 +261,7 @@
type="text" class="form-control autocomp" placeholder="keywords"
placeholder="keywords">
</div>
<p class="legend">Please enter at least 5 comma-separated keywords</p>
<p class="legend">Please enter at least 5 keywords (press TAB or ENTER after each)</p>
</div>
<div class="question input-group">
......@@ -376,17 +376,17 @@
</form>
<!-- FOR DEBUG: test go-between with Doors -->
<!-- <p>
<p>
<button type=button onclick='cmxClt.uauth.callDoors("user", [cmxClt.uauth.email.value, cmxClt.uauth.pass1.value], console.warn)'>
test doors login
</button>
<button type=button onclick='cmxClt.uauth.callDoors("register", [cmxClt.uauth.email.value, cmxClt.uauth.pass1.value, initialsInput.value], console.warn)'>
<button type=button onclick='cmxClt.uauth.callDoors("register", [cmxClt.uauth.email.value, cmxClt.uauth.pass1.value, "anyname"], console.warn)'>
test doors register
</button>
<button type=button onclick='cmxClt.uauth.callDoors("userExists", [cmxClt.uauth.email.value], console.warn)'>
test doors userExists
</button>
</p> -->
</p>
</div>
</div>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment