yagich/pyrom
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

new sortable list implementation

Browse Source
This commit is contained in:
Lera Elvoé
2025-12-19 19:01:01 +03:00
parent 98bf430604
commit 46704df7d9
16 changed files with 581 additions and 395 deletions
Download Patch File Download Diff File Expand all files Collapse all files

129
sass/_default.scss
View File

@@ -56,6 +56,7 @@ $PAGE_SIDE_MARGIN: 100px !default;
// BORDERS
// **************
$DEFAULT_BORDER: 1px solid black !default;
$DEFAULT_BORDER_INVALID: 2px dashed $BUTTON_COLOR_CRITICAL !default;
$DEFAULT_BORDER_RADIUS: 4px !default;
// other variables can be found before the rule that uses them. they are usually constructed from these basic variables.
@@ -709,6 +710,11 @@ input[type="text"], input[type="password"], textarea, select {
}
}
// lone required inputs managed by js
input:not(form input):invalid {
border: $DEFAULT_BORDER_INVALID;
}
textarea {
font-family: "Atkinson Hyperlegible Mono", monospace;
}
@@ -966,54 +972,6 @@ $topic_locked_background: none !default;
background-color: $topic_locked_background;
}
$draggable_topic_background: $ACCENT_COLOR !default;
$draggable_topic_dragged_color: $BUTTON_COLOR !default;
$draggable_topic_padding: $BIG_PADDING !default;
$draggable_topic_margin: $MEDIUM_BIG_PADDING 0 !default;
$draggable_topic_border: 5px outset !default;
$draggable_topic_border_top: $draggable_topic_border $LIGHT !default;
$draggable_topic_border_bottom: $draggable_topic_border $DARK_2 !default;
.draggable-topic {
cursor: pointer;
user-select: none;
background-color: $draggable_topic_background;
padding: $draggable_topic_padding;
margin: $draggable_topic_margin;
border-top: $draggable_topic_border_top;
border-bottom: $draggable_topic_border_bottom;
&.dragged {
background-color: $draggable_topic_dragged_color;
}
}
$draggable_collection_background: $ACCENT_COLOR !default;
$draggable_collection_dragged_color: $BUTTON_COLOR !default;
$draggable_collection_default_color: $BUTTON_COLOR_2 !default;
$draggable_collection_padding: $BIG_PADDING !default;
$draggable_collection_margin: $MEDIUM_BIG_PADDING 0 !default;
$draggable_collection_border: 5px outset !default;
$draggable_collection_border_top: $draggable_collection_border $LIGHT !default;
$draggable_collection_border_bottom: $draggable_collection_border $DARK_2 !default;
.draggable-collection {
cursor: pointer;
user-select: none;
background-color: $draggable_collection_background;
padding: $draggable_collection_padding;
margin: $draggable_collection_margin;
border-top: $draggable_collection_border_top;
border-bottom: $draggable_collection_border_bottom;
&.dragged {
background-color: $draggable_collection_dragged_color;
}
&.default {
background-color: $draggable_collection_default_color;
}
}
$post_editing_header_color: $LIGHT !default;
.editing {
background-color: $post_editing_header_color;
@@ -1415,6 +1373,7 @@ $settings_grid_gap: $MEDIUM_PADDING !default;
$settings_grid_item_min_width: 600px !default;
$settings_grid_fieldset_border: 1px solid $DEFAULT_FONT_COLOR_INVERSE !default;
$settings_grid_fieldset_border_radius: $DEFAULT_BORDER_RADIUS !default;
$settings_grid_fieldset_background_color: $DARK_1_LIGHTER !default;
.settings-grid {
display: grid;
gap: $settings_grid_gap;
@@ -1425,7 +1384,7 @@ $settings_grid_fieldset_border_radius: $DEFAULT_BORDER_RADIUS !default;
& fieldset {
border: $settings_grid_fieldset_border;
border-radius: $settings_grid_fieldset_border_radius;
background-color: $DARK_1_LIGHTER;
background-color: $settings_grid_fieldset_background_color;
}
}
@@ -1440,7 +1399,7 @@ h1 {
$settings_badge_container_gap: $SMALL_PADDING !default;
$settings_badge_container_border: $DEFAULT_BORDER !default;
$settings_badge_container_border_invalid: 2px dashed red !default;
$settings_badge_container_border_invalid: $DEFAULT_BORDER_INVALID !default;
$settings_badge_container_border_radius: $DEFAULT_BORDER_RADIUS !default;
$settings_badge_container_padding: $SMALL_PADDING $MEDIUM_PADDING !default;
$settings_badge_container_margin: $MEDIUM_PADDING $ZERO_PADDING !default;
@@ -1552,3 +1511,73 @@ $rss_button_font_color_active: black !default;
padding-right: $guide_section_padding_right_portrait;
}
}
$sortable_item_background: $ACCENT_COLOR !default;
$sortable_item_dragged_color: $BUTTON_COLOR !default;
$sortable_item_immovable_color: $BUTTON_COLOR_2 !default;
$sortable_item_padding: $BIG_PADDING !default;
$sortable_item_margin: $MEDIUM_BIG_PADDING 0 !default;
$sortable_item_border: 5px outset !default;
$sortable_item_border_top: $sortable_item_border $LIGHT !default;
$sortable_item_border_bottom: $sortable_item_border $DARK_2 !default;
$sortable_item_gap: $MEDIUM_PADDING !default;
ol.sortable-list {
list-style: none;
flex-grow: 1;
margin: 0;
li {
display: flex;
gap: $sortable_item_gap;
background-color: $sortable_item_background;
padding: $sortable_item_padding;
margin: $sortable_item_margin;
border-top: $sortable_item_border_top;
border-bottom: $sortable_item_border_bottom;
}
li.dragged {
background-color: $sortable_item_dragged_color;
}
li.immovable {
background-color: $sortable_item_immovable_color;
}
li.immovable .dragger {
cursor: not-allowed;
}
}
$sortable_item_grabber_padding: $SMALL_PADDING $MEDIUM_PADDING !default;
.dragger {
display: flex;
align-items: center;
background-color: $DARK_2;
padding: $sortable_item_grabber_padding;
cursor: move;
}
$sortable_item_inner_gap: $MEDIUM_PADDING !default;
.sortable-item-inner {
display: flex;
gap: $sortable_item_inner_gap;
flex-grow: 1;
flex-direction: column;
& > * {
flex-grow: 1;
}
&.row {
flex-direction: row;
}
&:not(.row) > * {
margin-right: auto;
}
}
.fg {
flex-grow: 1;
}