new translation fix and some overall imrpovement to how the tournament and league workflow works.
This commit is contained in:
@@ -0,0 +1,523 @@
|
||||
/* ============================================================================
|
||||
TV_APP - Responsive Design System
|
||||
Media queries and responsive utilities
|
||||
============================================================================ */
|
||||
|
||||
/* ============================================================================
|
||||
Breakpoints
|
||||
============================================================================
|
||||
Mobile First Approach:
|
||||
- Base: Mobile (< 480px)
|
||||
- Small: 480px - 768px
|
||||
- Medium: 768px - 992px
|
||||
- Large: 992px+
|
||||
============================================================================ */
|
||||
|
||||
/* ============================================================================
|
||||
Extra Small Devices (Mobile) - max-width: 480px
|
||||
============================================================================ */
|
||||
|
||||
@media (max-width: 480px) {
|
||||
/* Typography */
|
||||
h1 { font-size: 1.5rem; }
|
||||
h2 { font-size: 1.3rem; }
|
||||
h3 { font-size: 1.1rem; }
|
||||
h4 { font-size: 1rem; }
|
||||
|
||||
/* Navbar */
|
||||
.navbar {
|
||||
padding: 8px 12px;
|
||||
height: auto;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.navbar-brand {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.navbar-brand img {
|
||||
height: 35px;
|
||||
}
|
||||
|
||||
.navbar-title {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.navbar-center {
|
||||
position: static;
|
||||
transform: none;
|
||||
width: 100%;
|
||||
margin-top: var(--spacing-xs);
|
||||
}
|
||||
|
||||
.navbar-controls {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.nav-btn {
|
||||
padding: 8px 12px;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
/* Buttons */
|
||||
.btn,
|
||||
.action-btn,
|
||||
.control-btn {
|
||||
padding: 8px 12px;
|
||||
font-size: 0.85rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.btn-icon {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
}
|
||||
|
||||
.btn-group {
|
||||
width: 100%;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.btn-group > .btn {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Cards */
|
||||
.card,
|
||||
.section,
|
||||
.archive-card {
|
||||
padding: 12px;
|
||||
margin-bottom: var(--spacing-md);
|
||||
}
|
||||
|
||||
.card-header {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: var(--spacing-md);
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.card-footer {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.card-footer .btn {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Forms */
|
||||
.form-group {
|
||||
margin-bottom: var(--spacing-md);
|
||||
}
|
||||
|
||||
.form-input,
|
||||
.search-input,
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
padding: 10px 12px;
|
||||
font-size: 16px; /* Prevents zoom on iOS */
|
||||
}
|
||||
|
||||
/* Modals */
|
||||
.modal,
|
||||
.modal-content {
|
||||
max-width: 95%;
|
||||
width: 95%;
|
||||
max-height: 95vh;
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
padding: 12px;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.modal-footer .btn {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Tables */
|
||||
.table {
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.table th,
|
||||
.table td {
|
||||
padding: 8px 10px;
|
||||
}
|
||||
|
||||
/* Grids */
|
||||
.grid {
|
||||
grid-template-columns: 1fr !important;
|
||||
}
|
||||
|
||||
/* Utilities */
|
||||
.hide-mobile {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* Spacing */
|
||||
.mt-4 { margin-top: var(--spacing-lg); }
|
||||
.mb-4 { margin-bottom: var(--spacing-lg); }
|
||||
}
|
||||
|
||||
/* ============================================================================
|
||||
Small Devices (Small Mobile/Tablet) - 480px to 768px
|
||||
============================================================================ */
|
||||
|
||||
@media (min-width: 480px) and (max-width: 768px) {
|
||||
/* Typography */
|
||||
h1 { font-size: 1.6rem; }
|
||||
h2 { font-size: 1.4rem; }
|
||||
h3 { font-size: 1.2rem; }
|
||||
|
||||
/* Navbar */
|
||||
.navbar {
|
||||
padding: 12px 18px;
|
||||
height: auto;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.navbar-title {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.navbar-center {
|
||||
position: static;
|
||||
transform: none;
|
||||
width: 100%;
|
||||
order: 3;
|
||||
}
|
||||
|
||||
.nav-btn {
|
||||
padding: 10px 15px;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
/* Buttons */
|
||||
.btn,
|
||||
.action-btn {
|
||||
padding: 10px 15px;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.btn-icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
/* Cards */
|
||||
.card,
|
||||
.section {
|
||||
padding: 15px;
|
||||
margin-bottom: var(--spacing-lg);
|
||||
}
|
||||
|
||||
/* Forms */
|
||||
.form-group {
|
||||
margin-bottom: var(--spacing-lg);
|
||||
}
|
||||
|
||||
.form-input,
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
font-size: 16px; /* Prevents zoom on iOS */
|
||||
}
|
||||
|
||||
/* Grids */
|
||||
.grid {
|
||||
grid-template-columns: repeat(2, 1fr) !important;
|
||||
}
|
||||
|
||||
/* Utilities */
|
||||
.hide-sm {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* ============================================================================
|
||||
Medium Devices (Tablets) - 768px to 992px
|
||||
============================================================================ */
|
||||
|
||||
@media (min-width: 768px) and (max-width: 992px) {
|
||||
/* Navbar */
|
||||
.navbar {
|
||||
padding: 12px 20px;
|
||||
}
|
||||
|
||||
/* Buttons */
|
||||
.btn,
|
||||
.action-btn {
|
||||
padding: 11px 17px;
|
||||
font-size: 0.92rem;
|
||||
}
|
||||
|
||||
/* Grids */
|
||||
.grid {
|
||||
grid-template-columns: repeat(2, 1fr) !important;
|
||||
}
|
||||
|
||||
/* Utilities */
|
||||
.hide-md {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* ============================================================================
|
||||
Large Devices (Desktop) - 992px+
|
||||
============================================================================ */
|
||||
|
||||
@media (min-width: 992px) {
|
||||
/* Utilities */
|
||||
.hide-lg {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* ============================================================================
|
||||
Landscape Mobile - max-height: 500px with landscape orientation
|
||||
============================================================================ */
|
||||
|
||||
@media (max-height: 500px) and (orientation: landscape) {
|
||||
/* Navbar */
|
||||
.navbar {
|
||||
padding: 8px 12px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.navbar-title {
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
/* Buttons */
|
||||
.btn,
|
||||
.action-btn,
|
||||
.nav-btn {
|
||||
padding: 6px 12px;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.btn-icon {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
}
|
||||
|
||||
/* Cards */
|
||||
.card {
|
||||
padding: 12px;
|
||||
margin-bottom: var(--spacing-md);
|
||||
}
|
||||
|
||||
/* Forms */
|
||||
.form-group {
|
||||
margin-bottom: var(--spacing-md);
|
||||
}
|
||||
|
||||
.form-input,
|
||||
input {
|
||||
padding: 8px 12px;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
/* Tables */
|
||||
.table {
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.table th,
|
||||
.table td {
|
||||
padding: 6px 10px;
|
||||
}
|
||||
|
||||
/* Hide less important elements */
|
||||
.navbar-status {
|
||||
font-size: 0.8rem;
|
||||
padding: 4px 8px;
|
||||
}
|
||||
}
|
||||
|
||||
/* ============================================================================
|
||||
Portrait Orientation - max-width: 600px
|
||||
============================================================================ */
|
||||
|
||||
@media (max-width: 600px) and (orientation: portrait) {
|
||||
/* Optimize for portrait */
|
||||
body {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.container {
|
||||
padding-left: 12px;
|
||||
padding-right: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
/* ============================================================================
|
||||
High Resolution Displays (Retina - min-width: 1920px)
|
||||
============================================================================ */
|
||||
|
||||
@media (min-width: 1920px) {
|
||||
/* Typography */
|
||||
h1 { font-size: 2.5rem; }
|
||||
h2 { font-size: 2rem; }
|
||||
|
||||
/* Buttons */
|
||||
.btn,
|
||||
.action-btn {
|
||||
padding: 13px 20px;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
/* Cards */
|
||||
.card {
|
||||
padding: 25px;
|
||||
}
|
||||
|
||||
/* Container max-width */
|
||||
.container {
|
||||
max-width: 1800px;
|
||||
}
|
||||
}
|
||||
|
||||
/* ============================================================================
|
||||
Print Media
|
||||
============================================================================ */
|
||||
|
||||
@media print {
|
||||
/* Hide interactive elements */
|
||||
.navbar,
|
||||
.btn,
|
||||
.action-btn,
|
||||
button,
|
||||
.modal,
|
||||
.modal-overlay,
|
||||
.alert-close,
|
||||
.modal-close {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* Optimize for printing */
|
||||
body {
|
||||
background: white;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.card,
|
||||
.section {
|
||||
page-break-inside: avoid;
|
||||
box-shadow: none;
|
||||
border: 1px solid #ccc;
|
||||
}
|
||||
|
||||
.table {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.table th,
|
||||
.table td {
|
||||
border: 1px solid #ccc;
|
||||
}
|
||||
|
||||
a {
|
||||
color: black;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a[href]::after {
|
||||
content: " (" attr(href) ")";
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* ============================================================================
|
||||
Reduced Motion (Accessibility)
|
||||
============================================================================ */
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
animation-duration: 0.01ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* ============================================================================
|
||||
Dark Mode (if user preference exists)
|
||||
============================================================================ */
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
/* Optional: Add dark mode support here */
|
||||
/* This requires additional CSS variables or overrides */
|
||||
}
|
||||
|
||||
/* ============================================================================
|
||||
Utility Classes for Responsive Control
|
||||
============================================================================ */
|
||||
|
||||
.show-mobile { display: none; }
|
||||
@media (max-width: 768px) {
|
||||
.show-mobile { display: block; }
|
||||
.hide-mobile { display: none !important; }
|
||||
}
|
||||
|
||||
.show-tablet { display: none; }
|
||||
@media (min-width: 768px) and (max-width: 1024px) {
|
||||
.show-tablet { display: block; }
|
||||
.hide-tablet { display: none !important; }
|
||||
}
|
||||
|
||||
.show-desktop { display: none; }
|
||||
@media (min-width: 1024px) {
|
||||
.show-desktop { display: block; }
|
||||
.hide-desktop { display: none !important; }
|
||||
}
|
||||
|
||||
/* ============================================================================
|
||||
Flex Responsive
|
||||
============================================================================ */
|
||||
|
||||
.flex-responsive {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: var(--spacing-md);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.flex-responsive {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
/* ============================================================================
|
||||
Grid Responsive
|
||||
============================================================================ */
|
||||
|
||||
.grid-responsive {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
gap: var(--spacing-lg);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.grid-responsive {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user