artemis/subtle-storm
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'styles-and-js-elements'

Browse Source
This commit is contained in:
Artemiy Solopov
2025-10-21 02:18:30 +03:00
parent e469963a2f 1d61f2b65c
commit c2d6293e0b
12 changed files with 151 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/assets/stylesheets/application.css
+14
View File
@@ -8,3 +8,17 @@
* *
* Consider organizing styles into separate files for maintainability. * Consider organizing styles into separate files for maintainability.
*/ */
body {
display: flex;
flex-flow: row nowrap;
}
site-sidebar {
--background: var(--pico-primary);
--color: white;
h1, h2, h3, h4, h5, h6, p {
color: var(--color);
}
}
app/javascript/application.js
+4
View File
@@ -4,3 +4,7 @@ import "controllers"
import "trix" import "trix"
import "@rails/actiontext" import "@rails/actiontext"
import {SiteSidebar} from 'elements/site_sidebar'
customElements.define('site-sidebar', SiteSidebar)
app/javascript/elements/site_sidebar.js
+112
View File
@@ -0,0 +1,112 @@
import {html, css, LitElement, classMap} from 'lit'
const openIcon = RAILS_ASSET_URL('/mingcute/hamburger_line.svg')
const closeIcon = RAILS_ASSET_URL('/mingcute/close_fill.svg')
export class SiteSidebar extends LitElement {
static styles = css`
:host {
--padding: 0.25rem;
--_button-size: var(--button-size, 2rem);
--_button-offset: var(--button-offset, 2px);
flex-basis: calc(var(--_button-size) + var(--_button-offset));
}
aside {
position: fixed;
left: 0;
top: 0;
height: 100%;
width: min(15em, 30%);
background: var(--background);
color: var(--color);
box-shadow: calc(var(--_button-size) / 2 + var(--_button-offset)) 0 var(--background);
transform: translateX(-100%);
transition: transform 0.2s ease;
box-sizing: border-box;
padding-block: var(--padding);
isolation: isolate;
z-index: 99;
&.open {
transform: none;
}
}
.padding {
padding-inline: var(--padding);
}
.toggle-button {
display: inline-block;
font-size: 1.5rem;
height: var(--_button-size);
width: var(--_button-size);
padding: 0;
text-align: center;
vertical-align: middle;
border-radius: 50%;
box-sizing: border-box;
position: absolute;
left: calc(100% + var(--_button-offset));
}
.bg {
transition: opacity 0.2s ease;
transition-behavior: allow-discrete;
background: black;
opacity: 0.6;
position: fixed;
inset: 0;
@starting-style {
opacity: 0;
}
}
`
static properties = {
open: {type: Boolean}
}
constructor() {
super()
this.open = false
}
render() {
const classes = {
open: this.open
}
return html`
<aside class="${classMap(classes)}">
<button class="toggle-button" @click="${this._toggleOpen}">
<img src="${this.open ? closeIcon : openIcon}">
</button>
<div class="padding">
<slot></slot>
</div>
</aside>
${this._bg()}
`
}
_bg() {
if(!this.open) return null
return html`<div class="bg" @click="${this._toggleOpen}"></div>`
}
_toggleOpen() {
this.open = !this.open
}
}
app/views/layouts/application.html.erb
+6 -3
View File
@@ -18,15 +18,18 @@
<link rel="apple-touch-icon" href="/icon.png"> <link rel="apple-touch-icon" href="/icon.png">
<%# Includes all stylesheet files in app/assets/stylesheets %> <%# Includes all stylesheet files in app/assets/stylesheets %>
<%= stylesheet_link_tag 'pico.jade.min.css', "data-turbo-track": "reload" %>
<%= stylesheet_link_tag :app, "data-turbo-track": "reload" %> <%= stylesheet_link_tag :app, "data-turbo-track": "reload" %>
<%= javascript_importmap_tags %> <%= javascript_importmap_tags %>
</head> </head>
<body> <body>
<aside> <site-sidebar id="global_sidebar">
<h1>Subtle Storm</h1>
<%= render partial: 'projects_selector' %> <%= render partial: 'projects_selector' %>
</aside> </site-sidebar>
<main> <main class="container">
<%= yield %> <%= yield %>
</main> </main>
</body> </body>
app/views/projects/show.html.slim
+2 -2
View File
@@ -1,8 +1,8 @@
h1= @project.name h1= @project.name
section= @project.description
section section
ul.links ul.links
li= link_to 'Edit', edit_project_path(@project) li= link_to 'Edit', edit_project_path(@project)
li= link_to 'Tasks', tasks_path(project: @project) li= link_to 'Tasks', tasks_path(project: @project)
section= @project.description
app/views/tasks/index.html.slim
+1 -1
View File
@@ -1,5 +1,5 @@
.row .row
= link_to 'New', new_task_path(project: @project&.code) = link_to 'New', new_task_path(project: current_project&.code)
- if @tasks.exists? - if @tasks.exists?
table table
config/initializers/assets.rb
+4 -1
View File
@@ -1,7 +1,10 @@
# frozen_string_literal: true
# Be sure to restart your server when you modify this file. # Be sure to restart your server when you modify this file.
# Version of your assets, change this if you want to expire all your assets. # Version of your assets, change this if you want to expire all your assets.
Rails.application.config.assets.version = "1.0" Rails.application.config.assets.version = '1.0'
# Add additional assets to the asset load path. # Add additional assets to the asset load path.
# Rails.application.config.assets.paths << Emoji.images_path # Rails.application.config.assets.paths << Emoji.images_path
Rails.application.config.assets.paths << Rails.root.join('vendor/stylesheets')
vendor/assets/images/mingcute/close_fill.svg
Vendored
+1
View File
@@ -0,0 +1 @@
<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><g fill='none' fill-rule='evenodd'><path d='M24 0v24H0V0zM12.593 23.258l-.011.002-.071.035-.02.004-.014-.004-.071-.035c-.01-.004-.019-.001-.024.005l-.004.01-.017.428.005.02.01.013.104.074.015.004.012-.004.104-.074.012-.016.004-.017-.017-.427c-.002-.01-.009-.017-.017-.018m.265-.113-.013.002-.185.093-.01.01-.003.011.018.43.005.012.008.007.201.093c.012.004.023 0 .029-.008l.004-.014-.034-.614c-.003-.012-.01-.02-.02-.022m-.715.002a.023.023 0 0 0-.027.006l-.006.014-.034.614c0 .012.007.02.017.024l.015-.002.201-.093.01-.008.004-.011.017-.43-.003-.012-.01-.01z'/><path fill='#09244BFF' d='m12 14.122 5.303 5.303a1.5 1.5 0 0 0 2.122-2.122L14.12 12l5.304-5.303a1.5 1.5 0 1 0-2.122-2.121L12 9.879 6.697 4.576a1.5 1.5 0 1 0-2.122 2.12L9.88 12l-5.304 5.304a1.5 1.5 0 1 0 2.122 2.12z'/></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 870 B

vendor/assets/images/mingcute/hamburger_line.svg
Vendored
+1
View File
@@ -0,0 +1 @@
<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><g fill='none' fill-rule='evenodd'><path d='M24 0v24H0V0zM12.594 23.258l-.012.002-.071.035-.02.004-.014-.004-.071-.036c-.01-.003-.019 0-.024.006l-.004.01-.017.428.005.02.01.013.104.074.015.004.012-.004.104-.074.012-.016.004-.017-.017-.427c-.002-.01-.009-.017-.016-.018m.264-.113-.014.002-.184.093-.01.01-.003.011.018.43.005.012.008.008.201.092c.012.004.023 0 .029-.008l.004-.014-.034-.614c-.003-.012-.01-.02-.02-.022m-.715.002a.023.023 0 0 0-.027.006l-.006.014-.034.614c0 .012.007.02.017.024l.015-.002.201-.093.01-.008.003-.011.018-.43-.003-.012-.01-.01z'/><path fill='#09244BFF' d='M5.844 4.566C7.446 3.643 9.619 3 12 3s4.554.643 6.156 1.566c.8.462 1.488 1.01 1.987 1.615.49.595.857 1.318.857 2.105 0 .792-.38 1.412-.99 1.821-.544.365-1.25.553-1.981.667-.58.09-1.259.145-2.019.177l-.786.026-.837.015-.885.006h-3.004l-.885-.006-.837-.015-.786-.026a18.59 18.59 0 0 1-2.019-.177c-.73-.114-1.437-.302-1.981-.667-.61-.41-.99-1.03-.99-1.821 0-.787.366-1.51.857-2.105.499-.604 1.186-1.153 1.987-1.615M5.4 7.454c-.19.229-.4.527-.4.839 0 .235.44.363.81.433l.233.038.236.034c.376.058.807.1 1.291.13l.608.03.66.02.712.012 1.58.01 2.154-.001.79-.005.739-.009.686-.016.323-.011.608-.03c.387-.024.74-.056 1.059-.097l.298-.042.393-.049c.379-.057.82-.17.82-.454 0-.16-.081-.446-.4-.832-.311-.377-.795-.782-1.443-1.155C15.864 5.553 14.037 5 12 5s-3.864.553-5.157 1.3c-.648.372-1.132.777-1.443 1.154m-1.064 4.454a3 3 0 0 1 3.328 0l.781.52a1 1 0 0 0 1.11 0l.78-.52a3 3 0 0 1 3.33 0l.78.52a1 1 0 0 0 1.11 0l.78-.52a3 3 0 0 1 3.33 0l.924.616a1 1 0 1 1-1.11 1.664l-.924-.616a1 1 0 0 0-1.11 0l-.78.52a3 3 0 0 1-3.33 0l-.78-.52a1 1 0 0 0-1.11 0l-.78.52a3 3 0 0 1-3.33 0l-.78-.52a1 1 0 0 0-1.11 0l-.504.346c-.152.1-.316.203-.475.287a1 1 0 1 1-.932-1.769c.072-.038.138-.077.204-.12zM4 15a1 1 0 0 0-1 1v1a4 4 0 0 0 4 4h10a4 4 0 0 0 4-4v-1a1 1 0 0 0-1-1zm3 4a2 2 0 0 1-2-2h14a2 2 0 0 1-2 2z'/></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

