diff --git a/static/css/admin.css b/static/css/admin.css index a764b2c..9121a71 100644 --- a/static/css/admin.css +++ b/static/css/admin.css @@ -1,312 +1,639 @@ /* ============================================ WIXON Blog Admin Styles + Best Practices Applied ============================================ */ -/* Admin Layout */ +/* Reset & Base */ +.admin-body { + margin: 0; + padding: 0; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; + font-size: 14px; + line-height: 1.5; + background: #f4f6f9; + color: #333; +} + +.admin-body * { + box-sizing: border-box; +} + +/* Admin Layout - Flexbox */ .admin__wrap { display: flex; min-height: 100vh; + width: 100%; } -/* Sidebar */ +/* ============================================ + Sidebar + ============================================ */ .admin__sidebar { - width: 250px; - background: #1e1e2d; + width: 260px; + min-width: 260px; + background: linear-gradient(180deg, #1e1e2d 0%, #1a1a27 100%); color: #fff; - padding: 20px; position: fixed; + top: 0; + left: 0; height: 100vh; display: flex; flex-direction: column; + z-index: 1000; + overflow-y: auto; + box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1); } .admin__logo { + padding: 25px 20px; text-align: center; - margin-bottom: 30px; - padding-bottom: 20px; - border-bottom: 1px solid #3a3a4d; + border-bottom: 1px solid rgba(255, 255, 255, 0.1); +} + +.admin__logo a { + display: inline-block; } .admin__logo img { - max-width: 120px; + max-width: 100px; + height: auto; + filter: brightness(0) invert(1); } .admin__logo span { display: block; - color: #a2a3b7; - font-size: 12px; - margin-top: 5px; + color: #8a8a9e; + font-size: 11px; + text-transform: uppercase; + letter-spacing: 1px; + margin-top: 8px; } +/* Navigation Menu */ .admin__menu { list-style: none; - padding: 0; + padding: 20px 15px; margin: 0; flex: 1; } +.admin__menu li { + margin-bottom: 5px; +} + .admin__menu li a { display: flex; align-items: center; - padding: 12px 15px; - color: #a2a3b7; + padding: 12px 16px; + color: #b5b5c3; text-decoration: none; - border-radius: 5px; - margin-bottom: 5px; - transition: all 0.3s ease; + border-radius: 6px; + font-size: 14px; + font-weight: 500; + transition: all 0.2s ease; } -.admin__menu li a:hover, -.admin__menu li a.active { - background: #1b1b28; +.admin__menu li a:hover { + background: rgba(255, 255, 255, 0.05); color: #fff; } -.admin__menu li a span.uk-icon { - margin-right: 10px; +.admin__menu li a.active { + background: #901438; + color: #fff; + box-shadow: 0 4px 15px rgba(144, 20, 56, 0.3); +} + +.admin__menu li a .uk-icon { + margin-right: 12px; + opacity: 0.8; +} + +.admin__menu li a.active .uk-icon { + opacity: 1; } /* User Section */ .admin__user { - padding-top: 20px; - border-top: 1px solid #3a3a4d; + padding: 20px; + border-top: 1px solid rgba(255, 255, 255, 0.1); + background: rgba(0, 0, 0, 0.1); } .admin__user .user__name { - color: #fff; - font-weight: 500; - margin-bottom: 10px; display: block; + color: #fff; + font-weight: 600; + font-size: 14px; + margin-bottom: 12px; +} + +.admin__user .user__links { + display: flex; + gap: 15px; } .admin__user a { - color: #a2a3b7; + color: #8a8a9e; text-decoration: none; font-size: 13px; - margin-right: 15px; + transition: color 0.2s ease; } .admin__user a:hover { color: #fff; } -/* Main Content */ +/* ============================================ + Main Content Area + ============================================ */ .admin__content { flex: 1; - margin-left: 250px; + margin-left: 260px; padding: 30px; - background: #f5f5f5; + background: #f4f6f9; min-height: 100vh; + width: calc(100% - 260px); } -.admin__content h1 { - font-size: 24px; - margin-bottom: 25px; - color: #333; -} - -/* Stats Cards */ -.stat__card { - background: #fff; - border-radius: 8px; - padding: 25px; - box-shadow: 0 2px 10px rgba(0,0,0,0.05); -} - -.stat__card h3 { - font-size: 14px; - color: #666; - margin: 0 0 10px 0; - font-weight: 500; -} - -.stat__number { - font-size: 2.5em; - font-weight: bold; - color: #901438; - margin: 0; -} - -.stat__number.green { - color: #28a745; -} - -.stat__number.orange { - color: #fd7e14; -} - -.stat__number.red { - color: #dc3545; -} - -.stat__number.blue { - color: #007bff; -} - -/* Tables */ -.admin__table { - background: #fff; - border-radius: 8px; - overflow: hidden; - box-shadow: 0 2px 10px rgba(0,0,0,0.05); -} - -.admin__table table { - margin: 0; -} - -.admin__table th { - background: #f8f9fa; - font-weight: 600; - font-size: 13px; - color: #666; - text-transform: uppercase; -} - -.admin__table td { - vertical-align: middle; -} - -.admin__table .uk-icon-link { - margin-right: 8px; - color: #666; -} - -.admin__table .uk-icon-link:hover { - color: #901438; -} - -/* Labels */ -.uk-label { - font-size: 11px; - padding: 3px 8px; - border-radius: 3px; -} - -.uk-label-success { - background: #28a745; -} - -.uk-label-danger { - background: #dc3545; -} - -.uk-label-warning { - background: #fd7e14; -} - -/* Filter Form */ -.filter__form { - background: #fff; - padding: 20px; - border-radius: 8px; - margin-bottom: 20px; - box-shadow: 0 2px 10px rgba(0,0,0,0.05); -} - -/* Pagination */ -.admin__pagination { - margin-top: 20px; - padding: 20px; - background: #fff; - border-radius: 8px; - box-shadow: 0 2px 10px rgba(0,0,0,0.05); -} - -/* Forms */ -.admin__form { - background: #fff; - padding: 30px; - border-radius: 8px; - box-shadow: 0 2px 10px rgba(0,0,0,0.05); - max-width: 800px; -} - -.admin__form .uk-form-label { - font-weight: 600; - color: #333; -} - -/* Alerts */ -.admin__content .uk-alert { - border-radius: 5px; -} - -/* Action Buttons */ -.action__buttons { - display: flex; - gap: 10px; - margin-bottom: 20px; -} - -/* Header with actions */ +/* Page Header */ .page__header { display: flex; justify-content: space-between; align-items: center; - margin-bottom: 25px; + margin-bottom: 30px; + flex-wrap: wrap; + gap: 15px; } .page__header h1 { margin: 0; + font-size: 24px; + font-weight: 600; + color: #1e1e2d; } -/* Post Title Link */ +.admin__content > h1 { + font-size: 24px; + font-weight: 600; + color: #1e1e2d; + margin: 0 0 30px 0; +} + +/* ============================================ + Cards & Panels + ============================================ */ +.stat__card { + background: #fff; + border-radius: 10px; + padding: 25px; + box-shadow: 0 2px 15px rgba(0, 0, 0, 0.04); + border: 1px solid #eef0f3; + transition: transform 0.2s ease, box-shadow 0.2s ease; +} + +.stat__card:hover { + transform: translateY(-2px); + box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08); +} + +.stat__card h3 { + font-size: 13px; + color: #7e8299; + margin: 0 0 12px 0; + font-weight: 500; + text-transform: uppercase; + letter-spacing: 0.5px; +} + +.stat__number { + font-size: 2.2rem; + font-weight: 700; + color: #1e1e2d; + margin: 0; + line-height: 1; +} + +.stat__number.green { color: #1bc5bd; } +.stat__number.orange { color: #ffa800; } +.stat__number.red { color: #f64e60; } +.stat__number.blue { color: #3699ff; } + +/* ============================================ + Tables + ============================================ */ +.admin__table { + background: #fff; + border-radius: 10px; + overflow: hidden; + box-shadow: 0 2px 15px rgba(0, 0, 0, 0.04); + border: 1px solid #eef0f3; +} + +.admin__table .uk-table { + margin: 0; +} + +.admin__table .uk-table th { + background: #f8f9fc; + font-weight: 600; + font-size: 12px; + color: #7e8299; + text-transform: uppercase; + letter-spacing: 0.5px; + padding: 15px 20px; + border-bottom: 1px solid #eef0f3; +} + +.admin__table .uk-table td { + padding: 15px 20px; + vertical-align: middle; + border-bottom: 1px solid #eef0f3; + font-size: 14px; +} + +.admin__table .uk-table tbody tr:hover { + background: #f8f9fc; +} + +.admin__table .uk-table tbody tr:last-child td { + border-bottom: none; +} + +/* Table Links */ .post__title__link { - color: #333; + color: #1e1e2d; text-decoration: none; + font-weight: 500; } .post__title__link:hover { color: #901438; } -/* Responsive */ +/* Table Actions */ +.admin__table .uk-icon-link { + color: #b5b5c3; + margin-right: 10px; + transition: color 0.2s ease; +} + +.admin__table .uk-icon-link:hover { + color: #901438; +} + +/* ============================================ + Labels & Badges + ============================================ */ +.uk-label { + font-size: 11px; + font-weight: 600; + padding: 4px 10px; + border-radius: 4px; + text-transform: uppercase; + letter-spacing: 0.3px; +} + +.uk-label-success { + background: #c9f7f5; + color: #1bc5bd; +} + +.uk-label-warning { + background: #fff4de; + color: #ffa800; +} + +.uk-label-danger { + background: #ffe2e5; + color: #f64e60; +} + +/* ============================================ + Filter Form + ============================================ */ +.filter__form { + background: #fff; + padding: 20px 25px; + border-radius: 10px; + margin-bottom: 25px; + box-shadow: 0 2px 15px rgba(0, 0, 0, 0.04); + border: 1px solid #eef0f3; +} + +.filter__form .uk-select, +.filter__form .uk-input { + border: 1px solid #e4e6ef; + border-radius: 6px; + height: 42px; + font-size: 14px; +} + +.filter__form .uk-select:focus, +.filter__form .uk-input:focus { + border-color: #901438; + outline: none; +} + +.filter__form .uk-button { + height: 42px; + border-radius: 6px; + font-weight: 500; +} + +/* ============================================ + Pagination + ============================================ */ +.admin__pagination { + background: #fff; + padding: 20px 25px; + border-radius: 10px; + margin-top: 25px; + box-shadow: 0 2px 15px rgba(0, 0, 0, 0.04); + border: 1px solid #eef0f3; +} + +.admin__pagination .uk-pagination { + margin: 0; +} + +.admin__pagination .uk-pagination > li > a, +.admin__pagination .uk-pagination > li > span { + padding: 8px 14px; + border-radius: 6px; + font-size: 14px; +} + +.admin__pagination .uk-pagination > .uk-active > span { + background: #901438; + color: #fff; +} + +/* ============================================ + Forms + ============================================ */ +.admin__form { + background: #fff; + padding: 35px; + border-radius: 10px; + box-shadow: 0 2px 15px rgba(0, 0, 0, 0.04); + border: 1px solid #eef0f3; + max-width: 900px; +} + +.admin__form .uk-form-label { + font-weight: 600; + color: #1e1e2d; + font-size: 14px; + margin-bottom: 8px; + display: block; +} + +.admin__form .uk-input, +.admin__form .uk-select, +.admin__form .uk-textarea { + border: 1px solid #e4e6ef; + border-radius: 6px; + font-size: 14px; + padding: 10px 15px; +} + +.admin__form .uk-input:focus, +.admin__form .uk-select:focus, +.admin__form .uk-textarea:focus { + border-color: #901438; + outline: none; + box-shadow: 0 0 0 3px rgba(144, 20, 56, 0.1); +} + +.admin__form .uk-margin { + margin-bottom: 25px; +} + +/* ============================================ + Buttons + ============================================ */ +.uk-button-primary { + background: #901438; + border: none; + border-radius: 6px; + font-weight: 500; + transition: all 0.2s ease; +} + +.uk-button-primary:hover { + background: #7a1130; + transform: translateY(-1px); +} + +.uk-button-default { + background: #f5f8fa; + border: 1px solid #e4e6ef; + border-radius: 6px; + color: #7e8299; + font-weight: 500; +} + +.uk-button-default:hover { + background: #eef0f3; + color: #1e1e2d; +} + +.uk-button-danger { + background: #f64e60; + border: none; + border-radius: 6px; +} + +.uk-button-danger:hover { + background: #ee2d41; +} + +.uk-button-secondary { + background: #e4e6ef; + color: #7e8299; + border: none; + border-radius: 6px; +} + +.uk-button-secondary:hover { + background: #d6d8e1; + color: #1e1e2d; +} + +/* ============================================ + Alerts + ============================================ */ +.admin__content .uk-alert { + border-radius: 8px; + padding: 15px 20px; + margin-bottom: 25px; +} + +.admin__content .uk-alert-primary { + background: #e1f0ff; + color: #3699ff; + border-left: 4px solid #3699ff; +} + +.admin__content .uk-alert-success { + background: #c9f7f5; + color: #1bc5bd; + border-left: 4px solid #1bc5bd; +} + +.admin__content .uk-alert-warning { + background: #fff4de; + color: #ffa800; + border-left: 4px solid #ffa800; +} + +.admin__content .uk-alert-danger { + background: #ffe2e5; + color: #f64e60; + border-left: 4px solid #f64e60; +} + +/* ============================================ + Quick Links (Dashboard) + ============================================ */ +.admin__content .uk-card { + border-radius: 10px; + border: 1px solid #eef0f3; + transition: all 0.2s ease; +} + +.admin__content .uk-card:hover { + transform: translateY(-3px); + box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08); +} + +.admin__content .uk-card .uk-icon { + color: #901438; +} + +/* ============================================ + Summernote Editor Override + ============================================ */ +.note-editor.note-frame { + border: 1px solid #e4e6ef; + border-radius: 6px; +} + +.note-editor .note-toolbar { + background: #f8f9fc; + border-bottom: 1px solid #e4e6ef; +} + +/* ============================================ + Responsive Design + ============================================ */ +@media (max-width: 1200px) { + .admin__sidebar { + width: 220px; + min-width: 220px; + } + + .admin__content { + margin-left: 220px; + width: calc(100% - 220px); + } +} + @media (max-width: 960px) { .admin__sidebar { width: 70px; - padding: 15px 10px; + min-width: 70px; + } + + .admin__sidebar .admin__logo { + padding: 20px 10px; } .admin__sidebar .admin__logo img { - max-width: 40px; + max-width: 35px; } - .admin__sidebar .admin__logo span, - .admin__menu li a span:not(.uk-icon), - .admin__user .user__name { + .admin__sidebar .admin__logo span { display: none; } + .admin__menu { + padding: 15px 8px; + } + .admin__menu li a { justify-content: center; padding: 12px; } - .admin__menu li a span.uk-icon { + .admin__menu li a .uk-icon { margin-right: 0; } + .admin__menu li a span:not(.uk-icon) { + display: none; + } + + .admin__user { + padding: 15px 8px; + text-align: center; + } + + .admin__user .user__name { + display: none; + } + .admin__user a { display: block; - text-align: center; - margin: 5px 0; + margin: 8px 0; + font-size: 11px; } .admin__content { margin-left: 70px; + width: calc(100% - 70px); padding: 20px; } } -@media (max-width: 640px) { +@media (max-width: 768px) { .page__header { flex-direction: column; align-items: flex-start; - gap: 15px; } .filter__form .uk-grid > div { - margin-bottom: 10px; + margin-bottom: 15px; + } + + .admin__table { + overflow-x: auto; + } + + .admin__table .uk-table { + min-width: 700px; + } + + .stat__card { + padding: 20px; + } + + .stat__number { + font-size: 1.8rem; + } +} + +@media (max-width: 480px) { + .admin__content { + padding: 15px; + } + + .admin__form { + padding: 20px; + } + + .page__header h1 { + font-size: 20px; } } diff --git a/templates/admin/base_admin.html b/templates/admin/base_admin.html index e1fd69a..d28029b 100644 --- a/templates/admin/base_admin.html +++ b/templates/admin/base_admin.html @@ -5,7 +5,6 @@ - @@ -15,7 +14,7 @@ {% block staticfiles %}{% endblock %} -
+