matous-volf/todo-baggins
matous-volf/todo-baggins
1
0
Fork 0
Code Issues 23 Pull Requests Actions Projects 1 Activity

feat: ability to view tasks in a category #19

Merged
matous-volf merged 15 commits from feat/tasks-in-category-list into main 2024-09-06 06:07:35 +00:00
Conversation 10 Commits 15 Files Changed 45 +97 -20
5 changed files with 97 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 1233325f0b - Show all commits

9
Dioxus.toml
View File

@ -31,10 +31,15 @@ watch_path = ["src", "assets"]
# CSS style file
style = ["/styles/tailwind_output.css"]
style = [
"/styles/tailwind_output.css",
"/styles/fonts.css",
"/styles/input_number_arrows.css",
"/styles/input_range.css"
]
# Javascript code file
script = []
script = ["https://kit.fontawesome.com/3c1b409f8f.js"]
[web.resource.dev]

17
assets/styles/fonts.css Normal file
View File

@ -0,0 +1,17 @@
@layer base {
@font-face {
font-family: Inter;
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url("/fonts/inter_variable.woff2") format("woff2");
}
@font-face {
font-family: Inter;
font-style: italic;
font-weight: 100 900;
font-display: swap;
src: url("/fonts/inter_variable_italic.woff2") format("woff2");
}
}

10
assets/styles/input_number_arrows.css Normal file
View File

@ -0,0 +1,10 @@
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
display: none;
-webkit-appearance: none;
margin: 0;
}
input[type=number] {
-moz-appearance:textfield;
}

63
assets/styles/input_range.css Normal file
View File

@ -0,0 +1,63 @@
input[type=range],
input[type=range]::-webkit-slider-runnable-track,
input[type=range]::-webkit-slider-thumb {
appearance: none;
}
input[type=range] {
background: transparent;
}
input[type=range]::-moz-range-thumb {
width: 1.25rem;
height: 1.25rem;
background: rgba(228, 228, 231);
border: 0;
border-radius: 0.5rem;
}
input[type=range]::-moz-range-progress {
background: #525259;
height: 0.5rem;
border-radius: 0.25rem;
}
input[type=range]::-moz-range-track {
background: rgba(39, 39, 42, 0.5);
height: 0.5rem;
border-radius: 0.25rem;
}
input[type=range].input-range-reverse::-moz-range-progress {
background: #2d2d31;
height: 0.5rem;
border-radius: 0.25rem;
}
input[type=range].input-range-reverse::-moz-range-track {
background: rgba(113, 113, 122, 0.5);
height: 0.5rem;
border-radius: 0.25rem;
}
input[type=range]::-webkit-slider-thumb {
width: 1.25rem;
height: 1.25rem;
background: rgba(228, 228, 231);
border: 0;
border-radius: 0.5rem;
position: relative;
top: -0.4rem;
}
input[type=range]::-webkit-slider-runnable-track {
background: rgba(39, 39, 42, 0.5);
height: 0.5rem;
border-radius: 0.25rem;
}
input[type=range].input-range-reverse::-webkit-slider-runnable-track {
background: rgba(39, 39, 42, 0.5);
height: 0.5rem;
border-radius: 0.25rem;
}
coderabbitai[bot] commented 2024-09-06 05:50:36 +00:00 (Migrated from github.com)
Review
Copy Link

Styling for Input Range is Well-Implemented

The CSS for the input range elements is well-implemented with attention to cross-browser compatibility and modern design standards. The use of vendor-specific pseudo-elements like ::-webkit-slider-thumb and ::-moz-range-thumb ensures that the styles are applied correctly across different browsers. The use of RGBA for colors and rem units for dimensions enhances the responsiveness and aesthetic of the sliders.

Consider adding comments to the CSS to explain the purpose of specific styles, especially for complex selectors or unusual styles, to improve maintainability.

**Styling for Input Range is Well-Implemented** The CSS for the input range elements is well-implemented with attention to cross-browser compatibility and modern design standards. The use of vendor-specific pseudo-elements like `::-webkit-slider-thumb` and `::-moz-range-thumb` ensures that the styles are applied correctly across different browsers. The use of RGBA for colors and rem units for dimensions enhances the responsiveness and aesthetic of the sliders. Consider adding comments to the CSS to explain the purpose of specific styles, especially for complex selectors or unusual styles, to improve maintainability. <!-- This is an auto-generated comment by CodeRabbit -->

18
src/styles/tailwind.css
View File

@ -13,21 +13,3 @@ html, body, #main {
}
/* stylelint-enable */
@layer base {
@font-face {
font-family: Inter;
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url("/fonts/inter_variable.woff2") format("woff2");
}
@font-face {
font-family: Inter;
font-style: italic;
font-weight: 100 900;
font-display: swap;
src: url("/fonts/inter_variable_italic.woff2") format("woff2");
}
}