Replace bootstrap popover with bootstrap dropdown

This commit is contained in:
aignatov-bio 2020-05-13 12:20:25 +02:00
parent 8e20dccc66
commit 8447a13afd
4 changed files with 30 additions and 17 deletions

View file

@ -1,14 +1,6 @@
/* global I18n dropdownSelector */
/* eslint-disable no-use-before-define */
$('#taskDetailsLabel').popover({
html: true,
container: 'body',
placement: 'auto bottom',
trigger: 'hover',
content: $('#taskDetailsContent').html()
});
function updateStartDate() {
let updateUrl = $('#startDateContainer').data('update-url');
let val = $('#calendarStartDate').val();

View file

@ -454,6 +454,24 @@
}
}
.task-details-dropdown-container {
.task-details-button {
@include font-h2;
cursor: pointer;
margin: 0 3px;
}
.dropdown-menu {
min-width: 500px;
padding: 1em 2em;
.row-v-margin {
margin-bottom: .5em;
margin-top: .5em
}
}
}
@media (max-width: 700px) {
.my-module-protocol-status {
.status-info-dropdown {

View file

@ -1,5 +1,5 @@
<div class="task-details-popover">
<div class="row">
<div class="row row-v-margin">
<div class="col-xs-3">
<%= t('my_modules.module_header.details_popover.project_label') %>
</div>
@ -9,7 +9,7 @@
</strong>
</div>
</div>
<div class="row">
<div class="row row-v-margin">
<div class="col-xs-3">
<%= t('my_modules.module_header.details_popover.experiment_label') %>
</div>
@ -19,7 +19,7 @@
</strong>
</div>
</div>
<div class="row">
<div class="row row-v-margin">
<div class="col-xs-3">
<%= t('my_modules.module_header.details_popover.creator_label') %>
</div>
@ -30,7 +30,7 @@
<%= t('my_modules.module_header.details_popover.creator_same_user_label') if current_user == @my_module.created_by %>
</div>
</div>
<div class="row">
<div class="row row-v-margin">
<div class="col-xs-3">
<%= t('my_modules.module_header.details_popover.created_label') %>
</div>
@ -40,7 +40,7 @@
</strong>
</div>
</div>
<div class="row">
<div class="row row-v-margin">
<div class="col-xs-3">
<%= t('my_modules.module_header.details_popover.modified_label') %>
</div>

View file

@ -11,12 +11,15 @@
<span id="taskDetailsLabel" class="task-section-title">
<h2>
<%= t('my_modules.details.title') %>
<span class="fas block-icon fa-info-circle"></span>
</h2>
</span>
<div id="taskDetailsContent" class="hidden">
<%= render partial: "module_header_details_popover.html.erb" %>
</div>
<span class="dropdown task-details-dropdown-container">
<span id="taskDetailsButton" class="fas block-icon fa-info-circle task-details-button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"></span>
<div class="dropdown-menu" aria-labelledby="taskDetailsButton">
<%= render partial: "module_header_details_popover.html.erb" %>
</div>
</span>
<div class="actions-block">
<%= render partial: "my_modules/state_buttons.html.erb" %>
</div>