Compare commits
2 Commits
16646b3062
...
0400509b6e
| Author | SHA1 | Date |
|---|---|---|
 Sean McElwain
|
0400509b6e | |
|
Sean McElwain
|
7b5485db61 |
|
|
@ -108,3 +108,843 @@ body { background: var(--shell-bg); }
|
|||
.global-topbar-username { display: none !important; }
|
||||
.main { padding: calc(var(--shell-topbar-height) + 1rem) 0.75rem 0.75rem 0.75rem !important; }
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/* ===== mobile shell scaling tune ===== */
|
||||
@media (max-width: 900px) {
|
||||
:root {
|
||||
--shell-topbar-height: 46px;
|
||||
--shell-rail-closed: 34px;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
padding: 0.5rem 0.2rem 0.75rem 0.2rem !important;
|
||||
}
|
||||
|
||||
.sidebar-toggle {
|
||||
width: 20px !important;
|
||||
height: 15px !important;
|
||||
flex: 0 0 20px !important;
|
||||
}
|
||||
|
||||
.sidebar-top {
|
||||
min-height: 30px !important;
|
||||
margin-bottom: 0.65rem !important;
|
||||
padding: 0 0.35rem !important;
|
||||
}
|
||||
|
||||
.nav-list {
|
||||
gap: 0.2rem !important;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
padding: 0.55rem 0.3rem !important;
|
||||
border-radius: 9px !important;
|
||||
}
|
||||
|
||||
.nav-link-short {
|
||||
font-size: 0.72rem !important;
|
||||
min-width: 0.8rem !important;
|
||||
}
|
||||
|
||||
.main {
|
||||
padding: calc(var(--shell-topbar-height) + 0.55rem) 0.55rem 0.7rem 0.55rem !important;
|
||||
}
|
||||
|
||||
.global-topbar {
|
||||
min-height: var(--shell-topbar-height) !important;
|
||||
padding: 0.3rem 0.55rem 0.3rem 0.45rem !important;
|
||||
}
|
||||
|
||||
.global-topbar-right {
|
||||
gap: 0.3rem !important;
|
||||
max-width: calc(100vw - 3rem) !important;
|
||||
}
|
||||
|
||||
.global-topbar-user {
|
||||
line-height: 1 !important;
|
||||
}
|
||||
|
||||
.global-topbar-name {
|
||||
font-size: 0.7rem !important;
|
||||
}
|
||||
|
||||
.global-topbar-username {
|
||||
font-size: 0.58rem !important;
|
||||
}
|
||||
|
||||
.global-topbar-logout {
|
||||
padding: 0.28rem 0.55rem !important;
|
||||
border-radius: 8px !important;
|
||||
font-size: 0.82rem !important;
|
||||
}
|
||||
|
||||
.global-topbar .badge {
|
||||
padding: 0.18rem 0.42rem !important;
|
||||
font-size: 0.62rem !important;
|
||||
}
|
||||
}
|
||||
/* ===== end mobile shell scaling tune ===== */
|
||||
|
||||
|
||||
/* ===== mobile topbar normalize ===== */
|
||||
@media (max-width: 900px) {
|
||||
:root {
|
||||
--shell-topbar-height: 42px;
|
||||
--shell-rail-closed: 34px;
|
||||
}
|
||||
|
||||
.global-topbar {
|
||||
min-height: var(--shell-topbar-height) !important;
|
||||
padding: 0.22rem 0.45rem 0.22rem 0.38rem !important;
|
||||
}
|
||||
|
||||
.global-topbar-right {
|
||||
gap: 0.22rem !important;
|
||||
align-items: center !important;
|
||||
flex-wrap: nowrap !important;
|
||||
overflow: visible !important;
|
||||
}
|
||||
|
||||
.global-topbar-user {
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
align-items: flex-end !important;
|
||||
line-height: 1 !important;
|
||||
min-width: 0 !important;
|
||||
}
|
||||
|
||||
.global-topbar-name {
|
||||
font-size: 0.68rem !important;
|
||||
line-height: 1 !important;
|
||||
font-weight: 700 !important;
|
||||
}
|
||||
|
||||
.global-topbar-username {
|
||||
display: block !important;
|
||||
font-size: 0.54rem !important;
|
||||
line-height: 1 !important;
|
||||
opacity: 0.95 !important;
|
||||
margin-top: 0.08rem !important;
|
||||
}
|
||||
|
||||
.global-topbar .badge {
|
||||
display: inline-flex !important;
|
||||
align-items: center !important;
|
||||
justify-content: center !important;
|
||||
font-size: 0.58rem !important;
|
||||
padding: 0.14rem 0.34rem !important;
|
||||
border-radius: 999px !important;
|
||||
white-space: nowrap !important;
|
||||
}
|
||||
|
||||
.global-topbar-logout {
|
||||
font-size: 0.72rem !important;
|
||||
padding: 0.22rem 0.46rem !important;
|
||||
min-height: 0 !important;
|
||||
border-radius: 10px !important;
|
||||
white-space: nowrap !important;
|
||||
}
|
||||
}
|
||||
/* ===== end mobile topbar normalize ===== */
|
||||
|
||||
|
||||
/* ===== mobile topbar pass 2 ===== */
|
||||
@media (max-width: 900px) {
|
||||
:root {
|
||||
--shell-topbar-height: 38px;
|
||||
--shell-rail-closed: 34px;
|
||||
}
|
||||
|
||||
.global-topbar {
|
||||
min-height: var(--shell-topbar-height) !important;
|
||||
padding: 0.14rem 0.35rem 0.14rem 0.3rem !important;
|
||||
}
|
||||
|
||||
.global-topbar-right {
|
||||
gap: 0.18rem !important;
|
||||
align-items: center !important;
|
||||
flex-wrap: nowrap !important;
|
||||
}
|
||||
|
||||
.global-topbar-user {
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
align-items: flex-end !important;
|
||||
justify-content: center !important;
|
||||
line-height: 1 !important;
|
||||
}
|
||||
|
||||
.global-topbar-name {
|
||||
font-size: 0.63rem !important;
|
||||
line-height: 1 !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
.global-topbar-username {
|
||||
display: block !important;
|
||||
font-size: 0.49rem !important;
|
||||
line-height: 1 !important;
|
||||
margin-top: 0.05rem !important;
|
||||
opacity: 0.95 !important;
|
||||
}
|
||||
|
||||
.global-topbar .badge {
|
||||
font-size: 0.54rem !important;
|
||||
line-height: 1 !important;
|
||||
padding: 0.12rem 0.28rem !important;
|
||||
min-height: 0 !important;
|
||||
}
|
||||
|
||||
.global-topbar-logout {
|
||||
font-size: 0.66rem !important;
|
||||
line-height: 1 !important;
|
||||
padding: 0.18rem 0.38rem !important;
|
||||
min-height: 1.7rem !important;
|
||||
border-radius: 999px !important;
|
||||
}
|
||||
}
|
||||
/* ===== end mobile topbar pass 2 ===== */
|
||||
|
||||
|
||||
/* ===== mobile content offset fix ===== */
|
||||
@media (max-width: 900px) {
|
||||
.main {
|
||||
padding-top: calc(var(--shell-topbar-height) + 0.95rem) !important;
|
||||
}
|
||||
|
||||
.main-content {
|
||||
padding-top: 0.15rem !important;
|
||||
}
|
||||
|
||||
.global-topbar {
|
||||
z-index: 1001 !important;
|
||||
}
|
||||
}
|
||||
/* ===== end mobile content offset fix ===== */
|
||||
|
||||
|
||||
|
||||
|
||||
/* ===== dedicated mobile nav button ===== */
|
||||
.mobile-nav-toggle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.sidebar-toggle {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.mobile-nav-toggle {
|
||||
display: flex !important;
|
||||
position: fixed !important;
|
||||
top: 0.55rem !important;
|
||||
left: 0.55rem !important;
|
||||
z-index: 1300 !important;
|
||||
width: 28px !important;
|
||||
height: 22px !important;
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
border: 0 !important;
|
||||
background: transparent !important;
|
||||
box-shadow: none !important;
|
||||
border-radius: 0 !important;
|
||||
flex-direction: column !important;
|
||||
justify-content: space-between !important;
|
||||
align-items: stretch !important;
|
||||
min-height: 0 !important;
|
||||
}
|
||||
|
||||
.mobile-nav-toggle span {
|
||||
display: block !important;
|
||||
width: 100% !important;
|
||||
height: 3px !important;
|
||||
border-radius: 999px !important;
|
||||
background: #cbd5e1 !important;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
padding-top: 2.6rem !important;
|
||||
}
|
||||
}
|
||||
/* ===== end dedicated mobile nav button ===== */
|
||||
|
||||
|
||||
/* ===== mobile nav refine ===== */
|
||||
@media (max-width: 900px) {
|
||||
:root {
|
||||
--shell-topbar-height: 38px;
|
||||
--shell-rail-closed: 32px;
|
||||
}
|
||||
|
||||
.mobile-nav-toggle {
|
||||
top: 0.8rem !important;
|
||||
left: 0.42rem !important;
|
||||
width: 22px !important;
|
||||
height: 16px !important;
|
||||
z-index: 1300 !important;
|
||||
}
|
||||
|
||||
.mobile-nav-toggle span {
|
||||
height: 2px !important;
|
||||
background: #dbe4f0 !important;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
width: var(--shell-rail-closed) !important;
|
||||
padding-top: 3.2rem !important;
|
||||
padding-left: 0.12rem !important;
|
||||
padding-right: 0.12rem !important;
|
||||
}
|
||||
|
||||
.app-shell.nav-open .sidebar {
|
||||
width: 170px !important;
|
||||
}
|
||||
|
||||
.nav-list {
|
||||
gap: 0.16rem !important;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
padding: 0.46rem 0.18rem !important;
|
||||
border-radius: 10px !important;
|
||||
}
|
||||
|
||||
.nav-link-short {
|
||||
font-size: 0.66rem !important;
|
||||
}
|
||||
|
||||
.main {
|
||||
padding-top: calc(var(--shell-topbar-height) + 0.85rem) !important;
|
||||
padding-left: 0.45rem !important;
|
||||
padding-right: 0.45rem !important;
|
||||
padding-bottom: 0.6rem !important;
|
||||
}
|
||||
|
||||
.global-topbar {
|
||||
padding-left: 2.45rem !important;
|
||||
padding-right: 0.32rem !important;
|
||||
}
|
||||
|
||||
.global-topbar-name {
|
||||
font-size: 0.61rem !important;
|
||||
}
|
||||
|
||||
.global-topbar-username {
|
||||
font-size: 0.47rem !important;
|
||||
}
|
||||
|
||||
.global-topbar .badge {
|
||||
font-size: 0.5rem !important;
|
||||
padding: 0.1rem 0.26rem !important;
|
||||
}
|
||||
|
||||
.global-topbar-logout {
|
||||
font-size: 0.63rem !important;
|
||||
padding: 0.16rem 0.34rem !important;
|
||||
min-height: 1.55rem !important;
|
||||
}
|
||||
}
|
||||
/* ===== end mobile nav refine ===== */
|
||||
|
||||
|
||||
/* ===== mobile refine 3 ===== */
|
||||
@media (max-width: 900px) {
|
||||
:root {
|
||||
--shell-topbar-height: 36px;
|
||||
--shell-rail-closed: 28px;
|
||||
}
|
||||
|
||||
.mobile-nav-toggle {
|
||||
top: 0.72rem !important;
|
||||
left: 0.34rem !important;
|
||||
width: 20px !important;
|
||||
height: 15px !important;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
width: var(--shell-rail-closed) !important;
|
||||
padding-top: 3.05rem !important;
|
||||
padding-left: 0.08rem !important;
|
||||
padding-right: 0.08rem !important;
|
||||
}
|
||||
|
||||
.app-shell.nav-open .sidebar {
|
||||
width: 158px !important;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
padding: 0.4rem 0.12rem !important;
|
||||
border-radius: 9px !important;
|
||||
}
|
||||
|
||||
.nav-link-short {
|
||||
font-size: 0.62rem !important;
|
||||
}
|
||||
|
||||
.main {
|
||||
padding-top: calc(var(--shell-topbar-height) + 0.8rem) !important;
|
||||
padding-left: 0.8rem !important;
|
||||
padding-right: 0.42rem !important;
|
||||
padding-bottom: 0.55rem !important;
|
||||
}
|
||||
|
||||
.global-topbar {
|
||||
padding-left: 2.15rem !important;
|
||||
padding-right: 0.28rem !important;
|
||||
}
|
||||
|
||||
.global-topbar-name {
|
||||
font-size: 0.58rem !important;
|
||||
}
|
||||
|
||||
.global-topbar-username {
|
||||
font-size: 0.44rem !important;
|
||||
}
|
||||
|
||||
.global-topbar .badge {
|
||||
font-size: 0.47rem !important;
|
||||
padding: 0.08rem 0.22rem !important;
|
||||
}
|
||||
|
||||
.global-topbar-logout {
|
||||
font-size: 0.58rem !important;
|
||||
padding: 0.14rem 0.3rem !important;
|
||||
min-height: 1.42rem !important;
|
||||
}
|
||||
}
|
||||
/* ===== end mobile refine 3 ===== */
|
||||
|
||||
|
||||
|
||||
|
||||
/* ===== mobile overlap/layout fix ===== */
|
||||
@media (max-width: 900px) {
|
||||
:root {
|
||||
--shell-topbar-height: 44px;
|
||||
--shell-rail-closed: 26px;
|
||||
}
|
||||
|
||||
.mobile-nav-toggle {
|
||||
top: 0.82rem !important;
|
||||
left: 0.34rem !important;
|
||||
width: 20px !important;
|
||||
height: 15px !important;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
width: var(--shell-rail-closed) !important;
|
||||
padding-top: 3.2rem !important;
|
||||
padding-left: 0.06rem !important;
|
||||
padding-right: 0.06rem !important;
|
||||
}
|
||||
|
||||
.app-shell.nav-open .sidebar {
|
||||
width: 154px !important;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
padding: 0.34rem 0.08rem !important;
|
||||
border-radius: 8px !important;
|
||||
}
|
||||
|
||||
.nav-link-short {
|
||||
font-size: 0.58rem !important;
|
||||
}
|
||||
|
||||
.main {
|
||||
padding-top: calc(var(--shell-topbar-height) + 1.15rem) !important;
|
||||
padding-left: 0.95rem !important;
|
||||
padding-right: 0.42rem !important;
|
||||
padding-bottom: 0.55rem !important;
|
||||
}
|
||||
|
||||
.main-content {
|
||||
padding-top: 0.28rem !important;
|
||||
}
|
||||
|
||||
.global-topbar {
|
||||
min-height: var(--shell-topbar-height) !important;
|
||||
padding-top: 0.16rem !important;
|
||||
padding-bottom: 0.16rem !important;
|
||||
padding-left: 2.25rem !important;
|
||||
padding-right: 0.28rem !important;
|
||||
}
|
||||
|
||||
.global-topbar-name {
|
||||
font-size: 0.58rem !important;
|
||||
}
|
||||
|
||||
.global-topbar-username {
|
||||
font-size: 0.44rem !important;
|
||||
}
|
||||
|
||||
.global-topbar .badge {
|
||||
font-size: 0.47rem !important;
|
||||
padding: 0.08rem 0.22rem !important;
|
||||
}
|
||||
|
||||
.global-topbar-logout {
|
||||
font-size: 0.58rem !important;
|
||||
padding: 0.14rem 0.3rem !important;
|
||||
min-height: 1.42rem !important;
|
||||
}
|
||||
}
|
||||
/* ===== end mobile overlap/layout fix ===== */
|
||||
|
||||
|
||||
/* ===== mobile side gap tighten ===== */
|
||||
@media (max-width: 900px) {
|
||||
.main {
|
||||
padding-left: 0.38rem !important;
|
||||
padding-right: 0.18rem !important;
|
||||
}
|
||||
|
||||
.main-content {
|
||||
padding-left: 0 !important;
|
||||
padding-right: 0 !important;
|
||||
}
|
||||
|
||||
.detail-sticky-header,
|
||||
.workspace-grid,
|
||||
.detail-view-mode-bar,
|
||||
.card {
|
||||
margin-left: 0 !important;
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
}
|
||||
/* ===== end mobile side gap tighten ===== */
|
||||
|
||||
|
||||
/* ===== mobile topbar trim ===== */
|
||||
@media (max-width: 900px) {
|
||||
:root {
|
||||
--shell-topbar-height: 38px;
|
||||
}
|
||||
|
||||
.global-topbar {
|
||||
min-height: var(--shell-topbar-height) !important;
|
||||
padding-top: 0.08rem !important;
|
||||
padding-bottom: 0.08rem !important;
|
||||
padding-left: 2.1rem !important;
|
||||
padding-right: 0.22rem !important;
|
||||
}
|
||||
|
||||
.mobile-nav-toggle {
|
||||
top: 0.62rem !important;
|
||||
}
|
||||
|
||||
.main {
|
||||
padding-top: calc(var(--shell-topbar-height) + 0.85rem) !important;
|
||||
}
|
||||
|
||||
.global-topbar-right {
|
||||
gap: 0.14rem !important;
|
||||
}
|
||||
}
|
||||
/* ===== end mobile topbar trim ===== */
|
||||
|
||||
|
||||
/* ===== mobile topbar blue height fix ===== */
|
||||
@media (max-width: 900px) {
|
||||
:root {
|
||||
--shell-topbar-height: 30px;
|
||||
}
|
||||
|
||||
.global-topbar {
|
||||
height: var(--shell-topbar-height) !important;
|
||||
min-height: var(--shell-topbar-height) !important;
|
||||
max-height: var(--shell-topbar-height) !important;
|
||||
padding-top: 0 !important;
|
||||
padding-bottom: 0 !important;
|
||||
padding-left: 2.1rem !important;
|
||||
padding-right: 0.22rem !important;
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
}
|
||||
|
||||
.global-topbar-right {
|
||||
height: 100% !important;
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
gap: 0.14rem !important;
|
||||
}
|
||||
|
||||
.global-topbar-user {
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
justify-content: center !important;
|
||||
line-height: 1 !important;
|
||||
}
|
||||
|
||||
.global-topbar-name {
|
||||
font-size: 0.56rem !important;
|
||||
line-height: 1 !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
.global-topbar-username {
|
||||
font-size: 0.42rem !important;
|
||||
line-height: 1 !important;
|
||||
margin-top: 0.02rem !important;
|
||||
}
|
||||
|
||||
.global-topbar .badge {
|
||||
font-size: 0.45rem !important;
|
||||
padding: 0.06rem 0.2rem !important;
|
||||
line-height: 1 !important;
|
||||
}
|
||||
|
||||
.global-topbar-logout {
|
||||
font-size: 0.56rem !important;
|
||||
padding: 0.12rem 0.28rem !important;
|
||||
min-height: 1.3rem !important;
|
||||
line-height: 1 !important;
|
||||
}
|
||||
|
||||
.mobile-nav-toggle {
|
||||
top: 0.48rem !important;
|
||||
}
|
||||
|
||||
.main {
|
||||
padding-top: calc(var(--shell-topbar-height) + 1.0rem) !important;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
padding-top: 2.7rem !important;
|
||||
}
|
||||
}
|
||||
/* ===== end mobile topbar blue height fix ===== */
|
||||
|
||||
|
||||
/* ===== mobile logout tune ===== */
|
||||
@media (max-width: 900px) {
|
||||
.global-topbar-logout {
|
||||
font-size: 0.52rem !important;
|
||||
line-height: 1 !important;
|
||||
padding: 0.08rem 0.24rem !important;
|
||||
min-height: 1.1rem !important;
|
||||
border-radius: 999px !important;
|
||||
border: 1px solid rgba(255,255,255,0.12) !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.global-topbar .badge {
|
||||
font-size: 0.43rem !important;
|
||||
padding: 0.05rem 0.18rem !important;
|
||||
}
|
||||
|
||||
.global-topbar-name {
|
||||
font-size: 0.54rem !important;
|
||||
}
|
||||
|
||||
.global-topbar-username {
|
||||
font-size: 0.4rem !important;
|
||||
}
|
||||
|
||||
.global-topbar-right {
|
||||
gap: 0.1rem !important;
|
||||
}
|
||||
}
|
||||
/* ===== end mobile logout tune ===== */
|
||||
|
||||
|
||||
/* ===== mobile header gap + logout square ===== */
|
||||
@media (max-width: 900px) {
|
||||
.global-topbar-logout {
|
||||
border-radius: 10px !important;
|
||||
padding: 0.1rem 0.24rem !important;
|
||||
min-height: 1.08rem !important;
|
||||
}
|
||||
|
||||
.main {
|
||||
padding-top: calc(var(--shell-topbar-height) + 0.55rem) !important;
|
||||
}
|
||||
|
||||
.main-content {
|
||||
padding-top: 0.02rem !important;
|
||||
}
|
||||
}
|
||||
/* ===== end mobile header gap + logout square ===== */
|
||||
|
||||
|
||||
/* ===== mobile rail cover fix ===== */
|
||||
@media (max-width: 900px) {
|
||||
.sidebar {
|
||||
background: #04163a !important;
|
||||
box-shadow: 2px 0 0 #04163a !important;
|
||||
z-index: 1205 !important;
|
||||
}
|
||||
|
||||
.mobile-nav-toggle {
|
||||
z-index: 1305 !important;
|
||||
}
|
||||
|
||||
.global-topbar {
|
||||
z-index: 1200 !important;
|
||||
}
|
||||
|
||||
.main {
|
||||
position: relative !important;
|
||||
z-index: 1 !important;
|
||||
}
|
||||
}
|
||||
/* ===== end mobile rail cover fix ===== */
|
||||
|
||||
|
||||
/* ===== mobile left offset fix ===== */
|
||||
@media (max-width: 900px) {
|
||||
.main {
|
||||
padding-left: 1.15rem !important;
|
||||
}
|
||||
|
||||
.main-content {
|
||||
margin-left: 0.1rem !important;
|
||||
}
|
||||
}
|
||||
/* ===== end mobile left offset fix ===== */
|
||||
|
||||
|
||||
|
||||
|
||||
/* ===== mobile sidebar brand cleanup ===== */
|
||||
@media (max-width: 900px) {
|
||||
.brand,
|
||||
.sidebar-section-title {
|
||||
display: none !important;
|
||||
visibility: hidden !important;
|
||||
opacity: 0 !important;
|
||||
max-height: 0 !important;
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
overflow-x: hidden !important;
|
||||
}
|
||||
|
||||
.app-shell.nav-open .sidebar {
|
||||
width: 154px !important;
|
||||
}
|
||||
|
||||
.app-shell:not(.nav-open) .nav-link-text,
|
||||
.app-shell:not(.nav-open) .brand,
|
||||
.app-shell:not(.nav-open) .sidebar-section-title {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
/* ===== end mobile sidebar brand cleanup ===== */
|
||||
|
||||
|
||||
/* ===== mobile side letters raise ===== */
|
||||
@media (max-width: 900px) {
|
||||
.sidebar {
|
||||
padding-top: 2.35rem !important;
|
||||
}
|
||||
|
||||
.nav-list {
|
||||
margin-top: -0.18rem !important;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
padding-top: 0.28rem !important;
|
||||
padding-bottom: 0.28rem !important;
|
||||
}
|
||||
}
|
||||
/* ===== end mobile side letters raise ===== */
|
||||
|
||||
|
||||
/* ===== mobile side letters nudge up ===== */
|
||||
@media (max-width: 900px) {
|
||||
.sidebar {
|
||||
padding-top: 2.05rem !important;
|
||||
}
|
||||
|
||||
.nav-list {
|
||||
margin-top: -0.08rem !important;
|
||||
}
|
||||
}
|
||||
/* ===== end mobile side letters nudge up ===== */
|
||||
|
||||
|
||||
/* ===== mobile hamburger-to-letters gap tighten ===== */
|
||||
@media (max-width: 900px) {
|
||||
.sidebar {
|
||||
padding-top: 1.52rem !important;
|
||||
}
|
||||
|
||||
.nav-list {
|
||||
margin-top: -0.28rem !important;
|
||||
gap: 0.08rem !important;
|
||||
}
|
||||
}
|
||||
/* ===== end mobile hamburger-to-letters gap tighten ===== */
|
||||
|
||||
|
||||
/* ===== mobile shell typography normalize ===== */
|
||||
@media (max-width: 900px) {
|
||||
.nav-link-short {
|
||||
font-size: 0.72rem !important;
|
||||
line-height: 1 !important;
|
||||
font-weight: 600 !important;
|
||||
}
|
||||
|
||||
.global-topbar-name {
|
||||
font-size: 0.72rem !important;
|
||||
line-height: 1 !important;
|
||||
font-weight: 600 !important;
|
||||
}
|
||||
|
||||
.global-topbar-username {
|
||||
font-size: 0.56rem !important;
|
||||
line-height: 1 !important;
|
||||
}
|
||||
|
||||
.global-topbar .badge {
|
||||
font-size: 0.58rem !important;
|
||||
line-height: 1 !important;
|
||||
}
|
||||
|
||||
.global-topbar-logout {
|
||||
font-size: 0.72rem !important;
|
||||
line-height: 1 !important;
|
||||
font-weight: 500 !important;
|
||||
}
|
||||
}
|
||||
/* ===== end mobile shell typography normalize ===== */
|
||||
|
||||
|
||||
|
||||
|
||||
/* ===== mobile spacing pass ===== */
|
||||
@media (max-width: 900px) {
|
||||
.sidebar {
|
||||
padding-top: 1.18rem !important;
|
||||
}
|
||||
|
||||
.nav-list {
|
||||
margin-top: -0.42rem !important;
|
||||
gap: 0.02rem !important;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
padding-top: 0.18rem !important;
|
||||
padding-bottom: 0.18rem !important;
|
||||
}
|
||||
|
||||
.main {
|
||||
padding-top: calc(var(--shell-topbar-height) + 0.18rem) !important;
|
||||
padding-left: 0.62rem !important;
|
||||
padding-right: 0.10rem !important;
|
||||
padding-bottom: 0.50rem !important;
|
||||
}
|
||||
|
||||
.main-content {
|
||||
padding-top: 0 !important;
|
||||
margin-top: 0 !important;
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
}
|
||||
/* ===== end mobile spacing pass ===== */
|
||||
|
|
|
|||
1563
app/static/app.css
1563
app/static/app.css
File diff suppressed because it is too large
Load Diff
|
|
@ -2,11 +2,15 @@
|
|||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>{% block title %}Document Processor{% endblock %}</title>
|
||||
<link rel="stylesheet" href="/static/app.css?v=26">
|
||||
<link rel="stylesheet" href="/static/app-shell.css?v=26">
|
||||
<link rel="stylesheet" href="/static/app.css?v=87">
|
||||
<link rel="stylesheet" href="/static/app-shell.css?v=66">
|
||||
</head>
|
||||
<body>
|
||||
<button id="mobile-nav-toggle" class="mobile-nav-toggle" type="button" aria-label="Toggle navigation">
|
||||
<span></span><span></span><span></span>
|
||||
</button>
|
||||
<div class="app-shell">
|
||||
{% include "partials/sidebar.html" %}
|
||||
{% include "partials/header.html" %}
|
||||
|
|
@ -18,13 +22,16 @@
|
|||
</main>
|
||||
</div>
|
||||
|
||||
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
const menuToggle = document.getElementById("menu-toggle");
|
||||
const mobileNavToggle = document.getElementById("mobile-nav-toggle");
|
||||
const appShell = document.querySelector(".app-shell");
|
||||
|
||||
if (menuToggle && appShell) {
|
||||
if (appShell) {
|
||||
const toggleNav = () => appShell.classList.toggle("nav-open");
|
||||
|
||||
if (menuToggle) {
|
||||
menuToggle.addEventListener("click", toggleNav);
|
||||
menuToggle.addEventListener("keydown", (e) => {
|
||||
if (e.key === "Enter" || e.key === " ") {
|
||||
|
|
@ -34,31 +41,34 @@
|
|||
});
|
||||
}
|
||||
|
||||
const tabButtons = document.querySelectorAll("[data-tab]");
|
||||
const tabPanels = document.querySelectorAll("[data-panel]");
|
||||
if (mobileNavToggle) {
|
||||
mobileNavToggle.addEventListener("click", toggleNav);
|
||||
}
|
||||
}
|
||||
|
||||
if (tabButtons.length && tabPanels.length) {
|
||||
const activateTab = (target) => {
|
||||
tabButtons.forEach((btn) => {
|
||||
btn.classList.toggle("active", btn.getAttribute("data-tab") === target);
|
||||
});
|
||||
tabPanels.forEach((panel) => {
|
||||
panel.classList.toggle("active", panel.getAttribute("data-panel") === target);
|
||||
const modeButtons = document.querySelectorAll("[data-detail-mode]");
|
||||
if (modeButtons.length) {
|
||||
const body = document.body;
|
||||
const key = "documentDetailMobileMode";
|
||||
const saved = localStorage.getItem(key) || "split";
|
||||
|
||||
const applyMode = (mode) => {
|
||||
body.classList.remove("detail-mode-split", "detail-mode-preview", "detail-mode-review");
|
||||
body.classList.add("detail-mode-" + mode);
|
||||
modeButtons.forEach((btn) => {
|
||||
btn.classList.toggle("active", btn.dataset.detailMode === mode);
|
||||
});
|
||||
localStorage.setItem(key, mode);
|
||||
};
|
||||
|
||||
tabButtons.forEach((btn) => {
|
||||
btn.addEventListener("click", () => {
|
||||
const target = btn.getAttribute("data-tab");
|
||||
activateTab(target);
|
||||
applyMode(saved);
|
||||
|
||||
const url = new URL(window.location.href);
|
||||
url.searchParams.set("tab", target);
|
||||
window.history.replaceState({}, "", url.toString());
|
||||
});
|
||||
modeButtons.forEach((btn) => {
|
||||
btn.addEventListener("click", () => applyMode(btn.dataset.detailMode));
|
||||
});
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -46,9 +46,10 @@
|
|||
</div>
|
||||
</div> <div class="card" style="margin-bottom: 0;">
|
||||
<div style="display:flex; flex-direction:column; gap:0.75rem;">
|
||||
|
||||
<div class="detail-doc-actions-row">
|
||||
<form method="post" action="/documents/{{ document.document_id }}/save-document-type" class="detail-doc-type-form">
|
||||
<div style="position:relative;">
|
||||
<form method="post" action="/documents/{{ document.document_id }}/save-document-type" class="detail-doc-type-form unified-top-form">
|
||||
<div class="detail-type-input-wrap" style="position:relative;">
|
||||
<label for="document_type_input">Document type</label>
|
||||
<input
|
||||
id="document_type_input"
|
||||
|
|
@ -61,27 +62,27 @@
|
|||
>
|
||||
<div id="document-type-suggestions" style="display:none; position:absolute; top:100%; left:0; right:0; z-index:20; background:#fff; border:1px solid #d7dce5; border-radius:12px; margin-top:0.35rem; max-height:220px; overflow-y:auto; box-shadow:0 10px 24px rgba(15,23,42,0.10);"></div>
|
||||
</div>
|
||||
<button type="submit" style="height:38px;">Update</button>
|
||||
</form>
|
||||
|
||||
<form method="post" action="/documents/{{ document.document_id }}/save-review-flags" class="detail-review-flags-form">
|
||||
<label class="detail-check-label">
|
||||
<label class="detail-check-label detail-check-inline">
|
||||
<input type="checkbox" name="is_approved" value="1" {% if review_state and review_state.is_approved %}checked{% endif %}>
|
||||
<span>Approved</span>
|
||||
</label>
|
||||
<label class="detail-check-label">
|
||||
|
||||
<label class="detail-check-label detail-check-inline">
|
||||
<input type="checkbox" name="is_excluded" value="1" {% if review_state and review_state.is_excluded %}checked{% endif %}>
|
||||
<span>Excluded</span>
|
||||
</label>
|
||||
<button type="submit" style="height:38px;">Save flags</button>
|
||||
|
||||
<button type="submit" class="top-pill-button">Update</button>
|
||||
</form>
|
||||
|
||||
<form method="post" action="/documents/{{ document.document_id }}/move-to-trash" class="detail-trash-form">
|
||||
<button class="danger" type="submit" style="height:38px;">Move to trash</button>
|
||||
<form method="post" action="/documents/{{ document.document_id }}/save-review-flags" class="detail-review-flags-form unified-flags-form">
|
||||
<button type="submit" class="top-pill-button">Save flags</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<form method="post" action="/documents/{{ document.document_id }}/save-pdf" style="display:flex; align-items:flex-end; gap:0.6rem; flex-wrap:wrap; margin:0;">
|
||||
<form method="post" action="/documents/{{ document.document_id }}/save-pdf" class="detail-save-pdf-form" style="display:flex; align-items:flex-end; gap:0.6rem; flex-wrap:wrap; margin:0;">
|
||||
<div class="detail-path-row" style="display:flex; align-items:flex-end; gap:0.6rem; width:100%; flex-wrap:nowrap;">
|
||||
<div style="flex:1; min-width:260px;">
|
||||
<label for="proposed_storage_path_input">Proposed path</label>
|
||||
<input
|
||||
|
|
@ -93,27 +94,25 @@
|
|||
readonly
|
||||
style="width:100%;"
|
||||
>
|
||||
<div id="path-override-hint" style="margin-top:0.35rem; font-size:0.85rem; color:#6b7280;">
|
||||
Uses the system path unless manually edited.
|
||||
</div>
|
||||
<button type="button" id="toggle-path-edit" class="top-pill-button">Edit path</button>
|
||||
</div>
|
||||
<button type="button" id="toggle-path-edit" style="height:38px;">Edit path</button>
|
||||
<button type="submit" class="btn btn-primary" style="height:38px;">Save Document</button>
|
||||
<button type="submit" class="btn btn-primary top-pill-button">Save Document</button>
|
||||
</form>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="queue-nav-row">
|
||||
{% if prev_doc %}
|
||||
<a class="button-link" href="/documents/{{ prev_doc.document_id }}">← Previous</a>
|
||||
{% endif %}
|
||||
{% if next_doc %}
|
||||
<a class="button-link" href="/documents/{{ next_doc.document_id }}">Next →</a>
|
||||
{% endif %}
|
||||
<form method="post" action="/documents/{{ document.document_id }}/move-to-trash" class="detail-trash-form detail-trash-inline">
|
||||
<button class="danger" type="submit">Move to trash</button>
|
||||
</form>
|
||||
<a class="button-link" href="/queue/">Back to Queue</a>
|
||||
{% if next_ocr_doc %}
|
||||
<a class="button-link" href="/documents/{{ next_ocr_doc.document_id }}">Next OCR review</a>
|
||||
{% endif %}
|
||||
{% if next_fields_doc %}
|
||||
<a class="button-link" href="/documents/{{ next_fields_doc.document_id }}">Next field extraction</a>
|
||||
<a class="button-link" href="/documents/{{ next_ocr_doc.document_id }}">Next in Queue</a>
|
||||
{% elif next_fields_doc %}
|
||||
<a class="button-link" href="/documents/{{ next_fields_doc.document_id }}">Next in Queue</a>
|
||||
{% elif next_doc %}
|
||||
<a class="button-link" href="/documents/{{ next_doc.document_id }}">Next in Queue</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -127,6 +126,12 @@
|
|||
{% endif %}
|
||||
|
||||
|
||||
<div class="detail-view-mode-bar">
|
||||
<button type="button" class="detail-view-mode-button active" data-detail-mode="split">Split</button>
|
||||
<button type="button" class="detail-view-mode-button" data-detail-mode="preview">PDF</button>
|
||||
<button type="button" class="detail-view-mode-button" data-detail-mode="review">Review</button>
|
||||
</div>
|
||||
|
||||
<div class="workspace-grid">
|
||||
<section>
|
||||
<div class="card preview-card">
|
||||
|
|
|
|||
Loading…
Reference in New Issue