scinote-eln/scinote-web
1
1
Fork 0
mirror of https://github.com/scinote-eln/scinote-web.git synced 2025-09-10 23:25:31 +08:00
Code Issues Projects Releases Packages Wiki Activity

CSS fixes protocol page

Browse source
This commit is contained in:
Anton 2023-09-22 11:59:39 +02:00
parent 5cc41451cd
commit ad3cd98d6e
16 changed files with 108 additions and 91 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
app/assets/stylesheets/dashboard/create_task_modal.scss
View file

@ -47,28 +47,6 @@
position: relative;
}
.down-arrow {
background-color: $color-white;
box-shadow: -4px 4px 0 $color-black;
display: inline-block;
height: 38px;
margin: 0 11px 20px 14px;
opacity: .2;
width: 38px;
}
.down-arrow::before {
border-bottom: 6px solid transparent;
border-left: 8px solid $color-black;
border-top: 6px solid transparent;
content: "";
height: 0;
left: 46px;
position: absolute;
top: 38px;
width: 0;
}
.project-visibility-container {
display: inline-block;
width: 260px;

47
app/assets/stylesheets/extend/perfect-scrollbar.scss
View file

@ -16,10 +16,33 @@
-webkit-transition: background-color .2s linear, opacity .2s linear;
height: 16px;
opacity: 0.6;
margin: 0 1rem 0 5px;
/* there must be 'bottom' or 'top' for ps__rail-x */
bottom: 0px;
/* please don't change 'position' */
position: absolute;
&::after,
&::before {
content: '';
display: block;
background-color: var(--sn-white);
height: 1rem;
position: absolute;
width: 1rem;
top: 0
}
&::after {
right: -1rem;
border-bottom-right-radius: 4px;
}
&::before {
left: -5px;
border-bottom-left-radius: 4px;
width: 5px;
}
}
.ps__rail-y {
@ -28,12 +51,36 @@
-webkit-transition: background-color .2s linear, opacity .2s linear;
width: 16px;
opacity: 0.6;
margin: 1rem 0;
/* there must be 'right' or 'left' for ps__rail-y */
right: 0;
/* please don't change 'position' */
position: absolute;
cursor: pointer;
z-index: 5;
&::after,
&::before {
content: '';
display: block;
position: absolute;
background-color: var(--sn-white);
height: 1rem;
width: 1rem;
left: 0
}
&::after {
bottom: -1rem;
border-bottom-right-radius: 4px;
}
&::before {
border-bottom-right-radius: 4px;
top: -1rem;
}
}
.ps--active-x > .ps__rail-x,

6
app/assets/stylesheets/my_modules/protocols/index.scss
View file

@ -144,10 +144,6 @@
z-index: 251;
.repository {
@include font-button;
cursor: pointer;
display: flex;
padding: 8px 16px;
.assigned-items,
.shared-icon {
@ -579,7 +575,7 @@
z-index: 251;
.task-details-value {
@include font-h3;
font-weight: bold;
}
.row-v-margin {

8
app/assets/stylesheets/shared/select.scss
View file

@ -53,14 +53,14 @@
background: transparent;
border: 0;
display: none;
height: 26px;
outline: 0;
padding: 0;
width: calc(100% - 1.5em);
}
&.sn-select--open {
background: $color-white;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
border-color: var(--sn-science-blue);
.sn-select__search-input {
@ -82,12 +82,10 @@
}
.sn-select__option {
line-height: 1.75rem;
overflow: hidden;
padding: .5rem 1rem;
text-overflow: ellipsis;
white-space: nowrap;
width: calc(100%);
width: 100%;
}
.select__option-placeholder {

2
app/assets/stylesheets/tailwind/modals.css
View file

@ -53,7 +53,7 @@
}
.modal .modal-content {
@apply relative border border-solid rounded outline-none shadow p-6 bg-sn-white;
@apply relative rounded outline-none shadow p-6 bg-sn-white;
}
.modal .modal-header {

3
app/javascript/packs/vue/navigation/top_menu.js
View file

@ -3,9 +3,10 @@ import Vue from 'vue/dist/vue.esm';
import TopMenuContainer from '../../../vue/navigation/top_menu.vue';
import PerfectScrollbar from 'vue2-perfect-scrollbar';
import 'vue2-perfect-scrollbar/dist/vue2-perfect-scrollbar.css';
import outsideClick from '../directives/outside_click';
Vue.use(PerfectScrollbar);
Vue.directive('click-outside', outsideClick);
Vue.prototype.i18n = window.I18n;
function addNavigationTopMenuContainer() {

39
app/javascript/vue/navigation/top_menu.vue
View file

@ -14,23 +14,14 @@
@change="switchTeam"
></Select>
</div>
<div v-if="user" class="dropdown ml-auto">
<button class="btn btn-light icon-btn btn-black" data-toggle="dropdown" :title="i18n.t('nav.settings')">
<i class="sn-icon sn-icon-settings"></i>
</button>
<ul class="dropdown-menu dropdown-menu-right">
<li v-for="(item, i) in settingsMenu" :key="i">
<a :href="item.url">
{{ item.name }}
</a>
</li>
<li>
<a href="" data-toggle='modal' data-target='#aboutModal' >
{{ i18n.t('left_menu_bar.support_links.core_version') }}
</a>
</li>
</ul>
</div>
<MenuDropdown
class="ml-auto"
v-if="this.settingsMenu && this.settingsMenu.length > 0"
:listItems="this.settingsMenu.map((item) => { return { text: item.name, url: item.url } })"
:btnClasses="'btn btn-light icon-btn btn-black'"
:position="'right'"
:btnIcon="'sn-icon sn-icon-settings'"
></MenuDropdown>
<div v-if="user" class="sci--navigation--notificaitons-flyout-container" >
<button class="btn btn-light icon-btn btn-black"
:title="i18n.t('nav.notifications.title')"
@ -52,14 +43,14 @@
<div class="sci--navigation--top-menu-user btn btn-light icon-btn btn-black" data-toggle="dropdown">
<img class="avatar w-6 h-6" :src="user.avatar_url">
</div>
<div class="dropdown-menu dropdown-menu-right top-menu-user-dropdown">
<div class="dropdown-menu dropdown-menu-right rounded !p-2.5 sn-shadow-menu-sm">
<li v-for="(item, i) in userMenu" :key="i">
<a :href="item.url">
<a :href="item.url" class="!px-3 !py-2.5 rounded hover:!bg-sn-super-light-grey !text-sn-blue block">
{{ item.name }}
</a>
</li>
<li>
<a rel="nofollow" data-method="delete" :href="user.sign_out_url">
<a rel="nofollow" data-method="delete" :href="user.sign_out_url" class="!px-3 !py-2.5 rounded hover:!bg-sn-super-light-grey !text-sn-blue block">
{{ i18n.t('nav.user.logout') }}
</a>
</li>
@ -69,16 +60,18 @@
</template>
<script>
import NotificationsFlyout from './notifications/notifications_flyout.vue'
import DropdownSelector from '../shared/dropdown_selector.vue'
import NotificationsFlyout from './notifications/notifications_flyout.vue';
import DropdownSelector from '../shared/dropdown_selector.vue';
import Select from "../shared/select.vue";
import MenuDropdown from '../shared/menu_dropdown.vue';
export default {
name: 'TopMenuContainer',
components: {
DropdownSelector,
NotificationsFlyout,
Select
Select,
MenuDropdown
},
props: {
url: String,

2
app/javascript/vue/protocol/container.vue
View file

@ -142,7 +142,7 @@
<span>{{ i18n.t("protocols.steps.new_step") }}</span>
</a>
</div>
<div class="protocol-steps">
<div class="protocol-steps pb-8">
<div v-for="(step, index) in steps" :key="step.id" class="step-block">
<div v-if="index > 0 && urls.add_step_url" class="insert-step" @click="addStep(index)">
<i class="sn-icon sn-icon-new-task"></i>

2
app/javascript/vue/results/result.vue
View file

@ -230,7 +230,7 @@
},
actionsMenu() {
let menu = [];
if (this.urls.reorder_elements_url) {
if (this.urls.reorder_elements_url && this.elements.length > 1) {
menu = menu.concat([{
text: this.i18n.t('my_modules.results.actions.rearrange'),
emit: 'reorder'

2
app/javascript/vue/shared/content/modal/move.vue
View file

@ -9,7 +9,7 @@
</h4>
</div>
<div class="modal-body">
<label>
<label class="font-normal text-sn-dark-grey">
{{ i18n.t(`protocols.steps.modals.move_element.${parent_type}.targets_label`) }}
</label>
<div class="w-full">

2
app/javascript/vue/shared/reorderable_items_modal.vue
View file

@ -16,7 +16,7 @@
:chosenClass="'step-checklist-item-chosen'"
:handle="'.step-element-grip'"
>
<div v-for="(item, index) in reorderedItems" :key="item.id" class="step-element-header">
<div v-for="(item, index) in reorderedItems" :key="item.id" class="step-element-header flex items-center">
<div class="step-element-grip step-element-grip--draggable">
<i class="sn-icon sn-icon-drag"></i>
</div>

13
app/javascript/vue/shared/select.vue
View file

@ -9,19 +9,22 @@
<perfect-scrollbar
ref="optionsContainer"
:style="optionPositionStyle"
class="sn-select__options scroll-container"
class="sn-select__options scroll-container p-2.5 block"
>
<template v-if="options.length">
<div v-if="options.length" class="flex flex-col gap-[1px]">
<div
v-for="option in options"
:key="option[0]"
@mousedown.prevent.stop="setValue(option[0])"
class="sn-select__option"
:class="{ 'select__option-placeholder': option[2] }"
class="sn-select__option p-3 rounded"
:class="{
'select__option-placeholder': option[2],
'!bg-sn-super-light-blue': option[0] == value,
}"
>
{{ option[1] }}
</div>
</template>
</div>
<template v-else>
<div
class="sn-select__no-options"

1
app/views/dashboards/_create_task_modal.html.erb
View file

@ -18,7 +18,6 @@
data-placeholder="<%= t("dashboard.create_task_modal.project_placeholder") %>"></select>
</div>
<div class="new-projects-visibility" style="display: none;">
<div class="down-arrow"></div>
<div class="project-visibility-container">
<div class="project-visibility-title"><%= t("dashboard.create_task_modal.project_visibility_label") %></div>
<div class="sci-toggles-group" data-toggle="buttons">

20
app/views/my_modules/_module_header_details_popover.html.erb
View file

@ -1,42 +1,42 @@
<div class="task-details-popover">
<div class="row row-v-margin">
<div class="col-xs-3">
<div class="col-xs-3 task-details-value">
<%= t('my_modules.details.info_popover.project_label') %>
</div>
<div class="col-xs-9 task-details-value">
<div class="col-xs-9">
<%= @my_module.experiment.project.name.truncate(Constants::MAX_NAME_TRUNCATION) %>
</div>
</div>
<div class="row row-v-margin">
<div class="col-xs-3">
<div class="col-xs-3 task-details-value">
<%= t('my_modules.details.info_popover.experiment_label') %>
</div>
<div class="col-xs-9 task-details-value">
<div class="col-xs-9">
<%= @my_module.experiment.name.truncate(Constants::MAX_NAME_TRUNCATION) %>
</div>
</div>
<div class="row row-v-margin">
<div class="col-xs-3">
<div class="col-xs-3 task-details-value">
<%= t('my_modules.details.info_popover.creator_label') %>
</div>
<div class="col-xs-9 task-details-value">
<div class="col-xs-9">
<%= @my_module.created_by&.full_name&.truncate(Constants::MAX_NAME_TRUNCATION) %>
<%= t('my_modules.details.info_popover.creator_same_user_label') if current_user == @my_module.created_by %>
</div>
</div>
<div class="row row-v-margin">
<div class="col-xs-3">
<div class="col-xs-3 task-details-value">
<%= t('my_modules.details.info_popover.created_label') %>
</div>
<div class="col-xs-9 task-details-value">
<div class="col-xs-9">
<%= l(@my_module.created_at, format: :full_date) %>
</div>
</div>
<div class="row row-v-margin">
<div class="col-xs-3">
<div class="col-xs-3 task-details-value">
<%= t('my_modules.details.info_popover.modified_label') %>
</div>
<div class="col-xs-9 task-details-value">
<div class="col-xs-9">
<% if @my_module.last_modified_by.present? %>
<%= t('my_modules.details.info_popover.modified_value',
date: l(@my_module.updated_at, format: :full_date),

4
app/views/my_modules/protocols.html.erb
View file

@ -92,12 +92,12 @@
</a>
<div class="actions-block">
<% if can_assign_my_module_repository_rows?(@my_module) %>
<div class="dropdown repositories-assign-container sci-dropdown" data-repositories-url="<%= my_module_repositories_dropdown_list_path(@my_module) %>">
<div class="dropdown repositories-assign-container" data-repositories-url="<%= my_module_repositories_dropdown_list_path(@my_module) %>">
<a href="#" id="repositories-assign-button" class="btn btn-light btn-block" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<span><%= t('my_modules.assigned_items.assign_from') %></span>
<span class="sn-icon sn-icon-down"></span>
</a>
<ul class="dropdown-menu repositories-dropdown-menu perfect-scrollbar" aria-labelledby="repositories-assign-button">
<ul class="dropdown-menu repositories-dropdown-menu perfect-scrollbar rounded !p-2.5 sn-shadow-menu-sm flex flex-col gap-[1px]" aria-labelledby="repositories-assign-button">
</ul>
</div>
<% end %>

26
app/views/my_modules/repositories/_repositories_dropdown_list.html.erb
View file

@ -4,17 +4,19 @@
data-assign-url-modal="<%= assign_modal_my_module_repository_path(@my_module, repository) %>"
data-update-url-modal="<%= update_modal_my_module_repository_path(@my_module, repository)%>" data-repository-id="<%= repository.id %>"
data-rows-count="<%= repository.rows_count %>" >
<% if repository.shared_with?(current_team) %>
<span class="shared-icon">
<i class="sn-icon sn-icon sn-icon-users"></i>
</span>
<% end %>
<span class="name" data-rows-count="<%= repository.rows_count %>"><%= repository.name %></span>
<% if repository.rows_count.positive? %>
<span class="assigned-items">
<i class="fas fa-file-signature"></i>
<%= repository.rows_count %>
</span>
<% end %>
<span class="!px-3 !py-2.5 rounded hover:!bg-sn-super-light-grey !text-sn-blue block cursor-pointer">
<% if repository.shared_with?(current_team) %>
<span class="shared-icon">
<i class="sn-icon sn-icon sn-icon-users"></i>
</span>
<% end %>
<span class="name" data-rows-count="<%= repository.rows_count %>"><%= repository.name %></span>
<% if repository.rows_count.positive? %>
<span class="assigned-items">
<i class="fas fa-file-signature"></i>
<%= repository.rows_count %>
</span>
<% end %>
</span>
</li>
<% end %>