workin

templates/base.html

@@ -16,23 +16,41 @@
 
         body {
             background-color: #f8f9fa;
+            line-height: 1.5;
+            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+            margin: 0;
+            padding: 0;
         }
 
         .navbar {
             background-color: var(--primary-color) !important;
+            padding: 0.5rem 1rem;
+            margin-bottom: 0 !important;
+        }
+
+        .container {
+            padding: 0 15px;
+        }
+
+        .scheme-detail-container {
+            padding-top: 15px;
+            padding-bottom: 15px;
         }
 
         .page-title {
             color: var(--primary-color);
-            margin-bottom: 2rem;
+            margin-bottom: 1rem;
             font-weight: 600;
+            font-size: 1.75rem;
+            line-height: 1.2;
         }
 
         .section-title {
             color: var(--primary-color);
-            font-size: 1.5rem;
-            margin-bottom: 1rem;
+            font-size: 1.25rem;
+            margin-bottom: 0.75rem;
             font-weight: 600;
+            line-height: 1.2;
         }
 
         /* Remove the grid layout for scheme-grid */
@@ -40,19 +58,37 @@
             /* Using Bootstrap's row system now */
         }
 
+        /* Card styling */
         .card {
             transition: transform 0.2s, box-shadow 0.2s;
             border: none;
             box-shadow: 0 2px 4px rgba(0,0,0,0.05);
-            height: 100%;
+            overflow: hidden;
+            border-radius: 0.5rem;
+            margin-bottom: 12px;
+            height: auto;
+            display: flex;
+            flex-direction: column;
         }
 
         .card:hover {
-            transform: translateY(-5px);
-            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+            transform: translateY(-2px);
+            box-shadow: 0 4px 8px rgba(0,0,0,0.08);
             background-color: rgba(43, 91, 53, 0.02);
         }
 
+        .card-body {
+            padding: 0.75rem;
+            flex: 0 1 auto;
+        }
+
+        .scheme-text {
+            font-size: 1rem;
+            line-height: 1.5;
+            color: #333;
+            margin-bottom: 0;
+        }
+
         .btn-primary {
             background-color: var(--primary-color);
             border-color: var(--primary-color);
@@ -76,13 +112,102 @@
             color: var(--primary-light);
         }
 
+        /* Improved list styling */
+        .list-group {
+            margin-bottom: 0;
+        }
+
         .list-group-item {
+            padding: 0.4rem 0.5rem;
             border-color: rgba(43, 91, 53, 0.1);
+            border-width: 1px 0;
+            border-radius: 0;
+            background-color: transparent;
+            margin: 0;
+            font-size: 1rem;
+        }
+        
+        .list-group-item:first-child {
+            border-top-width: 0;
+        }
+        
+        .list-group-item:last-child {
+            border-bottom-width: 0;
+        }
+        
+        .list-group-flush {
+            margin-bottom: 0;
+        }
+
+        /* Breadcrumb styling */
+        .breadcrumb {
+            padding: 0.5rem 0;
+            margin-bottom: 1rem;
+            background-color: transparent;
+        }
+
+        /* Responsive fixes */
+        @media (max-width: 991.98px) {
+            .sticky-lg-top {
+                position: static;
+            }
+            .container {
+                padding: 0 10px;
+            }
+            .card-body {
+                padding: 0.75rem;
+            }
+        }
+
+        /* Fix for empty spaces */
+        .py-2 {
+            padding-top: 0.4rem !important;
+            padding-bottom: 0.4rem !important;
+        }
+
+        .py-3 {
+            padding-top: 0.6rem !important;
+            padding-bottom: 0.6rem !important;
+        }
+
+        .py-4 {
+            padding-top: 0.8rem !important;
+            padding-bottom: 0.8rem !important;
+        }
+
+        .mb-0 {
+            margin-bottom: 0 !important;
+        }
+
+        .mb-2 {
+            margin-bottom: 0.4rem !important;
+        }
+
+        .mb-3 {
+            margin-bottom: 0.6rem !important;
+        }
+
+        .mb-4 {
+            margin-bottom: 0.8rem !important;
+        }
+
+        .g-3 {
+            gap: 0.5rem !important;
+        }
+
+        .row {
+            margin-right: -0.25rem;
+            margin-left: -0.25rem;
+        }
+
+        .row > * {
+            padding-right: 0.25rem;
+            padding-left: 0.25rem;
         }
     </style>
 </head>
 <body>
