scinote-eln/scinote-web
1
1
Fork 0
mirror of https://github.com/scinote-eln/scinote-web.git synced 2026-01-07 00:36:08 +08:00
Code Issues Projects Releases Packages Wiki Activity

Fix shareable links CSS [SCI-8975]

Browse source 
- Fix the style of the toggle button globally.
- Fix permissions on who can toggle team shareable links.
- Change wrong translations in shareable links modal.
- Remove placeholder text for start-date
This commit is contained in:
sboursen-scinote 2023-08-04 11:44:21 +02:00
parent b264bfab68
commit 40f78f4a28
5 changed files with 13 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
app/assets/stylesheets/shared_styles/elements/toggles.scss
View file

@ -1,12 +1,12 @@
// scss-lint:disable SelectorDepth QualifyingElement NestingDepth
.sci-toggle-checkbox-container {
--sci-toggle-check-size: .75rem;
--sci-toggle-check-size: .625rem;
--sci-toggle-container-height: 1.5rem;
--sci-toggle-container-width: 2.25rem;
--sci-toggle-label-border: .0625rem;
--sci-toggle-label-height: 1rem;
--sci-toggle-label-width: 2rem;
--sci-toggle-label-height: .875rem;
--sci-toggle-label-width: 1.875rem;
display: inline-block;
height: var(--sci-toggle-container-height);
position: relative;
@ -42,14 +42,13 @@ input[type="checkbox"].sci-toggle-checkbox {
animation-timing-function: $timing-function-sharp;
background: var(--sn-grey);
border-radius: 50%;
bottom: calc(var(--sci-toggle-label-height) / 2 - var(--sci-toggle-check-size) / 2);
content: "";
height: var(--sci-toggle-check-size);
left: 0;
margin: calc((var(--sci-toggle-label-height) - var(--sci-toggle-check-size))/2);
left: calc(var(--sci-toggle-label-height) / 2 - var(--sci-toggle-check-size) / 2);
position: absolute;
top: calc(0 - var(--sci-toggle-label-border));
transition: .4s;
width: var(--sci-toggle-check-size);
right: calc(var(--sci-toggle-label-width) - var(--sci-toggle-label-height) / 2 - var(--sci-toggle-check-size) / 2);
top: calc(var(--sci-toggle-label-height) / 2 - var(--sci-toggle-check-size) / 2);
transition: .6s;
}
}
@ -62,8 +61,8 @@ input[type="checkbox"].sci-toggle-checkbox {
&::before {
background-color: var(--sn-science-blue);
left: unset;
right: 0;
left: calc(var(--sci-toggle-label-width) - var(--sci-toggle-label-height) / 2 - var(--sci-toggle-check-size) / 2);
right: calc(var(--sci-toggle-label-height) / 2 - var(--sci-toggle-check-size) / 2);
}
}

2
app/javascript/vue/shareable_links/components/shareable_link_modal.vue
View file

@ -25,7 +25,7 @@
</div>
<div class="modal-body">
<div class="flex items-center text-sm gap-4 mb-4">
<span>{{ i18n.t("repositories.modal_assign_items_to_task.title") }}</span>
<span>{{ i18n.t("shareable_links.modal.sharing_toggle_label") }}</span>
<span class="sci-toggle-checkbox-container">
<input type="checkbox"
v-model="sharedEnabled"

4
app/views/shareable_links/my_modules/_start_date_label.html.erb
View file

@ -1,9 +1,5 @@
<span class="start-date-label">
<% if my_module.started_on.present? %>
<span class="iso-formatted-date font-bold"><%= my_module.started_on.iso8601 %></span>
<% else %>
<span class="empty-label">
<%= t('my_modules.details.no_start_date_placeholder') %>
</span>
<% end %>
</span>

2
app/views/users/settings/teams/show.html.erb
View file

@ -60,7 +60,7 @@
data: { disable_url: disable_tasks_sharing_modal_team_path(),
enable_url: shared_tasks_toggle_team_path()
},
disabled: !can_manage_team?(current_team) }%>
disabled: !can_manage_team?(@team) } %>
<span class="sci-toggle-checkbox-label"></span>
</span>
</div>

2
config/locales/en.yml
View file

@ -1609,7 +1609,7 @@ en:
modal:
title: "Share task"
sharing_toggle_label: "Link sharing"
description_placeholder: "This is the message written by the previous user."
description_placeholder: "Add optional message for the visitor."
sharing_link_label: "Shared link"
copy_button: "Copy"
disclaimer: "Anyone with the link can view the protocol and results pages of this task."