[wizard] Implementa ajustes de design

bireme · Sep 24, 2020 · f5fb9bd · f5fb9bd
1 parent a4e78ec
commit f5fb9bd
Show file tree

Hide file tree

Showing 3 changed files with 67 additions and 11 deletions.
diff --git a/static/regional/css/style.css b/static/regional/css/style.css
@@ -45,6 +45,7 @@
 .lang ul li .active{background:#30348d; color: #fff;}
 .lang ul li a:hover{ color: #fff; text-decoration:none; background: #464bbb;}
 .headerBt{text-align: right; margin-top: 40px; margin-bottom: 20px;}
+.headerBt a {display: inline-block!important;}
 .listSelectCont{padding: 0; list-style: none;}
 .listSelectCont li{padding: 0; margin-bottom: 5px;}
 .listSelectCont li a{ color: #30348d;}
@@ -218,15 +219,16 @@
 	margin-left:-40px;
 	margin-top:-40px;
 }
+.padding2{padding-bottom: 5px;}
 
-/*wizard*/
+/*  wizard */
 .wizardModalTitle{
 	background-color: #3b2c85;
 	color: #fff;
 	border-radius: 0;
 }
 .wizardModalBody{
-	background-color: #f1f1f1;
+	background-color: #fff;
 }
 .wizardModalfooter{
 	background-color: #fff;
@@ -237,6 +239,10 @@
 .cartbt:hover{
 	cursor: pointer;
 }
+.card-body:hover, .list-group-item:hover{
+	background: rgba(59, 44, 133, 0.1)!important;
+	border-color: #3b2c85!important;
+}
 .card-selected{
 	background-color: #f5f5f5;
 }
@@ -252,6 +258,54 @@
 .wizard-color-step-4{
 	border-left: 5px solid darkcyan;
 }
+#wizardName{
+	background: #007bff;
+	padding:5px 20px;
+	position: absolute;
+	top: -30px;
+	border-radius: 5px;
+	font-size: 20px;
+	font-weight: 500;
+}
+.sw.sw-justified>.nav>li{
+	font-size: 14px;
+}
+.sw.sw-justified>.nav>li h6{
+	font-size: 15px;
+	font-weight: 600;
+	padding-bottom: 3px;
+	background: #3b2c85;
+	color: #fff;
+	border-radius: 5px;
+	padding: 5px;
+	font-size: 14px;
+	min-height: 60px;
+	vertical-align: center;
+}
+.sw-theme-dots>.nav .active h6{
+	/*background: #5bc0de!important;*/
+	background-image: linear-gradient(to bottom right, #007bff, #124b5d)!important;
+	color: #ff0!important;
+	border:3px solid #00ffff;
+}
+.sw-theme-dots>.nav .nav-link.done p{
+	color: #3b2c85!important;
+	font-size: 16px;
+}
+.sw.sw-justified>.nav a{
+	color: #666;
+}
+.sw-theme-dots>.nav::before, .sw-theme-dots>.nav .nav-link::before {
+	background: #3b2c85!important;
+}
+.sw-theme-dots>.nav .nav-link.done::after{
+	background: #fdfdfd!important;
+}
+.sw-theme-dots>.nav .nav-link.active::after {
+    background-color: #fff207!important;
+}
+
+/*  affiliation */
 
 #affiliationsBox{
 	padding: 10px;

diff --git a/templates/regional/header.html b/templates/regional/header.html
@@ -32,6 +32,10 @@
                     {% if (not config.show_advanced_search_button or config.show_advanced_search_button == 'true') %}
                     <a href="{{ constant("SEARCH_URL") }}advanced/?lang={{ lang }}" class="btnBlue">{{ texts.ADVANCED_SEARCH }}</a>
                     {% endif %}
+                    {% if config_wizard_list %}
+                        <a href="#" title="{{ texts.WIZARD.BUTTON_TOOLTIP }}" id="btnOpenWizard" data-wizard="{{config_wizard_list.0}}" class="btnBlue">{{ texts.WIZARD.BUTTON }}</a><br/>
+                    {% endif %}
+
 				</div>
 				<div class="{% if current_page != 'decs_lookup'%}headerSearch{% else %}d-none{% endif %}">
 
@@ -124,11 +128,6 @@
                     {% if config_view_filter %}
                         <a href="#" id="btSidebar" data-view="{{config_view_filter}}" class="btn btn-sm btn-outline-primary">{{ texts.VIEW_FILTER }}</a>
                     {% endif %}
-                    {% if config_wizard_list %}
-                        {% for wizard in config_wizard_list %}
-                            <a href="#" id="btnOpenWizard" data-wizard="{{wizard}}">{{ attribute(texts.WIZARD, wizard) }}</a><br/>
-                        {% endfor %}
-                    {% endif %}
                 </div>
 			</div>
 		</div>

diff --git a/templates/regional/wizard.html b/templates/regional/wizard.html
@@ -1,20 +1,23 @@
 {% for wizard in config_wizard_list %}
 
 <div class="modal fade" id="modal-wizard-{{wizard}}" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
-	<div class="modal-dialog modal-lg modal-dialog-centered" role="document">
+	<div class="modal-dialog modal-xl modal-dialog-centered" role="document">
 		<div class="modal-content">
 
 			<div class="modal-header wizardModalTitle">
-				<h4 class="text-center">{{ attribute(texts.WIZARD, wizard) }}</h4>
+                <div id="wizardName">{{ texts.WIZARD.HIGHLIGHT }}</div>
+				<h4 class="text-center">{{ texts.WIZARD.TITLE }}</h4>
             </div>
 
             <div id="smartwizard" data-wizard="{{wizard}}" data-total="{{wizard.attributes.steps}}" class="hide">
                 <ul class="nav">
                     {% for step in 1..wizard.attributes.steps %}
                         {% set step_number = step|number_format %}
+                        {% set question_label = 'STEP_' ~ step_number %}
                         <li>
-                            <a class="nav-link" href="#step-{{step}}" id="step-{{step}}-title">
-                                {{ attribute(wizard_session, step_number).label }}
+                            <a class="nav-link" href="#step-{{step}}">
+                                <h6 class="text-center">{{ attribute(texts.WIZARD, question_label) }}</h6>
+                                <p id="step-{{step}}-title">{{ attribute(wizard_session, step_number).label }}</p>
                             </a>
                         </li>
                 {% endfor %}