mirror of https://github.com/mue/mue.git
style: New date selection on custom events
This commit is contained in:
parent
953ce3fdea
commit
e7630e9357
|
@ -149,27 +149,6 @@ table {
|
||||||
padding: 25px;
|
padding: 25px;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
|
||||||
input[type="number"] {
|
|
||||||
@include themed() {
|
|
||||||
background: t($modal-sidebar);
|
|
||||||
box-shadow: t($boxShadow);
|
|
||||||
color: t($color);
|
|
||||||
}
|
|
||||||
text-align: center;
|
|
||||||
border-radius: 12px;
|
|
||||||
height: 40px;
|
|
||||||
font-size: 1rem;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
flex-flow: row;
|
|
||||||
justify-content: center;
|
|
||||||
gap: 20px;
|
|
||||||
transition: 0.5s;
|
|
||||||
cursor: pointer;
|
|
||||||
border: 0;
|
|
||||||
max-width: 40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
@include themed {
|
@include themed {
|
||||||
background: t($modal-sidebar);
|
background: t($modal-sidebar);
|
||||||
border-radius: t($borderRadius);
|
border-radius: t($borderRadius);
|
||||||
|
@ -224,9 +203,45 @@ table {
|
||||||
gap: 25px;
|
gap: 25px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.eventDateControl {
|
.eventDateSelection {
|
||||||
display: flex !important;
|
display: flex !important;
|
||||||
flex-flow: column !important;
|
flex-flow: row !important;
|
||||||
gap: 5px !important;
|
gap: 5px !important;
|
||||||
text-align: center !important;
|
text-align: center !important;
|
||||||
}
|
@include themed() {
|
||||||
|
background: t($modal-sidebar);
|
||||||
|
box-shadow: t($boxShadow);
|
||||||
|
color: t($color) !important;
|
||||||
|
}
|
||||||
|
hr {
|
||||||
|
height: 100%;
|
||||||
|
margin-right: 5px;
|
||||||
|
@include themed {
|
||||||
|
border-color: t($modal-secondaryColour);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
text-align: center;
|
||||||
|
border-radius: 12px;
|
||||||
|
height: 40px;
|
||||||
|
font-size: 1rem;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
flex-flow: row;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 20px;
|
||||||
|
transition: 0.5s;
|
||||||
|
cursor: pointer;
|
||||||
|
border: 0;
|
||||||
|
padding-left: 10px;
|
||||||
|
padding-right: 5px;
|
||||||
|
input[type='tel'] {
|
||||||
|
background: none;
|
||||||
|
outline: none;
|
||||||
|
border: none;
|
||||||
|
max-width: 20px;
|
||||||
|
text-align: center;
|
||||||
|
@include themed {
|
||||||
|
color: t($color) !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
@ -42,8 +42,8 @@ const GreetingOptions = () => {
|
||||||
const newEvent = {
|
const newEvent = {
|
||||||
id: 'widgets.greeting.halloween',
|
id: 'widgets.greeting.halloween',
|
||||||
name: '',
|
name: '',
|
||||||
month: 10,
|
month: 1,
|
||||||
date: 31,
|
date: 1,
|
||||||
};
|
};
|
||||||
|
|
||||||
// Add the new event to the array
|
// Add the new event to the array
|
||||||
|
@ -183,29 +183,28 @@ const GreetingOptions = () => {
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<div className="messageAction">
|
<div className="messageAction">
|
||||||
<div className="eventDateControl">
|
<div className="eventDateSelection">
|
||||||
<label>Month</label>
|
<label className="subtitle">Day:</label>
|
||||||
<input
|
|
||||||
id="month"
|
|
||||||
type="number"
|
|
||||||
value={event.month}
|
|
||||||
onChange={(e) => {
|
|
||||||
const updatedEvent = { ...event, month: parseInt(e.target.value, 10) };
|
|
||||||
updateEvent(index, updatedEvent);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="eventDateControl">
|
|
||||||
<label>Day</label>
|
|
||||||
<input
|
<input
|
||||||
id="day"
|
id="day"
|
||||||
type="number"
|
type="tel"
|
||||||
value={event.date}
|
value={event.date}
|
||||||
onChange={(e) => {
|
onChange={(e) => {
|
||||||
const updatedEvent = { ...event, date: parseInt(e.target.value, 10) };
|
const updatedEvent = { ...event, date: parseInt(e.target.value, 10) };
|
||||||
updateEvent(index, updatedEvent);
|
updateEvent(index, updatedEvent);
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
|
<hr />
|
||||||
|
<label className="subtitle">Month:</label>
|
||||||
|
<input
|
||||||
|
id="month"
|
||||||
|
type="tel"
|
||||||
|
value={event.month}
|
||||||
|
onChange={(e) => {
|
||||||
|
const updatedEvent = { ...event, month: parseInt(e.target.value, 10) };
|
||||||
|
updateEvent(index, updatedEvent);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
<Button
|
<Button
|
||||||
type="settings"
|
type="settings"
|
||||||
|
|
Loading…
Reference in New Issue