/* Mobile support (loaded after custom.css by frmProJoPage::initBeforeRender) step 1: top menu as hamburger */ /* desktop - hamburger and mobile panel hidden */ .pjHamburgerCell, .pjMobileMenu, .pjMobileMenuBackdrop, .pjSubToggle { display: none; } /* desktop: submenus are shifted by pjStickSubMenusX() (renderer.php) when the page scrolls sideways - keep them viewport wide so their centered items stay centered on screen */ .componentSubMenu { max-width: 100vw; box-sizing: border-box; } @media (max-width: 768px) { /* no automatic font boosting (Chrome / iOS enlarge text in wide tables) - keep the designed sizes */ html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } /* wfEngine's global button look (yellow gradient + inset shadow) must not hit the menu toggles */ .pjHamburger, .componentSubMenu .pjSubToggle { background: transparent !important; box-shadow: none !important; filter: none !important; text-shadow: none !important; } /* header: logo left, hamburger right, the inline menu and user box go to the panel */ .pageHeader .pjHeaderMenuCell, .pageHeader .pjHeaderUser { display: none; } .pageHeader .pjHeaderLogo { width: auto; } .pageHeader .pjHamburgerCell { display: table-cell; width: 56px; text-align: right; vertical-align: middle; padding-right: 10px; } .pjHamburger { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; width: 42px; height: 42px; padding: 0 9px; box-sizing: border-box; background: transparent; border: 1px solid rgba(255,255,255,0.35); border-radius: 6px; cursor: pointer; } .pjHamburger span { display: block; height: 3px; border-radius: 2px; background: #fff; transition: transform .2s, opacity .2s; } .pjMenuOpen .pjHamburger span:nth-child(1) { transform: translateY(8px) rotate(45deg); } .pjMenuOpen .pjHamburger span:nth-child(2) { opacity: 0; } .pjMenuOpen .pjHamburger span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); } /* slide-down panel under the fixed 60px header */ .pjMobileMenu { display: block; position: fixed; top: 60px; left: 0; right: 0; z-index: 1002; max-height: calc(100vh - 60px); overflow-y: auto; background: #3F0817; box-shadow: 0 8px 20px rgba(0,0,0,0.35); transform: translateY(-110%); visibility: hidden; transition: transform .2s ease, visibility .2s; } .pjMenuOpen .pjMobileMenu { transform: translateY(0); visibility: visible; } .pjMenuOpen .pjMobileMenuBackdrop { display: block; position: fixed; top: 60px; left: 0; right: 0; bottom: 0; z-index: 1001; background: rgba(0,0,0,0.35); } .pjMenuOpen { overflow: hidden; } /* no page scroll under the open menu */ /* the menu is printed by frmMenu as a one-row table - turn it into a vertical list */ .pjMobileMenuItems table, .pjMobileMenuItems tbody, .pjMobileMenuItems tr { display: block; width: 100%; height: auto; margin: 0; border-spacing: 0; } .pjMobileMenuItems table[role='menu'] { height: auto; margin: 0; } .pjMobileMenuItems td { display: block; width: auto; margin: 0; text-align: left; } .pjMobileMenuItems .pageHeaderMenuSeparator, .pjMobileMenuItems .pageHeaderMenuLast { display: none; } .pjMobileMenuItems .pageHeaderMenu, .pjMobileMenuItems .pageHeaderMenuSelected, .pjMobileMenuItems .pageHeaderMenu:hover, .pjMobileMenuItems .pageHeaderMenuSelected:hover { margin: 0; padding: 0; border: none; border-radius: 0; border-bottom: 1px solid rgba(255,255,255,0.12); font-size: 14px; letter-spacing: 1px; } .pjMobileMenuItems td a { display: block; padding: 14px 20px; color: #fff; } .pjMobileMenuItems .pageHeaderMenuSelected { background: rgba(255,255,255,0.15); } .pjMobileMenuItems .pageHeaderMenuSelected a { color: #fff; } .pjMobileMenuUser { display: flex; justify-content: space-between; align-items: center; padding: 14px 20px; color: #f0f0f0; font-size: 14px; } .pjMobileMenuUser a { color: #E2A1BD; } /* ---- submenus (frmSubMenu) - step 2: second hamburger ---- bar with the selected item (button added by pjInitSubMenus in renderer.php), items fold out below */ .componentSubMenu .pjSubToggle { display: flex; align-items: center; justify-content: space-between; width: 100%; box-sizing: border-box; padding: 8px 14px; background: transparent; border: none; color: #fff; cursor: pointer; font: 700 13px Titillium, 'Open Sans', Tahoma, sans-serif; letter-spacing: 1px; text-transform: uppercase; } .componentSubMenu .pjSubToggleIcon { display: inline-flex; flex-direction: column; gap: 4px; width: 22px; } .componentSubMenu .pjSubToggleIcon span { display: block; height: 2px; background: #fff; border-radius: 1px; transition: transform .2s, opacity .2s; } .componentSubMenu.pjSubOpen .pjSubToggleIcon span:nth-child(1) { transform: translateY(6px) rotate(45deg); } .componentSubMenu.pjSubOpen .pjSubToggleIcon span:nth-child(2) { opacity: 0; } .componentSubMenu.pjSubOpen .pjSubToggleIcon span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } /* submenus are fixed under the fixed header, so they stay in the corner even when a wide page has to be scrolled sideways (sticky can't do that - it can't leave its parent's width). pjLayoutSubMenus() in renderer.php stacks them (top) and pads div.pageBody by their height */ .componentSubMenu { position: fixed; top: 60px; left: 0; right: 0; z-index: 900; width: auto; box-sizing: border-box; } .componentSubMenu.pjSubOpen { z-index: 950; } /* open list folds out over the bars below it */ .componentSubMenu .pageHeaderTable { height: auto; } .componentSubMenu.pjSubOpen table[role='menu'] { max-height: calc(100vh - 120px); overflow-y: auto; } /* folded: only the bar */ .componentSubMenu table[role='menu'] { display: none; } /* open: vertical list */ .componentSubMenu.pjSubOpen table[role='menu'], .componentSubMenu.pjSubOpen table[role='menu'] tbody, .componentSubMenu.pjSubOpen table[role='menu'] tr { display: block; width: 100%; height: auto; margin: 0; border-spacing: 0; } .componentSubMenu.pjSubOpen table[role='menu'] td { display: block; width: auto; margin: 0; text-align: left; } .componentSubMenu .pageHeaderMenuSeparator, .componentSubMenu .pageHeaderMenuLast { display: none !important; } .componentSubMenu.pjSubOpen .pageHeaderMenu, .componentSubMenu.pjSubOpen .pageHeaderMenuSelected, .componentSubMenu.pjSubOpen .pageHeaderMenu:hover, .componentSubMenu.pjSubOpen .pageHeaderMenuSelected:hover { margin: 0; padding: 0; border: none; border-radius: 0; border-top: 1px solid rgba(255,255,255,0.12); font-size: 13px; letter-spacing: 1px; } .componentSubMenu.pjSubOpen td a { display: block; padding: 12px 24px; color: #fff; } .componentSubMenu.pjSubOpen .pageHeaderMenuSelected { background: rgba(255,255,255,0.15); } /* ---- dashboard widgets (.hoursTable - Juniors, Overdue Projects, Issues, Hours, ...) ---- each widget keeps its own width (up to the screen width) with its own horizontal scrollbar, so no widget makes the whole page scroll sideways. The grey widget title stays in place while the table scrolls under it. */ .hoursTable { display: block; float: none; clear: both; width: fit-content; max-width: 100%; margin: 8px 0 0 0; box-sizing: border-box; /* own width, never wider than the screen */ overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; } .hoursTable .hoursTableHeader { position: sticky; left: 0; display: table; width: 100%; } .containerdivNewLine { float: none; } /* ---- dashboard: hours entry widget (frmHoursSheet::printEntry) ---- every assignment row is a 2-line grid, all rows (and the header) share the same columns: | c1 | c2 c3 | c4 | c5 | act | (header row with the captions is hidden on phones) row1 | project | name | rep | + | row2 | today | description | ai | add | R | act = Start / + / R stacked on the very right (+AI hidden on phones). hidden on phones: document icon, Limit, Works button, F:/T: time */ .hoursTable.hoursEntry { display: block; float: none; margin: 8px 0 0 0; width: 100%; box-sizing: border-box; font-size: 13px; } .hoursEntry table { display: block; width: 100%; box-sizing: border-box; padding: 0; } .hoursEntry table > tbody { display: block; } .hoursTable.hoursEntry tr.hsHead, .hoursTable.hoursEntry tr.hsRow { display: grid; column-gap: 4px; align-items: center; grid-template-columns: 52px minmax(0, 1.2fr) minmax(0, 0.8fr) 42px 46px 46px; padding: 4px 6px; box-sizing: border-box; } .hoursTable.hoursEntry tr.hsRow { border-bottom: 1px solid #ddd; row-gap: 3px; } .hoursTable.hoursEntry tr > td, .hoursTable.hoursEntry tr > th { border-left: none !important; padding: 0; width: auto; max-width: none; min-width: 0; box-sizing: border-box; } /* header with the input captions - hidden on phones (rules below kept in case it is switched back on) */ .hoursTable.hoursEntry tr.hsHead { display: none; } .hoursTable.hoursEntry tr.hsHead > th { display: none; font-size: 11px; font-weight: normal; color: #888; text-align: left; white-space: nowrap; align-self: end; line-height: 1.2; grid-row: 1; } .hoursTable.hoursEntry tr.hsHead > th.hsHToday { display: block; grid-column: 1; } .hoursTable.hoursEntry tr.hsHead > th.hsHDesc { display: block; grid-column: 2 / 4; } .hoursTable.hoursEntry tr.hsHead > th.hsHAI { display: block; grid-column: 4; } .hoursTable.hoursEntry tr.hsHead > th.hsHAdd { display: block; grid-column: 5; } .hoursTable.hoursEntry tr.hsRow > td.hsDoc, .hoursTable.hoursEntry tr.hsRow > td.hsLimit, .hoursTable.hoursEntry tr.hsRow > td.hsWorks, .hoursTable.hoursEntry tr.hsRow > td.hsTime { display: none; } /* actions - stacked on the very right, over both lines; +AI not offered on phones */ .hoursTable.hoursEntry tr.hsRow > td.hsActions { grid-column: 6; grid-row: 1 / 3; display: flex; flex-direction: column; gap: 2px; white-space: normal; } .hoursTable.hoursEntry tr.hsRow > td.hsActions button[name='bSaveAI'] { display: none; } .hoursTable.hoursEntry tr.hsRow > td.hsActions .gridActionButton { width: 100%; min-width: 0; height: 22px; margin: 0; padding: 0 2px; font-size: 11px; } /* line 1 */ .hoursTable.hoursEntry tr.hsRow > td.hsCustomer { display: none; } /* customer code hidden on phones - project uses its space */ /* project gets the wider part of line 1, the assignment name the rest (less important) */ .hoursTable.hoursEntry tr.hsRow > td.hsProject { grid-column: 1 / 3; grid-row: 1; font-weight: bold; } .hoursTable.hoursEntry tr.hsRow > td.hsName { grid-column: 3 / 5; grid-row: 1; color: #777; font-size: 12px; } .hoursTable.hoursEntry tr.hsRow > td.hsCustomer, .hoursTable.hoursEntry tr.hsRow > td.hsProject, .hoursTable.hoursEntry tr.hsRow > td.hsName { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; } .hoursTable.hoursEntry tr.hsRow > td.hsReported { grid-column: 5; grid-row: 1; font-size: 12px; color: #777; text-align: right; } .hoursTable.hoursEntry tr.hsRow > td.hsFree { display: none; } /* "free" hidden on phones */ .hoursTable.hoursEntry tr.hsRow > td.hsReported::before { content: 'rep '; font-size: 9px; color: #aaa; } /* line 2 */ .hoursTable.hoursEntry tr.hsRow > td.hsToday { grid-column: 1; grid-row: 2; } .hoursTable.hoursEntry tr.hsRow > td.hsDesc { grid-column: 2 / 4; grid-row: 2; } .hoursTable.hoursEntry tr.hsRow > td.hsAI { grid-column: 4; grid-row: 2; } .hoursTable.hoursEntry tr.hsRow > td.hsAdd { grid-column: 5; grid-row: 2; } /* no AI column for this user - description takes its place */ .hoursTable.hoursEntry tr.hsRow:not(:has(> td.hsAI)) > td.hsDesc, .hoursTable.hoursEntry tr.hsHead:not(:has(> th.hsHAI)) > th.hsHDesc { grid-column: 2 / 5; } .hoursTable.hoursEntry tr.hsRow { row-gap: 2px; padding-top: 3px; padding-bottom: 3px; } .hoursTable.hoursEntry tr.hsRow input { width: 100%; font-size: 16px; line-height: 1; padding: 1px 3px; box-sizing: border-box; height: 24px; margin: 0; } /* 16px = no iOS zoom on focus */ }