Skip to content

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

histogram + crowdsourcing in the leftside bar (no more modal)

parent 94b7c701
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 267 additions and 150 deletions
crowdsourcingTerms/crowdTerms.css
View file @ b976bd2e
/* -------- todo décaler dans custom.css ou un module charts -------- */
/* left bar contains modules */
.newleftbar {
/* TODO choix fond noir ou fond clair via variables less*/
background-color: inherit;
position:fixed;
left:0 ;
width:20% ;
width:18% ;
height: 100%;
overflow: auto;
text-align:center;
z-index: 100 ; /* over the graph ? */
padding-top: .3em;
padding-bottom: 0;
padding-right: 1em;
padding-left: 1em;
}
#crowdsource_legend{
position:relative;
text-align:center;
margin: 30 10 10 10;
/* ------------- todo décaler dans un module charts ----------------- */
#mainform{
/*
max-width: 45em;
*/
margin-top: .3em;
margin-bottom: .3em;
padding-right: 5px;
padding-left: 5px;
}
.ui-menu, .ui-menu-item {
/* hack for autocomplete menu to end up *over* modal:z1000 */
z-index: 1100;
......@@ -30,3 +38,39 @@
border-radius: 0px;
border: 1px solid #454545;
}
#search_histogram_wrapper{
margin: 0 ;
/* overwrite bootstrap's
* grid element padding*/
padding-right: 1em;
padding-left: 0;
}
/* graph div */
#search_histogram{
min-height: 15em ;
font-size: 85%;
}
/* dygraph internal canvas */
#search_histogram canvas{
margin: 0 ;
padding: 0;
}
/* ------------- crowdsourcing proprement dit ----------------------- */
#crowdsourcing_intro{
}
#savesuggestion.btn {
}
#savesuggestion.btn[disabled], #savesuggestion.btn.disabled {
background-color: #B0B0B0 ;
background-image: none ;
border: 1px solid #909090 ;
}
crowdsourcingTerms/dygraph/gallery.css
View file @ b976bd2e
/*
body {
font-family: Helvetica Neue, Arial, Helvetica, sans-serif;
font-size: 90%;
}
*/
aside {
font-size: 90%;
......@@ -68,9 +70,11 @@ aside {
color: blue;
}
/*
a {
text-decoration: none;
}
*/
/* CSS for drawing tool */
#workarea #drawing #tool_zoom {
......@@ -134,23 +138,24 @@ a {
#workarea #styled-chart-labels #div_g .dygraph-label {
/* This applies to the title, x-axis label and y-axis label */
font-family: Georgia, Verdana, serif;
/* can't set font-size because of inline values?? */
}
#workarea #styled-chart-labels #div_g .dygraph-title {
/* This rule only applies to the chart title */
font-size: 36px;
text-shadow: gray 2px 2px 2px; /* color, delta-x, delta-y, blur radius */
font-size: 12px;
text-shadow: gray 1px 1px 1px; /* color, delta-x, delta-y, blur radius */
}
#workarea #styled-chart-labels #div_g .dygraph-ylabel {
/* This rule only applies to the y-axis label */
font-size: 18px;
text-shadow: gray -2px 2px 2px; /* (offsets are in a rotated frame) */
font-size: 6px;
text-shadow: gray -1px 1px 1px; /* (offsets are in a rotated frame) */
}
#workarea #styled-chart-labels .chart {
border: 1px dashed black;
margin: 5px 5px 5px 50px;
margin: 2px 2px 2px 2px;
padding: 2px;
}
......
crowdsourcingTerms/modal.js
View file @ b976bd2e
This diff is collapsed.
explorerjs.html
View file @ b976bd2e
......@@ -184,7 +184,69 @@
<div id="wrapper">
<!-- Sidebar left, new css -->
<div id="leftcolumn" class="newleftbar">
<div class="row">
<div id="crowdsourcing_intro" class="col-md-12 crowdsourcingTerms">
<!-- <button type="button" class="close">×</button> -->
<h5>Search or suggest topics</h5>
</div>
</div><!-- /row -->
<div class="row">
<div id="mainform" class="form-horizontal col-md-12">
<div id="search_input_group" class="input-group input-group-sm">
<span class="input-group-btn crowdsourcingTerms">
<button id="savesuggestion"
disabled
title="Save this topic as a new suggestion"
class="btn btn-default"
type="button"><i id="saveicon" class="glyphicon glyphicon-save"></i></button>
</span>
<span class="input-group-btn">
<button id="search_proposed_terms"
title="Search the topic in the map"
class="btn btn-info"
type="button"><i class="glyphicon glyphicon-search"></i></button>
</span>
<!-- ideally should be appended by jquery for autocomplete -->
<input id="proposed_terms" type="text" class="form-control" placeholder="Recherche" />
</div><!-- /search_input_group -->
</div><!-- /form -->
</div><!-- /row -->
<div class="row" class="crowdsourcingTerms">
<!-- say thanks for the suggestion -->
<div id="crowdsourcing_answer" class="col-md-12"></div>
</div><!-- /row -->
<div class="row" class="TODOhistogramModule">
<!-- filled by query (user search value) to wos api -->
<div id="search_histogram_wrapper" class="col-md-12">
<div id="search_histogram"></div>
</div>
</div><!-- /row -->
<!-- class="my-legend" (absolute position bottom) -->
<div id="legend_for_clusters"></div>
</div>
<div id="zonecentre">
......@@ -249,19 +311,6 @@
</ul>
</div>
<!-- Sidebar left, new css -->
<div id="leftcolumn" class="newleftbar">
<div id="crowdsource_legend" style="text-align:center; margin:10px;" class="crowdsourcingTerms">
<br><h2>Contribute</h2>Add topics here
<center>
<button style="position: relative; bottom: 0;" id="openthemodal" class="btn btn-xl btn-danger ">Suggest new terms !</button>
</center>
</div>
<div id="legend_for_clusters"></div>
</div>
<!-- Sidebar right, old css -->
<div id="rightcolumn">
<div style="text-align: center;">
......@@ -373,42 +422,6 @@
</div>
<div id="crowdsourcing_modal" class="modal fade crowdsourcingTerms" style="color:black;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 class="modal-title">Contribute to the map by suggesting new topics!</h3>
</div>
<div class="modal-body form-horizontal">
<div class="row">
<div id="custom-search-input">
<div class="input-group col-md-12">
<!-- ideally should be appended by jquery for autocomplete -->
<input id="proposed_terms" type="text" class="form-control input-lg" placeholder="Recherche" />
<span class="input-group-btn">
<button id="search_proposed_terms" class="btn btn-info btn-lg" type="button"><i class="glyphicon glyphicon-search"></i></button>
</span>
</div>
</div>
<br>
<center>
<div id="crowdsourcing_answer"></div>
<div id="crowdsourcing_histogram"></div>
</center>
</div>
</div>
</div><!-- /modal-content -->
</div><!-- /modal-dialog -->
</div><!-- /#crowdsourcing_modal -->
<div id="geomapmodal" class="modal fade">
<!-- <div class="modal-content"> -->
......
libs/css2/custom.css
View file @ b976bd2e
......@@ -44,7 +44,7 @@
}
.my-legend {
position:absolute;
position:fixed;
bottom:5px;
left:5px;
......
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