-    <nav class="navbar navbar-expand-lg navbar-dark mb-4">
+    <nav class="navbar navbar-expand-lg navbar-dark">
         <div class="container">
             <a class="navbar-brand" href="{{ url_for('index') }}">Indian Agricultural Schemes</a>
             <div class="d-flex">
@@ -91,7 +216,7 @@
         </div>
     </nav>
 
-    <div class="container py-4">
+    <div class="container py-0">
         {% block content %}{% endblock %}
     </div>
 
@@ -216,12 +341,5 @@
         });
     </script>
     {% block extra_scripts %}{% endblock %}
-
-    <!-- Add this before the closing </body> tag -->
-    <!-- Add this after your navbar -->
-    <!-- Remove these sections -->
-    <!-- Remove the language dropdown -->
-    <!-- Remove the loading overlay div -->
-    <!-- Remove the translation-related JavaScript -->
 </body>
 </html>

templates/index.html

@@ -10,7 +10,7 @@
         </a>
     </div>
     <div class="filters mb-4">
-        <div class="row g-3">
+        <div class="row g-4">
             <div class="col-md-4">
                 <select class="form-select" id="schemeTypeFilter">
                     <option value="">All Scheme Types</option>

templates/scheme_details.html

@@ -1,7 +1,7 @@
 {% extends "base.html" %}
 
 {% block content %}
-<div class="container">
+<div class="container scheme-detail-container">
     <nav aria-label="breadcrumb">
         <ol class="breadcrumb">
             <li class="breadcrumb-item"><a href="{{ url_for('index') }}">Home</a></li>
@@ -9,97 +9,109 @@
         </ol>
     </nav>
 
-    <h1 class="page-title mb-4">{{ scheme.name }}</h1>
+    <h1 class="page-title mb-2">{{ scheme.name }}</h1>
 
-    <div class="row g-4">
+    <div class="row g-2">
         <div class="col-lg-8">
-            <div class="card mb-4 shadow-sm">
-                <div class="card-body">
-                    <h2 class="section-title">Introduction</h2>
-                    <p class="lead text-muted">{{ scheme.introduction }}</p>
+            <div class="card mb-2 shadow-sm">
+                <div class="card-body p-3">
+                    <h2 class="section-title mb-2">Introduction</h2>
+                    <p class="scheme-text">{{ scheme.introduction }}</p>
                 </div>
             </div>
 
-            <div class="card mb-4 shadow-sm">
-                <div class="card-body">
-                    <h2 class="section-title">Objectives</h2>
-                    <div class="list-group list-group-flush">
+            {% if scheme.objective %}
+            <div class="card mb-2 shadow-sm">
+                <div class="card-body p-3">
+                    <h2 class="section-title mb-2">Objectives</h2>
+                    <ul class="list-group list-group-flush">
                         {% for obj in scheme.objective %}
-                        <div class="list-group-item bg-transparent">{{ obj }}</div>
+                        <li class="list-group-item bg-transparent py-1">{{ obj }}</li>
                         {% endfor %}
-                    </div>
+                    </ul>
                 </div>
             </div>
+            {% endif %}
 
-            <div class="card mb-4">
-                <div class="card-body">
-                    <h2 class="section-title">Benefits</h2>
-                    <div class="list-group list-group-flush">
+            {% if scheme.benefits %}
+            <div class="card mb-2 shadow-sm">
+                <div class="card-body p-3">
+                    <h2 class="section-title mb-2">Benefits</h2>
+                    <ul class="list-group list-group-flush">
                         {% for benefit in scheme.benefits %}
-                        <div class="list-group-item">{{ benefit }}</div>
+                        <li class="list-group-item bg-transparent py-1">{{ benefit }}</li>
                         {% endfor %}
-                    </div>
+                    </ul>
                 </div>
             </div>
+            {% endif %}
 
-            <div class="card mb-4">
-                <div class="card-body">
-                    <h2 class="section-title">Eligibility</h2>
-                    <h3 class="h5 mb-3">Eligible Beneficiaries:</h3>
-                    <div class="list-group list-group-flush mb-4">
+            {% if scheme.eligibility %}
+            <div class="card mb-2 shadow-sm">
+                <div class="card-body p-3">
+                    <h2 class="section-title mb-2">Eligibility</h2>
+                    {% if scheme.eligibility.eligible %}
+                    <h3 class="h5 mb-2">Eligible Beneficiaries:</h3>
+                    <ul class="list-group list-group-flush mb-2">
                         {% for eligible in scheme.eligibility.eligible %}
