Skip to content

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

many CSS and layout adjustments

parent 77ec488e
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 750 additions and 271 deletions
static/css/comex_user.css
View file @ fe3402bd
......@@ -3,6 +3,7 @@
.green { color:#161 ; }
.grey { color:#554 ; }
.orange { color:#F96 ; }
.blue { color:#23A ; }
......@@ -10,9 +11,24 @@
/* classic look */
body {
margin: 0;
font-family: Calibri, "Helvetica Neue", Helvetica, sans-serif;
font-family: "Droid Sans", Calibri, "Helvetica Neue", Helvetica, sans-serif;
letter-spacing: -0.03em;
color: #333;
background-color: #fff;
background-color: #fff;
line-height: .85em;
}
/* reg, profile, login, etc.... */
div.uform {
background-color: #ddd;
padding: 20px 40px 70px 40px;
margin: 50px 50px 10px 50px;
}
p#doors_ret_msg {
font-weight: bold;
text-shadow: 2px;
}
/* not used at present but could be useful for autompleted inputs */
......@@ -26,10 +42,11 @@ body {
/* for intro text */
.mini-hero {
margin-top: 1.5em;
font-size: 24px;
margin-top: 7px;
font-size: 20px;
line-height: 27px;
font-family: Calibri, "Helvetica Neue", Helvetica, "Droid Sans", sans-serif;
font-family: "Droid Sans", Calibri, "Helvetica Neue", Helvetica, sans-serif;
padding-bottom: .3em;
}
......@@ -53,7 +70,7 @@ body {
.question {
padding: 0 1em;
margin-bottom: 2em;
max-width: 52em;
max-width: 52em; /* FORMWIDTH */
}
.conditional-q {
......@@ -61,14 +78,16 @@ body {
}
input.readonly {
color: #fff;
font-weight: bold;
background-color: #CCC !important;
background-color: #303030 !important;
}
#cnil_warning {
/*text-align: center;*/
}
/* form operation buttons for instance add middle name */
.operation {
color: #554 ;
}
......@@ -77,7 +96,7 @@ input.readonly {
.navlink {
font-size: 1.2em;
font-weight: bold;
margin: .2em 0 0 .4em;
margin: 3px 0 0 6px;
}
.navlink:hover {
......@@ -99,6 +118,19 @@ input.readonly {
margin: 0;
}
/* floats on the right of the question if set after it */
.legend-float {
float:right;
text-align:center;
font-size: 70%;
padding-right: 2.1em;
}
input#my-captcha{
height: 5em;
font-size: .8em;
}
/* for code blocks or urls */
.code {
font-family: "Fira Mono", "Droid Sans Mono", monospace;
......@@ -109,45 +141,61 @@ input.readonly {
border-radius: .2em;
}
/* the picture preview */
#box_show_pic {
background-color: #554;
border: none ;
width:250px;
height:250px;
margin-bottom: 2em;
display: none;
}
#show_pic {
/* styled via js in static/js/comex_reg_form_controllers.js */
/* like a dialog icon */
.glyphicon-float-left {
float: left ;
font-size: 150% ;
vertical-align:text-top;
}
/* page sections: style snippets from old bootstrap h2 */
h2.oldstyle {
font-family: Ubuntu, sans-serif;
font-size: 24px;
font-family: "Droid Sans", Calibri, Ubuntu, sans-serif;
font-weight: bold;
line-height: 18px ;
/*font-size: 2.5em;*/
}
/* big categories: like form sections etc. */
h3.formcat {
margin-top: 2em;
font-size: 20px;
padding-top: 1em;
font-weight: bold;
color: #910;
/*TODO accordeon*/
}
h3.formcatfirst {
margin-top: .5em;
font-size: 20px;
margin-top: .2em;
font-weight: bold;
color: #910;
}
.spacerrow {
height: 2em;
.raw-responses {
font-family: Calibri, sans-serif ;
font-size: 80%;
line-height: 90% ;
background-color: #554;
color: white;
padding-bottom: 3em
}
.bigspacerrow {
height: 15em;
/**/
ul.minilabels {
padding-top: .5em;
list-style-type: none;
font-size: 75% ;
text-align: left;
margin-left: 32%;
}
li.minilabel {
font-weight: bold ;
}
/**/
.realperson-challenge {
float:right;
}
......@@ -158,21 +206,27 @@ h3.formcatfirst {
color: #554 ;
}
.raw-responses {
font-family: Calibri, sans-serif ;
font-size: 80%;
line-height: 90% ;
background-color: #554;
color: white;
padding-bottom: 3em
/**/
.smallspacerrow {
height: 2em;
}
.spacerrow {
height: 8em;
}
.bigspacerrow {
height: 15em;
}
/* the main validation message (a special legend) */
#main_message {
color: white ;
font-size: 150%;
font-size: 140%;
text-align:center;
line-height: 1.5em;
background-color: #988 ;
border-radius: 2em;
......@@ -181,14 +235,22 @@ h3.formcatfirst {
}
ul.minilabels {
padding-top: .5em;
list-style-type: none;
font-size: 75% ;
text-align: left;
margin-left: 32%;
/* the picture preview */
#box_show_pic {
background-color: #554;
border: none ;
width:250px;
height:250px;
margin-bottom: 2em;
display: none;
}
li.minilabel {
font-weight: bold ;
/* styled via cmxClt.uform.checkShowPic js in static/js/comex_user_shared.js */
#show_pic {
}
/*Show middlename button*/
#btn-midname {
opacity: .8;
}
static/js/comex_page_profile_controllers.js
View file @ fe3402bd
......@@ -46,14 +46,14 @@ function completionAsYouGo() {
var optionalMissingFields = diagnostic[2]
if (valid) {
cmxClt.uform.mainMessage.innerHTML = "<span class='green glyphicon glyphicon-check' style='float:left;'></span>&nbsp;&nbsp;OK we have all the important fields!<br/>"
cmxClt.uform.mainMessage.innerHTML = "<span class='green glyphicon glyphicon-check glyphicon-float-left' style='float:left;'></span><p>OK thank you! we have all the fields needed for the mapping!</p>"
}
else {
cmxClt.uform.mainMessage.innerHTML = "<span class='red glyphicon glyphicon-warning-sign'></span>&nbsp;&nbsp;Sorry, there are some important missing fields<br/>"
cmxClt.uform.mainMessage.innerHTML = "<span class='orange glyphicon glyphicon-exclamation-sign glyphicon-float-left'></span><p>Sorry, there are some important missing fields</p>"
}
// list of missing fields
cmxClt.uform.mainMessage.innerHTML += cmxClt.ulListFromLabelsArray(mandatoryMissingFields, ['red'])
cmxClt.uform.mainMessage.innerHTML += cmxClt.ulListFromLabelsArray(mandatoryMissingFields, ['orange'])
if (optionalMissingFields.length) {
cmxClt.uform.mainMessage.innerHTML += cmxClt.ulListFromLabelsArray(
......@@ -77,4 +77,11 @@ completionAsYouGo()
var teamCityDivStyle = document.getElementById('team_city_div').style
var otherInstDivStyle = document.getElementById('other_org_div').style
// open middlename if there is one
if (uinfo.middle_name != "" && uinfo.middle_name != "None") {
cmxClt.uform.displayMidName()
}
console.log("profile controllers load OK")
static/js/comex_user_shared.js
View file @ fe3402bd
This diff is collapsed.
static/js/comex_user_shared_auth.js
View file @ fe3402bd
This diff is collapsed.
templates/alt_index.html
View file @ fe3402bd
This diff is collapsed.
templates/login.html
View file @ fe3402bd
......@@ -18,7 +18,7 @@
{% block main_content %}
<div class="row">
<div class="spacer col-sm-1 col-md-1">&nbsp;</div>
<div class="my_form_box col-sm-8 col-md-8">
<div class="my-box col-sm-8 col-md-8">
<!-- INTRODUCTION TEXT -->
<div id="intro">
......@@ -30,6 +30,7 @@
<!-- ########################### ( FORM ) ########################## -->
<div class="uform">
<form id="comex_login_form" enctype="multipart/form-data"
method="post" onsubmit="console.info('login submitted')">
......@@ -80,15 +81,16 @@
<p id="main_message" class="legend" style="display:none"></p>
<!--pseudo captcha using realperson from http://keith-wood.name/realPerson.html -->
<p class="legend">(A challenge for spam bots)</p>
<div class="question input-group">
<label for="my-captcha" class="smlabel input-group-addon">Code</label>
<input id="my-captcha" name="my-captcha" style="max-width:60%"
type="text" class="form-control input-lg" placeholder="Enter the 5 letters you see beside =>"
onblur="cmxClt.makeBold(this)" onfocus="cmxClt.makeNormal(this)">
<p class="legend legend-float">(A challenge for spam bots)</p>
</div>
<!-- == S U B M I T == -->
<!-- normal submit button
(login to doors will happen b/w servers: no need to do it by ajax) -->
......@@ -98,6 +100,7 @@
</button>
</form>
</div>
</div>
<!-- FOR DEBUG: test go-between with Doors -->
......
templates/profile.html
View file @ fe3402bd
......@@ -11,7 +11,7 @@
{% block main_content %}
<div class="row">
<div class="spacer col-sm-1 col-md-1">&nbsp;</div>
<div class="my_form_box col-sm-8 col-md-8">
<div class="my-box col-sm-8 col-md-8">
<!-- ##################### ( PROFILE OVERVIEW ) #################### -->
......@@ -31,6 +31,7 @@
</div>
<!-- ########################### ( FORM ) ########################## -->
<div class="uform">
<form id="comex_profile_form" enctype="multipart/form-data"
method="post" onsubmit="console.info('submitted')">
......@@ -52,7 +53,8 @@
<!-- NAME & COUNTRY -->
<h3 class="formcatfirst"> Basic infos </h3>
<h3 class="formcat"> Basic infos </h3>
<div class="question input-group">
<label for="first_name" class="smlabel input-group-addon">
......@@ -62,6 +64,17 @@
type="text" class="form-control" placeholder="prénom"
onblur="cmxClt.makeBold(this)" onfocus="cmxClt.makeNormal(this)"
value="{{ current_user.info.first_name }}">
<div class="input-group-addon"
title="Add middle name(s)">
<button class="btn btn-xs btn-default operation"
title="Opens the input for middle name(s)" id="btn-midname"
type="button">
<span id="btn-midname-icon"
class="glyphicon glyphicon-plus"></span>
Add name
</button>
</div>
</div>
<!-- optionnel -->
......@@ -85,12 +98,6 @@
value="{{ current_user.info.last_name }}">
</div>
<button class="btn btn-xs btn-default operation"
title="Add a middle name" id="btn-midname"
type="button" style="margin:1em; float:right">
<span class="glyphicon glyphicon-plus"></span>
Add middle name
</button>
<div class="question input-group">
<label for="initials" class="smlabel input-group-addon">* Initials</label>
......@@ -201,7 +208,7 @@
</div>
<!-- OTHER PERSONAL INFO -->
<h3 class="formcatfirst"> Complementary information </h3>
<h3 class="formcat"> Complementary information </h3>
<p class="mini-hero">
The <strong>home page (url)</strong>, <strong>picture (url or file)</strong> and <strong>free description</strong> will allow your neighbours to know you a little better.
......@@ -316,7 +323,7 @@
</input>
<p> TEST UID {{ current_user.uid | safe }} </p>
<!-- <p> TEST UID {{ current_user.uid | safe }} </p> -->
<div class="row spacerrow">&nbsp;</div>
......@@ -332,6 +339,7 @@
</div>
</form>
</div>
</div>
<div class="spacer col-sm-2 col-md-2">&nbsp;</div>
......
templates/registration_full_form.html
View file @ fe3402bd
......@@ -18,7 +18,7 @@
{% block main_content %}
<div class="row">
<div class="spacer col-sm-1 col-md-1">&nbsp;</div>
<div class="my_form_box col-sm-8 col-md-8">
<div class="my-box col-sm-8 col-md-8">
<!-- INTRODUCTION TEXT -->
<div id="intro">
......@@ -33,6 +33,7 @@
<!-- ########################### ( FORM ) ########################## -->
<div class="uform">
<form id="comex_reg_form" enctype="multipart/form-data"
method="post" onsubmit="console.info('submitted')">
......@@ -51,6 +52,7 @@
<!-- NAME & COUNTRY -->
<h3 class="formcatfirst"> Basic infos </h3>
<div class="question input-group">
<label for="first_name" class="smlabel input-group-addon">
* First name
......@@ -58,11 +60,22 @@
<input id="first_name" name="first_name" maxlength="30"
type="text" class="form-control" placeholder="prénom"
onblur="cmxClt.makeBold(this)" onfocus="cmxClt.makeNormal(this)">
<div class="input-group-addon"
title="Add middle name(s)">
<button class="btn btn-xs btn-default operation"
title="Opens the input for middle name(s)" id="btn-midname"
type="button">
<span id="btn-midname-icon"
class="glyphicon glyphicon-plus"></span>
Add name
</button>
</div>
</div>
<!-- optionnel -->
<div id="group-midname" class="question input-group" style='display:none'>
<label for="middle_name" class="smlabel input-group-addon">
<div id="group-midname" class="question input-group" style='display:none; opacity: .8;'>
<label for="middle_name" style="color:#23A;"
class="smlabel input-group-addon">
Middle name
</label>
<input id="middle_name" name="middle_name" maxlength="30"
......@@ -79,18 +92,9 @@
onblur="cmxClt.makeBold(this)" onfocus="cmxClt.makeNormal(this)">
</div>
<button class="btn btn-xs btn-default operation"
title="Add a middle name" id="btn-midname"
type="button" style="margin:1em; float:right">
<span class="glyphicon glyphicon-plus"></span>
Add middle name
</button>
<div class="question input-group">
<label for="initials" class="smlabel input-group-addon">* Initials</label>
<input id="initials" name="initials" maxlength="7"
type="text" class="form-control" placeholder="initiales">
</div>
type="text" hidden
placeholder="initiales">
<div class="question input-group">
<label for="country" class="smlabel input-group-addon">
......@@ -389,15 +393,15 @@
<h3 class="formcat">Verify and submit</h3>
<!--pseudo captcha using realperson from http://keith-wood.name/realPerson.html -->
<p class="legend">(A challenge for spam bots)</p>
<div class="question input-group">
<label for="my-captcha" class="smlabel input-group-addon">Code</label>
<input id="my-captcha" name="my-captcha" style="max-width:60%"
type="text" class="form-control input-lg" placeholder="Enter the 5 letters you see beside =>"
onblur="cmxClt.makeBold(this)" onfocus="cmxClt.makeNormal(this)">
<p class="legend legend-float">(A challenge for spam bots)</p>
</div>
<!-- == S U B M I T == -->
<!-- button instead of input.submit to validate before real submit action -->
<!-- also remember stackoverflow.com/a/3315016/2489184 -->
......@@ -408,8 +412,8 @@
</button>
</form>
</div>
</div>
</form>
<!-- FOR DEBUG: test go-between with Doors -->
<!-- <p>
......@@ -423,8 +427,9 @@
test doors userExists
</button>
</p> -->
</div>
</div>
<div class="spacer col-sm-2 col-md-2">&nbsp;</div>
</div>
......
templates/thank_you.html
View file @ fe3402bd
......@@ -12,7 +12,7 @@
<div class="row spacerrow">&nbsp;</div>
<div class="row">
<div class="spacer col-sm-1 col-md-1">&nbsp;</div>
<div class="my_form_box col-sm-8 col-md-8">
<div class="my-box col-sm-8 col-md-8">
<!-- INTRODUCTION TEXT -->
<div id="intro">
......
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