vendor/assets/images/mingcute/mingcute.md
Vendored
+1
View File
@@ -0,0 +1 @@
Icons from [mingcute](https://www.mingcute.com/)
vendor/assets/images/mingcute/right_fill.svg
Vendored
+1
View File
@@ -0,0 +1 @@
<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><g fill='none' fill-rule='evenodd'><path d='M24 0v24H0V0h24ZM12.593 23.258l-.011.002-.071.035-.02.004-.014-.004-.071-.035c-.01-.004-.019-.001-.024.005l-.004.01-.017.428.005.02.01.013.104.074.015.004.012-.004.104-.074.012-.016.004-.017-.017-.427c-.002-.01-.009-.017-.017-.018Zm.265-.113-.013.002-.185.093-.01.01-.003.011.018.43.005.012.008.007.201.093c.012.004.023 0 .029-.008l.004-.014-.034-.614c-.003-.012-.01-.02-.02-.022Zm-.715.002a.023.023 0 0 0-.027.006l-.006.014-.034.614c0 .012.007.02.017.024l.015-.002.201-.093.01-.008.004-.011.017-.43-.003-.012-.01-.01-.184-.092Z'/><path fill='#09244BFF' d='M16.06 10.94a1.5 1.5 0 0 1 0 2.12l-5.656 5.658a1.5 1.5 0 1 1-2.121-2.122L12.879 12 8.283 7.404a1.5 1.5 0 0 1 2.12-2.122l5.658 5.657Z'/></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 829 B

vendor/stylesheets/pico.jade.min.css
Vendored
+4
View File
File diff suppressed because one or more lines are too long