-                        <div class="list-group-item">{{ eligible }}</div>
+                        <li class="list-group-item bg-transparent py-1">{{ eligible }}</li>
                         {% endfor %}
-                    </div>
+                    </ul>
+                    {% endif %}
 
                     {% if scheme.eligibility.exclusions %}
-                    <h3 class="h5 mb-3">Exclusions:</h3>
-                    <div class="list-group list-group-flush">
+                    <h3 class="h5 mb-2">Exclusions:</h3>
+                    <ul class="list-group list-group-flush">
                         {% for exclusion in scheme.eligibility.exclusions %}
-                        <div class="list-group-item">{{ exclusion }}</div>
+                        <li class="list-group-item bg-transparent py-1">{{ exclusion }}</li>
                         {% endfor %}
-                    </div>
+                    </ul>
                     {% endif %}
                 </div>
             </div>
+            {% endif %}
 
-            <div class="card mb-4">
-                <div class="card-body">
-                    <h2 class="section-title">Application Process</h2>
-                    <div class="list-group list-group-flush">
+            {% if scheme.application_process %}
+            <div class="card mb-2 shadow-sm">
+                <div class="card-body p-3">
+                    <h2 class="section-title mb-2">Application Process</h2>
+                    <ol class="list-group list-group-flush">
                         {% for step in scheme.application_process %}
-                        <div class="list-group-item">{{ step }}</div>
+                        <li class="list-group-item bg-transparent py-1">{{ step }}</li>
                         {% endfor %}
-                    </div>
+                    </ol>
                 </div>
             </div>
+            {% endif %}
 
-            <div class="card mb-4">
-                <div class="card-body">
-                    <h2 class="section-title">Required Documents</h2>
-                    <div class="list-group list-group-flush">
+            {% if scheme.documents_required %}
+            <div class="card mb-2 shadow-sm">
+                <div class="card-body p-3">
+                    <h2 class="section-title mb-2">Required Documents</h2>
+                    <ul class="list-group list-group-flush">
                         {% for doc in scheme.documents_required %}
-                        <div class="list-group-item">{{ doc }}</div>
+                        <li class="list-group-item bg-transparent py-1">{{ doc }}</li>
                         {% endfor %}
-                    </div>
+                    </ul>
                 </div>
             </div>
+            {% endif %}
         </div>
 
         <div class="col-lg-4">
-            <div class="card shadow-sm sticky-top" style="top: 2rem;">
-                <div class="card-body">
-                    <h2 class="section-title">Contact Information</h2>
+            <div class="card shadow-sm sticky-lg-top" style="top: 0.5rem;">
+                <div class="card-body p-3">
+                    <h2 class="section-title mb-2">Contact Information</h2>
                     <ul class="list-unstyled mb-0">
                         {% if scheme.contact.helpline %}
-                        <li class="mb-3">
+                        <li class="mb-2">
                             <i class="fas fa-phone-alt text-primary me-2"></i>
                             <strong>Helpline:</strong><br>
                             {{ scheme.contact.helpline }}
                         </li>
                         {% endif %}
                         {% if scheme.contact.email %}
-                        <li class="mb-3">
+                        <li class="mb-2">
                             <i class="fas fa-envelope text-primary me-2"></i>
                             <strong>Email:</strong><br>
                             <a href="mailto:{{ scheme.contact.email }}">{{ scheme.contact.email }}</a>
@@ -118,4 +130,25 @@
         </div>
     </div>
 </div>
+
+<style>
+/* Additional scheme detail specific styles */
+.scheme-detail-container .card {
+    min-height: 0;
+    margin-bottom: 0.5rem;
+}
+.scheme-detail-container .list-group-item {
+    white-space: normal;
+    word-break: break-word;
+}
+.scheme-detail-container .row > div > .card:last-child {
+    margin-bottom: 0;
+}
+.scheme-detail-container h2.section-title {
+    font-size: 1.1rem;
+}
+.scheme-detail-container h3.h5 {
+    font-size: 0.95rem;
+}
+</style>
 {% endblock %}