scinote-eln/scinote-web
1
1
Fork 0
mirror of https://github.com/scinote-eln/scinote-web.git synced 2025-09-11 15:45:34 +08:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #8835 from aignatov-bio/ai-sci-11999-small-design-fixes

Browse source 
Small design fixes [SCI-11999][SCI-12003][SCI-12006]
This commit is contained in:
aignatov-bio 2025-08-29 10:01:40 +02:00 • committed by GitHub
commit 9e652d3805
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
6 changed files with 21 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
app/assets/stylesheets/tailwind/checkbox.css
View file

@ -16,7 +16,7 @@
} }
input[type="checkbox"].sci-checkbox + .sci-checkbox-label::before { input[type="checkbox"].sci-checkbox + .sci-checkbox-label::before {
@apply bg-transparent border border-solid border-black rounded-sm inline-block @apply bg-transparent border border-solid !border-black rounded-sm inline-block
left-0 absolute w-4 h-4 content-['']; left-0 absolute w-4 h-4 content-[''];
} }
@ -25,7 +25,7 @@
} }
input[type="checkbox"].sci-checkbox:checked + .sci-checkbox-label::before { input[type="checkbox"].sci-checkbox:checked + .sci-checkbox-label::before {
@apply border-sn-science-blue bg-center bg-sn-science-blue; @apply !border-sn-science-blue bg-center bg-sn-science-blue;
background-image: image-url("icon_small/sn-check.svg"); background-image: image-url("icon_small/sn-check.svg");
} }
@ -42,10 +42,10 @@
} }
input[type="checkbox"].sci-checkbox:disabled + .sci-checkbox-label::before { input[type="checkbox"].sci-checkbox:disabled + .sci-checkbox-label::before {
@apply border border-solid border-sn-sleepy-grey; @apply !border-sn-sleepy-grey;
} }
input[type="checkbox"].sci-checkbox:disabled:checked + .sci-checkbox-label::before { input[type="checkbox"].sci-checkbox:disabled:checked + .sci-checkbox-label::before {
@apply bg-sn-sleepy-grey border border-solid border-sn-sleepy-grey; @apply bg-sn-sleepy-grey !border-sn-sleepy-grey;
} }
} }

10
app/assets/stylesheets/tailwind/tags.css
View file

@ -1,10 +1,10 @@
@layer components { @layer components {
.sci-tag { .sci-tag {
@apply text-xs !rounded-full !px-2 h-6 !py-0.5 inline-flex items-center gap-2; @apply text-xs !rounded-full !pl-2 !pr-1.5 h-6 !py-0.5 inline-flex items-center gap-1;
} }
.sci-tag .sn-icon { .sci-tag .sn-icon {
@apply -ml-1 leading-4 !text-base cursor-pointer; @apply leading-4 !text-base cursor-pointer shrink-0;
} }
.sci-tag .sn-icon.sn-icon-close { .sci-tag .sn-icon.sn-icon-close {
@ -16,6 +16,10 @@
} }
.sci-tag .avatar-container { .sci-tag .avatar-container {
@apply h-5 w-5 rounded-full overflow-hidden flex items-center -ml-1.5 justify-center; @apply h-5 w-5 rounded-full overflow-hidden flex items-center -ml-1.5 justify-center shrink-0;
}
.sci-tag:hover {
@apply outline-4 outline-sn-grey-100 outline;
} }
} }

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

@ -35,7 +35,7 @@
class="w-full bg-transparent border-0 outline-none pl-0 placeholder:text-sn-grey" /> class="w-full bg-transparent border-0 outline-none pl-0 placeholder:text-sn-grey" />
</template> </template>
<div v-else class="flex items-center gap-1 flex-wrap"> <div v-else class="flex items-center gap-1 flex-wrap">
<div v-for="tag in tags" class="px-2 py-1 rounded-sm bg-sn-super-light-grey grid grid-cols-[auto_1fr] items-center gap-1"> <div v-for="tag in tags" class="sci-tag bg-sn-super-light-grey" :key="tag.value">
<div class="truncate" v-if="labelRenderer" v-html="tag.label"></div> <div class="truncate" v-if="labelRenderer" v-html="tag.label"></div>
<div class="truncate" v-else>{{ tag.label }}</div> <div class="truncate" v-else>{{ tag.label }}</div>
<i @click="removeTag(tag.value)" class="sn-icon mini ml-auto sn-icon-close cursor-pointer"></i> <i @click="removeTag(tag.value)" class="sn-icon mini ml-auto sn-icon-close cursor-pointer"></i>

4
app/views/design_elements/_checkbox.html.erb
View file

@ -2,10 +2,10 @@
<div class="mb-8"> <div class="mb-8">
<div class="flex items-center gap-3"> <div class="flex items-center gap-3">
<div class="sci-checkbox-container"> <div class="sci-checkbox-container">
<input type="checkbox" class="sci-checkbox"> <input type="checkbox" id="checkbox1" class="sci-checkbox">
<span class="sci-checkbox-label"></span> <span class="sci-checkbox-label"></span>
</div> </div>
<label class="sci-label">Checkbox</label> <label class="sci-label" for="checkbox1">Checkbox</label>
</div> </div>
<div class="flex items-center gap-3"> <div class="flex items-center gap-3">

1
app/views/design_elements/_select.html.erb
View file

@ -164,6 +164,7 @@
:options="simpleOptions" :options="simpleOptions"
:option-renderer="renderer" :option-renderer="renderer"
:label-renderer="renderer" :label-renderer="renderer"
:with-checkboxes="true"
:multiple="true" :multiple="true"
:size="size" :size="size"
></select-dropdown> ></select-dropdown>

6
app/views/design_elements/_tags.html.erb
View file

@ -17,5 +17,11 @@
Disabled tag Disabled tag
<i class="sn-icon sn-icon-close"></i> <i class="sn-icon sn-icon-close"></i>
</div> </div>
<% Constants::TAG_COLORS.each do |color| %>
<div class="sci-tag text-white" style="background-color: <%= color %>">
<%= color %>
<i class="sn-icon sn-icon-close"></i>
</div>
<% end %>
</div> </div>
</div> </div>