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

Small design fixes [SCI-11999][SCI-12003][SCI-12006]

Browse source
This commit is contained in:
Anton 2025-08-26 15:13:07 +02:00
parent b82e8da538
commit e9d5ba9bae
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 {
@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-[''];
}
@ -25,7 +25,7 @@
}
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");
}
@ -42,10 +42,10 @@
}
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 {
@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 {
.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 {
@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 {
@ -16,6 +16,10 @@
}
.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" />
</template>
<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-else>{{ tag.label }}</div>
<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="flex items-center gap-3">
<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>
</div>
<label class="sci-label">Checkbox</label>
<label class="sci-label" for="checkbox1">Checkbox</label>
</div>
<div class="flex items-center gap-3">

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

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

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

@ -17,5 +17,11 @@
Disabled tag
<i class="sn-icon sn-icon-close"></i>
</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>