Skip to content
Snippets Groups Projects
Verified Commit 74bdec84 authored by Volker Schukai's avatar Volker Schukai :alien:
Browse files

fix: update css for datatable and field-set #259 #260 #261

parent 46ec62b9
No related branches found
No related tags found
No related merge requests found
Expand all Hide whitespace changes
Inline Side-by-side
Showing
with 180 additions and 108 deletions
development/issues/open/260.html → development/issues/closed/260.html
+ 22
− 36
View file @ 74bdec84
......@@ -54,20 +54,7 @@
</script>
</monster-datasource-dom>
<div style="width:400px;margin-bottom:20px" class="">
<monster-button-bar>
<monster-button>click 1</monster-button>
<monster-button>click 2</monster-button>
<monster-button>click 3</monster-button>
<monster-button>click 4</monster-button>
<monster-button>click 6</monster-button>
<monster-button>click 7</monster-button>
<monster-button>click 8</monster-button>
<monster-button>click 9</monster-button>
<monster-button>click 10</monster-button>
<monster-button>click 11</monster-button>
</monster-button-bar>
</div>
<monster-datatable data-monster-datasource-selector="#myDataSourceID">
......@@ -86,33 +73,32 @@
<div data-monster-mode="hidden" class="" data-monster-head="email" data-monster-replace="path:row.email"></div>
<div data-monster-mode="fixed" class="visible" data-monster-head="">
<monster-button-bar>
<monster-button>click 1</monster-button>
<monster-button>click 2</monster-button>
<monster-button>click 3</monster-button>
<monster-button>click 4</monster-button>
<monster-button>click 6</monster-button>
<monster-button>click 7</monster-button>
<monster-button>click 8</monster-button>
<monster-button>click 9</monster-button>
<monster-button>click 10</monster-button>
<monster-button>click 11</monster-button>
<monster-button style="height:100%;display:flex;margin-right:0.1rem;" data-monster-role="details-button" data-monster-attributes="data-alvine-id path:listDatatable-row.aid">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
<path d="M1 2.5A1.5 1.5 0 0 1 2.5 1h3A1.5 1.5 0 0 1 7 2.5v3A1.5 1.5 0 0 1 5.5 7h-3A1.5 1.5 0 0 1 1 5.5zM2.5 2a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5zm6.5.5A1.5 1.5 0 0 1 10.5 1h3A1.5 1.5 0 0 1 15 2.5v3A1.5 1.5 0 0 1 13.5 7h-3A1.5 1.5 0 0 1 9 5.5zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5zM1 10.5A1.5 1.5 0 0 1 2.5 9h3A1.5 1.5 0 0 1 7 10.5v3A1.5 1.5 0 0 1 5.5 15h-3A1.5 1.5 0 0 1 1 13.5zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5zm6.5.5A1.5 1.5 0 0 1 10.5 9h3a1.5 1.5 0 0 1 1.5 1.5v3a1.5 1.5 0 0 1-1.5 1.5h-3A1.5 1.5 0 0 1 9 13.5zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5z"></path>
</svg>
</monster-button>
<monster-confirm-button data-monster-option-popper-placement="left" slot="popper" data-monster-role="delete-button" data-monster-attributes="data-alvine-primary-id path:listDatatable-row.aid">
<div>
<p>Are you sure you want to delete this File?</p>
</div>
<div slot="confirm">Yes</div>
<div slot="cancel">No</div>
<div slot="button">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 16 16">
<path d="M11 1.5v1h3.5a.5.5 0 0 1 0 1h-.538l-.853 10.66A2 2 0 0 1 11.115 16h-6.23a2 2 0 0 1-1.994-1.84L2.038 3.5H1.5a.5.5 0 0 1 0-1H5v-1A1.5 1.5 0 0 1 6.5 0h3A1.5 1.5 0 0 1 11 1.5Zm-5 0v1h4v-1a.5.5 0 0 0-.5-.5h-3a.5.5 0 0 0-.5.5ZM4.5 5.029l.5 8.5a.5.5 0 1 0 .998-.06l-.5-8.5a.5.5 0 1 0-.998.06Zm6.53-.528a.5.5 0 0 0-.528.47l-.5 8.5a.5.5 0 0 0 .998.058l.5-8.5a.5.5 0 0 0-.47-.528ZM8 4.5a.5.5 0 0 0-.5.5v8.5a.5.5 0 0 0 1 0V5a.5.5 0 0 0-.5-.5Z"></path>
</svg>
</div>
</monster-confirm-button>
</monster-button-bar>
</div>
</template>
</monster-datatable>
<div style="margin-top:120px;padding:20px">
<monster-button>button 1</monster-button>
<monster-confirm-button>
<div slot="button">button 1</div>
</monster-confirm-button>
<monster-state-button>
state 1
</monster-state-button>
<monster-popper-button>
<div slot="button">button 1</div>
</monster-popper-button>
</div>
</main>
......
development/issues/open/260.mjs → development/issues/closed/260.mjs
+ 1
− 0
View file @ 74bdec84
......@@ -17,4 +17,5 @@ import "../../../source/components/form/state-button.mjs";
import "../../../source/components/form/confirm-button.mjs";
import "../../../source/components/form/button-bar.mjs";
import "../../../source/components/form/button-bar.mjs";
import "../../../source/components/form/field-set.mjs";
development/issues/closed/261.html 0 → 100644
+ 89
− 0
View file @ 74bdec84
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>update field-set css #261</title>
<script src="./261.mjs" type="module"></script>
</head>
<body>
<h1>update field-set css #261</h1>
<p></p>
<ul>
<li><a href="https://gitlab.schukai.com/oss/libraries/javascript/monster/-/issues/261">Issue #261</a></li>
<li><a href="/">Back to overview</a></li>
</ul>
<main>
<div style="width:400px;margin-bottom:20px" class="">
<monster-form data-monster-datasource-selector="#detailsDatasource">
<monster-field-set>
<h5>Das ist eine headline</h5>
<label>Headline</label>
<input class="span-max"
type="text"
data-monster-bind="path:data.headline"
data-monster-attributes="value path:data.headline" />
<hr>
<h5>Das ist eine headline</h5>
<label>Maintext</label>
<textarea rows="5" class="" data-monster-bind="path:data.text" data-monster-attributes="value path:data.text"></textarea>
<label for="name">Name</label>
<input type="text" id="name" name="name" value="John Doe" class="span-max">
<label for="name">Name</label>
<monster-toggle-switch></monster-toggle-switch>
<h4>Das ist eine headline</h4>
<label>Maintext</label>
<textarea rows="5" class="span-max" data-monster-bind="path:data.text" data-monster-attributes="value path:data.text"></textarea>
<label for="name">Name</label>
<input type="text" id="name" name="name" value="John Doe">
<label for="name">Name</label>
<monster-toggle-switch></monster-toggle-switch>
</monster-field-set>
<monster-field-set data-monster-option-features-multiplecolumns="false">
<h5>Das ist eine headline</h5>
<label>Headline</label>
<input class="span-max"
type="text"
data-monster-bind="path:data.headline"
data-monster-attributes="value path:data.headline" />
<hr>
<h5>Das ist eine headline</h5>
<label>Maintext</label>
<textarea rows="5" class="span-max" data-monster-bind="path:data.text" data-monster-attributes="value path:data.text"></textarea>
<label for="name">Name</label>
<input type="text" id="name" name="name" value="John Doe">
<label for="name">Name</label>
<monster-toggle-switch></monster-toggle-switch>
</monster-field-set>
</monster-form>
</div>
</main>
</body>
</html>
development/issues/closed/261.mjs 0 → 100644
+ 20
− 0
View file @ 74bdec84
/**
* @file development/issues/open/261.mjs
* @url https://gitlab.schukai.com/oss/libraries/javascript/monster/-/issues/261
* @description update field-set css
* @issue 261
*/
import "../../../source/components/style/property.pcss";
import "../../../source/components/style/link.pcss";
import "../../../source/components/style/color.pcss";
import "../../../source/components/style/theme.pcss";
import "../../../source/components/style/normalize.pcss";
import "../../../source/components/style/typography.pcss";
import "../../../source/components/datatable/datatable.mjs";
import "../../../source/components/form/button.mjs";
import "../../../source/components/form/state-button.mjs";
import "../../../source/components/form/confirm-button.mjs";
import "../../../source/components/form/button-bar.mjs";
import "../../../source/components/form/button-bar.mjs";
import "../../../source/components/form/field-set.mjs";
source/components/form/button-bar.mjs
+ 0
− 2
View file @ 74bdec84
......@@ -415,8 +415,6 @@ function rearrangeButtons() {
continue;
}
const buttonLabel = element.innerText;
if (sum > space) {
element.setAttribute("slot", "popper");
} else {
......
source/components/form/style/field-set.pcss
+ 41
− 56
View file @ 74bdec84
......@@ -53,7 +53,7 @@
slot {
display: grid;
grid-template-columns: 10em 1fr;
grid-template-columns: auto 1fr;
grid-gap: 0.8rem;
accent-color: var(--monster-color-secondary-2);
}
......@@ -68,13 +68,21 @@ slot {
border-bottom: thin dotted var(--monster-color-primary-1);
}
::slotted(hr),
::slotted(h1),
::slotted(h2),
::slotted(h3),
::slotted(h4),
::slotted(h5),
::slotted(h6) {
grid-column: 1 / 3;
::slotted(h6) {
grid-column: 1 / -1;
}
::slotted(hr) {
border: none;
border-top: thin dotted var(--monster-color-gray-3);
margin: 1rem 0;
padding: 0;
}
::slotted(select) {
......@@ -83,16 +91,13 @@ slot {
::slotted(monster-button),
::slotted(monster-state-button),
::slotted(monster-select),
::slotted(monster-api-button),
::slotted(monster-state-button),
::slotted(monster-datasource-save-button) {
grid-column: 2;
}
::slotted(input),
::slotted(monster-button),
::slotted(monster-select),
::slotted(monster-state-button),
::slotted(monster-api-button),
::slotted(monster-state-button),
......@@ -100,28 +105,16 @@ slot {
}
::slotted(input) {
::slotted(input) ,
::slotted(monster-toggle-switch) ,
::slotted(select) {
align-self: end;
}
::slotted(monster-toggle-switch) {
width: 4.5rem;
}
.multiple-columns ::slotted(.span-1) {
grid-column: 2 / span 3;
width: 3rem;
}
.multiple-columns ::slotted(.span-1-max) {
grid-column: 2 / span 5;
}
.multiple-columns ::slotted(.span-2) {
grid-column: 4 / span 3;
}
@container field-set (max-width: 1200px) {
.multiple-columns {
......@@ -129,43 +122,19 @@ slot {
& slot {
grid-template-columns: auto 1fr auto 1fr;
}
& ::slotted(.span-1) {
grid-column: 2 / span 3;
}
& ::slotted(.span-2) {
grid-column: unset;
}
& ::slotted(.span-1-max:first-child) {
grid-column: 2 / span 3;
}
}
}
@container field-set (max-width: 800px) {
@container field-set (max-width: 900px) {
.multiple-columns {
& slot {
grid-template-columns: auto 1fr;
}
& ::slotted(.span-1) {
grid-column: unset;
}
& ::slotted(.span-2) {
grid-column: unset;
}
& ::slotted(.span-1-max) {
grid-column: unset;
}
}
}
@container field-set (max-width: 500px) {
......@@ -174,39 +143,55 @@ slot {
gap: 0;
}
::slotted(h1),
::slotted(h2),
::slotted(h3),
::slotted(h4),
::slotted(h5),
::slotted(h6) {
grid-column: 1
grid-column: 1;
}
::slotted(label),
::slotted(.label) {
padding-top: 1rem;
border-bottom: none;
::slotted(select) {
grid-column: 1;
}
::slotted(input),
::slotted(monster-toggle-switch),
::slotted(textarea),
::slotted(select) {
grid-column: 1;
}
::slotted(monster-button),
::slotted(monster-action-button),
::slotted(monster-state-button),
::slotted(monster-api-button),
::slotted(monster-state-button),
::slotted(monster-datasource-save-button) {
grid-column: 1;
}
::slotted(h1),
::slotted(h2),
::slotted(h3),
::slotted(h4),
::slotted(h5),
::slotted(h6) {
grid-column: 1
}
::slotted(label),
::slotted(.label) {
padding-top: 1rem;
border-bottom: none;
}
.multiple-columns {
& slot {
grid-template-columns: 1fr;
}
& ::slotted(.span-1-max) {
grid-column: unset;
}
}
......
source/components/form/stylesheet/field-set.mjs
+ 7
− 14
View file @ 74bdec84
This diff is collapsed.
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment