more simpler + torty sectino
This commit is contained in:
bronkuu
parent
a74c276cd3
commit
3b184c7c6f
10 changed files with 375 additions and 152 deletions
|
|
@ -25,7 +25,6 @@
|
|||
--space-lg: 1.5rem;
|
||||
--space-xl: 2rem;
|
||||
|
||||
--sidebar-w: 17.5rem;
|
||||
--topnav-h: 3.5rem;
|
||||
|
||||
--radius-sm: 0.25rem;
|
||||
|
|
|
|||
|
|
@ -749,3 +749,53 @@ textarea + label {
|
|||
.hide {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.link-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--primary);
|
||||
font-weight: 600;
|
||||
font-size: inherit;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.link-btn:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.overlay-panel--view {
|
||||
width: 24rem;
|
||||
}
|
||||
|
||||
.view-field {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.125rem;
|
||||
padding: var(--space-sm) 0;
|
||||
border-bottom: 1px solid var(--outline-dim);
|
||||
}
|
||||
|
||||
.view-field:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.view-field > label {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
color: var(--on-surface-dim);
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
|
||||
.view-field > span,
|
||||
.view-field > div {
|
||||
font-size: 0.875rem;
|
||||
color: var(--on-surface);
|
||||
}
|
||||
|
||||
#sc-view-tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-xs);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,32 +1,52 @@
|
|||
body {
|
||||
display: grid;
|
||||
grid-template-columns: var(--sidebar-w) 1fr;
|
||||
grid-template-rows: var(--topnav-h) 1fr;
|
||||
grid-template-areas:
|
||||
"sidebar topnav"
|
||||
"sidebar main";
|
||||
height: 100dvh;
|
||||
}
|
||||
|
||||
aside {
|
||||
grid-area: sidebar;
|
||||
background: var(--surface-white);
|
||||
border-right: 1px solid var(--outline-dim);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: var(--space-md);
|
||||
gap: var(--space-sm);
|
||||
overflow: hidden;
|
||||
z-index: 40;
|
||||
}
|
||||
|
||||
aside > .cta {
|
||||
width: 100%;
|
||||
height: 2.5rem;
|
||||
.topnav {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-md);
|
||||
padding: 0 var(--space-lg);
|
||||
border-bottom: 1px solid var(--outline-dim);
|
||||
background: var(--surface);
|
||||
z-index: 30;
|
||||
}
|
||||
|
||||
.topnav > h1 {
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.topnav > nav {
|
||||
display: flex;
|
||||
gap: var(--space-xs);
|
||||
}
|
||||
|
||||
.topnav > nav > a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: var(--space-sm);
|
||||
padding: var(--space-sm) var(--space-md);
|
||||
border-radius: var(--radius-md);
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
color: var(--on-surface-dim);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.topnav > nav > a.active {
|
||||
background: var(--primary-container);
|
||||
color: var(--primary);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.topnav > .cta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-sm);
|
||||
height: 2.25rem;
|
||||
padding: 0 var(--space-md);
|
||||
background: var(--primary);
|
||||
color: var(--on-primary);
|
||||
border: none;
|
||||
|
|
@ -35,74 +55,10 @@ aside > .cta {
|
|||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
aside > nav {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-xs);
|
||||
}
|
||||
|
||||
aside > nav > a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-sm);
|
||||
padding: var(--space-sm) var(--space-md);
|
||||
border-radius: var(--radius-md);
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
text-decoration: none;
|
||||
color: var(--on-surface-dim);
|
||||
}
|
||||
|
||||
aside > nav > a.active {
|
||||
background: var(--primary-container);
|
||||
color: var(--primary);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.topnav {
|
||||
grid-area: topnav;
|
||||
border-bottom: 1px solid var(--outline-dim);
|
||||
background: var(--surface);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-lg);
|
||||
padding: 0 var(--space-lg);
|
||||
flex-shrink: 0;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 30;
|
||||
}
|
||||
|
||||
.topnav > h1 {
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.topnav > .search {
|
||||
position: relative;
|
||||
width: 15rem;
|
||||
}
|
||||
|
||||
.topnav > .search input {
|
||||
height: 2rem;
|
||||
padding-left: 2rem;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.topnav > .search .material-symbols-outlined {
|
||||
position: absolute;
|
||||
left: var(--space-sm);
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
font-size: 1.25rem;
|
||||
color: var(--on-surface-dim);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
main {
|
||||
grid-area: main;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
|
|
@ -120,52 +76,38 @@ main {
|
|||
|
||||
#orders-results {
|
||||
grid-column: 1 / -1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: var(--space-md);
|
||||
}
|
||||
|
||||
@media (max-width: 64em) {
|
||||
.topnav > .search {
|
||||
width: 10rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 48em) {
|
||||
aside {
|
||||
width: var(--sidebar-w);
|
||||
padding: var(--space-xs);
|
||||
}
|
||||
|
||||
aside > .cta {
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
padding: 0;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
aside > .cta span:not(.material-symbols-outlined) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
aside > nav > a {
|
||||
justify-content: center;
|
||||
padding: var(--space-sm);
|
||||
}
|
||||
|
||||
aside > nav > a span:not(.material-symbols-outlined) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.topnav {
|
||||
padding: 0 var(--space-sm);
|
||||
gap: var(--space-xs);
|
||||
}
|
||||
|
||||
.topnav > .search {
|
||||
.topnav > nav > a span:not(.material-symbols-outlined) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.topnav > .cta span:not(.material-symbols-outlined) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.topnav > .cta {
|
||||
width: 2.25rem;
|
||||
height: 2.25rem;
|
||||
padding: 0;
|
||||
border-radius: 50%;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.main-content {
|
||||
padding: var(--space-sm);
|
||||
}
|
||||
|
||||
.topnav > h1 {
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -329,6 +329,47 @@ function setActiveLink() {
|
|||
}
|
||||
}
|
||||
|
||||
function viewSpecialCake(btn) {
|
||||
var tr = btn.closest('tr');
|
||||
document.getElementById('sc-view-title').textContent = tr.getAttribute('data-sc-name');
|
||||
document.getElementById('sc-view-name').textContent = tr.getAttribute('data-sc-name');
|
||||
document.getElementById('sc-view-price').textContent = tr.getAttribute('data-sc-price') + ' PLN';
|
||||
document.getElementById('sc-view-size').textContent = tr.getAttribute('data-sc-size') || '—';
|
||||
var shapeVal = tr.getAttribute('data-sc-shape');
|
||||
var shapeText = '';
|
||||
if (shapeVal === 'round') shapeText = 'Okrągły';
|
||||
else if (shapeVal === 'square') shapeText = 'Kwadrat';
|
||||
else shapeText = shapeVal || '—';
|
||||
document.getElementById('sc-view-shape').textContent = shapeText;
|
||||
document.getElementById('sc-view-flavour').textContent = tr.getAttribute('data-sc-flavour') || '—';
|
||||
document.getElementById('sc-view-notes').textContent = tr.getAttribute('data-sc-notes') || '—';
|
||||
document.getElementById('sc-view-client').textContent = tr.getAttribute('data-sc-client');
|
||||
document.getElementById('sc-view-date').textContent = tr.getAttribute('data-sc-date');
|
||||
var tagsStr = tr.getAttribute('data-sc-tags');
|
||||
var tagsContainer = document.getElementById('sc-view-tags');
|
||||
tagsContainer.innerHTML = '';
|
||||
if (tagsStr) {
|
||||
var tagNames = tagsStr.split(',');
|
||||
for (var i = 0; i < tagNames.length; i++) {
|
||||
if (tagNames[i].trim()) {
|
||||
var tag = document.createElement('span');
|
||||
tag.className = 'tag-chip sm';
|
||||
tag.textContent = tagNames[i].trim();
|
||||
tagsContainer.appendChild(tag);
|
||||
}
|
||||
}
|
||||
document.getElementById('sc-view-tags-field').classList.remove('hide');
|
||||
} else {
|
||||
document.getElementById('sc-view-tags-field').classList.add('hide');
|
||||
}
|
||||
document.getElementById('sc-view-order-link').href = '/order/' + tr.getAttribute('data-sc-order-id');
|
||||
document.getElementById('sc-view-overlay').classList.add('open');
|
||||
}
|
||||
|
||||
function closeViewSpecialCake() {
|
||||
document.getElementById('sc-view-overlay').classList.remove('open');
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
setActiveLink();
|
||||
initOrderPage();
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue