UI CSS fixes

This commit is contained in:
Anton 2023-06-22 11:55:23 +02:00
parent e82338be70
commit 8fac4c1b7c
20 changed files with 54 additions and 50 deletions

View file

@ -12,14 +12,11 @@
.dashboard-view {
--dashboard-widgets-gap: 30px;
padding: 15px
var(--dashboard-widgets-gap)
15px
var(--dashboard-widgets-gap);
padding: 1.5rem 0;
}
.dashboard-header {
padding-bottom: 15px;
padding-bottom: 1.5rem;
}
.dashboard-container {

View file

@ -48,9 +48,9 @@
}
.badge-indicator {
background: $brand-accent;
border-radius: $border-radius-tag;
color: $color-black;
background: var(--sn-science-blue);
border-radius: 50%;
color: var(--sn-white);
font-size: 10px;
margin-left: -8px;
}

View file

@ -63,7 +63,7 @@
}
.protocol-description {
margin-bottom: 2em;
padding-left: 1.5em;
padding-left: 2.5rem;
}
.protocol-steps {

View file

@ -78,7 +78,7 @@
color: var(--sn-black);
display: inline-flex;
gap: .5rem;
padding: .5em;
padding: .5rem;
text-decoration: none;
.fas {
@ -183,6 +183,8 @@
}
.task-details {
padding-left: 2.5rem;
.fas.block-icon {
margin-right: 8px;
}
@ -406,6 +408,7 @@
.task-notes {
display: inline-block;
padding-left: 2rem;
position: relative;
width: 100%;

View file

@ -11,6 +11,7 @@
}
#assigned-items-container {
padding-left: 2.5rem;
padding-top: 10px;
.assigned-repository {

View file

@ -42,7 +42,7 @@
padding: 1.5rem;
position: absolute;
right: 0;
top: calc(var(--top-navigation-height) - .5em);
top: calc(var(--top-navigation-height) - 1.5rem);
width: 400px;
.sci--navigation--notificaitons-flyout-title {

View file

@ -50,14 +50,15 @@
align-items: center;
color: $color-volcano;
display: inline-flex;
padding: .5em;
gap: .5rem;
padding: .5rem;
text-decoration: none;
.fas {
margin-right: 5px;
}
&:not(.collapsed) .fas {
&:not(.collapsed) .sn-icon {
@include rotate(90deg);
}
}
@ -104,7 +105,7 @@
}
.protocol-details {
padding-left: 20px;
padding-left: 2.5rem;
}
}

View file

@ -113,11 +113,12 @@
width: calc(100% + 2em);
&.selected::after {
@include font-awesome;
content: $font-fas-check;
@include font-sn-icon;
content: $sn-icon-check;
margin-left: auto;
position: absolute;
right: 1em;
right: .5rem;
top: 0;
}
}
}
@ -138,7 +139,7 @@
.dropdown-menu {
@include font-button;
min-width: 200px;
min-width: 160px;
padding: .5em 0;
a {
@ -152,11 +153,12 @@
}
&.selected::after {
@include font-awesome;
content: $font-fas-check;
@include font-sn-icon;
content: $sn-icon-check;
margin-left: auto;
position: absolute;
right: 1em;
right: .5rem;
top: 0;
}
}

View file

@ -344,7 +344,6 @@
}
.sn-icon-down {
margin-right: -6px;
transform: rotate(180deg);
}
}

View file

@ -29,6 +29,7 @@ $font-fas-plus: "\f02b";
$sn-icon-left: "\e932";
$sn-icon-right: "\e931";
$sn-icon-check: "\e95f";
/// Hack for old icons

View file

@ -4,7 +4,7 @@
@import "components/*";
.step-container {
--left-component-padding: 24px;
--left-component-padding: 2rem;
border: $border-transparent;
margin: 6px 0 6px -1.5em;
padding: 8px 24px 8px 0;

View file

@ -152,7 +152,8 @@ body {
}
.badge {
background-color: $brand-primary;
background-color: var(--sn-science-blue);
border-radius: 50% !important;
font-size: 11px;
border-radius: 5px;
}

View file

@ -14,8 +14,8 @@
@change="switchTeam"
></Select>
</div>
<div v-if="user" class="dropdown" :title="i18n.t('nav.support')">
<button class="btn btn-light icon-btn btn-black" data-toggle="dropdown">
<div v-if="user" class="dropdown" >
<button class="btn btn-light icon-btn btn-black" data-toggle="dropdown" :title="i18n.t('nav.support')">
<i class="sn-icon sn-icon-help"></i>
</button>
<ul v-if="user" class="dropdown-menu dropdown-menu-right">
@ -26,8 +26,8 @@
</li>
</ul>
</div>
<div v-if="user" class="dropdown" :title="i18n.t('nav.settings')">
<button class="btn btn-light icon-btn btn-black" data-toggle="dropdown">
<div v-if="user" class="dropdown">
<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">
@ -43,8 +43,9 @@
</li>
</ul>
</div>
<div v-if="user" class="sci--navigation--notificaitons-flyout-container" :title="i18n.t('nav.notifications.title')">
<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')"
:class="{ 'has-unseen': unseenNotificationsCount > 0 }"
:data-unseen="unseenNotificationsCount"
data-toggle="dropdown"

View file

@ -5,13 +5,13 @@
</div>
<div v-else class="step-element-grip-placeholder"></div>
<div class="buttons-container">
<button v-if="element.attributes.orderable.urls.update_url" class="btn icon-btn btn-light" tabindex="0" @click="enableEditMode($event)">
<button v-if="element.attributes.orderable.urls.update_url" class="btn icon-btn btn-light btn-sm" tabindex="0" @click="enableEditMode($event)">
<i class="sn-icon sn-icon-edit"></i>
</button>
<button v-if="element.attributes.orderable.urls.duplicate_url" class="btn icon-btn btn-light" tabindex="0" @click="duplicateElement">
<button v-if="element.attributes.orderable.urls.duplicate_url" class="btn icon-btn btn-light btn-sm" tabindex="0" @click="duplicateElement">
<i class="sn-icon sn-icon-duplicate"></i>
</button>
<button v-if="element.attributes.orderable.urls.delete_url" class="btn icon-btn btn-light" @click="showDeleteModal" tabindex="0">
<button v-if="element.attributes.orderable.urls.delete_url" class="btn icon-btn btn-light btn-sm" @click="showDeleteModal" tabindex="0">
<i class="sn-icon sn-icon-delete"></i>
</button>
</div>

View file

@ -14,7 +14,7 @@
<input id="calendarDueDate<%= my_module.id %>"
type="datetime"
data-toggle='date-time-picker'
class="form-control calendar-input calendar-due-date"
class="form-control calendar-input calendar-due-date "
readonly
placeholder="<%= t('my_modules.details.no_due_date_placeholder') %>"
data-date-format="<%= datetime_picker_format_full %>"

View file

@ -1,6 +1,4 @@
<% content_for :content do %>
<div class="container <%= yield :container_class %>">
<%= yield %>
</div>
<%= yield %>
<% end %>
<%= render template: 'layouts/application' %>

View file

@ -2,7 +2,7 @@
<div class="flex-block date-block">
<div class="flex-block-label">
<span class="sn-icon block-icon sn-icon-calendar"></span>
<span class="sn-icon block-icon sn-icon-calendar mr-2.5"></span>
<span class="hidden-xs hidden-sm hidden-md"><%= t('my_modules.details.start_date') %></span>
</div>
<div id="startDateContainer" class="datetime-container" data-update-url="<%= my_module_path(@my_module, format: :json) %>">
@ -12,7 +12,7 @@
<div class="flex-block date-block" >
<div class="flex-block-label">
<span class="sn-icon block-icon sn-icon-calendar"></span>
<span class="sn-icon block-icon sn-icon-calendar mr-2.5"></span>
<span class="hidden-xs hidden-sm hidden-md"><%= t('my_modules.details.due_date') %></span>
</div>
<div id="dueDateContainer" class="datetime-container" data-update-url="<%= my_module_path(@my_module, format: :json) %>">

View file

@ -1,7 +1,7 @@
<div class="dropdown view-switch" >
<div href="#" class="btn btn-light view-switch-button prevent-shrink <%= "disabled" if disabled %>" id="viewSwitchButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<span class="state-view-switch-btn-name"><%= archived ? t('toolbar.archived_state') : t('toolbar.active_state') %></span>
<span class="caret pull-right"></span>
<span class="sn-icon sn-icon-down"></span>
</div>
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="viewSwitchButton">
<% if switchable %>

View file

@ -1,7 +1,7 @@
<div class="dropdown view-switch" >
<div href="#" class="btn btn-light view-switch-button prevent-shrink <%= "disabled" if disabled %>" id="viewSwitchButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<span class="view-switch-btn-name"><%= name %></span>
<span class="caret pull-right"></span>
<span class="sn-icon sn-icon-down"></span>
</div>
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="viewSwitchButton">
<%= yield %>

View file

@ -3485,16 +3485,16 @@ en:
archived: "Archived"
sort:
title: "Sorting"
new_html: "<i class=\"fas fa-sort-numeric-down-alt\"></i>&nbsp;&nbsp;Started last"
old_html: "<i class=\"fas fa-sort-numeric-down\"></i>&nbsp;&nbsp;Started first"
atoz_html: "<i class=\"fas fa-sort-alpha-down\"></i>&nbsp;&nbsp;Name A to Z"
ztoa_html: "<i class=\"fas fa-sort-alpha-down-alt\"></i>&nbsp;&nbsp;Name Z to A"
archived_new_html: "<i class=\"fas fa-sort-numeric-down-alt\"></i>&nbsp;&nbsp;Archived last"
archived_old_html: "<i class=\"fas fa-sort-numeric-down\"></i>&nbsp;&nbsp;Archived first"
id_asc_html: "<i class=\"fas fa-sort-numeric-down\"></i>&nbsp;&nbsp;ID ascending"
id_desc_html: "<i class=\"fas fa-sort-numeric-down-alt\"></i>&nbsp;&nbsp;ID descending"
due_first_html: "<i class=\"fas fa-sort-numeric-down\"></i>&nbsp;&nbsp;Due first"
due_last_html: "<i class=\"fas fa-sort-numeric-down-alt\"></i>&nbsp;&nbsp;Due last"
new_html: "Started last"
old_html: "Started first"
atoz_html: "Name A to Z"
ztoa_html: "Name Z to A"
archived_new_html: "Archived last"
archived_old_html: "Archived first"
id_asc_html: "ID ascending"
id_desc_html: "ID descending"
due_first_html: "Due first"
due_last_html: "Due last"
sort_new:
new: "Added last"
old: "Added first"